O que App 3D video faz?
Visão geral
Um vídeo vertical de 20 s renderizado inteiramente neste Mac: um iPhone realista em SceneKit em um mundo marfim claro, o mascote do app como um personagem que pula e pressiona a interface real, manchetes com valor em destaque, e uma trilha sonora original em swing que sincroniza cada salto com uma nota de marimba. template/ é um projeto de exemplo completo (um app de lembrete de medicamentos chamado "MyApp") e funciona como está. Altere a história, interface, dados, marca e música; mantenha o visual a menos que o usuário peça o contrário.
SUB-SKILL OBRIGATÓRIA: motion-video (motor, planejamento de grade de batidas, revisão de stills). Cada valor (paleta, tamanhos, luz, música, armadilhas, segundos dispositivos, real vs ilustrativo) está em reference.md ao lado deste arquivo.
Onde as duas skills diferem, esta prevalece: copie template/, execute bash mv3d.sh (não mv.sh), e os saltos, brilhos e confetes do mascote fazem parte do visual, mesmo que o preset de saúde da motion-video os evite. A interface que carrega dados ainda apenas mergulha e aparece; o mascote é quem pula.
Comece pelo template
cp -R ~/.claude/skills/app-3d-video/template ~/Movies/MotionVideo/<slug>
cd ~/Movies/MotionVideo/<slug>
bash mv3d.sh audio # score.swift -> music.wav, imprime níveis; execute antes dos stills
bash mv3d.sh stills 0.5,4.6,10.1 # BEATS -> stills/ + sheet.png
bash mv3d.sh video # out.mp4, cerca de 5 min para 20 s com um telefone: execute em segundo plano
bash mv3d.sh frames out.mp4 2.5,6.3 # SECONDS -> check/ + check_sheet.png
A marca reside no bloco BRAND no início de scenes.swift: APP_NAME (marca no cartão final), APP_VERSION (o número 3D; re-verifique seu tamanho e posição nos stills quando o comprimento mudar), LABEL (pequeno rótulo sobre a primeira manchete), END_PILL (pílula gradiente no cartão final) e as cores do mascote. Em seguida, substitua cada chamada headline(...) em render(), os comentários do cabeçalho e plan.md. "COMING IN …" e "COMING SOON" são textos de teaser; para um lançamento, pergunte ao usuário pelo rótulo e texto do cartão final.
As cenas de exemplo (cartão de Atividade ao Vivo, widget de Tela de Bloqueio, papel de parede de caixa de pílulas semanal) pertencem ao app exemplo. Substitua-as pela interface do próprio usuário, mantendo as técnicas: canvases 2D por quadro mapeados na tela do telefone, o mascote em pé e pressionando elementos, lapsos de tempo acionados por um único clock.
Fluxo de trabalho
- Fatos. Leia o repositório do usuário para cada recurso: textos reais, layout, paleta, estados, bloqueio de plano pago, cores do ícone do app (que se tornam as do mascote). Pergunte o que o código não pode responder (quais recursos, nomes exatos, gratuito ou pago, teaser ou lançamento, duração; padrão 20 s vertical). Um recurso sem interface no repositório ainda: peça um design ou captura de tela. Sem um, desenhe a partir do sistema de design do app, liste-o como ilustrativo e mostre-o na primeira folha de stills.
- Mascote. O padrão é a cápsula de dois tons nas cores da marca do app. Se o app tem seu próprio mascote ou uma forma de ícone simples, construa-a a partir de primitivas do SceneKit em
buildCapsule()(mantenhaCAP_HALF, o tamanho unitário e a lista de materiais para que sombras e as duas passagens ainda funcionem). - Plano
plan.mdna grade de batidas (96 BPM swing, 8 compassos = 20 s). Um recurso = uma interação do mascote com sua interface real. Uma manhã, um conjunto de dados, um clock. O telefone é o palco; um segundo dispositivo (Watch, iPad) só entra para um recurso que existe ali (reference.md, "Segundo dispositivo"). Liste real vs ilustrativo. - Cópia. Manchete = o que o usuário obtém, nunca um nome de recurso. Um chip PRO na linha secundária para itens pagos. Se uma skill de humanização estiver instalada, execute-a em cada linha, depois re-verifique os fatos.
- Trilha. Mantenha o som (ukulele, marimba, assobio, estalos, Mi maior, o chimido sintético no downbeat do cartão final) mas escreva novos acordes, melodia e hits para a nova coreografia: cada aterrissagem é uma nota de marimba em sua batida visual. Se o app tem seu próprio som de notificação, ele pode substituir o chimido sintético (veja o final de
score.swift); combine a tonalidade da trilha com ele (motion-videoreferences/score-guide.md). Se o usuário pedir música diferente, mude também os instrumentos. Alvo −13…−15 dBFS, 0 % de clipping. - Stills, mínimo duas rodadas, incluindo batidas de meio de salto. Verifique: o mascote nunca cobre informações, ele pausa no que pressiona, sombras são visíveis, o topo do telefone fica abaixo da manchete, nada aparece através do texto, e nenhuma cor real da interface briga com a manchete laranja.
- Renderize em segundo plano, depois
framesno MP4 e examine-os. - Entregue em
~/Downloads/<App>_<Topic>_3D_<N>s[_vN].mp4e envie ou mostre o arquivo ao usuário. Relate batida por batida em segundos, real vs ilustrativo, e que o áudio foi julgado por medição. Mantenha versões anteriores emv1/. Mantenha o vídeo em um idioma até que o usuário o aprove; cada local extra é uma re-renderização completa, então pergunte quais locais eles desejam.
Contrato visual
- Mundo marfim/aveia com sol suave. Sem fundo de estúdio escuro, sem rosa saturado.
- Telefone titânio neutro, papel de parede bege estilo foto, relógio tinta escura, paletas claras para cartões na tela.
- Manchetes SF Pro Rounded bold; linha 2 é o gradiente laranja.
- O mascote interage (aterrissa, pisa, cabeçadas, pula através de elementos). Nunca apenas orbita ou posa.
- Sombras suaves reais. Sem DOF, sem bloom.
Erros comuns
| Erro | Correção |
|---|---|
Passar batidas para frames ou segundos para stills | frames = segundos, stills = batidas (20 s = 32 batidas) |
| Mascote sai de um botão no instante em que aterrissa | Permanecer cerca de 0,2 batida para que a pressão seja lida |
| Mascote fica em cima do horário ou rótulo | Coloque-o ao lado da informação que cobriria |
Desvanecer uma malha com opacity | Mova, escale ou esconda-a |
| Cor da marca conflita com o gradiente laranja da manchete | Mantenha a marca no mascote e número de versão; mude o gradiente da manchete apenas se o usuário pedir |