Ty-HA/animation

/animation — 100 estilos de animação prontos para usar

Por Ty — BTHA System (bthasystem.io).

Interpretar o argumento

Formas aceitas:

• /animation glitch → estilo glitch, texto padrão.
• /animation glitch "Meu texto" → estilo + texto a ser animado (passa na prop text).
• /animation glitch 16:9 ou ... web → formato ou destino especificado.
• /animation sozinho ou /animation lista → exibe o catálogo abaixo, agrupado por família, e pede um estilo.

A primeira palavra é o slug. Cada slug tem sua ficha: references/<slug>.md (na pasta desta skill). Sempre leia a ficha antes de escrever código: ela contém a técnica, os valores exatos e um componente Remotion de partida.

Slug desconhecido

Se o slug não existir: não adivinhe em silêncio. Proponha os 3 estilos mais próximos (por nome, família ou efeito descrito), com sua descrição de uma linha, e pergunte qual escolher. Exemplos: « vhs » → glitch, risograph, light-leak ; « 3d text » → extruded-text, liquid-chrome, kinetic-type ; « matrix » → ascii, scramble, code-typing.

Stack padrão

• Vídeo (padrão): Remotion (React + TypeScript), 1080×1920, 30 fps (TikTok, Reels, Shorts). Duração padrão: 5 s (150 frames) salvo solicitação contrária.
• Web: se o usuário quiser uma animação para um site, transponha a ficha para HTML/CSS/JS (CSS keyframes, requestAnimationFrame, canvas ou SVG). A lógica « posição = função do tempo » permanece a mesma.
• Outros formatos: 1080×1080 (quadrado), 1920×1080 (YouTube). Respeitar as áreas seguras em 9:16: ~140 px de margem lateral, nada importante nos 25% inferiores (interface TikTok).

Regras Remotion a respeitar:

• Tudo depende de useCurrentFrame(): nenhum estado acumulado de um frame para outro (os frames são renderizados fora de ordem e em paralelo).
• Aleatoriedade apenas via random('semente') de remotion, nunca Math.random().
• Mídias via staticFile(), <Img>, <OffthreadVideo>, <Audio> para que a renderização espere o carregamento.
• Fontes: @remotion/google-fonts/<Fonte> para renderização garantida.

Fluxo de trabalho

1. Identificar o slug (ou propor 3 estilos próximos).
2. Ler references/<slug>.md.
3. Esclarecer se necessário (apenas uma pergunta agrupada, somente se for desconhecido e importante): formato (9:16 por padrão), duração, texto, cores da marca, projeto Remotion existente ou novo.
4. Construir:
   • Projeto existente: adicionar src/<Style>.tsx e registrá-lo em Root.tsx com <Composition id=... durationInFrames fps={30} width={1080} height={1920} />.
   • Novo projeto: npx create-video@latest (template blank), depois a mesma coisa.
   • Partir do snippet da ficha, adaptá-lo ao texto/cores, instalar as dependências indicadas na ficha.
5. Verificar: npx remotion still <id> --frame=<n> out.png em 2–3 frames-chave, olhar a imagem, corrigir.
6. Renderizar: npx remotion render <id> out/<id>.mp4 (adicione --crf=18 para melhor qualidade, --gl=angle se a renderização 3D ficar preta).
7. Entregar: caminho do arquivo, duração, e 2–3 variações possíveis extraídas da ficha.

Vários estilos solicitados de uma vez (/animation glitch + synthwave): ler todas as fichas, combinar (ex. fundo synthwave + título glitch) em um único componente.

Catálogo (100 estilos)

🔤 Tipografia cinética & efeitos textuais

• kinetic-type — Kinetic Type (Headline): Texto impactante sincronizado com a voz, zooms abruptos, palavra por palavra
• split-flap — Split-Flap Display: Painel de estação: as letras giram antes de se fixar
• glitch — Glitch & VHS Retrô: Distorções, linhas de varredura, ruído analógico, aberração cromática
• hud — HUD & Terminal Sci-Fi: Interface futurista monoespaçada, contadores rápidos, linhas de mira
• ascii — Animação ASCII Art: Imagem feita de caracteres que mudam em tempo real
• scramble — Scramble / Text Reveal: Letras aleatórias estilo descriptografia antes da palavra real
• stacking — Kinetic Stacking: Palavras que se empilham em ritmo frenético
• typewriter — Typewriter: Máquina de escrever, letra por letra, cursor piscando
• karaoke — Karaoke Captions: Legendas TikTok, a palavra pronunciada acende
• handwriting — Handwriting / Signature: Texto que se traça à mão (traçado SVG)
• text-path — Text on Path: Texto que segue uma curva, um círculo, uma espiral
• variable-font — Variable Font Morph: Letras que engrossam, esticam, respiram
• highlighter — Highlighter Sweep: Marca-texto ou sublinhado que se desenha sob uma palavra
• rotating-words — Rotating Words: Uma palavra que muda em loop dentro de uma frase fixa
• mask-reveal — Mask Reveal: Texto revelado através de uma forma ou imagem

🎨 Movimentos orgânicos, fluidos & abstratos

• liquid-morph — Liquid Morphing: Formas que se transformam umas nas outras
• particles — Particles System: Milhares de pontos sujeitos ao vento, à gravidade
• neon — Neon Glow / Cyberpunk: Linhas luminosas com halo e rastros
• topographic — Wave & Topographic: Linhas de nível ou ondas matemáticas em loop
• aurora — Aurora & Mesh Gradient: Gradientes borrados que se movem como auroras
• metaballs — Blobs & Metaballs: Formas redondas que se fundem de forma viscosa
• bioluminescence — Bioluminescência: Pulsação luminosa suave estilo abissal
• flow-field — Flow Field (Perlin Noise): Milhares de traços que seguem um campo de correntes
• ink-water — Fluid / Ink in Water: Tinta que se difunde na água
• fractal-zoom — Fractal Zoom: Zoom infinito em um fractal
• voronoi — Voronoi Cells: Células orgânicas que se dividem e movem
• reaction-diffusion — Reaction-Diffusion: Padrões vivos estilo pele de zebra ou coral
• smoke-fire — Smoke & Fire Shader: Fumaça ou chamas geradas em tempo real
• grain-gradient — Grain & Noise Gradient: Gradiente granulado estilo cartaz moderno

🧊 Estilos 3D, relevos & materiais

• clay-3d — Clay 3D (Argila): Objetos massinha com física e quiques
• glassmorphism — Glassmorphism: Painéis de vidro fosco que desfocam o fundo
• wireframe — Isometric & Wireframe 3D: Perspectiva isométrica ou estruturas em arame
• neumorphism — Neumorphism: Formas moldadas no fundo por jogo de sombras
• low-poly — Low Poly: 3D facetado que capta a luz
• skeuomorphism — Skeuomorphism: Botões reais, interruptores, texturas couro ou metal
• liquid-chrome — Abstract Chrome / Liquid Metal: Mercúrio ou metal líquido reflexivo
• product-spin — 3D Product Spin: Objeto 3D que gira sobre si mesmo (packshot)
• extruded-text — 3D Extruded Text: Texto em volume com luz e sombras
• card-flip — Card Flip 3D: Cartas que viram em perspectiva
• cube-transition — Cube / Box Transition: Transição por rotação de um cubo
• globe — 3D Globe: Globo terrestre que gira com pontos luminosos
• galaxy — Galaxy Particles 3D: Galáxia de partículas em profundidade
• holo-foil — Holographic Foil: Reflexo iridescente arco-íris estilo cartão holográfico
• voxel — Voxel Art: 3D em pequenos cubos estilo Minecraft

📐 Estéticas artísticas, gráficas & históricas

• swiss — Swiss Design: Grades assimétricas, grandes sem serifa, transições geométricas
• risograph — Risograph & Halftone: Impressão retrô granulada, camadas desalinhadas, 12 fps
• paper-cutout — Paper Cut-out: Papel recortado com sombra, stop-motion
• neobrutalism — Neobrutalism: Contornos pretos espessos, sombras duras, cores berrantes
• bauhaus — Bauhaus: Círculo, quadrado, triângulo, cores primárias
• memphis — Memphis Style: Ziguezagues, confetes, xadrezes, pastéis anos 80
• synthwave — Synthwave / Vaporwave: Grade néon infinita em direção a um pôr do sol
• pixel-art — Pixel Art / 8-Bit: Retrô gaming sem suavização
• comic — Comic Book / Cel Shading: HQ, contornos pretos, trama Pop Art
• blueprint — Blueprint: Planta arquitetônica que se desenha sobre fundo azul
• frutiger-aero — Frutiger Aero: Bolhas, vidro azul-esverdeado, anos 2000
• corporate-memphis — Corporate Memphis: Personagens flat com membros alongados
• psychedelic — Psychedelic Retro: Anos 70, ondulações, cores saturadas
• line-boil — Line Boil: Contornos que tremem como um desenho animado
• y2k — Y2K / Chrome Bubble: Anos 2000, cromados, estrelas, bolhas
• manga-speed-lines — Manga Speed Lines: Linhas de velocidade e onomatopeias de mangá
• watercolor — Watercolor: Manchas de aquarela que se difundem
• chalkboard — Chalkboard / Sketch: Desenho a giz ou lápis que se traça
• art-deco — Art Deco: Linhas douradas geométricas anos 20
• duotone — Duotone: Imagem em duas cores contrastantes

📊 Painéis, dados & interfaces UI

• data-story — Data Storytelling: Barras que sobem, curvas que se traçam
• bento — Bento Grid: Grade de caixas assimétricas que se movem
• odometer — Count-up / Odometer: Contadores que percorrem até o valor
• micro-interactions — Micro-interações UI: Botões, ícones que se transformam, ripple
• marquee — Infinite Scroll / Marquee: Faixas que percorrem infinitamente
• parallax — Parallax Scrolling: Camadas em velocidades diferentes
• skeleton — Skeleton Loading: Formas que pulsam antes do conteúdo
• bar-race — Bar Chart Race: Ranking de barras que se ultrapassam ao longo do tempo
• progress-rings — Progress Rings: Anéis estilo Apple Watch que se preenchem
• map-route — Map Route Tracing: Rota traçada em um mapa (corrida!)
• timeline — Timeline: Linha do tempo que avança
• chat — Chat / iMessage Simulation: Balões de conversa que aparecem
• notifications — Notification Stack: Notificações que caem e se empilham
• phone-scroll — Phone Mockup Scroll: Tela de app que rola dentro de um telefone
• code-typing — Code Typing / IDE: Código que se escreve em um editor
• cursor-demo — Cursor Demo: Cursor que clica e navega em uma interface
• before-after — Before / After Slider: Comparação antes-depois com controle deslizante

🎬 Transições & movimentos de câmera

• whip-pan — Whip Pan: Panorâmica ultra-rápida com desfoque de movimento
• zoom-punch — Zoom Punch: Zoom brusco no momento forte
• camera-shake — Camera Shake: Tremor de impacto
• shape-wipe — Shape Wipe: Transição por forma que varre a tela
• iris — Iris / Circle Reveal: Abertura ou fechamento em círculo
• ink-transition — Ink / Paint Transition: Mancha de tinta que invade a tela
• light-leak — Light Leak & Lens Flare: Vazamentos de luz estilo filme
• ken-burns — Ken Burns: Zoom lento em uma foto
• split-screen — Split Screen: Tela dividida que se abre
• speed-ramp — Speed Ramp: Câmera lenta seguida de aceleração
• page-curl — Page Curl: Página que vira
• match-cut — Match Cut / Morph Cut: Corte perfeito entre duas formas

🧸 Personagens & efeitos divertidos

• lip-sync — Lip-Sync Avatar: Avatar cuja boca acompanha a voz
• puppet-rig — Puppet Rig: Personagem articulado (braços, cabeça, piscadas)
• confetti — Confetti / Emoji Rain: Chuva de confetes ou emojis
• sticker-pop — Sticker Pop: Stickers que surgem com quique
• squash-stretch — Squash & Stretch: Objeto elástico estilo cartoon
• morph-icons — Morphing Icons: Um ícone que se transforma em outro
• fireworks — Firework / Burst: Explosão de partículas festivas