Tap copy, paste into Claude chat (Opus 5.5 model) and replace what’s between < > or [ ]. The technical lines (render(t), sizes like 1920x1080, color codes) are instructions for the AI: copy them without changes.
Always write in this order: References, Idea, Style (style), Examine.
Tested with Claude Opus 5.5. Replace what’s between [colchetes].
Short version (copy and fill in)
R: Aqui está [meu arquivo, imagem ou URL]. O logotipo, as cores e as fontes da marca foram extraídos e estão anexados. Use exatamente esses.
I: Um loop de [10] segundos. Início: [o que aparece primeiro]. Meio: [a única mudança]. Fim: [como termina]. O último frame é igual ao primeiro.
S: Visual: [fundo], [cor da tinta], uma cor de destaque [cor], fonte [fonte], textura real. Movimento: [lento e suave, ou rápido e seco]; [o que se move primeiro]. [1920x1080].
E: Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
The line to include in EVERY prompt (the “E”)
Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
Full version (used in the styles)
R — REFERÊNCIAS
Use os arquivos, imagens, vídeos, sites e identidade visual fornecidos como fonte de verdade.
Não invente logotipos, cores ou tipografia quando existirem referências reais.
I — IDEIA
Uma imagem com início, meio e fim, [X] segundos, em loop sem costura:
• Início (0–[a] s): [estado inicial]
• Meio ([a]–[b] s): [o principal evento visual]
• Fim ([b]–[X] s): [como volta ao estado inicial]
S — ESTILO
Visual: [fundo em hex], [tinta em hex], [destaque em hex], [fonte e peso], [textura].
Movimento: [durações], [easing], [ordem], [o que se move primeiro].
Regras:
1. [regra]
2. [regra]
3. [regra]
4. [regra]
5. [regra]
E — EXAMINAR
Construa um único arquivo HTML: um <canvas> e uma função pura render(ctx, t, theme, w, h) que desenha o frame t (0–[X] s) a partir de theme {bg, ink, accent, accent2, font}. Mesmo t, mesmo frame, em qualquer ordem; hash com semente, sem Math.random. Precisa funcionar em 16:9, 9:16 e 1:1.
Renderize 5 frames (t = 0, [X/4], [X/2], [3X/4], [X]). Confira: o frame 0 é igual ao frame final; [checagens específicas da cena]. Corrija o que falhar e renderize de novo até todas as checagens passarem.
Checklist — the 10 flaws that make an animation look amateurish
Check every frame before publishing:
Cut-off letters. Line height 1.1 or more. Check every g, j, p, q, and y.
A word on its own line. Rewrite the line or link the last two words.
Empty stage. The visual fills 80% to 95% of the stage.
Flat color. Light falls across the frame. No single, flat fill.
Linear motion. Ease-in and ease-out. Nothing moves at a constant speed.
Seam at the loop. The last frame is identical to the first, pixel for pixel.
Text that disappears too quickly. Every word stays on screen for at least 1.2 s.
Invented logo. Use the actual file. Never draw a logo from memory.
Busy background. An idea on a calm background.
No texture. Real grain and subtle noise, to make it look handmade.
As a prompt (paste at the end of any request)
Antes de terminar, confira cada frame contra estas dez falhas e corrija qualquer uma que encontrar:
1. Letras cortadas: altura de linha 1,1 ou mais. Confira todo g, j, p, q e y.
2. Palavra sozinha numa linha: reescreva a linha ou amarre as duas últimas palavras.
3. Palco vazio: o visual ocupa de 80% a 95% do palco.
4. Cor chapada: a luz cai ao longo do quadro. Nada de preenchimento único e liso.
5. Movimento linear: ease-in e ease-out. Nada anda em velocidade constante.
6. Costura no loop: o último frame é igual ao primeiro, pixel por pixel.
7. Texto que some rápido: toda palavra fica na tela pelo menos 1,2 s.
8. Logo inventado: use o arquivo real. Nunca desenhe um logo de memória.
9. Fundo carregado: uma ideia sobre um fundo calmo.
10. Sem textura: grão real e ruído sutil, para parecer feito à mão.
The 7 levels
Level 1 — A slide that moves on its own
10 s loop: a beam of light travels along a timeline and lights up three milestones.
Where to use it: presentations, classes, reports, timelines, processes.
R: Aqui está o meu slide (screenshot anexado).
I: Um loop de 10 segundos que explica a ideia do slide: um feixe de luz percorre uma linha do tempo e acende três marcos.
S: Visual: papel marfim, linhas em tinta preta, um único destaque laranja-argila. Movimento lento e suave; o último frame é igual ao primeiro. 1920x1080.
E: Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
Why it works: the R anchors the composition to the actual slide; the I has a single transformation (the beam); the S deliberately limits the palette; the E forces the model to inspect its own result.
Level 2 — A website hero brought to life
A wave of sound turns into birds that type your title and form the brand name in the footer.
Where to use it: landing pages, portfolios, product pages, hero sections.
First: extract the site's visual identity
You need the website’s actual colors, fonts, logo, and text. Two ways:
With a paid visual identity extraction service, which reads the site and returns its logo, colors, and typefaces. Useful for many sites at once.
No external service — ask the AI itself:
Abra [seusite.com], leia o HTML e o CSS e me devolva em lista: nome da marca, URL do logotipo (SVG se houver), 2 a 4 cores principais em hex, fontes de título e de texto, título e subtítulo do hero. Não invente nada: só o que estiver no código do site.
The prompt
R: Aqui está [seusite.com]. As cores, fontes, logotipo e textos foram extraídos do site (anexados).
I: O hero: uma onda de voz vira pássaros da cor de destaque que voam até um campo de texto e viram palavras digitadas. Mantenha o título, o subtítulo e o botão como texto HTML real. Adicione um rodapé em que os pássaros formam o nome da marca atrás de links normais.
S: Visual: as cores, fontes e textura da própria marca. Movimento calmo; os pássaros seguem o cursor com suavidade e se espalham no clique.
E: Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
The key point: important text stays in HTML (accessible, crisp, indexable); only decorative elements go on the canvas.
Level 3 — Reel with animation + synced captions
Top half: an animated chart. Bottom half: your video, with word-by-word captions.
Where to use it: Reels, Shorts, vertical videos, podcast clips, educational content.
R: Frames de um dos meus reels, mais um clipe de 10 segundos meu falando, com o tempo de cada palavra (arquivo de legenda com timestamps por palavra).
I: Metade de cima: um gráfico animado para a frase "Pare de usar as duas IAs separadas. Use as duas juntas." Metade de baixo: o meu clipe.
S: Visual escuro, com os logotipos reais das duas ferramentas (arquivos anexados) e tipografia grande. Movimento: os dois logotipos se aproximam e se encaixam. Legendas: no máximo 3 palavras, sincronizadas por palavra, a palavra falada acende. Três visuais de legenda: serifa editorial, sans pesada em caixa, e um visual premium à sua escolha. 1080x1920.
E: Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
Tip: the timing for each word comes from any transcriber with word-level timestamps (e.g., Whisper). Without them, the caption won’t “light up” at the right time.
Level 4 — One scene in every format
A single scene with a dedicated layout for 16:9, 9:16, and 1:1 — the entire composition visible in each one.
Where to use it: the same asset for horizontal video, stories/vertical, square feed posts, and ads.
R: A minha narração termina com: "Com café suficiente, tudo é possível."
I: Uma xícara de café cujo vapor desenha uma tela de vídeo, uma tela de fotos e um post curto, cada uma com uma pequena cena viva, e depois volta a se enrolar para dentro da xícara.
S: Visual editorial escuro com luz quente de café. Movimento suave, 10 segundos, e o último frame é igual ao primeiro. UMA cena que se reorganiza para 16:9, 9:16 e 1:1 (nunca um recorte). Deixe a palavra BEBIDA = café numa linha separada, no topo da receita, para eu poder trocar.
E: Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
Crop × rearrange: cropping cuts the edges of the same scene; rearranging builds a new composition for each aspect ratio, with the same idea. The BEBIDA = coffee line shows another trick: leave the changing word at the top of the recipe so you can reuse the piece.
Level 5 — Any animated logo, with its own jingle
A 5-second reveal for each brand and a 3-second jingle written in code.
Where to use it: client presentation openers, bumpers, video intros.
R: Os logotipos oficiais (SVG) extraídos dos sites de [marca A], [marca B], [marca C] e [marca D].
I: Uma revelação de 5 segundos para cada uma, com uma ideia diferente por marca: na marca de blocos, os blocos se montam; na marca divertida, o mascote pula; na marca de música, os arcos pulsam na batida; na marca esportiva, o símbolo risca a tela.
S: Visual: formas e cores exatas dos logotipos. Movimento com a energia própria de cada marca. Escreva um jingle de 3 segundos para cada uma, em código (Web Audio), travado ao movimento. Começa sem som.
E: Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
The right question: not “which animation should I apply to everything?” but “what movement represents this brand?” Geometric → blocks assemble. Musical → pulses. Sports → fast motion.
Attention: always use the actual logo file. An AI logo drawn from memory comes out wrong. And if the brand isn’t yours, use it only in presentations for that brand itself or with permission.
Level 6 — Capture the style of a reference image
A 10-second explainer that gets all its visuals from a single reference image.
Where to use it: when you find a visual you love (on a design curation site, on an inspiration board) and want that visual language in something of your own.
R: Esta imagem de referência: [link ou arquivo].
I: Um explicativo de 10 segundos: "Como um extrator lê um site: entra a URL; saem logotipo, cores e fontes."
S: Pegue o estilo da referência (paleta, tipografia, textura, composição), não a imagem. Primeiro escreva como ela é e como ela se moveria; depois construa.
E: Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
Structure: reference → visual language extraction (written!) → new composition. “Write first, build later” is what makes the model keep the font and palette consistent.
If it’s “almost”: refine with a single sentence — e.g., “add an 80s film filter, with a slight film burn.”
Level 7 — One hundred websites go in, one hundred videos come out
Extracts each site's identity, applies a template, and renders 100 videos + a 10x10 wall.
Tool: a coding agent (e.g., Claude Code with Opus 5.5), headless Chrome, and ffmpeg.
R: sites.txt tem 100 sites. Extraia a marca de cada um: nome, logotipo, 2 a 3 cores, fonte.
I: Um template de 8 segundos, "{Nome}, em movimento", que fique bom para qualquer marca.
S: Visual premium, com contraste automático para logos claros e escuros. Movimento: o logotipo entra riscando, as cores varrem a tela, a frase assenta. Renderize os 100 como mp4 1080x1080 com Chrome headless e ffmpeg, depois um vídeo-mural 10x10. Teste em 5 primeiro.
E: Desenhe todos os frames em código a partir de uma única função render(t). Adicione textura real para parecer feito à mão. Antes de terminar, confira os frames em 0%, 25%, 50%, 75% e 100% e corrija o que estiver errado.
The golden rule: TEST (5) → VALIDATION → SCALE (100). Works for any agent workflow.
Why render(t) makes this possible: the template is a pure function that takes time + theme. Changing the brand means changing the theme; rendering each frame is deterministic, so headless Chrome captures frame by frame and ffmpeg assembles the mp4.
The 6 styles
Style 01 — Editorial graphic (ivory paper against the night)
Visual: an ivory slide floating in the night: serif title, ink bars, a clay-colored bar, torn ochre paper, and the edge of dawn at the bottom.
Motion: a clay-colored beam sweeps across the slide and each bar rises as it passes; a trend line draws across the tops; the bars return to their places.
Five rules: (1) the slide is real paper: ivory texture, soft shadow, falling light; (2) the bars only rise as the beam passes, with ease-out, never all at once; (3) one clay-colored bar, the last and tallest — the rest is ink; (4) the trend line draws itself after the bars settle, with round dots at each top; (5) title in Newsreader 500, opsz 36, with a short clay-colored line above.
R — REFERÊNCIAS
• Slides editoriais de gráfico: uma ideia, uma barra em destaque, margens generosas.
• O visual "horizonte ao amanhecer": fundo noturno, borda de planeta no amanhecer, papel marfim, colagem de papel ocre rasgado, um destaque argila.
I — IDEIA
Uma imagem com início, meio e fim, 5 segundos, em loop sem costura:
• Início (0–1,8 s): um slide marfim com o título "Números que se movem" flutua na noite; um feixe argila suave varre da esquerda para a direita e cada barra sobe quando o feixe passa.
• Meio (1,8–3,9 s): uma linha de tendência em tinta se desenha pelos topos das barras, com uma ponta argila pousada na última e mais alta.
• Fim (3,9–5 s): as barras voltam à linha de base em cascata e o slide espera a próxima varredura.
S — ESTILO
Visual: noite #07080c com a borda do amanhecer no pé; um slide de papel marfim com sombra suave; barras em tinta na cor do fundo; a barra mais alta em #d97757; um recorte rasgado #e3b23c com um esboço de compasso a tinta no canto; título Newsreader 500 em opsz 36.
Movimento: varredura do feixe 1,6 s com ease-in-out; barras com ease-out de 0,8 s depois que o feixe passa; a linha de tendência se desenha pelo comprimento; retorno escalonado de 60 ms por barra.
Regras:
1. Textura de papel, sombra e queda de luz no slide.
2. As barras só sobem quando o feixe as alcança.
3. Uma barra argila; todo o resto é tinta.
4. Pontos na linha de tendência, desenhados depois que as barras assentam.
5. Grão e vinheta sobre tudo.
E — EXAMINAR
Construa um único arquivo HTML: um <canvas> e uma função pura render(ctx, t, theme, w, h) que desenha o frame t (0–5 s) a partir de theme {bg, ink, accent, accent2, font}. Mesmo t, mesmo frame, em qualquer ordem; hash com semente, sem Math.random. Precisa funcionar em 16:9, 9:16 e 1:1.
Renderize 5 frames (t = 0; 1,25; 2,5; 3,75; 5). Confira: o frame 0 é igual ao frame 5; nenhuma barra sobe antes de o feixe chegar; a linha de tendência toca o topo de todas as barras; o título nunca é cortado; o slide nunca encosta na borda do quadro. Corrija o que falhar e renderize de novo até todas as checagens passarem.
Style 02 — Documentary chalkboard with caliper
Visual: documentary explainer: a smudged charcoal board, heavy white grotesque type, a yellow caliper for measuring, an orange cursive stroke.
Motion: the bars rise one per beat, a yellow caliper measures the tallest one, the number jumps, a line underlines a word, hard cut.
Five rules: (1) only two type sizes: label and number 2.6× larger; (2) Title Case, heavy grotesque, white — never all caps, never colored text; (3) the caliper covers exactly the height it measures and appears before the number; (4) the number pops 80 ms after the bracket: 0.85 → 1, no fade; (5) orange only as a stroke: a cursive underline beneath one word in the title, once.
R — REFERÊNCIAS
• Explicativos de documentário em estilo "lousa": campo de lousa de carvão, tipografia grotesca pesada branca, colchetes de medida amarelos.
• Pranchas de guia de campo: um assunto, um fato medido.
• Pegue a gramática visual, nunca a marca de nenhum canal.
I — IDEIA
Uma imagem com início, meio e fim, 5 segundos, em loop com corte seco:
• Início (0–1,4 s): o título "Design Em Movimento" está numa lousa de carvão borrada; uma linha de base se desenha e três barras sobem, uma por batida.
• Meio (1,4–3,1 s): um paquímetro amarelo mede a barra mais alta, depois o número "3×" salta ao lado; um traço cursivo laranja sublinha uma palavra do título.
• Fim (3,1–5 s): uma pausa parada de pelo menos 1,5 s, depois um corte seco de um frame de volta ao título sozinho.
S — ESTILO
Visual: lousa de carvão #0d0d0d com manchas de giz e poeira, texto #f4f1ea em Plus Jakarta Sans ExtraBold em Title Case, barras com preenchimento translúcido #f4f1ea e contorno de 2 px #f4f1ea, um paquímetro #f5e918, um traço #f0862b.
Movimento: cada construção dura 300–450 ms em quint-out, uma por batida, depois congela. O paquímetro se desenha em 400 ms, o número salta 80 ms depois (0,85 → 1, outBack, sem fade). O traço se desenha em 450 ms. A prancha avança até 1,05 de zoom ao longo da cena.
Regras:
1. Só dois tamanhos de tipo; o número é 2,6× o rótulo.
2. O paquímetro cobre exatamente a altura total da barra, com os ticks voltados para a barra e a aba voltada para o número.
3. Destaques são só traços, abaixo de 0,5% do quadro cada, nunca mais de dois.
4. Nenhum anel, círculo ou elipse em lugar nenhum.
5. A lousa nunca é chapada: a luminância varia um pouco em todo lugar.
6. Pausa parada no fim, depois corte seco (sem crossfade).
E — EXAMINAR
Construa um único arquivo HTML: um <canvas> e uma função pura render(ctx, t, theme, w, h) que desenha o frame t (0–5 s) a partir de theme {bg, ink, accent, accent2, font}. Mesmo t, mesmo frame, em qualquer ordem; hash com semente, sem Math.random. Precisa funcionar em 16:9, 9:16 e 1:1.
Renderize 5 frames (t = 0; 1,25; 2,5; 3,75; 5). Confira: o frame 0 é igual ao frame 5; só dois tamanhos de tipo; o colchete termina exatamente no topo e na base da barra; o número fica no meio da altura da aba; o traço está sob uma palavra só; a lousa não é chapada. Corrija o que falhar e renderize de novo até todas as checagens passarem.
Style 03 — Swiss poster with kinetic typography
Visual: International Typographic Style: one huge grotesque word in a rigid grid, one red disc, thin lines.
Motion: the letters rise from a mask at the baseline, their weight ripples in a traveling wave, the disc bounces across the grid to the beat.
Five rules: (1) everything fits into a 12-column grid, nothing floats; (2) one huge, tight word (tracking −2%), left-aligned on the baseline; (3) the red disc is the only color, the rest is ink; (4) the letters enter through a mask at the bottom, staggered by 60 ms, quint-out; (5) weight IS the motion: a wave from 260 to 860 travels across the word.
R — REFERÊNCIAS
• O Estilo Tipográfico Internacional (design suíço): grades rígidas, equilíbrio assimétrico, uma cor forte.
• Animações de "onda de peso" com fonte variável (busque: variable font kinetic typography).
• Copie a disciplina, não os layouts.
I — IDEIA
Uma imagem, contada em 5 segundos, em loop sem costura:
• Início (0–1,3 s): uma grade vazia com um disco vermelho; a palavra "Motion" sobe letra por letra de uma máscara na linha de base.
• Meio (1,3–3,9 s): a palavra se mantém enquanto uma onda de peso percorre as letras; o disco pula para uma nova posição da grade a cada batida.
• Fim (3,9–5 s): as letras saem pelo topo da máscara, o fio se recolhe e o quadro volta a como começou.
S — ESTILO
Visual: fundo #0f0f0e, texto e fios #f1eee7, um disco #ff3b1f. Inter, pesada, tracking −2%, alinhada à esquerda numa grade de 12 colunas com margens generosas. Legendas minúsculas na mesma família.
Movimento: entradas quint-out escalonadas em 60 ms, uma onda de peso senoidal (260 a 860, duas ondas por loop), movimentos do disco de 0,7 s travados na batida. Ease-in e ease-out, nunca linear.
Regras:
1. Todo elemento está na grade: colunas, linha de base, margens.
2. Uma palavra enorme; ocupa cerca de 85% da largura da grade.
3. O disco é a única cor.
4. As letras entram de uma máscara na linha de base, escalonadas; saem do mesmo jeito, para cima.
5. A onda de peso é o movimento; posições só mudam nas entradas e saídas.
6. Grão e uma queda de luz suave para o fundo nunca ficar chapado.
7. Mantenha a palavra inteira na tela por pelo menos 1,2 s.
E — EXAMINAR
Construa um único arquivo HTML: um <canvas> e uma função pura render(ctx, t, theme, w, h) que desenha o frame t (0–5 s) a partir de theme {bg, ink, accent, accent2, font}. Mesmo t, mesmo frame, em qualquer ordem; hash com semente, sem Math.random. Precisa funcionar em 16:9, 9:16 e 1:1.
Renderize 5 frames (t = 0; 1,25; 2,5; 3,75; 5). Confira: o frame 0 é igual ao frame 5; a palavra cabe sem letras cortadas; o disco pousa exatamente nos pontos da grade; as legendas nunca colidem com a palavra; a onda de peso se lê como uma onda suave única. Corrija o que falhar e renderize de novo até todas as checagens passarem.
Style 04 — Blooming sumi ink
Visual: a single ensō brushed in luminous ink on dark, wet paper, bleeding into a soft halo with a tide-like edge, sealed in vermilion.
Motion: the brush lands, sweeps the circle in one breath, the ink blooms outward, the seal stamps, and everything dries into a ghost.
Five rules: (1) one brushstroke, one breath: slow landing, fast middle, slow exit; (2) the width follows the pressure: a blot at the beginning, a dry, broken tail; (3) dry-brush imperfections only in the final third; (4) the bloom spreads after the stroke, more where the brush was wetter; (5) every bloom edge has a tide line, never a clean blur.
R — REFERÊNCIAS
• Caligrafia zen ensō (busque: ensō brush painting, kasure dry brush).
• Tinta pingada em papel de arroz úmido (nijimi, sangrando com borda de maré).
• Um selo hanko vermelho entalhado, carimbado uma vez no canto.
I — IDEIA
Uma imagem, um fôlego, 5 segundos, em loop sem costura:
• Início (0–1,9 s): um pincel carregado pousa no papel escuro e úmido e varre um círculo, rápido no meio, lento nas pontas, abrindo em cerdas secas na cauda.
• Meio (1,9–3,9 s): a tinta sangra para fora no papel e um selo vermelhão com a inicial de "Motion" carimba uma vez, com força.
• Fim (3,9–5 s): a tinta seca até um fantasma leve do círculo, que é onde a próxima pincelada começa.
S — ESTILO
Visual: papel #0d0c0b com fibras visíveis e manchas, tinta luminosa #ede6d8, uma floração fria #7f93a8, um pequeno selo #d8432f com a letra entalhada em Newsreader. Espaço vazio generoso em volta de um círculo.
Movimento: velocidade do pincel em ease-in-out ao longo de 1,6 s; a floração cresce depois do traço com borda de ruído esfumada; o selo escala de 1,2 para 1 em 0,25 s; o fade até o fantasma em ease-out.
Regras:
1. Uma pincelada, desenhada como uma forma preenchida cuja largura segue a pressão do pincel.
2. Falhas de pincel seco (riscos finos de papel) só no último terço.
3. Floração = lavado suave + uma borda de maré mais clara na beira, guiada por ruído.
4. Mais sangria onde o pincel estava molhado (o começo), menos na cauda seca.
5. Respingos: alguns pontos lançados para fora onde o pincel pousa.
6. O selo é a única cor e carimba uma vez.
7. Textura de papel, queda de luz e grão em todos os frames.
E — EXAMINAR
Construa um único arquivo HTML: um <canvas> e uma função pura render(ctx, t, theme, w, h) que desenha o frame t (0–5 s) a partir de theme {bg, ink, accent, accent2, font}. Mesmo t, mesmo frame, em qualquer ordem; hash com semente, sem Math.random. Precisa funcionar em 16:9, 9:16 e 1:1.
Renderize 5 frames (t = 0; 1,25; 2,5; 3,75; 5). Confira: o frame 0 é igual ao frame 5; a largura do traço afina de verdade; a floração tem borda, não é só desfoque; a letra do selo é nítida e não está cortada; o papel nunca é uma cor chapada. Corrija o que falhar e renderize de novo até todas as checagens passarem.
Style 05 — Cut-paper layers
Visual: a night sea made of layered paper: six wave layers with real shadows, a layered paper moon, and a folded little boat.
Motion: each layer scrolls at its own pace and direction, the boat follows the wave, birds glide, stars twinkle.
Five rules: (1) every shape is a cutout layer that casts a soft shadow on the one behind it; (2) more distant layers are lighter — atmospheric perspective on paper; (3) scissor-cut edges: slightly irregular, never perfectly curved; (4) a thin light catches the top edge of each layer; (5) the layers move at different speeds and in alternating directions (parallax).
R — REFERÊNCIAS
• Dioramas de papel recortado em camadas e shadow boxes (busque: layered paper art ocean, paper cut shadow box).
• Cenários de teatro de papel; stop-motion de papel iluminado de cima.
I — IDEIA
Uma imagem, uma noite calma no mar, 5 segundos, em loop sem costura:
• Início (0–1,5 s): seis camadas de onda em papel recortado rolam sob uma lua de papel em camadas; um barquinho de papel dobrado navega na segunda onda.
• Meio (1,5–3,5 s): o barco sobe e inclina numa onda maior, dois pássaros de papel planam pela cena, estrelas piscam.
• Fim (3,5–5 s): a onda assenta e cada camada pousa exatamente onde começou.
S — ESTILO
Visual: noite #0e1016, camadas graduadas de #4f7396 (longe) a quase preto (perto), cada uma com sombra suave e borda de cima iluminada; a lua em #f2a541 com dois anéis de papel; o barco e os pássaros em #f2e8d8. Textura de fibra de papel em tudo.
Movimento: cada camada rola um número inteiro de comprimentos de onda por loop, alternando a direção; balanço senoidal suave; o barco segue a altura e a inclinação da sua onda.
Regras:
1. Toda camada projeta sombra na camada de trás.
2. Camadas mais distantes são mais claras e mais azuis.
3. Bordas irregulares de tesoura.
4. Uma borda fina iluminada no topo de cada camada.
5. Paralaxe: velocidades diferentes, direções alternadas.
6. Um destaque só, na lua.
E — EXAMINAR
Construa um único arquivo HTML: um <canvas> e uma função pura render(ctx, t, theme, w, h) que desenha o frame t (0–5 s) a partir de theme {bg, ink, accent, accent2, font}. Mesmo t, mesmo frame, em qualquer ordem; hash com semente, sem Math.random. Precisa funcionar em 16:9, 9:16 e 1:1.
Renderize 5 frames (t = 0; 1,25; 2,5; 3,75; 5). Confira: o frame 0 é igual ao frame 5; toda camada tem sombra visível; o barco está sobre a onda (nunca flutuando nem afundado); nenhuma borda parece perfeita de máquina; a textura de papel está visível. Corrija o que falhar e renderize de novo até todas as checagens passarem.
Style 06 — Two-color risograph
Visual: two fluorescent inks on black paper: a striped sun, a giant condensed sign, grain, glitches, and misregistration.
Motion: printed at 12 frames per second: the sun rises and sets, the signs slide in opposite directions, the plates shake out of register.
Five rules: (1) exactly two inks; where they overlap, they become a third color; (2) every ink layer “prints”: tiny imperfections and uneven density; (3) the two plates are slightly out of register and jitter on every frame; (4) “on twos” animation: 12 printed frames per second, new grain on every frame; (5) one huge condensed word, repeated like a scrolling marquee.
R — REFERÊNCIAS
• Impressões e zines em risografia (busque: risograph two colour print, fluorescent pink riso).
• Animações stop-motion em riso: cada quadro impresso, o grão mudando de quadro a quadro.
I — IDEIA
Uma imagem com início, meio e fim, 5 segundos, em loop sem costura:
• Início (0–1,5 s): um sol listrado baixo no quadro; um letreiro condensado gigante com a palavra "Print" começa a deslizar sobre ele.
• Meio (1,5–3,5 s): o sol sobe através do letreiro; onde as tintas se sobrepõem, viram uma terceira cor; um segundo letreiro menor corre no sentido oposto.
• Fim (3,5–5 s): o sol se põe de volta onde começou e os dois letreiros pousam exatamente uma repetição adiante.
S — ESTILO
Visual: papel preto #111111 com fibras; tinta um #ff48b0, tinta dois #1f9bd1; Anton enorme e condensada; marcas de registro nos cantos.
Movimento: tudo anda em passos de 12 fps; os letreiros andam exatamente uma repetição por loop; as chapas tremem fora de registro uma fração de porcento a cada quadro impresso.
Regras:
1. Só duas tintas, misturadas em modo screen sobre o papel escuro.
2. Pontinhos de falha e densidade irregular em cada camada de tinta.
3. Desregistro: uma chapa deslocada e tremendo.
4. Movimento em passos de 12 fps; grão novo a cada quadro.
5. Listras ou grão no lugar de degradês.
E — EXAMINAR
Construa um único arquivo HTML: um <canvas> e uma função pura render(ctx, t, theme, w, h) que desenha o frame t (0–5 s) a partir de theme {bg, ink, accent, accent2, font}. Mesmo t, mesmo frame, em qualquer ordem; hash com semente, sem Math.random. Precisa funcionar em 16:9, 9:16 e 1:1.
Renderize 5 frames (t = 0; 1,25; 2,5; 3,75; 5). Confira: o frame 0 é igual ao frame 5; exatamente duas tintas mais a sobreposição; o grão é visível em tamanho real; o letreiro dá a volta sem pulo; o desregistro é sutil, não parece quebrado. Corrija o que falhar e renderize de novo até todas as checagens passarem.