Plantillas de Claude Motion: 24 estilos de animación

La especificación de cada estilo

Paper Editorial

Ideal para: Ensayos, explicaciones, artículos de opinión. Papel cálido, titular con serifa y un solo acento color óxido. Pausado, como un reportaje de revista.

Composición: Margen izquierdo amplio, titular arriba a la izquierda y una línea fina sobre las etiquetas de sección. Las barras son bloques planos.

Movimiento: Ascensos lentos de 28px con fundido, 0.8s, power2.out. Se mueve un elemento a la vez. Sin rebote.

Blueprint

Ideal para: Arquitectura, sistemas, recorridos técnicos. Cuadrícula azul marino oscuro con líneas cian. Todo se dibuja como contorno y aparece con un barrido, como un plotter.

Composición: Cuadrícula tenue de 60px de fondo. Las cajas y barras son contornos, nunca rellenos. Las etiquetas van en monoespaciada pequeña y en mayúsculas.

Movimiento: Barridos de izquierda a derecha (clip-path), 0.9s, power1.inOut. Las etiquetas siguen a su forma. Nada se desvanece ni rebota.

Kinetic Poster

Ideal para: Lanzamientos, promociones, cortes para redes sociales. Escenario negro, tipografía condensada a escala de cartel y un solo color ácido. Las palabras entran con fuerza y rapidez.

Composición: Titulares condensados en mayúsculas que llenan el encuadre, con interlineado ajustado. Una idea por escena.

Movimiento: Cortes secos: los elementos aparecen de golpe desde una escala del 118% en 0.32s, expo.out, con 0.07s de diferencia. Nada se desliza.

Quiet Keynote

Ideal para: Historias de producto, informes para inversores. Escenario claro, mucho espacio y cifras serenas sobre tarjetas blancas. Una sola cifra protagoniza cada plano.

Composición: Centrada. Tarjetas blancas con sombra suave. Doce palabras o menos por escena.

Movimiento: Escala suave del 92% al 100% con fundido, 0.7s, power3.out. Los números suben contando durante 1.2s.

Chalk Lesson

Ideal para: Enseñanza, tutoriales, módulos de cursos. Una pizarra verde con títulos manuscritos y un resaltado amarillo. Los pasos se escriben uno a uno.

Composición: Títulos manuscritos y pasos numerados a lo largo del lado izquierdo. El término clave lleva un subrayado amarillo.

Movimiento: Barridos de izquierda a derecha como si se escribiera, 0.7s, power1.out, con 0.22s de pausa entre líneas.

Ledger

Ideal para: Informes, revisiones de métricas, finanzas. Página blanca, cifras en monoespaciada y un único verde para el crecimiento. Pensado para que los gráficos se lean bien.

Composición: Una línea fina bajo cada título. Cifras en monoespaciada. Sin degradados, sin sombras, sin 3D.

Movimiento: Ascensos rápidos de 16px, 0.45s, power2.out, con 0.08s de diferencia. Las barras crecen desde la línea base y las etiquetas las siguen.

Terminal

Ideal para: Herramientas para desarrolladores, changelogs, demos de CLI. Una ventana de terminal gris carbón en monoespaciada con un prompt verde. Las líneas se imprimen por pasos, como una salida real.

Composición: Todo está dentro de una sola ventana con barra de título. Los títulos empiezan con un prompt. El acento marca la línea modificada.

Movimiento: Barridos escalonados que parecen escritura: 16 pasos en 0.6s, con 0.2s entre líneas. Sin curvas de suavizado.

Sunrise

Ideal para: Reels de marca, anuncios, aperturas de eventos. Un degradado de coral a violeta con tipografía blanca redondeada. Amable y luminoso, con una entrada elástica.

Composición: Degradado en un elemento hijo a pantalla completa. Las etiquetas son píldoras. Las barras y los pasos son de blanco translúcido con radios grandes.

Movimiento: Apariciones elásticas desde una escala del 86%, 0.55s, back.out(1.6), con 0.09s de diferencia. El fondo nunca se mueve.

Glass

Ideal para: Historias de producto, lanzamientos premium. Escenario claro con color suave en el ambiente y paneles de blanco esmerilado. Sereno, de aspecto exclusivo y con mucho espacio.

Composición: Dos campos de color desenfocados de fondo. Los paneles son de blanco translúcido con un borde brillante y una sombra profunda y suave.

Movimiento: Escala lenta y suave desde 92% con fundido, 0.8s, power3.out. Los paneles aparecen uno tras otro, nunca a la vez.

Midnight

Ideal para: Productos para desarrolladores, roadmaps, changelogs. Lienzo casi negro, bordes finísimos, tipografía compacta y un único brillo lavanda. Preciso y sobrio.

Diseño: Un brillo suave detrás del contenido. Cada panel tiene un borde fino de 2px. Los títulos son compactos y no muy grandes.

Movimiento: Subidas cortas de 14px, 0.5s, power3.out, escalonadas con muy poca separación (0.07s). Rápido y exacto, sin rebote.

Pixel

Ideal para: Explicaciones técnicas, historias de datos con un toque lúdico. Crema cálido con bloques de naranja a amarillo y esquinas rectas. Todo aparece por pasos, como píxeles que se encienden.

Diseño: Esquinas rectas en todo el diseño. Las barras son bloques cálidos apilados. Bajo cada título hay una fila de cuadrados pequeños.

Movimiento: Barridos escalonados en 8 pasos durante 0.5s, con 0.14s entre uno y otro. Sin suavizado en ningún punto: los elementos se encienden de golpe.

Aubergine

Ideal para: Novedades del equipo, comunicación interna, onboarding. Morado intenso con amarillo cálido y paneles en forma de burbuja de chat. Cercano y conversacional, como un mensaje de un compañero.

Diseño: Los pasos son burbujas de chat con una esquina recta. Las etiquetas son píldoras. Usa frases cortas y en tono hablado.

Movimiento: Las burbujas aparecen desde 86% con un pequeño rebote, 0.5s, back.out(1.4), con 0.16s entre una y otra, como mensajes que van llegando.

Graph Paper

Ideal para: Documentación técnica, novedades de ingeniería, benchmarks. Una cuadrícula técnica clara, tipografía mono y un solo verde para el resultado que importa. Se lee como un cuaderno de laboratorio meticuloso.

Diseño: Cuadrícula fina de 48px en el fondo. Paneles blancos con borde de 2px. Los títulos son discretos; los datos son los protagonistas.

Movimiento: Barridos de izquierda a derecha, 0.55s, power2.out, con 0.1s entre uno y otro. Las líneas se dibujan, no se funden.

Pastel Shapes

Ideal para: Talleres, briefs creativos, publicaciones para la comunidad. Papel crema, geometría pastel y divertida, y una mezcla de formas redondas y rectas. Colaborativo y algo descuadrado.

Diseño: Cada barra y cada paso toma por turnos el siguiente tono pastel. Las esquinas alternan entre redondeadas y rectas.

Movimiento: Apariciones con rebote desde 86%, 0.5s, back.out(1.8), con 0.1s entre una y otra. Las formas parecen colocadas a mano.

Signal

Ideal para: Anuncios, revisiones de incidentes, mensajes contundentes. Negro profundo con una franja roja cortante y tipografía blanca gruesa. Urgente e imposible de pasar por alto.

Diseño: Una franja roja diagonal cruza el fondo. Los títulos son muy compactos. Un solo elemento rojo por escena, ni uno más.

Movimiento: Cortes secos desde una escala de 118% en 0.3s, expo.out, con 0.06s entre uno y otro. Cada escena arranca al ritmo.

Harbor

Ideal para: Finanzas, precios, revisiones de negocio. Tipografía azul marino oscuro sobre superficies claras y un índigo seguro. Fiable y ordenado, con un degradado suave en la parte superior.

Diseño: Una franja de color inclinada en el borde superior. Paneles blancos con sombra suave. Los números son grandes y en azul marino.

Movimiento: Subidas uniformes de 22px, 0.6s, power2.out, con 0.1s entre una y otra. Estable y predecible, sin nada lúdico.

Newsprint

Ideal para: anuncios, informes públicos, reportajes. Papel blanco roto, titulares serif negros y un filete rojo. Se lee como una portada de periódico.

Composición: un filete negro grueso sobre cada título y uno fino debajo. Esquinas cuadradas en todo.

Movimiento: asentamientos rápidos desde un tamaño ligeramente mayor, 0,45 s, como una página que se deja caer de golpe. Sin rebote.

Botanical

Ideal para: bienestar, sostenibilidad, educación. Papel crema, verde salvia y una serif que se toma su tiempo. Tranquilo, con imágenes en acuarela.

Composición: márgenes amplios y paneles redondeados. Un pequeño filete verde hoja sobre cada etiqueta.

Movimiento: subidas lentas de 20 px con un fundido largo, 0,9 s, con 0,16 s entre elementos. Nada llega deprisa.

Neon Night

Ideal para: eventos, música, videojuegos, vida nocturna. Azul medianoche con luz magenta. Títulos potentes, bordes luminosos, pensado para una sala oscura.

Composición: los paneles tienen un borde fino luminoso. La barra destacada y el número brillan en magenta.

Movimiento: aparece desde el 86 % con un pequeño rebasamiento, 0,5 s, con 0,09 s entre elementos. Dinámico sin sacudidas.

Clay

Ideal para: incorporación de usuarios, tours de producto, explicaciones cercanas. Beige cálido con terracota y formas redondeadas suaves. Cercano sin resultar infantil.

Diseño: Paneles muy redondeados con una sombra suave debajo. Las insignias numeradas son círculos.

Movimiento: Entradas suaves con un pequeño rebote, 0,6 s, con 0,12 s entre una y otra, como si algo se posara.

Riso Print

Ideal para: Fanzines, cultura, revisiones de diseño. Papel blanco cálido impreso en azul y rosa fluorescente. Títulos grandes y condensados, deliberadamente un poco toscos.

Diseño: Títulos condensados en mayúsculas, en azul con toques de rosa. Las etiquetas son bloques rosas.

Movimiento: Asentamientos rápidos y secos desde el 118 %, 0,4 s. Los elementos caen como sellos.

Sala de juntas

Ideal para: Estrategia, consultoría, informes para el consejo. Blanco, azul marino y un solo azul real. Títulos que van directos a la respuesta y paneles ordenados, como maqueta una página un consultor.

Diseño: Una línea azul a la izquierda de cada título. Los paneles son planos, con un borde finísimo.

Movimiento: Subidas cortas de 16 px, 0,5 s, con 0,08 s entre una y otra. Ágil y uniforme, nunca decorativo.

Ink Brush

Ideal para: Ensayos, filosofía, historias de marca. Papel de arroz, tinta negra y un pequeño sello rojo. Mucho espacio vacío, a propósito.

Diseño: El texto ocupa los dos tercios izquierdos, con aire alrededor. La etiqueta es un pequeño sello cuadrado rojo.

Movimiento: Barridos lentos desde la izquierda, 1 s, con 0,2 s entre uno y otro, como una pincelada.

Sticker

Ideal para: Niños, aulas, publicaciones en redes sociales, novedades divertidas. Amarillo radiante, contornos negros gruesos y rosa intenso. Cada panel parece una pegatina.

Diseño: Paneles blancos con un contorno negro grueso y una sombra desplazada y nítida, como pegatinas en un cuaderno.

Movimiento: Entradas con rebote y un exceso claro, 0,45 s, con 0,1 s entre una y otra. Juguetón a propósito.