🧩 Biblioteca de Recursos

Divide a string em array de chars; cada caractere tem um from escalado por índice. O resultado é um reveal da esquerda para a direita letra a letra.

Padrão fundamental de stagger — a mesma lógica se aplica a palavras, linhas e qualquer lista de elementos.

interpolate com clamp · stagger por índice · Sequence por elemento.

Usa spring() com stiffness alta para dar aquele "quique" orgânico na entrada do texto.

Demonstra como spring substitui easing manual para entradas físicas convincentes.

spring({ fps, frame }) · stiffness / damping · multiplicar por scale ou translateY.

Três cópias do texto com translateX aleatório e canais de cor red/green/blue separados, interpolados com pulsos irregulares.

Mostra como sobrepor elementos com position absolute e mix-blend-mode para efeitos visuais sem biblioteca externa.

random("seed") para posição · mix-blend-mode · pulso com interpolate multi-keyframe.

Cada caractere oscila com Math.sin(frame / 10 + i * 0.5), criando uma onda orgânica que percorre o texto.

Ensina como usar trigonometria diretamente no frame para movimentos periódicos sem keyframes.

Math.sin(frame) · phase offset por índice · amplitude × seno.

Revela um caractere por vez derivando o número de chars visíveis de Math.floor(frame / charsPerFrame). Cursor pisca com interpolate.

Padrão clássico de legendas e subtítulos animados, ideal para tutoriais e apresentações de código.

slice dinâmico · Math.floor · cursor com opacidade pulsante.

Quatro variações: bubble-pop (scale 0→1.2→1 com spring), pulsing-text (respiração contínua com seno), popping-text (cada palavra com scale-pop independente), slide-text (translateX/Y com easing out).

Compara como a mesma intenção ("texto que chama atenção") resulta em código completamente diferente dependendo do estilo desejado.

spring para pop orgânico · seno para loop contínuo · interpolate+easing para slide direcional.

Cada barra tem altura calculada com interpolate(frame, [i*3, 15+i*3], [0,1], {extrapolateRight:"clamp"}) — crescem em stagger e param no valor final.

Modelo canônico de stagger com SVG — padrão que se repete em line, area e donut chart.

stagger por índice · SVG rect height · extrapolateRight clamp.

Usa stroke-dashoffset animado para dar a ilusão de uma linha sendo desenhada da esquerda para a direita.

A técnica de dashoffset funciona em qualquer path SVG — curvas, setas, formas complexas.

stroke-dasharray = comprimento total · dashoffset de comprimento a 0 · getTotalLength().

Fatias calculadas via path d="M cx cy L x1 y1 A r r 0 flag 1 x2 y2 Z". O donut adiciona um círculo branco central com métrica animada no centro.

Ensina geometria SVG de arcos — o tipo de path mais usado em charts complexos.

ângulo por porcentagem · arc flag · donut hole com circle + metric text.

Interpola de 0 ao valor alvo e formata com toLocaleString() — exibe "1.234.567" contando frame a frame.

Contador numérico é um dos componentes mais pedidos em vídeos de marketing e resultados.

interpolate → Math.floor → toLocaleString · easing ease-out · sufixo (K, M).

circular-progress usa dashoffset em círculo SVG; progress-bars usa width% com interpolate — ambos mostram porcentagem de progresso.

Dois paradigmas de progresso: SVG circular vs HTML linear — cobre 99% dos casos de uso.

circumference = 2πr · dashoffset proporcional · width% com transition clamp.

comparison-chart anima dois grupos lado a lado com delay entre eles; area-chart preenche sob a linha com path fechado e gradiente SVG.

Demonstra composição de múltiplos elementos SVG com timing independente no mesmo vídeo.

delay entre grupos · linearGradient SVG · path fechado (Z) para área.

Cada item de lista entra com from={i * delay} — fade+slide em sequência escalonada que dá ritmo visual a enumerações.

Stagger é o padrão de animação de lista mais usado em qualquer vídeo explicativo ou de marketing.

Sequence from escalado · delay = índice × constante · fade+translateY combinados.

Interpolação de rotateY de 0° a 180° com perspective no pai. As duas faces do card são posicionadas com backfaceVisibility: "hidden".

Ensina o modelo de 3D CSS no Remotion — perspectiva, backface e flip — reutilizável em flip-cards de produtos e flashcards.

perspective: 800px · rotateY · backfaceVisibility: hidden · dois filhos posicionados.

Deriva o número atual com Math.ceil(durationInFrames / fps - frame / fps). Cada número entra com scale-pop e sai com fade-out para o próximo.

Padrão de "estado derivado do frame" — o valor exibido é sempre uma função direta do tempo, sem useState.

Math.ceil(remaining) · frame local por Sequence · spring na entrada de cada dígito.

Notificações aparecem com spring (translateY + opacity) em horários escalonados, empilhando-se verticalmente como toasts do sistema.

Mostra como simular UIs de sistemas operacionais e apps reais em vídeo — ótimo para demos de produto.

Sequence aninhada · spring com delay · stack visual com translateY acumulado.

Cada partícula tem velocidade e ângulo seedados com random() do Remotion — posição calculada frame a frame com queda gravitacional simples.

Demonstra simulação física determinística: gravidade, arrasto e rotação apenas com aritmética de frames.

random(seed) para reprodutibilidade · vx/vy por frame · opacidade fade-out ao final.

sound-wave: barras com altura = amplitude × Math.sin(frame × freq + i × phase). rotating-carousel: cards posicionados com rotateY(i * 360/n) e carrossel girando continuamente.

Dois casos de loops perpétuos — onda contínua e rotação infinita — que não têm começo/fim definido na timeline.

seno com freq variável · 3D carousel com rotateY por slot · frame % período para loop.

Grid de imagens onde cada célula entra com scale + fade em stagger por índice, criando uma galeria que se monta progressivamente na tela.

Padrão de stagger aplicado a layout de grade — direto transferível para qualquer coleção de cards ou thumbnails.

interpolate com from escalado por índice · CSS grid · spring na entrada de cada célula.

Slides trocam automaticamente com translateX derivado do índice atual calculado via Math.floor(frame / slideDuration). Transição suave com interpolate entre slides.

Demonstra como derivar estado de seleção diretamente do frame sem useState — padrão puro e determinístico.

Math.floor(frame/dur) para slide ativo · translateX por índice · overflow hidden no container.

Duas imagens sobrepostas; a segunda tem clipPath: rect(0 X 100% 0) onde X é animado com interpolate — cria o efeito de "puxar a cortina" entre antes e depois.

Ensina clip-path retangular animado — técnica usada em dezenas de efeitos de reveal e wipe.

clipPath CSS · interpolate 0→100% · divider line com absolutePosition.

Imagem começa com scale 1.4 e zoom out suave para scale 1.0 enquanto o opacity vai de 0 a 1 — cria entrada cinématica com profundidade.

Combina dois interpolates independentes (scale e opacity) na mesma propriedade de estilo — padrão de reveal de impacto.

spring para scale · interpolate para opacity · overflow hidden + objectFit cover.

Grade masonry com colunas de altura variável; cada imagem entra com translateY + fade em delay proporcional à sua coluna, criando um mosaico que se preenche organicamente.

Mostra como lidar com layouts de altura variável e stagger por coluna vs. por índice linear.

column-count CSS · delay por coluna · absolutePosition para posicionamento dinâmico.

Foto em moldura de polaroid cai na tela com spring (translateY + leve rotate aleatório) e pousa com overshoot realista. Várias polaroids se acumulam em stagger.

Demonstra spring com rotation para simular objetos físicos caindo — padrão aplicável a cartas, post-its, stickers.

spring com damping baixo · random(seed) para rotate inicial · box-shadow para profundidade.

Gradiente linear cujo ângulo e as stops de cor são derivados de Math.sin(frame/30) — cria um fundo que respira e muda de tonalidade continuamente.

Ensina como interpolar valores dentro de strings CSS (como angle e hsl) usando seno para loops suaves.

Math.sin para looping · hsl() com hue variável · backgroundImage interpolado.

Array de estrelas com posição e velocidade seedadas com random(); cada frame as estrelas avançam criando efeito de warp speed. Estrelas que saem da tela reaparecem no início.

Demonstra sistema de partículas com reaproveitamento (pooling) e movimento contínuo sem useState.

random(seed+i) · posição = (basePos + frame×vel) % 1 · escala por profundidade.

Colunas de texto com caracteres aleatórios caindo; a posição vertical de cada coluna é derivada do frame com offset seedado. Caracteres em verde com head mais brilhante.

Caso clássico de geração procedural de texto — reúso de random seedado para resultados determinísticos mas visualmente aleatórios.

random(col+row) para char · posY = (frame×speed + offset) % height · opacity por distância do head.

Grade de células onde cada célula pulsa com opacidade baseada em Math.sin com fase derivada da distância ao centro — cria uma onda radial de luz.

Mostra como criar animações espaciais derivando fase de posição — padrão de "onda que viaja pela grade".

distância ao centro como phase offset · Math.sin(frame/20 + dist) · opacidade 0.1–1.

Path SVG cujos pontos de controle são calculados com Math.sin em frequências diferentes — gera uma forma de onda orgânica e fluida que evolui frame a frame.

SVG path dinâmico é a base de visualizadores de áudio, ondas e formas orgânicas. Ensina construção de strings "d" em tempo real.

construção de path "M ... C ..." dinâmico · múltiplas frequências somadas · fill com gradiente.

Array de formas SVG (triângulos, hexágonos, losangos) com posição, tamanho e rotação seedadas. Cada forma gira lentamente com velocidade angular individual derivada de random(i).

Combina random seedado com rotação contínua — padrão de fundo decorativo reutilizável em qualquer estilo visual.

rotate = frame × random(i) × speed · SVG polygon dinâmico · opacity baixa para fundo sutil.

O container da cena recebe translateX/Y e rotate com valores de random(frame+"x") e random(frame+"y") multiplicados por intensidade — cria trepidação orgânica e não repetitiva.

Técnica de noise por frame usando random como substituto de Perlin noise — reutilizável em qualquer efeito de câmera handheld.

random(frame+seed) · multiplicador de intensidade · wrapper div para isolar o shake.

Overlay laranja/amarelo com radialGradient pulsante e grão noise simulam queima de película analógica. O centro "queima" com escala crescente até cobrir tudo.

Demonstra como compor múltiplas camadas (noise, gradiente, color overlay) via position absolute para efeitos de textura.

radialGradient animado · grão com random seedado · mix-blend-mode screen/multiply.

Imagem estática animada com zoom lento (scale 1→1.1) e pan diagonal (translateX/Y) usando interpolate com easing ease-in-out — efeito Ken Burns clássico de documentários.

Mostra como dar vida a fotos estáticas apenas com transforms CSS — técnica padrão em edição de vídeo profissional.

scale 1→1.1 com easing suave · translateX/Y simultâneo · objectFit cover para evitar bordas.

Duas barras pretas (topo e base) que entram de fora e param no formato 2.35:1 de cinemascope — transforma qualquer cena em formato de cinema com interpolate.

Técnica de mascaramento dinâmico com duas divs absolutas — base para qualquer efeito de letterbox, widescreen ou aspect ratio animado.

translateY de ±100% a 0 · dois elementos absolute topo/base · spring para entrada suave.

Múltiplas camadas (fundo, meio, frente) se movem em velocidades diferentes derivadas de frame × layer.speed — cria ilusão de profundidade 3D com elementos 2D.

Parallax é a técnica de profundidade mais usada em motion design — aprenda a replicar com simples multiplicadores de velocidade.

translateX = frame × speed · camadas com z-index · overflow hidden no stage.

Overlay preto com radialGradient circular transparente no centro que se expande com spring — revela o conteúdo por baixo como se um holofote fosse aceso.

Técnica de reveal com gradiente radial animado — combina CSS gradient com variável derivada de spring para transições dramáticas.

radialGradient com raio animado · spring para expansão · pointer-events none no overlay.

Cena A vai de opacity 1→0 enquanto cena B vai de 0→1 com interpolate sincronizado — o crossfade mais simples e versátil de todos.

Dissolve é a transição base do vocabulário cinematográfico — entender seus parâmetros (duração, curva) é fundamental para qualquer edição.

duas AbsoluteFill · opacidade complementar · easing ease-in-out para suavidade.

Cena B dividida em N faixas horizontais, cada faixa revelada com scaleY de 0→1 em stagger — cria o efeito de persiana veneziana abrindo.

Ensina como dividir uma cena em faixas e animar cada uma independentemente — padrão aplicável a revelar grades, tabelas e painéis.

N divs com height=100%/N · scaleY com stagger · overflow hidden por faixa.

Clip-path circular (circle()) cresce de 0% a 150% do centro revelando a cena seguinte — transição de iris usada em filmes mudos e animações clássicas.

Introduz clip-path circle() animado — a forma mais simples de mask animado, diretamente transferível para reveais de logo e botões.

clipPath: circle(R at 50% 50%) · R interpolado 0→150% · spring para expansão orgânica.

Cena A sai para a esquerda enquanto cena B entra pela direita com o mesmo translateX animado — como trocar de slide num deck físico.

Transição direcional é o padrão de navegação de apps e apresentações — entender como sincronizar entrada e saída é essencial.

translateX: 100%→0 (B) e 0→-100% (A) · overflow hidden no stage · spring com damping alto.

Cena A fade para preto na primeira metade e cena B emerge do preto na segunda — cria pausa dramática entre cenas, padrão de cortes em filmes de ação.

Demonstra como decompor uma transição em duas fases com interpolate multi-keyframe — aplica em qualquer passagem por cor intermediária.

interpolate com 3 keyframes · AbsoluteFill preta no meio · duração ajustável por fase.

Cena A sofre zoom extremo (scale 1→5) enquanto cena B emerge do centro com scale 0.2→1 — cria transição de "mergulhar dentro de" com perspectiva dramática.

Zoom-through combina dois scales sincronizados — padrão muito pedido em vídeos de YouTube e marketing que exigem energia visual.

scale A 1→5 · scale B 0.2→1 · timing exato para parecerem conectados · overflow hidden.

Título aparece com letterbox, fade in lento e texto com tracking crescente (letterSpacing animado) sobre fundo escuro — intro estilo blockbuster com múltiplos elementos sincronizados.

Composição de 4+ elementos temporais (barras, fundo, texto, subtítulo) com Sequence aninhadas — modelo de intro profissional.

letterSpacing interpolado · Sequence aninhada · múltiplos elementos com timing independente.

Contagem regressiva 5→1 com cada número em Sequence própria, spring de entrada e saída rápida. Linha de progresso circular completa ao chegar em "GO!"

Combina Sequence com circular-progress SVG — mostra como sincronizar elemento visual de progresso com conteúdo textual em paralelo.

Sequence por dígito · dashoffset proporcional ao frame · spring na entrada de cada número.

Lista de créditos com translateY calculado linearmente por frame — sobe da parte de baixo até o topo a velocidade constante como créditos de cinema.

Demonstra scrolling determinístico sem useState — a posição é sempre -frame × pixelsPerFrame, tornando o resultado 100% reprodutível.

translateY = -frame × speed · overflow hidden · fade in/out nas bordas com gradiente.

Barra de identificação no terço inferior da tela — nome e cargo revelados com translateX e barra colorida que cresce da esquerda. Entra com spring e sai com fade.

Lower third é o componente mais usado em qualquer vídeo de entrevista, noticiário ou apresentação — aprender a construí-lo do zero é essencial.

scaleX 0→1 na barra · translateX no texto · Sequence para entrada e saída automáticas.

End screen com CTA, links de redes sociais e thumbnail de próximo vídeo — todos os elementos aparecem em stagger com spring, montando o encerramento interativo.

Composição de múltiplos CTAs com timing visual cuidadoso — modelo de end card profissional para YouTube e vídeos de produto.

Sequence por elemento CTA · spring com stagger · useCurrentFrame para loop de pulsação no botão.

Card com aspas grandes, texto de citação revelado palavra a palavra em stagger, e autor aparecem depois com fade — cria um momento de pausa reflexiva no vídeo.

Stagger por palavra (split por " ") é diferente de stagger por caractere — mostra como adaptar o padrão para granularidade diferente.

split(" ") · Sequence por palavra com from escalado · aspas decorativas com CSS pseudo-elemento.

SVG do logo com stroke-dashoffset animado de comprimento total até 0 — cria a ilusão do traço sendo desenhado progressivamente. Fill aparece após o stroke completar.

A técnica de dashoffset em logos SVG é uma das mais pedidas por clientes — funciona em qualquer path vetorial exportado do Illustrator ou Figma.

getTotalLength() · dashoffset interpolado · fill com delay via Sequence.

Logo aparece através de um glitch progressivo: cópias coloridas (cyan, magenta) deslocadas com translateX random decaem até convergirem no logo estável — reveal de identidade tecnológica.

Aplica glitch RGB split especificamente a logos — combina random por frame com interpolate de intensidade para controlar o decaimento.

intensidade = interpolate(frame, [0, dur], [1, 0]) · random(frame) × intensidade · position absolute para camadas.

Logo cai de cima com spring de alta stiffness e baixo damping — quica várias vezes antes de assentar, com sombra que se expande ao pousar.

Spring com overshoot pronunciado para simular física de queda — padrão de logo reveal enérgico para marcas jovens e tech.

spring({ stiffness: 200, damping: 10 }) · sombra inversamente proporcional ao translateY · Sequence para entrada.

Logo entra girando 360° com spring — escala começa em 0 e chega a 1 enquanto a rotação completa o ciclo, criando entrada rotacional energética.

Combina dois springs independentes (scale e rotate) com stiffness diferentes para timing assimétrico orgânico.

rotate spring com overshoot · scale spring simultâneo · transform-origin center para girar no lugar.

Logo cortado em duas metades (topo/base ou esquerda/direita) com clip-path; as metades chegam de direções opostas e se encaixam com spring — efeito de "montar" o logo.

Demonstra clip-path rect para mascarar metades de imagem — técnica reutilizável em splits de tela, reveals de foto e transições split.

clipPath inset(0 0 50% 0) e inset(50% 0 0 0) · translateY com direções opostas · spring para encaixe preciso.

Nome da marca digitado caractere a caractere com Math.floor(frame / charsPerFrame); ícone/símbolo aparece antes com spring e o cursor pisca durante a digitação.

Versão branding do typewriter — adiciona símbolo visual antes do texto e cria uma narrativa de "construção da marca" frame a frame.

slice(0, charsVisible) · cursor piscante com Math.floor(frame/10) % 2 · Sequence para símbolo antes do texto.