Módulo 3.1 — animation-designer | Skill Design

🧩 O que é / o que faz

Conceito Principal

O animation-designer é um skill especialista em animações web, transições e motion design. Ele domina dois ecossistemas complementares: Framer Motion (para React) e CSS Animations/Keyframes — produzindo desde micro-interações sutis até transições de página completas.

O skill cobre toda a cadeia de movimento em interfaces: fade ins, listas escalonadas (staggered), modais com spring physics, parallax ao rolar, contadores animados, loaders, drag-and-drop com inércia e notificações com badge animado. Cada padrão segue boas práticas de performance (GPU compositing, will-change, respeito ao prefers-reduced-motion).

Com Framer Motion

▸Fade in / slide na montagem do componente (initial/animate/exit)
▸Listas escalonadas com staggerChildren
▸Modais com spring physics (AnimatePresence)
▸Transições de página inteira
▸Drag and drop com useDragControls
▸Contadores animados com useTransform

Com CSS / Tailwind

▸Keyframe animations customizadas
▸Classes Tailwind: animate-spin, animate-bounce, animate-pulse
▸Skeleton loaders com pulse
▸Scroll progress indicator
▸Parallax com useScroll + useTransform
▸Success checkmark e badge de notificação

Framer Motion

React animation lib

CSS Keyframes

Animação nativa

Easing

Curvas de movimento

Motion Design

UX em movimento

🎣 Quando dispara

O Claude aciona o animation-designer quando detecta palavras-chave ligadas a movimento, transição ou motion design na sua requisição. O skill é especializado — não é chamado para qualquer CSS, apenas quando o foco é animação.

Timeline de gatilhos comuns

Pedido explícito de animação

"adicione animação", "crie transição", "anime este componente", "motion design", "Framer Motion"

Componentes com comportamento

"modal que entra com slide", "botão com hover animado", "lista que aparece escalonada", "loading spinner"

Scroll e parallax

"elemento aparece ao rolar", "parallax no hero", "barra de progresso de leitura"

Micro-interações

"checkmark de sucesso", "badge com número que pulsa", "feedback visual no clique"

Transições de página

"navegação com fade entre rotas", "page transition com AnimatePresence", "rota que desliza"

💡

Dica de ativação

Seja específico no pedido: diga qual componente animar, qual tecnologia preferir (Framer Motion ou CSS puro) e o efeito desejado. O skill produz código pronto para colar, não instruções genéricas.

Gatilho Direto

"anime", "transição"

Gatilho Implícito

Modal, spinner, fade

Scroll-based

useScroll, parallax

Micro-interação

Checkmark, badge

🚀 Como melhora suas páginas

📊 Impacto em métricas de UX

+40%

Percepção de qualidade com micro-interações bem calibradas

−60%

Sensação de loading com skeleton loaders animados

100%

Acessibilidade com prefers-reduced-motion

✓ FAZER com animation-designer

✓Fade in de cards ao entrar na viewport (scroll-triggered)
✓Stagger em listas para guiar o olhar do usuário
✓Spring physics em modais para sensação tátil
✓Skeleton loader durante fetch de dados
✓Barra de progresso de leitura no topo da página

✗ EVITAR ao animar

✗Animar width/height diretamente (causa reflow)
✗Duração acima de 500ms em micro-interações
✗Esquecer @media (prefers-reduced-motion)
✗Animar opacity + transform sem will-change em listas longas
✗Looping infinito sem propósito (distrai e cansa)

A maior diferença está na percepção de resposta: uma interface que anima o feedback de ações (clique, hover, submit) parece mais rápida e confiável, mesmo que o tempo real seja idêntico. O skill garante que cada animação tenha propósito funcional, não apenas decorativo.

⚡

Performance first

O skill prioriza animar apenas propriedades compostas pelo GPU: transform e opacity. Nunca anima top/left/margin/width diretamente — isso dispara layout thrashing.

GPU Compositing

transform + opacity

Perceived Speed

UX subjetiva

Duração ideal

150ms–400ms

Reduced Motion

Acessibilidade

⚙️ Como funciona por dentro

Core

• Framer Motion
• CSS Animations / Keyframes
• React (motion.*)
• Tailwind Animation Classes

APIs principais

• motion.div, AnimatePresence
• useScroll, useTransform
• useMotionValue
• useDragControls

Padrões entregues

• Fade In on Mount
• Staggered List
• Modal com spring
• Page Transition
• Scroll-triggered
• Drag and Drop

Instalação

npm install framer-motion

// Uso básico em React
import { motion, AnimatePresence } from 'framer-motion';

Anatomia de uma animação

<motion.div
  initial={{ opacity: 0, y: 20 }}     // estado inicial
  animate={{ opacity: 1, y: 0 }}      // estado final
  exit={{ opacity: 0, y: -20 }}       // saída (AnimatePresence)
  transition={{ duration: 0.3, ease: 'easeOut' }}
>
  Conteúdo animado
</motion.div>

✓ Boas práticas internas

✓Sempre inclui bloco @media (prefers-reduced-motion)
✓Usa easing semântico: easeOut p/ entradas, easeIn p/ saídas
✓Duração 150–300ms para micro-interações, 300–500ms para transições
✓Preferência por transform + opacity (zero layout thrashing)

✗ Padrões evitados

✗Animar width, height, top, left
✗Loops infinitos sem justificativa de UX
✗Duração acima de 500ms em interações frequentes
✗Ignorar estado de foco / acessibilidade de teclado

motion.*

Componentes animáveis

AnimatePresence

Animação de saída

useScroll

Scroll-based anim

staggerChildren

Delay escalonado

💬 Exemplo prático + Prompt pronto

Abaixo, um cenário real: você tem uma lista de cards de produto em React e quer que cada card apareça escalonado ao rolar a página. Eis o prompt otimizado e o código que o skill produz.

Prompt pronto para colar no Claude Code

Use o skill animation-designer para adicionar animação à lista
de cards de produto no componente ProductList.tsx (React + Tailwind).

Requisitos:
- Cada card deve fade in + slide-up ao entrar na viewport (scroll-triggered)
- Stagger de 0.1s entre cada card
- Duração de 0.4s com easing easeOut
- Usar Framer Motion (já instalado)
- Incluir suporte a prefers-reduced-motion
- Não alterar layout ou estilos existentes, só adicionar animação

Código resultante — Staggered List com scroll trigger

import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

// Variantes para o container (stagger)
const containerVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.1 }
  }
};

// Variantes para cada card
const cardVariants = {
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.4, ease: 'easeOut' }
  }
};

export function ProductList({ products }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-60px' });

  return (
    <motion.ul
      ref={ref}
      variants={containerVariants}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      className="grid grid-cols-3 gap-4"
    >
      {products.map(p => (
        <motion.li key={p.id} variants={cardVariants}>
          <ProductCard product={p} />
        </motion.li>
      ))}
    </motion.ul>
  );
}

🎯

Pro tip: once: true

Passe once: true no useInView para que a animação dispare apenas na primeira vez que o elemento entrar na tela. Sem isso, o elemento re-anima toda vez que sair e voltar ao viewport — geralmente indesejável.

useInView

Scroll trigger

variants

Estados nomeados

staggerChildren

0.1s de delay

once: true

Anima 1x só

🧬 Combina com / Limites

Com quais skills compõe

✨

impeccable

T1 · Construir

O impeccable também aplica animações — especificamente transições CSS e micro-interações de polimento final (hover states, focus rings, transições de cor). A combinação é poderosa: impeccable cuida do polimento visual geral, animation-designer trata de motion design mais elaborado (scroll, spring, stagger, drag). Use impeccable primeiro para estabelecer a base visual; depois chame animation-designer para camadas de movimento mais complexas.

🌀

algorithmic-art

T2 · Identidade

O algorithmic-art gera arte generativa com p5.js e canvas. A combinação com animation-designer cria visuais que unem geração procedural (formas, partículas, ruído Perlin) com motion design de interface (transições de entrada, feedback de hover). Caso de uso: backgrounds animados gerativos com p5.js + transições de componentes com Framer Motion na mesma página.

🖱️

3d-animation-creator

T3 · Mídia · Próximo

O 3d-animation-creator é o próximo módulo desta trilha: expande o motion design para o eixo Z, trabalhando com Three.js, WebGL e animações 3D no browser. A separação é clara: animation-designer domina o espaço 2D (UI, transições, scroll), enquanto 3d-animation-creator cuida de cenas tridimensionais, meshes, materiais e câmeras. Use juntos quando precisar de uma interface animada (2D) que integre um hero ou background 3D.

⚠️ Limites — quando NÃO usar

✗Vídeo e exportação de frames: para criar vídeos renderizados a partir de componentes React, use o skill remotion (módulo 3.3). animation-designer anima no browser, não exporta arquivos de vídeo.
✗Animações 3D complexas: cenas Three.js, meshes, shaders e câmeras orbitais são domínio do 3d-animation-creator, não deste skill.
✗Arte generativa com canvas/p5: geração procedural pura (fractais, ruído, sistemas de partículas matemáticas) é trabalho do algorithmic-art.
✗Projetos sem React/CSS: o skill é orientado a React (Framer Motion) e CSS moderno. Para animações em contextos nativos (iOS, Android) ou engines de game, não é a ferramenta certa.

Mapa de responsabilidades na Trilha 3

3.1 animation-designer

2D · UI · Framer Motion · CSS

3.2 3d-animation-creator

3D · WebGL · Three.js

3.3 remotion

React → Vídeo · Exportação

3.4 seedance + HyperFrames

FFmpeg · Pipelines de mídia

+ impeccable

Polimento → Motion

+ algorithmic-art

p5.js + Framer

+ 3d-animation

2D UI + 3D hero

NÃO para vídeo

Use remotion

📋 Resumo do Módulo 3.1

O que você aprendeu

✓O animation-designer é especialista em animações web com Framer Motion e CSS
✓Cobre fade, slide, stagger, spring, scroll, parallax, drag e micro-interações
✓Dispara em pedidos explícitos de animação, motion design ou Framer Motion
✓Sempre inclui prefers-reduced-motion e usa transform+opacity para performance
✓APIs principais: motion.*, AnimatePresence, useScroll, useTransform, useDragControls
✓Combina com impeccable (polimento), algorithmic-art (p5.js) e 3d-animation-creator (Three.js)
✓NÃO é substituto para vídeo (remotion) ou arte 3D (3d-animation-creator)

Próximo módulo

🖱️

3.2 — 3d-animation-creator

Three.js, WebGL e animações 3D no browser. Da interface plana ao espaço tridimensional.

🎬

Trilha 3 — Mídia

Esta trilha cobre toda a camada de movimento e mídia: de animações de UI (3.1) até pipelines de vídeo com FFmpeg (3.4). Cada módulo expande o eixo de movimento em uma direção diferente.

←Voltar para Trilha 3 Próximo Módulo→