Communitygithub.com

App 3D video

Cria vídeos promocionais 3D para apps iOS com iPhone realista em SceneKit, mascote animado e trilha sonora original.

O que é App 3D video?

Esta skill gera vídeos verticais de 20 segundos totalmente renderizados no Mac, utilizando um iPhone 3D realista em SceneKit em um ambiente claro e sofisticado. O mascote do app interage com a interface real do usuário, pulando, pressionando elementos e acionando recursos, enquanto uma trilha sonora original sincronizada com os movimentos completa a experiência. A partir de um template completo (exemplo 'MyApp'), o usuário pode customizar roteiro, interface, dados, marca e música, mantendo a estética visual definida. A skill é complementar à 'motion-video' e requer seu uso conjunto para planejamento de batidas e revisão de stills. O fluxo de trabalho inclui análise do repositório do app, criação de planos no beat grid, composição musical, renderização em múltiplas rodadas e entrega final em MP4.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/huypham85/app-3d-video-skill/tree/HEAD/app-3d-video

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

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

  1. 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.
  2. 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() (mantenha CAP_HALF, o tamanho unitário e a lista de materiais para que sombras e as duas passagens ainda funcionem).
  3. Plano plan.md na 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.
  4. 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.
  5. 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-video references/score-guide.md). Se o usuário pedir música diferente, mude também os instrumentos. Alvo −13…−15 dBFS, 0 % de clipping.
  6. 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.
  7. Renderize em segundo plano, depois frames no MP4 e examine-os.
  8. Entregue em ~/Downloads/<App>_<Topic>_3D_<N>s[_vN].mp4 e 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 em v1/. 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

ErroCorreção
Passar batidas para frames ou segundos para stillsframes = segundos, stills = batidas (20 s = 32 batidas)
Mascote sai de um botão no instante em que aterrissaPermanecer cerca de 0,2 batida para que a pressão seja lida
Mascote fica em cima do horário ou rótuloColoque-o ao lado da informação que cobriria
Desvanecer uma malha com opacityMova, escale ou esconda-a
Cor da marca conflita com o gradiente laranja da mancheteMantenha a marca no mascote e número de versão; mude o gradiente da manchete apenas se o usuário pedir

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Habilidades Relacionadas