# 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  
Era: 2016 em diante (era GSAP, Three.js; scroll-driven animations 2023+)  
Página: https://designforai.dev/pt/style/kinetic-motion-first

## 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

```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.