Narrativa antes do efeito
Cada movimento precisa revelar, orientar, conectar ou responder.
Manual 003 + Manual 005 · sistema integral
O movimento também é linguagem.
Uma enciclopédia visual para entender o que é, o que faz, quando usar e quanto custa cada família de efeitos — de um hover de 160 ms a uma experiência WebGPU.
00 / REGRA-MÃE
Efeito bom não pede atenção.
Ele dirige a atenção.
Movimento profissional comunica hierarquia, causa, progresso, resposta e emoção. O conteúdo precisa continuar compreensível sem animação.
Um protagonista por seção
Um efeito dominante; os demais apoiam sem competir.
Movimento não é conteúdo
Sem JavaScript, a mensagem e a ação ainda devem existir.
Ciclo de vida
Pausar loops fora da tela, na aba oculta e em reduced motion.
01 / LABORATÓRIO VIVO
Veja o princípio.
Depois leia a técnica.
Demonstrações leves em CSS e JavaScript. Passe o mouse, use o teclado, clique e role. No celular, os controles essenciais permanecem por toque.
3D TILTprofundidade
transform + perspective
Tilt 3D
Inclina um plano conforme o ponteiro para sugerir volume. Use pouco: 3° a 5° costuma ser suficiente.
SPOTLIGHT
radial-gradient + CSS vars
Luz reativa
Move uma luz contextual até o cursor, revelando material, borda ou prioridade.
DESIGNENGINEERINGFUTURE
clip-path + stagger
Texto em chunks
Divide uma frase em unidades animáveis sem destruir sua versão acessível.
pointermove + RAF
Campo magnético
Desloca suavemente um CTA em direção ao ponteiro para sinalizar interatividade.
stroke-dashoffset
SVG path draw
Anima o traço de uma rota, processo, assinatura ou conexão entre pontos.
000+
IntersectionObserver + easing
Contador progressivo
Transforma métricas em acontecimento. Só deve animar quando entrar na tela.
02 / CATÁLOGO INTEGRAL
Do shimmer
ao ray marching.
Pesquise por nome, finalidade ou técnica. Cada ficha responde:
- O que é
- O que faz
- Onde usar
- Como é feito
- Quanto exige
- Qual cuidado tomar
Nenhum sinal encontrado.Tente outro nome, família ou técnica.
03 / RECEITAS-BASE
Quinze motores.
Centenas de variações.
Uma receita é o mecanismo reutilizável por trás de vários efeitos. Dominar estes quinze padrões é mais útil do que copiar centenas de snippets isolados.
04 / SCROLLYVIDEO
A rolagem vira
cabeça de reprodução.
Scroll-scrubbing mapeia o progresso da seção para o tempo do vídeo. Rolar para baixo avança; subir retrocede. Scrollytelling adiciona capítulos, textos e mudanças de cena.
[Para iniciantes: a barra de rolagem funciona como o botão de avançar e voltar do vídeo.]
progresso=scroll local÷distância totalcurrentTime
FRAME 000 / 240
INTROORBITAREVEALCTA
Vídeo preparado
Faststart, GOP curto, FPS original, pôster e cache. Preservar resolução não significa baixar tudo na abertura.
Suavização
Atualize um tempo-alvo pelo scroll e aproxime o playhead com requestAnimationFrame; não dispute seeks.
Dispositivo móvel real
Use muted, playsinline, metadados antecipados, percurso menor, pôster e testes no Safari para iOS e no Chrome para Android.
Precisão extrema
Quando cada quadro é indispensável, use sequência AVIF/WebP/JPEG em Canvas em vez de forçar um MP4 inadequado.
Ping-pong
Para loop ida e volta sem tranco, pré-renderize original + reverso. playbackRate negativo não é uma base confiável.
Movimento reduzido
Mostre um pôster ou controles convencionais. Nunca obrigue uma pessoa sensível a atravessar uma cena controlada pela rolagem.
05 / RADAR 2026
Moderno não é
sinônimo de seguro.
Todo recurso novo precisa de feature detection, fallback e classificação honesta. Os estados abaixo refletem o enquadramento dos manuais, não uma promessa universal de compatibilidade.
Produção / melhoria progressiva
- CSS shape()
- Scroll-driven animations
- Scroll-state queries
- View Transitions
- linear() easing
- @starting-style
- sibling-index()
Suporte limitado
- Scroll-triggered CSS
- Element-scoped transitions
- corner-shape / border-shape
- CSS @function e if()
- contrast-color()
- text-fit / text-box
- Gap decorations
Experimental / alto custo
- WebGPU compute particles
- TSL node materials
- HTML-in-Canvas
- Reaction-diffusion shader
- Ray-marched metaballs
- Volumetric pipelines
- Declarative overscroll gestures
06 / ORÇAMENTO DE EXPERIÊNCIA
A imersão termina
onde a fricção começa.
Essencial
Sem controle pela rolagem; pôsteres, Canvas estático e entradas instantâneas. Ideal para movimento reduzido e aparelhos limitados.
Adaptado
Canvas reduzido, controle curto pela rolagem, DPR limitado e nenhum pós-processamento pesado.
Completo
Experiência integral quando a CPU, a memória, a rede, as preferências e o contexto permitirem.
Acessibilidade
- Conteúdo legível sem motion
- Foco visível e teclado
- Touch sem depender de hover
- prefers-reduced-motion
- Áudio somente após consentimento
Performance
- transform e opacity primeiro
- RAF consolidado e passivo
- Loops pausados por viewport
- Vídeos internos sob demanda
- DPR e partículas por tier
WordPress
- style.css na raiz do tema
- Scripts apenas onde usados
- filemtime para versionamento
- Seletores com escopo
- Alvos verificados antes do tween
Commerce
- Checkout sem smooth-scroll
- Não prender carrinho ou Minha Conta
- Botões Mercado Pago semânticos
- Eventos WooCommerce preservados
- Efeitos conservadores na compra
07 / ORDEM PROFISSIONAL
Primeiro funciona.
Depois encanta.
- 01Inventário e narrativaseparar páginas narrativas, funcionais, comerciais e experimentais
- 02HTML semânticoconteúdo, navegação e conversão sem depender do efeito
- 03Tokens e microinteraçõesduração, suavização, distância, foco, hover e resposta
- 04Entradas e tipografiaIntersectionObserver, blocos de texto e sequência acessível
- 05Rolagem e vídeoposição fixa, capítulos, controle pela rolagem, pôster, dispositivos móveis e alternativa funcional
- 06Canvas e 3Dníveis de qualidade, pausa, DPR e aprimoramento progressivo
- 07CMS e comércioWordPress, WooCommerce e Mercado Pago sem interferência
- 08Controle de qualidade e reversãonavegadores reais, Core Web Vitals, acessibilidade e versão anterior