Ty-HA/animation

/animation — 100 estilos de animación listos para usar

Por Ty — BTHA System (bthasystem.io).

Leer el argumento

Formas aceptadas:

• /animation glitch → estilo glitch, texto por defecto.
• /animation glitch "Mi texto" → estilo + texto a animar (pásalo en la prop text).
• /animation glitch 16:9 o ... web → formato o destino especificados.
• /animation solo o /animation lista → muestra el catálogo a continuación, agrupado por familia, y pide un estilo.

La primera palabra es el slug. Cada slug tiene su ficha: references/<slug>.md (dentro de la carpeta de este skill). Lee siempre la ficha antes de escribir código: contiene la técnica, los valores exactos y un componente Remotion de partida.

Slug desconocido

Si el slug no existe: no adivines en silencio. Propón los 3 estilos más cercanos (por nombre, familia o efecto descrito), con su descripción de una línea, y pregunta cuál usar. Ejemplos: «vhs» → glitch, risograph, light-leak; «3d text» → extruded-text, liquid-chrome, kinetic-type; «matrix» → ascii, scramble, code-typing.

Stack por defecto

• Video (por defecto): Remotion (React + TypeScript), 1080×1920, 30 fps (TikTok, Reels, Shorts). Duración por defecto: 5 s (150 frames) salvo que se indique lo contrario.
• Web: si el usuario quiere una animación para un sitio web, transpón la ficha a HTML/CSS/JS (CSS keyframes, requestAnimationFrame, canvas o SVG). La lógica «posición = función del tiempo» sigue siendo la misma.
• Otros formatos: 1080×1080 (cuadrado), 1920×1080 (YouTube). Respeta las zonas seguras en 9:16: ~140 px de margen lateral, nada importante en el 25 % inferior (interfaz de TikTok).

Reglas Remotion a respetar:

• Todo depende de useCurrentFrame(): ningún estado acumulado de un frame a otro (los frames se renderizan desordenados y en paralelo).
• Aleatoriedad solo mediante random('semilla') de remotion, nunca Math.random().
• Medios mediante staticFile(), <Img>, <OffthreadVideo>, <Audio> para que el renderizado espere la carga.
• Fuentes: @remotion/google-fonts/<Fuente> para un renderizado garantizado.

Flujo de trabajo

1. Identificar el slug (o proponer 3 estilos cercanos).
2. Leer references/<slug>.md.
3. Aclarar si es necesario (solo una pregunta agrupada, solo si es desconocido e importante): formato (9:16 por defecto), duración, texto, colores de marca, proyecto Remotion existente o nuevo.
4. Construir:
   • Proyecto existente: añadir src/<Estilo>.tsx y registrarlo en Root.tsx con <Composition id=... durationInFrames fps={30} width={1080} height={1920} />.
   • Nuevo proyecto: npx create-video@latest (plantilla blank), luego lo mismo.
   • Partir del snippet de la ficha, adaptarlo al texto/colores, instalar las dependencias indicadas en la ficha.
5. Verificar: npx remotion still <id> --frame=<n> out.png en 2–3 frames clave, mirar la imagen, corregir.
6. Renderizar: npx remotion render <id> out/<id>.mp4 (añadir --crf=18 para mejor calidad, --gl=angle si el renderizado 3D sale negro).
7. Entregar: ruta del archivo, duración, y 2–3 variaciones posibles extraídas de la ficha.

Varios estilos pedidos a la vez (/animation glitch + synthwave): leer todas las fichas, combinar (ej. fondo synthwave + título glitch) en un solo componente.

Catálogo (100 estilos)

🔤 Tipografía cinética y efectos textuales

• kinetic-type — Kinetic Type (Headline): Texto impactante sincronizado con la voz, zooms bruscos, palabra por palabra
• split-flap — Split-Flap Display: Panel de estación: las letras giran antes de fijarse
• glitch — Glitch & VHS Retro: Distorsiones, líneas de barrido, ruido analógico, aberración cromática
• hud — HUD & Terminal Ciencia Ficción: Interfaz futurista monoespaciada, contadores rápidos, líneas de mira
• ascii — Animación ASCII Art: Imagen formada por caracteres que cambian en tiempo real
• scramble — Scramble / Text Reveal: Letras aleatorias al estilo descifrado antes de la palabra real
• stacking — Kinetic Stacking: Palabras que se apilan a un ritmo frenético
• typewriter — Typewriter: Máquina de escribir, letra por letra, cursor parpadeante
• karaoke — Karaoke Captions: Subtítulos TikTok, la palabra pronunciada se ilumina
• handwriting — Handwriting / Signature: Texto que se traza a mano (trazado SVG)
• text-path — Text on Path: Texto que sigue una curva, un círculo, una espiral
• variable-font — Variable Font Morph: Letras que se ensanchan, se estiran, respiran
• highlighter — Highlighter Sweep: Resaltador o subrayado que se dibuja debajo de una palabra
• rotating-words — Rotating Words: Una palabra que cambia en bucle dentro de una frase fija
• mask-reveal — Mask Reveal: Texto revelado a través de una forma o una imagen

🎨 Movimientos orgánicos, fluidos y abstractos

• liquid-morph — Liquid Morphing: Formas que se transforman unas en otras
• particles — Particles System: Miles de puntos sometidos al viento, la gravedad
• neon — Neon Glow / Cyberpunk: Líneas luminosas con halo y estelas
• topographic — Wave & Topographic: Líneas de nivel u ondas matemáticas en bucle
• aurora — Aurora & Mesh Gradient: Degradados borrosos que se mueven como auroras
• metaballs — Blobs & Metaballs: Formas redondas que se fusionan de manera viscosa
• bioluminescence — Bioluminiscencia: Pulsación luminosa suave estilo abisal
• flow-field — Flow Field (Perlin Noise): Miles de trazos que siguen un campo de corrientes
• ink-water — Fluid / Ink in Water: Tinta que se difunde en el agua
• fractal-zoom — Fractal Zoom: Zoom infinito dentro de un fractal
• voronoi — Voronoi Cells: Células orgánicas que se dividen y se mueven
• reaction-diffusion — Reaction-Diffusion: Patrones vivos tipo piel de cebra o coral
• smoke-fire — Smoke & Fire Shader: Humo o llamas generadas en tiempo real
• grain-gradient — Grain & Noise Gradient: Degradado granuloso estilo cartel moderno

🧊 Estilos 3D, relieves y materiales

• clay-3d — Clay 3D (Arcilla): Objetos de plastilina con física y rebotes
• glassmorphism — Glassmorphism: Paneles de vidrio esmerilado que desenfocan el fondo
• wireframe — Isometric & Wireframe 3D: Perspectiva isométrica o estructuras de alambre
• neumorphism — Neumorphism: Formas moldeadas en el fondo mediante juegos de sombras
• low-poly — Low Poly: 3D facetado que atrapa la luz
• skeuomorphism — Skeuomorphism: Botones reales, interruptores, texturas cuero o metal
• liquid-chrome — Abstract Chrome / Liquid Metal: Mercurio o metal líquido reflectante
• product-spin — 3D Product Spin: Objeto 3D que gira sobre sí mismo (packshot)
• extruded-text — 3D Extruded Text: Texto en volumen con luz y sombras
• card-flip — Card Flip 3D: Cartas que se voltean en perspectiva
• cube-transition — Cube / Box Transition: Transición mediante rotación de un cubo
• globe — 3D Globe: Globo terráqueo que gira con puntos luminosos
• galaxy — Galaxy Particles 3D: Galaxia de partículas en profundidad
• holo-foil — Holographic Foil: Reflejo iridiscente arcoíris estilo carta holográfica
• voxel — Voxel Art: 3D en cubitos estilo Minecraft

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

• swiss — Swiss Design: Cuadrículas asimétricas, grandes sans-serif, transiciones geométricas
• risograph — Risograph & Halftone: Impresión retro granulosa, capas descentradas, 12 fps
• paper-cutout — Paper Cut-out: Papel recortado con sombra, stop-motion
• neobrutalism — Neobrutalism: Contornos negros gruesos, sombras duras, colores estridentes
• bauhaus — Bauhaus: Círculo, cuadrado, triángulo, colores primarios
• memphis — Memphis Style: Zigzags, confetis, cuadros, pasteles años 80
• synthwave — Synthwave / Vaporwave: Cuadrícula neón infinita hacia un sol poniente
• pixel-art — Pixel Art / 8-Bit: Retro-gaming sin suavizado
• comic — Comic Book / Cel Shading: Cómic, contornos negros, trama Pop Art
• blueprint — Blueprint: Plano de arquitecto que se dibuja sobre fondo azul
• frutiger-aero — Frutiger Aero: Burbujas, vidrio azul-verdoso, años 2000
• corporate-memphis — Corporate Memphis: Personajes planos con extremidades estiradas
• psychedelic — Psychedelic Retro: Años 70, ondulaciones, colores saturados
• line-boil — Line Boil: Contornos que tiemblan como un dibujo animado
• y2k — Y2K / Chrome Bubble: Años 2000, cromados, estrellas, burbujas
• manga-speed-lines — Manga Speed Lines: Líneas de velocidad y onomatopeyas manga
• watercolor — Watercolor: Manchas de acuarela que se difunden
• chalkboard — Chalkboard / Sketch: Dibujo a tiza o lápiz que se traza
• art-deco — Art Deco: Líneas doradas geométricas años 20
• duotone — Duotone: Imagen en dos colores contrastados

📊 Paneles, datos e interfaces UI

• data-story — Data Storytelling: Barras que suben, curvas que se trazan
• bento — Bento Grid: Cuadrícula de casillas asimétricas que se mueven
• odometer — Count-up / Odometer: Contadores que giran hasta el valor
• micro-interactions — Micro-interactions UI: Botones, iconos que se transforman, ripple
• marquee — Infinite Scroll / Marquee: Bandas que se desplazan infinitamente
• parallax — Parallax Scrolling: Capas a diferentes velocidades
• skeleton — Skeleton Loading: Formas que pulsan antes del contenido
• bar-race — Bar Chart Race: Clasificación de barras que se adelantan en el tiempo
• progress-rings — Progress Rings: Anillos tipo Apple Watch que se llenan
• map-route — Map Route Tracing: Ruta trazada sobre un mapa (running!)
• timeline — Timeline: Línea de tiempo que avanza
• chat — Chat / iMessage Simulation: Burbujas de conversación que aparecen
• notifications — Notification Stack: Notificaciones que caen y se apilan
• phone-scroll — Phone Mockup Scroll: Pantalla de app que se desplaza dentro de un teléfono
• code-typing — Code Typing / IDE: Código que se escribe en un editor
• cursor-demo — Cursor Demo: Cursor que hace clic y navega en una interfaz
• before-after — Before / After Slider: Comparación antes-después con deslizador

🎬 Transiciones y movimientos de cámara

• whip-pan — Whip Pan: Panorámica ultrarrápida con desenfoque de movimiento
• zoom-punch — Zoom Punch: Zoom brusco en el momento culminante
• camera-shake — Camera Shake: Temblor de impacto
• shape-wipe — Shape Wipe: Transición mediante una forma que barre la pantalla
• iris — Iris / Circle Reveal: Apertura o cierre en círculo
• ink-transition — Ink / Paint Transition: Mancha de tinta que invade la pantalla
• light-leak — Light Leak & Lens Flare: Fugas de luz estilo película
• ken-burns — Ken Burns: Zoom lento sobre una foto
• split-screen — Split Screen: Pantalla dividida que se abre
• speed-ramp — Speed Ramp: Cámara lenta luego aceleración
• page-curl — Page Curl: Página que se dobla
• match-cut — Match Cut / Morph Cut: Corte perfecto entre dos formas

🧸 Personajes y efectos divertidos

• lip-sync — Lip-Sync Avatar: Avatar cuya boca sigue la voz
• puppet-rig — Puppet Rig: Personaje articulado (brazos, cabeza, parpadeos)
• confetti — Confetti / Emoji Rain: Lluvia de confetis o emojis
• sticker-pop — Sticker Pop: Stickers que aparecen con rebote
• squash-stretch — Squash & Stretch: Objeto elástico estilo cartoon
• morph-icons — Morphing Icons: Un icono que se transforma en otro
• fireworks — Firework / Burst: Explosión de partículas festivas