norahe0304-art/30x-video

Remotion Beautiful Videos

Crie vídeos de lançamento de produto de 40 segundos que parecem ter sido produzidos por uma agência de US$50k. O segredo: construir mockups animados de UI de produto — dashboards reais, interfaces de conversação, editores de código, visualizações de dados — tudo construído em código e animado com spring.

Quando Usar

O usuário nomeia uma marca ou fornece uma URL e deseja um vídeo de lançamento / marketing / demonstração de produto.

NÃO use para (encaminhe para outro lugar em vez de forçar esta skill): extrair clipes curtos de um vídeo longo existente (isso é um trabalho de recorte/recriação); adicionar legendas a filmagens existentes de cabeça falante; edição no estilo NLE de filmagens do usuário (re-temporização/re-colorização/re-ordenação); uma faixa de música pura que precisa de um vídeo lírico sincronizado com a batida. Esta skill constrói um vídeo de lançamento a partir da presença web de uma marca — mockups de UI construídos em código, ativos reais raspados, narrativa em 5 atos. Se a entrada não for uma marca/produto a ser apresentado, esta é a ferramenta errada.

Stack Tecnológica

Remotion 4.x (scaffold fixado em ≥4.0.484) + React 19 + TypeScript + Zod + lucide-react + @remotion/transitions + @remotion/google-fonts + @remotion/paths + @remotion/light-leaks + @remotion/media + @remotion/effects (gradiente/quadriculado/relevo/linhas de grade oficiais — prefira em vez de equivalentes CSS feitos à mão)

Pré-requisitos do Sistema — Tratados Automaticamente

NÃO peça ao usuário para instalar nada. NÃO execute uma verificação manual command -v. O orquestrador (scripts/url-to-video.ts) possui um preflight embutido que detecta ferramentas faltantes, imprime o que está faltando e as instala via brew/apt/dnf/pacman/npm — tudo dentro da Etapa 1.

Ferramentas necessárias (todas instaladas automaticamente se ausentes):

Ferramenta	Motivo
ffmpeg	Corte de áudio, loudnorm, corte de vídeo, verificações de sanidade de volumedetect
yt-dlp	Raspar vídeos de demonstração da marca + BGM livres de royalties do YouTube
aubiotrack	Fallback de batida em modo degradado para analyze-audiomap.py + beat-sync.ts legado (via pacote aubio)
playwright	Captura de tela headless da página inicial

Flags de preflight (passe-as para url-to-video.ts):

• --yes — instala automaticamente sem perguntar (use isso ao executar como Claude, já que você não tem TTY)
• --no-install — pule as instalações, execute em modo degradado (batidas → fallback, captura de tela → apenas fetch)

Se você encontrar uma plataforma onde a instalação automática falha (ambiente bloqueado, sem sudo), o orquestrador imprime o comando de instalação manual por ferramenta e continua degradado. Nunca abandone a execução — a saída degradada ainda é melhor que nada.

O analisador de mapa musical (scripts/analyze-audiomap.py, Etapa 4) possui seu próprio preflight: ele instala via pip librosa/numpy/soundfile na primeira execução e, se a instalação falhar (ou --no-install for passado), degrada para aubiotrack — o audiomap então carrega apenas bpm + beats_sec com todos os outros campos null e rhythmic: false (grade não confiável downstream).

O gerador de BGM (scripts/generate-bgm.py, Etapa 2 nível ②) possui a mesma estrutura de preflight: pip-instala transformers/torch/soundfile/numpy (simples → --break-system-packages → --user); se a instalação falhar, ele sai com a dica de fallback do yt-dlp em vez de bloquear — a obtenção de BGM degrada, nunca morre. As faixas geradas fluem para analyze-audiomap.py exatamente como qualquer outro BGM.

Contrato de Saída do URL-to-Video V2

Caminho preferido: execute o orquestrador de entrada V2 e, em seguida, refine o projeto gerado no Remotion.

node --experimental-strip-types <diretório-da-skill-instalada>/scripts/url-to-video.ts https://site-da-marca.com --out ./<nome-da-marca>-video-lancamento

O orquestrador deve emitir:

• brand-report.json
• scene-constitution.json
• asset-manifest.json
• story.md
• review.md
• Um diretório de projeto Remotion completo com public/brand/*, public/brand/beat-map.json opcional, src/theme.ts e dados de entrada gerados para o scaffold consumir

Caminho de regressão:

node --experimental-strip-types <diretório-da-skill-instalada>/scripts/benchmark-suite.ts --match stripe-fintech --offline --reuse-brand-dir ./public/brand --install --verify --render

O executor de benchmark deve emitir arquivos benchmark-result.json por benchmark e um resumo da suíte para que as alterações V2 possam ser testadas sob pressão em vez de discutidas.

Esta skill não otimiza para renders finais com um clique. Ela otimiza para um primeiro corte de nível profissional de equipe de vídeo que Claude ou um humano possa refiná-lo nos últimos 10-20% dentro do Remotion.

Filosofia Central

1. Construa mockups de UI de produto, não gráficos abstratos. A UI É a animação.
2. Raspe primeiro, desenhe depois. Cada cor, fonte, logotipo vem do site real da marca.
3. Ritmo é luxo. 40 segundos permitem que o conteúdo respire. Nunca apresse os recursos.
4. Bom gosto acima de templates. Se parece que "a IA fez isso", redesenhe.
5. Uma família de fontes, hierarquia de pesos. Apenas intervalo 300-600, nunca negrito (700+).

Constituição de Três Camadas

• Camada fenomenal: colha evidências do site oficial. ScreenshotProof é obrigatório. VideoProof é preferido. Sem prova visual, sem vídeo crível.
• Camada essencial: infira um DesignArchetype a partir das evidências. Use referências para aprimorar o julgamento, nunca para substituir a marca.
• Camada filosófica: rejeite padrões reflexivos antes de construir. Bom gosto supera conveniência. Credibilidade supera espetáculo. Realidade do produto supera energia de template.

Esta skill absorve explicitamente ideias de:

• agent-browser como o coletor preferido da camada fenomenal (headless, não sequestra a tela)
• awesome-design-md como uma biblioteca de referência de arquétipos de design empresarial
• taste-skill como uma fonte de disciplina de execução
• Impeccable como o gate de finalização e vocabulário anti-monocultura

Nenhum dos acima são dependências rígidas. Seu valor está incorporado no pensamento e nos gates desta skill.

Regras

Leia os arquivos de regras individuais para explicações detalhadas e exemplos de código:

Sistema de Design

• rules/typography.md - Pesos de fonte (máx. 600), hierarquia de tamanhos (mín. 24px), segurança de texto
• rules/color.md - Polaridade da marca, tonalização neutra, regra 60-30-10, níveis de opacidade de destaque
• rules/layout.md - Sistema de grade, escala de espaçamento de 4px, zonas seguras, hierarquia de border-radius, anti-sobreposição
• rules/composition.md - Lei de Composição Sob Medida: base de atmosfera sem vácuo, momentos de sangria total, tipo editorial 200-320px, ativos reais primeiro, diversidade de composição — mais a LISTA NEGRA DE SLOP composicional (diagrama de pílula hub-and-spoke, tríptico de cartão oco, vazio de objeto centralizado, abertura eterna de spring + brilho) e o manual de evidências fracas (pontuação < 40 → crie um mundo de marca a partir da geometria do logotipo, nunca cartões vazios)

Conteúdo Visual

• rules/ui-mockups.md - Construção de UI de produto, densidade, barras de título, coloração de sintaxe, simulação de cursor, especificação do Giant Terminal bottom-rising (geometria comprovada + contrato de conteúdo + lista de falhas)
• rules/cards.md - Grades de cartões escalonados, técnicas de preenchimento interno, corpos de cartão animados, sem duplicatas
• rules/data-viz.md - Gráficos SVG, métricas animadas, tabular-nums, badges de status, anti-métrica-herói
• rules/artifact-catalog.md - Leia antes de projetar qualquer ato: 15 famílias de artefatos sob medida testadas em batalha (com ponteiros de fonte) + inventário de scaffold + registro de rotação de heróis entre produções (~/.media/hero-ledger.jsonl) — diversidade é um gate, não uma sugestão

Movimento e Produção

• rules/motion.md - Springs, easeOutExpo, escalonamento por caractere, padrões de temporização, segure-e-então-snap, vocabulário orgânico AE (wiggle / overshoot / idle float / lookAt — conectado da skill irmã remotion-motion)
• rules/transitions.md - TransitionSeries, vazamentos de luz, fundos fluidos, texturas de ruído, paralaxe
• rules/cinematic.md - Grão de filme, vinheta, varredura de brilho, gradação de cor, glassmorphism, configurações de render
• rules/beat-sync.md - Temporização orientada por BGM a partir de audiomap.json: um analisador confiado incondicionalmente, snap à grade de batida quando rhythmic: true, ritmo de fase de energia/silêncio quando não, segure-e-então-snap em picos de energia
• rules/narration-sync.md - Apenas vídeos com narração/legendas: trave os visuais aos timestamps de palavras do sussurro, limpeza de legendas/palavras da marca, snap de corte de limite de frase

Estratégia e Qualidade

• rules/creative-moves.md - Cinco geradores criativos destilados de cada veredito "impressionante" — idiom-literalism, logo-geometry growth, constraint alchemy, semantic inversion, domain-native proof
• rules/taste.md - Lista negra de slop de IA, princípios de design, leis de UX, checklist de auto-revisão, ritmo
• rules/narrative.md - Estrutura de 5 atos, ritmo de manchete/UI, arco da história, constelação de logotipo
• rules/narrative-templates.md - Modelos narrativos específicos do setor (AI SaaS, FinTech, DevTool, E-Commerce, Healthcare, Cybersecurity, Collaboration)
• rules/workflow.md - Raspar marca, sistema de ícones, estratégia de ativos, incorporação de vídeo, organização de arquivos, Mandato de Variedade de BGM (mood derivado da marca + dedup de livro-razão global — nunca a mesma faixa duas vezes)
• rules/media-resolve.md - Cascata de resolução de ativos (ledger → adopt → programmatic → catalog → web) com ledger de congelamento .media/manifest.jsonl; programmatic-first: mapas mundiais de pontos, marcas de simple-icons, logotipos de modelo LobeHub AI como componentes inline tingíveis
• rules/archetypes.md - Arquétipos de design empresarial abstraídos de referências de design de alta qualidade
• rules/finish-gate.md - Protocolo de finalização estilo Impeccable, verificações anti-monocultura, critérios de bloqueio de render
• rules/qc-gates.md - Quatro gates de controle de qualidade baseados em evidências: auditoria de ativos (Etapa 2.5), evidência de quadro por ato (Etapa 4), fiação de loop crítico (Etapa 7.5), divulgação honesta (Etapa 8). Apenas evidências — pixels renderizados + Leitura, nunca grep

Arquivos de Referência (Padrões de Código)

• references/animations.md - FadeIn, ScaleIn, SplitText, Typewriter, CountUp, AnimatedPath
• references/audio.md - Sincronização de áudio, detecção de batida, ducking de narração, pipeline VO ElevenLabs TTS with-timestamps (temporização de palavra gratuitamente, manipulação de chave restrita, duck derivado de VO_CUES)
• references/components.md - GradientMesh, GlassPanel, FilmGrain, ProductFrame, BrandIcon
• scaffold/src/components/Transitions.tsx - 7 famílias de transição (whipPan/maskWipe/push/zoomPunch/blurDissolve/flashThrough/glitchCut) — substituições diretas para fade(); vídeos com apenas fade são uma violação
• scaffold/src/components/ShaderFX.tsx - GPU ShaderPlane (liquidWarp pronto para produção; silk/lens WIP) — renderize com --gl=angle (incorporado no script de render do scaffold)
• scaffold/src/components/Captions.tsx - Legendas com timestamp de palavra, 6 estilos (karaoke/scalePop/weightShift/neonGlow/kineticSlam/editorial)
• references/lottie.md - Integração @remotion/lottie, fontes recomendadas
• references/visual-effects.md - Referência de biblioteca de efeitos visuais em camadas (lottie, motion-blur, confetti, flubber, three.js)

Referência da API Remotion (Inclusa)

Esta skill inclui a referência completa remotion-best-practices para padrões da API Remotion. Carregue-os quando precisar de conhecimento específico da API Remotion:

• remotion-best-practices/rules/videos.md - Incorporação, corte, volume, velocidade, loop de vídeo
• remotion-best-practices/rules/audio.md - Importação, corte, volume, velocidade, pitch de áudio
• remotion-best-practices/rules/timing.md - Curvas de interpolação, linear, easing, spring
• remotion-best-practices/rules/transitions.md - Padrões de transição de cena
• remotion-best-practices/rules/compositions.md - Composições, stills, pastas, props padrão
• remotion-best-practices/rules/sequencing.md - Atraso de sequência, corte, limitação de duração
• remotion-best-practices/rules/fonts.md - Fontes do Google e carregamento de fontes locais
• remotion-best-practices/rules/images.md - Uso do componente Img
• remotion-best-practices/rules/charts.md - Padrões de gráfico de barras, pizza, linha, estoque
• remotion-best-practices/rules/light-leaks.md - Efeitos de sobreposição @remotion/light-leaks
• remotion-best-practices/rules/lottie.md - Integração @remotion/lottie
• remotion-best-practices/rules/text-animations.md - Padrões de animação de tipografia
• remotion-best-practices/rules/calculate-metadata.md - Metadados de composição dinâmicos
• remotion-best-practices/rules/voiceover.md - Narração por IA com ElevenLabs TTS
• remotion-best-practices/rules/parameters.md - Parametrização de esquema Zod
• remotion-best-practices/rules/ffmpeg.md - Operações FFmpeg para corte de vídeo

Fluxo de Trabalho (8 etapas + 4 gates de evidência)

Quatro gates de controle de qualidade baseados em evidências são executados dentro deste fluxo de trabalho — Auditoria de Ativos (Etapa 2.5), Evidência de Quadro por Ato (Etapa 4), Fiação de Loop Crítico (Etapa 7.5) e Divulgação Honesta (Etapa 8).