Filme de lançamento estilo Apple, construído em código
Cada pixel do Mac é desenhado em código: a barra de menus, o entalhe, os widgets e os papéis de parede. Um único arquivo HTML com window.seek(seconds), exportado para MP4.
Antes de começar: leia brand.md e MOTION.md se existirem. Caso contrário, execute brand-intake primeiro, ou peça códigos hexadecimais, uma fonte e um arquivo de logotipo. Nunca chame um resultado de 'on-brand' sem eles.
Combina com uma skill gratuita (não minha) que transforma as diretrizes de design da Apple em regras que o Claude segue. Instale-a uma vez:
npx skills add emilkowalski/skills --skill apple-design
Etapa 1: Peça cinco coisas, depois aguarde
- O nome do produto e sua frase de efeito, palavra por palavra.
- A lista de fatos. Cada recurso, número e requisito que o filme pode mostrar. Nada mais vai para a tela.
- As cenas. 6 a 8, cada uma com um recurso mais uma legenda curta. Exemplo: "Sua voz mora aqui."
- Uma referência (opcional): um filme de lançamento real do Mac ou quadros dele, em uma pasta chamada
ref. Define apenas o visual. - Tamanho e duração. Padrão 1920 x 1080, 30fps, cerca de 2,5 segundos por cena.
Etapa 2: Construir briefing (cole no Claude Code)
Use a skill apple-design. [Se ref/ existir: Combine o VISUAL da referência em ref/. Leia cada quadro primeiro. Não copie as palavras ou o nome do produto dela.]
É um filme de lançamento para [PRODUTO]: o entalhe preto do MacBook no centro superior se expande em widgets estilo Apple, uma cena de cada vez. Cada cena tem seu próprio papel de parede gradiente de cor sólida em tela cheia e uma legenda centralizada abaixo do entalhe, com a última palavra ou duas em um tom mais claro da cor do papel de parede. Abre com o entalhe expandido e a palavra "olá" escrita à mão em uma linha de script branca, como a tela de boas-vindas do Mac.
Use apenas estes fatos, e não adicione outros:
[LISTA DE FATOS]
Cenas, cerca de 2,5 segundos cada:
[1. Entalhe expandido em preto, "olá" escrito à mão.]
[2..n. Cor do papel de parede, em que o entalhe se abre, a legenda.]
[Última. Preto: o entalhe fecha até seu formato de repouso. Legenda: PRODUTO e sua frase de efeito.]
Tamanho [LARGURA] x [ALTURA], 30fps. O quadro é uma tela de Mac: uma barra de menus fina do macOS na parte superior com o entalhe no meio dela. Fontes do sistema (-apple-system, Helvetica Neue como fallback).
Construa como um único arquivo HTML autossuficiente com window.seek(segundos) que desenhe qualquer quadro exato. Capture um quadro de cada cena [e compare lado a lado com o quadro de referência correspondente]. Corrija o que diferir e verifique o movimento de acordo com a skill apple-design.
O que aprendi da maneira mais difícil
- Nomeie o entalhe em palavras. Dado o mesmo briefing, um modelo desenhou um laptop inteiro. "O entalhe no centro superior da tela" é a âncora.
- Molas, não tweens. O entalhe parece certo quando largura e altura usam molas com curvas próprias, abrem suavemente e fecham sem ultrapassar.
- Trabalhe o movimento desde o início do filme. Se o entalhe reabrir antes de terminar de fechar, ele continua de onde estava. Um tween por cena causa saltos.
- Compare com a referência, cena por cena. Quadros lado a lado pegaram um "olá" descentralizado e grande demais, uma barra de progresso grossa que deveria ser traços finos e um prompt enfiado na barra de menus.
- Mantenha a barra de menus curta. Um menu cheio de palavras é cortado ao meio por widgets largos. Cinco itens é suficiente.
- Widgets não acrescentam alegações. Texto placeholder são linhas cinzas. Qualquer palavra de interface que a lista de fatos não forneceu (rótulos de botão, horário de relógio) é listada de volta para aprovação.
Etapa 3: Verificar e exportar
Um estranho acreditaria que é um Mac de verdade no primeiro segundo? Cada palavra na tela vem da lista de fatos? Adicione uma configuração de movimento reduzido que substitua molas por desvanecimentos rápidos.
Exporte com HyperFrames (gratuito, código aberto): npx skills add heygen-com/hyperframes, depois npx hyperframes render. Para um corte vertical, passe o MP4 para reel-export.