🧩 O que é / o que faz
Conceito Principal
O 3d-animation-creator é um skill que pega um arquivo de vídeo (ex.: deconstrução/montagem de produto, transformação antes/depois) e constrói um site production-quality com scroll-driven animation. O vídeo toca para frente e para trás conforme o usuário rola — recriando o efeito "scroll-stop" popularizado pela Apple nos lançamentos do iPhone.
O que entrega
- ▸ Site HTML/CSS/JS completo, zero dependências pesadas
- ▸ Canvas com renderização frame-a-frame sincronizada ao scroll
- ▸ Starscape animado como background (canvas fixo ~180 estrelas)
- ▸ Cards de anotação com snap-stop (efeito "boom boom boom")
- ▸ Seção specs com count-up animado via IntersectionObserver
- ▸ Navbar que se transforma em pill com glass-morphism ao rolar
- ▸ Loader de pré-carregamento dos frames antes de exibir
- ▸ Responsividade mobile (layout diferente, mesmo vídeo)
O que NÃO faz
- ✗ Não usa players de vídeo (`<video>`) — todo controle é via canvas
- ✗ Não processa o vídeo em runtime — precisa extrair frames com FFmpeg antes
- ✗ Não gera o vídeo — só consome frames já extraídos
- ✗ Não serve os arquivos — precisa de servidor local (não funciona via
file://)
🎣 Quando dispara
Regra: o Claude aciona este skill quando detecta intenção de criar um site com vídeo controlado pelo scroll — ou quando o usuário menciona qualquer dos gatilhos abaixo. A detecção é por texto, não por arquivo anexado.
Gatilhos que ativam o skill
"3D animation"
O gatilho mais direto. Qualquer menção ao nome do skill ou à técnica de animação 3D controlada por scroll.
"scroll-stop build" / "scroll animation website"
Intenção de construir — não só entender. O usuário quer o site final.
"scroll-driven video" / "build the scroll-stop site"
Variações idiomáticas — todas mapeiam para o mesmo skill.
"Apple-style scroll animation" / "video on scroll"
Referência visual clara ao padrão Apple de lançamento de produto.
Arquivo de vídeo + pedido de controle
Usuário fornece um .mp4 e pede para "controlar pelo scroll" ou "fazer scrub interativo".
📋 Step 0 — The Interview (obrigatório)
Antes de construir, o skill faz uma entrevista com o usuário para coletar:
- • Caminho do arquivo de vídeo
- • Diretório de output para os frames
- • Número de frames desejados (30–120)
- • Seções de anotação (texto + momento do vídeo)
- • Especificações do produto (para count-up)
- • Paleta de cores preferida
- • Velocidade do scroll (200–800vh)
- • Título e subtítulo do hero
🚀 Como melhora suas páginas
✓ FAZER — o que o skill resolve
- ✓ Transforma um vídeo simples em experiência interativa imersiva
- ✓ Entrega site completo com loader, navbar, hero, specs, footer
- ✓ Controla a narrativa: o usuário "lê" o produto rolando a página
- ✓ Performance: canvas + requestAnimationFrame, sem pop-in
- ✓ Retina-ready: usa devicePixelRatio para nitidez em HiDPI
- ✓ Mobile: layout compacto, cards em linha única, posição bottom:1.5vh
✗ EVITAR — quando não usar
- ✗ Vídeos longos (>10s) — prefira 3–6s para o efeito scroll funcionar bem
- ✗ Frames em PNG — use JPEG <100KB cada para evitar lentidão
- ✗ Abrir via
file://— frames não carregam sem servidor local - ✗ scroll-behavior: smooth no CSS — interfere no controle frame-a-frame
- ✗ Primeiro frame colorido/escuro — precisa ser branco para o loader funcionar
Dica de velocidade: A altura do container .scroll-animation controla o ritmo: 200vh = rápido, 500vh = suave, 800vh = cinemático. Ajuste conforme a densidade de informação do produto.
📊 Benchmarks realistas
⚙️ Como funciona por dentro
Pipeline de 6 passos (SKILL.md)
Step 0 — The Interview
Coleta caminho do vídeo, output dir, número de frames, seções de anotação, specs para count-up, paleta, velocidade do scroll, título/subtítulo.
Step 1 — Analyze the Video
Extrai metadados: duração, resolução, fps. Determina quantos frames extrair (recomendado: duração × 20).
Step 2 — Extract Frames via FFmpeg
Roda o comando FFmpeg para gerar frames JPEG numerados no diretório de output.
Step 3 — Build the Website
Gera o HTML completo com canvas sticky, loader, starscape, navbar, hero, annotation cards, specs, footer.
Step 4 — Key Implementation Patterns
Canvas com devicePixelRatio. Cover-fit desktop, zoomed contain-fit mobile. Snap-stop com lock de overflow ~600ms. Navbar pill transform. Count-up com easeOutExpo staggerado 200ms.
Step 5 — Customize Content
Aplica a paleta de cores, textos, número de cards e specs fornecidos na entrevista.
Step 6 — Serve & Test
Instrui o usuário a rodar um servidor local (ex.: python -m http.server) para testar o site.
// Canvas com suporte a Retina / HiDPI
canvas.width = window.innerWidth * window.devicePixelRatio;
canvas.height = window.innerHeight * window.devicePixelRatio;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
// Mapeamento scroll → frame
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const maxScroll = scrollContainer.scrollHeight - window.innerHeight;
const progress = Math.min(scrollTop / maxScroll, 1);
const frameIdx = Math.floor(progress * (frames.length - 1));
if (frameIdx !== currentFrame) {
currentFrame = frameIdx;
requestAnimationFrame(() => drawFrame(frames[frameIdx]));
}
}, { passive: true });⚠️ Dependência Obrigatória: FFmpeg
O skill detecta se FFmpeg está instalado. Se não estiver, instrui o usuário: brew install ffmpeg (macOS) ou equivalente. Frames não carregam sem servidor HTTP local — nunca via file://.
💬 Exemplo prático + PROMPT pronto
Cenário: Deconstrução de um smartwatch
Você tem um vídeo de 4 segundos mostrando um smartwatch se desmontando peça por peça (deconstrução de produto). Quer um site onde o usuário rola a página e o relógio se desmonta na tela — com anotações aparecendo em cada componente (bateria, tela AMOLED, processador) e uma seção final com as especificações técnicas animadas.
3D animation
Tenho um vídeo de deconstrução de smartwatch em:
/Users/eu/videos/watch-deconstruct.mp4
Quero um site scroll-stop Apple-style com:
- Frames extraídos em: /Users/eu/site/frames/
- 80 frames totais
- Velocidade: 600vh (cinemática)
- Cor dominante: #a855f7 (roxo)
Anotações (3 cards):
1. "Tela AMOLED 1.4"" — no frame 20
2. "Bateria 300mAh" — no frame 45
3. "Chip Snapdragon W5" — no frame 65
Specs (count-up):
- "1.4"" / tela
- "300mAh" / bateria
- "5 dias" / autonomia
- "IP68" / resistência
Título: "Por dentro do Tempo"
Subtítulo: "Cada componente, revelado"O que acontece: O Claude inicia a entrevista (Step 0), confirma os parâmetros, roda o comando FFmpeg para extrair os 80 frames, e entrega um único arquivo HTML com todo o site — loader, starscape, canvas sticky, 3 annotation cards com snap-stop, seção specs com count-up e navbar pill.
ffmpeg -i /Users/eu/videos/watch-deconstruct.mp4 \
-vf "fps=20,scale=1920:-1" \
-q:v 3 \
/Users/eu/site/frames/frame_%03d.jpg🧬 Combina com / limites
animation-designer
Módulo 3.1Cria as animações CSS/GSAP/Framer Motion que depois podem ser renderizadas como vídeo. Use animation-designer para fazer o vídeo de entrada do 3d-animation-creator.
remotion
Módulo 3.3Gera vídeos programáticos em React. O output MP4 do Remotion é o input perfeito para o 3d-animation-creator — vídeo com precisão de frame → site scroll-stop.
HyperFrames
Módulo 3.4O HyperFrames converte HTML animado → MP4 via Chrome headless + FFmpeg. Use para renderizar animações HTML complexas e depois alimentar o 3d-animation-creator com o vídeo gerado.
✓ COMBINE COM
- ✓ animation-designer para criar o vídeo-fonte com animações CSS/GSAP
- ✓ remotion quando o vídeo precisa ser gerado programaticamente em React
- ✓ HyperFrames para converter animações HTML complexas em MP4 de entrada
- ✓ frontend-design para refinar o HTML final com mais polimento visual
- ✓ impeccable para revisão de qualidade do site entregue
✗ NÃO USAR QUANDO
- ✗ O usuário quer apenas uma animação CSS simples — use animation-designer
- ✗ O vídeo não existe ainda e não há plano para criá-lo antes
- ✗ O ambiente não suporta FFmpeg e o usuário não pode instalá-lo
- ✗ O conteúdo é texto/dados — use canvas-design ou algorithmic-art
- ✗ Precisa de autoplay de vídeo normal — use a tag
<video>diretamente
Posição na Trilha 3 🎞️ Mídia
📋 Resumo do Módulo 3.2
O que você aprendeu
- ✓ O 3d-animation-creator constrói sites scroll-stop Apple-style a partir de vídeos
- ✓ Usa FFmpeg para extrair frames JPEG e Canvas API para renderizá-los
- ✓ O skill dispara por "3D animation", "scroll-stop build", "Apple-style scroll animation"
- ✓ Inclui starscape (~180 estrelas), navbar pill, annotation cards com snap-stop e count-up
- ✓ Step 0 (entrevista) é obrigatório — coleta caminho, frames, anotações e specs
- ✓ Combina com animation-designer (upstream), remotion e HyperFrames para o vídeo-fonte
- ✓ Vanilla JS, zero frameworks pesados, { passive: true }, requestAnimationFrame
Próximo módulo:
3.3 remotion
Renderização programática de vídeo com React — frames controlados por código, output MP4.
Dica de estudo: Tente encadear Módulo 3.1 → 3.2: crie uma animação CSS com animation-designer, exporte como vídeo (via HyperFrames), e alimente o 3d-animation-creator. É o pipeline completo da Trilha 3.