Design for AI

Estilo Cinético / movimiento primero: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para cinético / movimiento primero. También llamado web de motion design, sitio de tipografía cinética, web animada, diseño guiado por scroll, estilo awwwards. 2016 en adelante (era de GSAP y Three.js; animaciones guiadas por scroll desde 2023).

Rasgos

  • la animación es el diseño: el texto se divide y se revela, las secciones se fijan y avanzan con el scroll
  • tipografía grande que se mueve: los caracteres entran escalonados, las palabras se intercambian, las marquesinas corren
  • elementos que siguen al cursor, botones magnéticos, cursores personalizados
  • transiciones de página con barridos o máscaras; las imágenes se revelan mediante clip-path
  • fondos en WebGL o canvas (distorsión, partículas) como acento, no como relleno
  • la paleta suele ser contenida para que el movimiento se lea con claridad (negro, blanco, un color)
  • todo tiene una curva de easing; nada salta ni usa linear

Paleta

#0a0a0a página, #f5f5f5 texto, #ff4d00 o #c8ff00 un acento, #1a1a1a superficie, #666666 apagado

Tipografía

La parecida a Neue Montreal Space Grotesk, Syne, Unbounded o Clash Display (gratis en Fontshare) para display a 64-160px; Work Sans para el cuerpo a 16px; a menudo en mayúsculas con tracking apretado

Haz

  • construye primero sobre animaciones CSS guiadas por scroll (animation-timeline: scroll()/view()) y añade una librería JS solo para lo que CSS no puede hacer
  • usa una sola familia de easing (p. ej. cubic-bezier(0.16,1,0.3,1)) y 3 duraciones (300, 600, 1200ms) en todo el sitio
  • escalona los revelados de caracteres a 20-30ms y limita el revelado total a menos de 1s; si no, los usuarios se van

Evita

  • no animes propiedades de layout (width, height, top); solo transform y opacity
  • no lo publiques sin gestionar prefers-reduced-motion: cada efecto necesita un respaldo estático
  • no dejes que un canvas 3D cueste más de 50KB de JS ni bloquee el primer pintado

Conocido por: Ganadores de Awwwards, Locomotive, Active Theory, Igloo Inc, Lusion

Semilla CSS
:root {
  --bg: #0a0a0a;
   --fg: #f5f5f5;
   --accent: #c8ff00;
   --surface: #1a1a1a;
   --ease: cubic-bezier(0.16,1,0.3,1);
   --dur: 600ms;
   --radius: 0;
   --font: 'Syne',sans-serif
}
Prompt

Construye el sitio con el movimiento como prioridad. Fondo #0a0a0a, texto #f5f5f5, un acento #c8ff00, superficie #1a1a1a. Fuente Syne 800 en mayúsculas para display a 140px en escritorio / 56px en móvil con -0.03em y line-height 0.9; Work Sans 400 a 16px para el cuerpo. Un único easing cubic-bezier(0.16,1,0.3,1) con duraciones de 300, 600 y 1200ms. El titular del hero se divide en caracteres que suben desde translateY(100%) dentro de una máscara con overflow hidden, escalonados 25ms, total por debajo de 900ms. Una marquesina de acento a ancho completo a 40s linear. Las secciones usan animaciones CSS guiadas por scroll (animation-timeline: view()) para aparecer con fundido y desplazarse 40px hasta su sitio; una sección fijada donde una imagen escala de 0.6 a 1 mientras el usuario hace scroll (animation-timeline: scroll()). Las imágenes se revelan con clip-path de inset(100% 0 0 0) a inset(0). Botón primario magnético: se mueve hasta 8px hacia el cursor, relleno de acento, texto negro, sin radio. Cursor personalizado de punto de 12px que crece a 48px sobre los enlaces. Solo transform y opacity. Bajo prefers-reduced-motion, renderiza todo en su estado final.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio con el movimiento como prioridad. Fondo #0a0a0a, texto #f5f5f5, un acento #c8ff00, superficie #1a1a1a. Fuente Syne 800 en mayúsculas para display a 140px en escritorio / 56px en móvil con -0.03em y line-height 0.9; Work Sans 400 a 16px para el cuerpo. Un único easing cubic-bezier(0.16,1,0.3,1) con duraciones de 300, 600 y 1200ms. El titular del hero se divide en caracteres que suben desde translateY(100%) dentro de una máscara con overflow hidden, escalonados 25ms, total por debajo de 900ms. Una marquesina de acento a ancho completo a 40s linear. Las secciones usan animaciones CSS guiadas por scroll (animation-timeline: view()) para aparecer con fundido y desplazarse 40px hasta su sitio; una sección fijada donde una imagen escala de 0.6 a 1 mientras el usuario hace scroll (animation-timeline: scroll()). Las imágenes se revelan con clip-path de inset(100% 0 0 0) a inset(0). Botón primario magnético: se mueve hasta 8px hacia el cursor, relleno de acento, texto negro, sin radio. Cursor personalizado de punto de 12px que crece a 48px sobre los enlaces. Solo transform y opacity. Bajo prefers-reduced-motion, renderiza todo en su estado final.

## Tokens
:root { --bg:#0a0a0a; --fg:#f5f5f5; --accent:#c8ff00; --surface:#1a1a1a; --ease:cubic-bezier(0.16,1,0.3,1); --dur:600ms; --radius:0; --font:'Syne',sans-serif }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.