Composição launch estilo Apple

Vídeo de demonstração de produto estilo Apple

O alvo é uma página de produto apple.com que se move: fundo claro, SF Pro com grande tracking apertado, uma mensagem por vez na tela, cartões de cor sangria, a interface real do produto, SF Symbols reais, ícones de aplicativos reais, uma trilha sonora animada e uma simples chamada para valor no final. Construído como uma composição JSX do Diffusion Studio, cada quadro é determinístico e pode ser verificado antes da exportação.

Comece a partir de templates/promo-project/ ao lado deste arquivo (uma composição completa e funcional: um filme de lançamento de um utilitário de tela de bloqueio do Mac). Leia BRIEF.md e POSITIONING.md para ver a forma final.

Estilo de trabalho

• O feedback chega como marcadores concisos, muitas vezes com capturas de tela dos quadros desejados. Faça todos; verifique cada um por captura; exporte; responda com uma folha de contato de quadros.
• Quando solicitado a fazer brainstorm, liste 3–4 opções em uma linha cada, depois construa a melhor sem esperar.
• Mantenha BRIEF.md (tabela de batidas com tempos e texto) e POSITIONING.md (justificativa do texto com fontes) atualizados a cada rodada.
• Nunca invente provas: sem contagens de usuários, citações ou logotipos inventados. Capturas de tela reais, strings de texto reais da fonte do produto, ícones reais.
• Relate fielmente: diga o que foi verificado por captura e o que não foi.

Estrutura

Uma mensagem por cartão, cortes secos de cada lado, uma tomada de demonstração do produto entre os cartões quando existir. Os cortes devem coincidir com a grade de batidas da música.

1. Gancho, 3 s para parar a rolagem — o problema do espectador, produto em ação, sem logotipo. Um cartão por caso de uso: uma janela + uma linha, o par centralizado como um grupo no meio do quadro. Cubra todos os casos de uso listados no site, não apenas a persona principal ("Seu agente precisa de mais três horas." / "Sua renderização precisa de quarenta minutos." / "Sua build está na metade." / "Você precisa sair.").
2. Problema — um cartão apenas com texto, as alternativas ruins empilhadas no meio do quadro, o custo em vermelho ("Bloquear? O Mac dorme.").
3. Revelação — o ícone aparece em um hit da música, marca nominativa, a linha de herói do próprio site (combinação de mensagem com a página inicial).
4. Grade "Feito para" — os casos de uso do site como 4 blocos: círculo colorido com um SF Symbol, título, ícones de aplicativos reais abaixo. Sem subtexto.
5. Demonstração — a interface real fazendo a única ação, legendas logo abaixo da ação, palavras-chave destacadas.
6. Cartões de recurso — benefício como título, recurso como subtítulo. Azul / ardósia com granulado / verde / preto com texto gradiente / cinza página. Mostre, não conte: um relógio avançando pela noite, teclas carimbadas com "✕ Bloqueado" em vermelho, notificações chegando na tela de bloqueio.
7. Resultado — volte ao trabalho concluído, todas as tarefas feitas.
8. Grade de mais recursos — 4 blocos, uma linha curta cada.
9. Confiança — "Sem nuvem. Sem rastreamento. Sem assinatura."
10. Encerramento — ícone + nome, "Experimente grátis por 7 dias.", "Depois $8,99, uma vez.", o URL. Nada mais.

Duração aproximada de 45 s. Cartões de gancho ≈ 1,3 s, cartões de texto ≈ 2 s, demonstrações 1,6–2,8 s, grades ≈ 3,4 s, encerramento ≈ 7 s. Ritmo acelerado, mas cada tela permanece tempo suficiente para leitura.

Aparência

Tokens em references/design.md. Resumindo:

• Fundo da página #f5f5f7, texto #1d1d1f, secundário #6e6e73, acento = azul do produto, vermelho do sistema #ff3b30 para custos e glifo Touch ID, verde do sistema para sucesso. Apenas modo claro.
• SF Pro via -apple-system; títulos 76–120 px, peso 600–700, espaçamento entre letras −0,03 a −0,04 em; SF Pro Rounded para relógios.
• Cartões gradiente sangria (azul, verde, ardósia com granulado SVG, preto com texto mono recortado por gradiente) no espírito das páginas de produto apple.com.
• Superfícies Liquid Glass: branco translúcido, borda iluminada, formas de cápsula, sombra suave ampla, desfoque de fundo. Interface do produto reconstruída a partir de sua própria fonte com os mesmos tamanhos, pesos e texto.
• SF Symbols reais renderizados a partir do macOS (tools/render-symbols.swift); ícones de aplicativos reais extraídos de aplicativos instalados. Destaque palavras com **…** através de Rich.tsx.
• Texto centralizado; uma janela e sua linha se movem como um grupo centralizado. Nunca altere o texto na parte inferior enquanto algo anima na parte superior; coloque legendas ao lado da ação e atrase outro movimento até que a linha tenha se estabelecido.

Texto

Princípios com fontes em references/copy.md. Regras:

• Palavras simples, linhas curtas, sem subtexto a menos que carregue um fato.
• Título totalmente descritivo do que o produto faz; reutilize o do site.
• Números específicos ("três horas a mais", "340 testes", "2:06 AM").
• Benefício primeiro, recurso como prova; lide com as objeções que impedem um comprador (privacidade, bloqueio, preço, "isso se encaixa no meu caso").
• CTA é uma chamada para valor com o preço ao lado.

Áudio

Componha a base em código (tools/make-music.py, numpy + ffmpeg): 126 BPM, batida a cada batida e palma em 2/4 a partir do primeiro compasso, arpejo dedilhado, sub, pad; subida + impacto na revelação e no bloqueio; pausa no desbloqueio; resolução sob o encerramento; um tique suave em cada corte de cartão. Os momentos são parâmetros no topo do script; reajuste-os sempre que o corte mudar. Use os sons reais do sistema do produto onde existirem. Nenhuma música licenciada.

Fluxo de trabalho

1. Leia o site e a fonte do produto para casos de uso, strings de texto, capturas de interface, ícones. Leia references/copy.md.
2. Escreva BRIEF.md e POSITIONING.md.
3. Copie templates/promo-project/; defina ROOT em src/theme.ts.
4. Construa a linha do tempo primeiro (src/timeline.ts: momentos, texto, tweens), depois os cartões, depois as demonstrações. Regere a música para os momentos.
5. Verifique: dapi check, depois dapi capture folhas de contato de cada batida; leia-as; corrija; só então dapi export. Examine o MP4 (duração, pico de áudio) e organize quadros de amostra para a resposta.
6. Detalhes do pipeline e pegadinhas do rasterizador: references/pipeline.md.