🎞️ Mídia & Vídeo

Uma skill especializada em criar animações web com Framer Motion e CSS. Cobre fade-in, staggered lists, hover states, modais animados, page transitions, scroll-triggered animations e parallax — tudo em React/TypeScript ou CSS puro.

Sem a skill, você recebe código genérico de animação. Com ela, o Claude segue padrões de performance (transform + opacity, nunca top/left), duração recomendada (150–400ms) e reduz motion para acessibilidade automaticamente.

Framer Motion, CSS keyframes, motion design, micro-interações, acessibilidade (prefers-reduced-motion).

A skill dispara quando você pede animação, transição, motion design, Framer Motion, scroll animation, loading animation, hover effect, micro-interação ou efeito visual em componente React.

Conhecer os gatilhos ajuda a formular o pedido certo. "Cria um fade-in" dispara; "adiciona uma transição CSS" também dispara.

Palavras-gatilho: animação, transição, motion, hover, scroll, loading, micro-interação.

A skill entrega padrões prontos: Fade In on Mount, Staggered List, Button Hover, Modal com AnimatePresence, Page Transition, Scroll Progress Indicator e Parallax — todos performáticos e acessíveis.

Animações bem feitas reduzem cognitive load, guiam o olhar e transmitem qualidade. Animações mal feitas (que usam top/left, sem reduced-motion) prejudicam performance e acessibilidade.

Perceived performance, polished UI, GPU-friendly (transform/opacity), AnimatePresence para montagem/desmontagem.

Usa framer-motion (npm install framer-motion) como biblioteca principal, com motion.*, AnimatePresence, useScroll, useTransform e useSpring. Para CSS puro, gera @keyframes e classes Tailwind (animate-*). Segue regras de easing (ease-out para entradas, ease-in para saídas) e duração (micro 150ms, standard 200–300ms, complex 400ms).

Entender o stack permite ajustar parâmetros (damping, stiffness em spring animations) e saber quando usar CSS vs Framer Motion.

framer-motion, useScroll, useTransform, AnimatePresence, spring vs tween, Tailwind animate.

Um exemplo clássico: lista de cards que aparecem em cascata (stagger) quando a página carrega, cada card com hover lift e shadow. A skill gera o componente completo com Framer Motion e variants.

Ver um exemplo real mostra como a skill interpreta o pedido e quais props ela define por padrão.

staggerChildren, variants, whileHover, exit animations.

Combina muito bem com canvas-design (UI base) e 3d-animation-creator (scroll video como complemento). Não cobre vídeo real (use remotion ou hyperframes), nem animações 3D Three.js.

Saber os limites evita frustração: para MP4 exportável use remotion; para site scroll-video use 3d-animation-creator.

Fronteira: web animation vs vídeo exportado; complementar ao 3d-animation-creator.

Uma skill que recebe um vídeo MP4/MOV e constrói um site HTML/CSS/JS completo onde o vídeo é controlado pelo scroll. A posição do scroll determina qual frame é exibido — o vídeo toca para frente ou para trás conforme o usuário desce ou sobe a página.

É o mesmo efeito usado pela Apple nas páginas do iPhone. Com frames extraídos e um canvas, você cria a ilusão de vídeo 3D sem WebGL.

Scroll-driven animation, frame extraction, canvas rendering, Apple-style storytelling.

Dispara quando você pede "cria um site como a Apple", "scroll-driven video", "vídeo que toca com o scroll", "animation scroll", ou "extrai frames do vídeo para scroll". A skill começa com um interview obrigatório: nome do produto, cor, estilo, sessões.

O interview inicial coleta todas as decisões de design antes de construir — evita retrabalho. Sem ele, a skill não avança.

Step 0 obrigatório: entrevista de design; palavra-gatilho "Apple-style".

Transforma qualquer vídeo em uma landing page premium onde o produto se revela durante o scroll. Cards de anotação aparecem em momentos específicos do vídeo, seções de features e specs se integram à narrativa visual.

Uma landing page com scroll-driven video converte mais por criar imersão. O custo de produção caiu de semanas para horas com essa skill.

Imersão, storytelling visual, conversão, landing page premium.

Passo 1: analisa FPS e duração do vídeo. Passo 2: extrai frames com FFmpeg (ffmpeg -i video.mp4 frames/frame_%04d.jpg -q:v 85). Passo 3: constrói HTML com <canvas> sticky, scroll height de 350vh, e JavaScript que mapeia scrollY para o índice do frame correto via requestAnimationFrame. Mobile usa 250vh.

O motor real é FFmpeg para extração e canvas para renderização. Saber isso permite ajustar qualidade (-q:v), taxa de frames, e resolver erros de path.

FFmpeg, canvas, requestAnimationFrame, scroll height, frame index mapping.

Crie uma landing page Apple-style para um produto tech. O vídeo produto.mp4 está em /tmp/. Extrai os frames com FFmpeg, constrói o site com scroll-driven animation, adiciona 3 cards de anotação nos frames 30, 90 e 150, e uma seção de specs abaixo.

O prompt completo inclui localização do vídeo, número de cards e seções — esses detalhes evitam o interview interativo.

Localização do vídeo, frames-alvo para cards, seções de conteúdo.

Combina com animation-designer para animar os cards e seções ao redor do vídeo. Para gerar o vídeo-fonte use remotion ou seedance-loop-prompt. Não serve para páginas sem vídeo — nesse caso use animation-designer puro.

O stack completo é: seedance gera loop → 3d-animation-creator usa o loop como fonte → animation-designer anima as seções de texto ao redor.

Requer vídeo-fonte; stack: seedance → 3d-animation-creator → animation-designer.

Remotion é um framework para criar vídeos programaticamente em React. Em vez de uma timeline visual, você escreve componentes React que recebem frame e fps como props e renderizam o estado daquele instante. O resultado vira MP4 via renderização headless.

Vídeo versionável em Git, dados dinâmicos de API, tipagem TypeScript, composição de cenas como componentes — é Motion Canvas/After Effects mas no seu editor.

Composition, useCurrentFrame, interpolate, spring, Sequence, AbsoluteFill.

Dispara quando você menciona Remotion, "cria um vídeo em React", "composição de vídeo programática", "exportar MP4 via código", ou "animar dados para vídeo". Também dispara em pedidos de Shorts/Reels programáticos.

Saber os gatilhos ajuda a direcionar: diga "Remotion" explicitamente se quiser a skill; senão o Claude pode usar animação CSS genérica.

Palavra-gatilho: Remotion, vídeo React, composição programática, MP4 via código.

Com Remotion você gera vídeos de apresentação, intros animadas, data visualizations e Social Media posts diretamente do seu codebase — sem Adobe, sem Lottie, sem design manual. Cada vídeo é um componente React reutilizável.

O vídeo produzido pode ser usado diretamente na página (via <video>), embutido como hero, ou publicado no YouTube/Instagram — tudo do mesmo código.

Vídeo como componente, dados dinâmicos, reutilização, CI/CD para vídeo.

Usa @remotion/core, @remotion/player e opcionalmente @remotion/media-utils. Composições são registradas em Root.tsx, cada cena é um componente com useCurrentFrame(). Exportação via npx remotion render ou Remotion Lambda. Animação usa interpolate(frame, [0,30], [0,1]) e spring({frame, fps, config}).

Entender interpolate e spring é chave: interpolate mapeia frames para valores, spring cria física natural. Ambos tornam a animação previsível e ajustável.

@remotion/core, Root.tsx, useCurrentFrame, interpolate, spring, npx remotion render.

Crie uma composição Remotion de 30s (30fps) com: intro animada (texto surgindo com spring), 3 cenas de feature cada uma de 5s, e outro de saída com CTA. Use Sequence para organizar cenas. Cores: fundo #0f0f0f, acento #a855f7.

Especificar duração, fps, número de cenas e paleta no prompt economiza iterações.

Especificar duração total, fps, número de Sequences, paleta de cores.

O MP4 gerado pelo Remotion alimenta o 3d-animation-creator (vídeo-fonte para scroll) e o HyperFrames (pipeline HTML→MP4). Não use para animações web em tempo real — use animation-designer. Não usa FFmpeg diretamente (isso é HyperFrames).

Remotion é o criador de conteúdo; 3d-animation-creator e HyperFrames são os consumidores do MP4 gerado.

Remotion cria MP4 → 3d-animation-creator consome → HyperFrames distribui.

seedance-loop-prompt: gera prompts estruturados para IA de vídeo (Seedance) criando loops de background sem emenda — o início e o fim do vídeo se conectam perfeitamente. HyperFrames (video-explicativo): skill que grava uma página HTML animada quadro a quadro com Chrome headless e monta o MP4 com FFmpeg — transforma HTML em vídeo exportável.

Juntos cobrem os dois sentidos: seedance cria vídeo para entrar na web; HyperFrames converte a web em vídeo para sair. FFmpeg é o motor compartilhado.

Loop sem emenda, prompt estruturado para IA de vídeo, HTML→MP4, Chrome headless, FFmpeg.

seedance-loop-prompt dispara quando você pede "cria um prompt para vídeo de loop", "background sem emenda", "looping video prompt" ou menciona Seedance. HyperFrames dispara com "cria um vídeo explicativo", "grava HTML em vídeo", "HTML para MP4", "Shorts animado" ou "vídeo para INEMA.CLUB".

Os gatilhos são distintos: seedance = prompt para IA geradora; HyperFrames = gravar a própria página animada.

seedance: "loop sem emenda"; HyperFrames: "vídeo explicativo", "HTML→MP4".

seedance entrega um prompt pronto em 7 blocos (SCENE, CAMERA, ACTION ARC, TEXT, LIGHTING, LOOP SEAL, TECHNICAL) que você cola na IA de vídeo e obtém um loop cinematográfico. HyperFrames entrega um MP4 de alta qualidade de qualquer página HTML animada — ideal para Shorts, intros e demos.

Com seedance você tem backgrounds premium sem banco de vídeo. Com HyperFrames você transforma qualquer curso HTML em vídeo publicável no YouTube.

Prompt estruturado em 7 blocos, loop cinematográfico, HTML→MP4 para Social Media.

seedance-loop-prompt é puro texto: interpreta seu briefing e monta o prompt nos 7 blocos com regras rígidas (sem texto em tela, início=fim para loop, sem cortes). HyperFrames usa: Chrome headless para capturar cada frame da animação → FFmpeg para montar os frames em MP4 (ffmpeg -framerate 30 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4). Pré-requisitos já instalados: Chrome, FFmpeg, Python.

FFmpeg aparece em quase todos os módulos desta trilha: extrai frames (3.2), monta frames (3.4), renderiza (3.3). É a ferramenta central de vídeo na linha de comando.

Chrome headless, ffmpeg -framerate, libx264, yuv420p, pré-requisitos instalados.

Dois prompts prontos: (1) Para seedance: "Cria o prompt para um loop de background: floresta de dados neon, câmera orbital lenta, atmosfera cyberpunk purple e ciano, 6 segundos, sem texto na tela." (2) Para HyperFrames: "Grava a página /tmp/intro.html em vídeo de 15 segundos, 30fps, resolução 1080x1920 para Shorts. Usa Chrome headless e FFmpeg."

Ver os dois prompts lado a lado deixa claro a diferença de propósito: um gera prompt para IA externa; o outro grava a página local.

Briefing visual para seedance; path + resolução + fps para HyperFrames.

seedance alimenta o background de pages gravadas pelo HyperFrames. HyperFrames combina com animation-designer (página animada mais rica = vídeo mais impactante) e remotion (alternativa quando você quer vídeo versionável em React). O curso irmão HyperFrames (skill-hyperframes-videos) aprofunda todo esse pipeline em 4 trilhas.

Seedance não gera o vídeo — gera o prompt. Você precisa de uma IA de vídeo (Seedance, Sora, etc.) para executar. HyperFrames não edita vídeos existentes — grava páginas HTML.

Curso irmão HyperFrames; seedance ≠ gerador de vídeo; HyperFrames ≠ editor de vídeo.