codeswithroh/motion-lab

Motion Lab

Uma peça de movimento dirigida: cada adjetivo se torna um número, cada acompanhamento é uma nota medida, e o filme mostra o mecanismo real funcionando. Construção de referência: examples/cofoundr/ nesta skill (SPEC.md, compositions/, REVIEW.md, preview.mp4). Leia antes da sua primeira construção em uma sessão.

Carregue hyperframes para o contrato de renderização, então siga estes passos. As regras de hyperframes vencem no formato; esta skill vence em história, aparência e processo.

1. Leia a fonte

Antes de escrever qualquer coisa, leia o assunto em si: repositório, README, a rota principal ou arquivo de pipeline, preços, o site ao vivo. Extraia:

• o mecanismo: os passos reais em ordem (nomes de funções, chamadas de API, estágios).
• os números reais: tamanhos de datasets, contagens, pesos, tempos, limites. Nunca invente um. Um valor que a fonte não fornece ou é cortado ou marcado como ilustrativo no REVIEW.md.
• a marca: hex do accent, segunda cor, SVG do logotipo, fontes, qualquer arquivo de estilo bloqueado.
• um detalhe surpreendente que um desenvolvedor citaria (um clamp, uma cadeia de fallback, um bug que foi lançado).

Se a pessoa nomear uma tecnologia que a fonte não usa (um patrocinador, uma ferramenta de um tweet), não a desenhe. Diga isso e pergunte para que serve.

2. Escreva SPEC.md (o prompt dirigido)

O prompt vago ("legal, premium, moderno") ganha azul marinho escuro, anéis brilhantes, partículas e um slogan inventado. O prompt dirigido ganha o filme. Escreva SPEC.md na raiz do projeto a partir de references/spec-template.md. Cada linha é um número:

• GOAL, OUTPUT (1080x1080, 60 fps padrão para X), TIME (segundos x 60 = quadros).
• LOOK: fundo, tinta, tinta suave, cor da regra, accent e o que significa, faces display e body com tamanhos em px e tracking, raio do card e sombra.
• OBJECTS: toda coisa que o espectador deve reconhecer, extraída da UI real do produto.
• MOTION: eases por função, durações e staggers em quadros (references/numbers.md).
• SHOTS: intervalos de quadros, um movimento herói cada, o que o espectador lê, a passagem para o próximo shot.
• BANNED e QA (os quadros para verificar e o que cada um deve mostrar).

3. Forma da história (o que fez o filme cofoundr funcionar)

1. Gancho no quadro 0. O primeiro quadro é a miniatura. A linha do gancho já está nela, na serifa display, alinhada à esquerda, uma palavra no accent. Uma grande forma da marca está ao lado. Exemplo: "i couldn't find a cofounder." com o círculo azul.
2. Um exemplo prático percorre todo o mecanismo. Uma entrada real (a URL do LinkedIn do usuário, uma consulta real) entra em um card de produto e se move por cada estágio. A forma do gancho carrega para o card (vira o avatar), então o espectador nunca perde o fio.
3. Um trilho de estágios na parte superior nomeia os estágios reais ("enriquecer você, pesquisar 700M, pontuar 30, escrever intros") e acende cada nó à medida que a imagem o alcança. Este é o diagrama de arquitetura, embutido no filme.
4. Cada estágio ganha sua própria forma de imagem: um campo digitado, um campo de pontos estreitando de 700M para 30, barras ordenando por pontuação com o top 10 mantido no accent, um card de resultado digitando sua saída. Linhas semelhantes nunca ganham a mesma imagem.
5. Recompensa = o logotipo significando algo. As duas formas (você e a correspondência) deslizam juntas no logotipo, o wordmark aparece, uma linha com os números-chave. Segure por 2 s+, completamente parado.

Duração 15-17 s. Menos de 15 s se a pessoa quiser um loop.

4. Aparência

Padrão para o shell do aplicativo claro do próprio produto, não um vazio escuro: fundo como #f0f2f8, cards brancos raio 28 com 0 18px 40px rgba(15,23,42,.08), tinta #0f172a, suave #64748b. Display: a serifa da marca (baixe para assets/fonts/, @font-face em cada cena que a usa). Body: Inter 500/700. Texto lido a 28 px no mínimo. O accent marca um foco por quadro.

Proibido: vazio azul marinho escuro, brilho, bloom, neon, partículas, gradientes roxo/azul, cards de vidro, rótulos monoespaçados em caps, chips de pílula, tudo centralizado, todo elemento aparecendo, títulos que derivam depois de aterrissar, o logotipo ancorado em um canto, três cards em uma linha, grades de KPI, rostos ou nomes de pessoas reais como candidatos falsos.

5. Construção

• npx hyperframes init <dir> em <slug>-video/. O index.html raiz monta 3 cenas: hook, a cena do mecanismo (um enquadramento contínuo enquanto a UI age), payoff.
• Semeie todo aleatório (mulberry32). Pontos e barras gerados são filhos de uma cena temporizada.
• fromTo para cada tween; immediateRender: false em fromTo repetido do mesmo alvo após o primeiro.
• Mantenha um helper de mudança de tempo (const at = (t) => t + …) na cena do mecanismo, para que um retime seja uma linha, não vinte.
• Cópia que pode mudar (a URL, o título) vai em variáveis de composição.

6. O loop do laboratório (acompanhamentos com recibos)

Nunca confie na primeira construção. Após cada passagem:

1. npx hyperframes check --json; corrija todo erro. line_unread significa segurar a linha por mais tempo (0,5 s + 0,3 s por palavra) ou cortar palavras; nunca encolha o tipo.
2. npx hyperframes snapshot --at <meio e fim de cada shot> e leia o contact sheet.
3. Escreva cada problema como um acompanhamento numerado com números, da forma que a referência os imprime: "a tag de necessidade está na tela 0,56 s, mínimo 1,27 s: aterre-a em 0,9 s e desloque tudo depois de 1,6 s em +0,6 s". Registre-os em REVIEW.md.
4. Após renderizar, extraia quadros de costura do próprio MP4 (ffmpeg -vf "select='eq(n\,F1)+eq(n\,F2)',scale=360:-1,tile=Nx1") e olhe para eles.

7. Música

Use a faixa que o usuário fornecer (copie para assets/audio/). Sem uma, peça uma, ou ofereça uma trilha sintetizada em código a partir de números de quadro (references/sound.md).

1. python3 scripts/find_drop.py <faixa> imprime o mapa de loudness e os maiores drops com seu onset exato e as batidas ao redor.
2. Escolha o momento herói do filme (as formas do logotipo se tocando, o resultado aterrissando). Calcule o quadro em que isso realmente acontece (para back.out(1.4) as formas se tocam em ~23% do tween).
3. data-media-start = onset do drop − tempo do herói, ajustado para a batida mais próxima para que o filme comece em uma. O som aterrissa 0-1 quadro após a imagem, nunca antes.
4. <audio id="music" class="clip" data-start="0" data-duration="<filme>" data-media-start="…" data-volume="1" data-fade-in="0.05" data-fade-out="1.2">.
5. Renderize, então meça: npx hyperframes audio <mp4> --json deve mostrar um onset dentro de um quadro do quadro herói; loudness −16 a −14 LUFS, pico verdadeiro ≤ −1 dBTP. Diga que foi medido, não ouvido.

8. Entrega

• npx hyperframes render -f 60 -q delivery -o renders/<slug>.mp4, depois ffprobe para tamanho, fps e contagem de quadros.
• Envie o MP4 para o usuário.
• REVIEW.md: decisões criativas, o que foi medido, a batida mais fraca, avisos mantidos de propósito.
• Esboce o post na voz do usuário (padrão: minúsculas, gancho primeiro, linhas curtas, o mecanismo como passos >, um detalhe real do código, sem palavras de hype). Nunca publique.