Design for AI

Estilo Cinético / motion-first: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de cinético / motion-first. Também chamado de web de motion design, site de tipografia cinética, site animado, design guiado por scroll, estilo awwwards. 2016 em diante (era GSAP, Three.js; scroll-driven animations 2023+).

Traços

  • a animação é o design: o texto se divide e se revela, as seções fixam e são arrastadas pelo scroll
  • tipografia grande que se move: caracteres entram escalonados, palavras trocam, marquees rodam
  • elementos que seguem o cursor, botões magnéticos, cursores customizados
  • transições de página com wipes ou máscaras; imagens se revelam via clip-path
  • fundos em WebGL ou canvas (distorção, partículas) como acento, não como preenchimento
  • a paleta costuma ser contida para o movimento ler com clareza (preto, branco, uma cor)
  • tudo tem uma curva de easing; nada estala nem usa linear

Paleta

#0a0a0a página, #f5f5f5 texto, #ff4d00 ou #c8ff00 um acento, #1a1a1a superfície, #666666 atenuado

Tipografia

A Space Grotesk parecida com Neue Montreal, Syne, Unbounded ou Clash Display (gratuita via Fontshare) para display a 64-160px; Work Sans para o corpo a 16px; muitas vezes em caixa alta com tracking apertado

Faça

  • construa primeiro sobre scroll-driven animations em CSS (animation-timeline: scroll()/view()) e só adicione uma biblioteca JS para o que o CSS não consegue
  • use uma família de easing (ex.: cubic-bezier(0.16,1,0.3,1)) e 3 durações (300, 600, 1200ms) em todo o site
  • escalone as revelações de caracteres a 20-30ms e limite a revelação total a menos de 1s; senão os usuários vão embora

Evite

  • não anime propriedades de layout (width, height, top); só transform e opacity
  • não publique sem tratar prefers-reduced-motion: cada efeito precisa de um fallback estático
  • não deixe um canvas 3D custar mais de 50KB de JS nem bloquear o first paint

Conhecido por: Vencedores do Awwwards, Locomotive, Active Theory, Igloo Inc, Lusion

Semente 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

Construa o site motion-first. Fundo #0a0a0a, texto #f5f5f5, um acento #c8ff00, superfície #1a1a1a. Fonte Syne 800 em caixa alta para display a 140px no desktop / 56px no mobile com -0.03em e line-height 0.9; Work Sans 400 a 16px para o corpo. Easing único cubic-bezier(0.16,1,0.3,1) com durações de 300, 600 e 1200ms. A manchete do hero se divide em caracteres que sobem de translateY(100%) dentro de uma máscara com overflow-hidden, escalonados 25ms, total abaixo de 900ms. Um marquee de acento de largura total a 40s linear. As seções usam scroll-driven animations em CSS (animation-timeline: view()) para surgir com fade e translate de 40px; uma seção fixada onde uma imagem escala de 0.6 a 1 conforme o usuário rola (animation-timeline: scroll()). As imagens se revelam com clip-path inset(100% 0 0 0) para inset(0). Botão primário magnético: move até 8px em direção ao cursor, preenchimento de acento, texto preto, sem raio. Cursor customizado de ponto de 12px que cresce para 48px sobre links. Só transform e opacity. Sob prefers-reduced-motion, renderize tudo no estado final.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site motion-first. Fundo #0a0a0a, texto #f5f5f5, um acento #c8ff00, superfície #1a1a1a. Fonte Syne 800 em caixa alta para display a 140px no desktop / 56px no mobile com -0.03em e line-height 0.9; Work Sans 400 a 16px para o corpo. Easing único cubic-bezier(0.16,1,0.3,1) com durações de 300, 600 e 1200ms. A manchete do hero se divide em caracteres que sobem de translateY(100%) dentro de uma máscara com overflow-hidden, escalonados 25ms, total abaixo de 900ms. Um marquee de acento de largura total a 40s linear. As seções usam scroll-driven animations em CSS (animation-timeline: view()) para surgir com fade e translate de 40px; uma seção fixada onde uma imagem escala de 0.6 a 1 conforme o usuário rola (animation-timeline: scroll()). As imagens se revelam com clip-path inset(100% 0 0 0) para inset(0). Botão primário magnético: move até 8px em direção ao cursor, preenchimento de acento, texto preto, sem raio. Cursor customizado de ponto de 12px que cresce para 48px sobre links. Só transform e opacity. Sob prefers-reduced-motion, renderize tudo no 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 }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.