Justice219/mobile-app-cinematic-video

Vídeo cinematográfico de aplicativo móvel

Transforme um fluxo de trabalho real de um aplicativo em um filme 3D dirigido usando o template de produção incluído com Three.js, Playwright, FFmpeg e Python. Este é um fluxo de trabalho de vídeo editável baseado em código, não um projeto do After Effects.

Comece pelo aplicativo e pela direção existente

• Inspecione as exportações existentes, o código-fonte do projeto, o feedback atual do usuário, o tema real em tempo de execução e os dados disponíveis do aplicativo antes de criar. Preserve as escolhas aprovadas. Para um novo projeto, estabeleça a funcionalidade demonstrada, o público, o formato e as capturas disponíveis.
• Capture componentes reais do aplicativo usando fixtures fictícias ou gravações autorizadas. Meça os alvos de toque reais, os deslocamentos de rolagem e os limites destacados. Nunca substitua o comportamento real da funcionalidade por telas inventadas e chame isso de autêntico. Rotule visualizações nativas encenadas na proveniência da entrega.
• Combine as cores em tempo de execução. A paleta de exemplo incluída é apenas um padrão; não é a marca de outro aplicativo. Modo escuro em todo o vídeo, texto editorial esparso e uma saída do telefone/revelação da marca são as preferências do projeto original, configuráveis quando o usuário solicitar o contrário.

Sequência de produção

Leia references/workflow.md para obter o método de produção e os detalhes frágeis de tempo/geometria. Leia references/capture.md ao criar ou atualizar capturas de tela. Leia references/timeline.md ao criar ações, posições da câmera, rolagem ou texto.

1. Para um novo projeto, execute python3 scripts/scaffold.py /absolute/new/project a partir desta pasta de skill. Ele copia assets/template e cria telas de demonstração sintéticas claramente rotuladas. Substitua essas telas antes de uma entrega real. Para um filme existente, edite o projeto diretamente, em vez de criar um novo scaffold.
2. No projeto gerado, instale as dependências Node/Python e o Chromium conforme documentado no README do repositório. Configure project.json a partir do tema real do aplicativo, fontes próprias opcionais e imagem/corte da marca. O renderizador atual tem como alvo 1080×1920 a 30 fps, com capturas de aplicativo CSS de 430×860 a DPR 3; alterar as proporções requer mudanças coordenadas de geometria e coordenadas.
3. Capture o fluxo de trabalho e escreva source/films.json. Use uma ação de câmera primária por vez, feedback tátil rápido e beats claros de configuração → ação → resultado. Mantenha a funcionalidade narrada visível quando falada. Use texto curto adicionado para ênfase; legendas laterais são uma entrega separada.
4. Escreva source/narration.json e gere a narração faltante com python3 source/narrate.py apenas quando a geração de voz for autorizada. Forneça ELEVENLABS_API_KEY e ELEVENLABS_VOICE_ID através do ambiente do processo. Armazene em cache o par MP3/alinhamento; nunca coloque segredos no código-fonte, capturas de tela, logs ou ZIPs. Solicitações pagas com falha param sem repetição automática. Use áudio em cache para iteração.
5. Use os timestamps de caractere retornados mais o deslocamento de mix de 0,65 segundos para direcionar destaques, toques, foco da câmera, texto e final. Renderize quadros de pré-visualização, inspecione-os e, em seguida, renderize o filme. O template suporta --preview, --only INDEX e --manifest PATH; mix/verificar/empacotar usam source/films.json.
6. Execute python3 source/mix.py. Prefira amostras autorizadas da biblioteca de som em assets/audio/sfx; amostras ausentes usam os fallbacks procedurais originais. Mantenha os efeitos inteligíveis sob a voz. O template alinha picos transitórios às ações e reduz os efeitos sob a narração.
7. Execute python3 source/verify.py, inspecione visualmente as transições críticas e os momentos narrados e ouça a mixagem final. As verificações automatizadas de quadro escuro/loudness não estabelecem que a funcionalidade correta está sendo mostrada. Revise as legendas e todo o texto prometido.
8. Execute python3 source/package.py após as exportações serem aprovadas. Inspecione o conteúdo explícito do arquivo e os direitos de mídia antes de compartilhar. Entregue MP4, SRT/VTT opcional, pré-visualizações, fonte editável e proveniência. A publicação, implantação e postagem permanecem dentro do escopo solicitado pelo usuário.

Preserve estas invariantes

• A textura do aplicativo usa sRGB e toneMapped:false; a iluminação da cena não deve recolorir o aplicativo.
• Destaques e pixels de rolagem usam a mesma interpolação de rolagem medida. Um atlas permanece ativo após a rolagem terminar; caso contrário, durações curtas de rolagem podem expor uma região em branco.
• O foco da câmera é calculado antes da transformação de saída para que a câmera não siga o telefone que está saindo. Inicie a revelação da marca prontamente durante a narração de encerramento; não deixe uma pausa morta.
• Partículas no espaço mundial têm teste de profundidade e dimensionamento de perspectiva. Mantenha-as subordinadas ao conteúdo do aplicativo.
• Use a GPU explicitamente no macOS (--enable-gpu --use-angle=metal), renderize tempos determinísticos frame / 30 e canalize quadros com backpressure para o FFmpeg.
• Não copie arquivos de credenciais, código-fonte proprietário de aplicativos, fontes/SFX sem licença ou dados do cliente para uma skill reutilizável ou repositório público.

O scripts/demo_audio.py opcional cria um tom sintético para um teste de fumaça do pipeline offline. Ele é explicitamente não narração e nunca deve ser apresentado como uma narração finalizada.