Vídeo promocional do app (Remotion + iPhone real + UI real)
Este método foi desenvolvido em quatro pequenos aplicativos iOS (Unblock, Talljakt, Georama e Quiz) e foi escrito para ser repetido para qualquer aplicativo. Tudo que é específico do aplicativo fica em examples/. As partes reutilizáveis ficam em templates/. Técnicas detalhadas, armadilhas e variáveis ajustáveis estão em references/techniques.md. Leia antes de construir.
Idioma: fale com o usuário no idioma que ele usar. Se ele começar em norueguês, responda em norueguês. O idioma do texto no vídeo é uma escolha separada (pergunta 3 abaixo).
0. Entrevista primeiro (curta)
Faça estas perguntas juntas (AskUserQuestion ou uma única mensagem). Sugira padrões para que o usuário possa responder apenas "padrão":
- Duração: 20–60 s. Padrão ~30 s.
- Formato: 9:16 vertical 1080×1920. Padrão 60 fps. Também 1:1 ou 16:9?
- Idioma do texto na tela.
- Uso: compartilhamento privado, redes sociais (Reels/TikTok, zonas seguras) ou pré-visualização na App Store. As pré-visualizações da App Store devem ser gravações reais, no máximo 30 s, sem efeitos 3D inventados, então este método não é adequado para elas.
- Quanto da interface sai da tela: nenhum (discreto: gravações reais, zoom de foco e transições próprias do app apenas, veja
examples/kjop), sutil (um ou dois momentos heróicos), médio ou completo (tudo sai). O padrão é sutil a médio; nenhum é adequado para aplicativos cotidianos simples (listas, formulários, configurações). Completo é adequado para aplicativos cujas peças são objetos físicos naturais (peças de jogo); para apps comuns (listas, formulários, cartões), levante apenas 1–3 elementos-chave e mantenha o resto na tela. - Liberdade criativa: o agente deve criar o conceito?
- Música: gerada em código (padrão, sem licença necessária) ou uma trilha própria do usuário? Dê a cada aplicativo sua própria paleta sonora para que dois vídeos nunca soem iguais (veja
references/techniques.md#sound). - Quais funcionalidades mostrar (3–5), e qual é o elemento ou momento "herói" do aplicativo?
- Final: duas opções comprovadas; escolha de acordo com o app e pergunte se não estiver claro. (a) Um logotipo montado a partir dos próprios elementos do app (Unblock: o logotipo se monta a partir de peças 3D, a peça de latão pousa por último). (b) A tela inicial no telefone com um slogan acima, onde o ícone + nome são a última linha (Talljakt: "Seis números. / Um alvo. / [ícone] Talljakt.").
- Cor do telefone: laranja cósmico, azul profundo ou prata. Escolha a que combina com a cor de destaque do aplicativo.
As respostas orientam principalmente o conceito, quanto sai da tela, o andamento (bpm) e as cores.
0a. Verificação pré-voo: confira as ferramentas
Antes de construir qualquer coisa, verifique o que está instalado e relate em uma lista curta. Ofereça-se para instalar o que estiver faltando e instale somente após o usuário dizer sim (são alterações no sistema). Pule o que já estiver presente.
| Ferramenta | Verificar | Instalar |
|---|---|---|
| Xcode + ferramentas de linha de comando | xcodebuild -version, xcode-select -p | App Store (Xcode), depois xcode-select --install |
| Runtime do simulador iOS com um tipo de dispositivo iPhone 17 Pro | xcrun simctl list runtimes, `xcrun simctl list devicetypes | grep "iPhone 17 Pro"` |
| baguette | baguette --version | brew install baguette |
| Blender | ls /Applications/Blender.app | brew install --cask blender |
| Node 22 | node --version | nvm install 22 (ou brew install node@22) |
| ffmpeg | ffmpeg -version | brew install ffmpeg |
| Python 3 + Pillow | python3 -c "import PIL" | python3 -m pip install --user pillow |
| Homebrew (para os acima) | brew --version | o script de instalação oficial do brew.sh, executado pelo usuário |
Em seguida, configure o projeto Remotion (references/techniques.md#setup) e converta o modelo do iPhone uma vez (passo 6 abaixo). Ambos são locais ao projeto e não precisam de permissão extra além de trabalhar no repositório.
0b. Pasta de entrega (uma vez por Mac)
Os vídeos finalizados são entregues em uma pasta fixa na máquina, não apenas no out/ do projeto. A escolha é armazenada por Mac em ~/.config/app-promo/destination (uma linha, caminho completo).
- Leia o arquivo no início. Se existir, use a pasta sem perguntar.
- Se estiver faltando, pergunte uma vez (AskUserQuestion):
~/Movies/App Promos(recomendado), a pastaout/do projeto, a Área de Trabalho ou um caminho personalizado. Crie a pasta e escreva o caminho em~/.config/app-promo/destination. - O usuário pode mudá-lo a qualquer momento pedindo; atualize o arquivo.
1. Fluxo de trabalho
- Leia o aplicativo. README, tokens de cor (procure
Color(,hex, structs de tema), fontes, textos. Use o texto original do app no vídeo onde for bom. - Encontre pontos de entrada de depuração para mostrar estados sem jogar: argumentos de inicialização (
--design-*), esquemas de URL (myapp://design-home?state=…) ou fixtures. Se não houver, pergunte antes de adicionar ganchos apenas para DEBUG no app. - Compile e instale em um simulador dedicado iPhone 17 Pro. As capturas de tela devem ter 1206×2622 ou não corresponderão à tela do modelo do telefone. Veja
references/techniques.md#simulator. 3b. Para gravações de tela reais: leia references/recording.md. Prepare a cena e os pontos de toque primeiro, grave takes curtos sem inspeção da interface, builds ou análise de vídeo durante a gravação, e verifique o tempo bruto antes do Remotion. Um único take contínuo de um fluxo inteiro (como emexamples/quiz) mantém todos os números, barras de progresso e histórico consistentes. - Tire capturas de tela de cada estado. Para sequências estáticas/recortadas, reproduza com toques reais e tire capturas após cada toque (veja
references/consistency.md). Para vídeo, faça essa inspeção em um ensaio separado, nunca durante o take final. Trave a barra de status (9:41, 100%, descarregando, ou um indicador de carregamento verde aparece). Obtenha os quadros dos elementos combaguette describe-ui. - Recorte os elementos da interface com um
tools/prep_<app>.pyespecífico do app que usatemplates/tools/prep_helpers.py: sprites, fundos vazios e um JSON de retângulos. Verifique cada conjunto visualmente (composição sobre magenta). - Converta o modelo do iPhone do baguette (USDZ) para GLB com Blender (
templates/tools/convert_model.py). - Configure o projeto Remotion, ou reutilize um: copie
templates/src/three/*,Title.tsx,brand.ts,remotion.config.ts,tools/sheet.shetools/prep_helpers.py. - Escreva uma folha de batidas (
timeline.json) em quadros em uma grade de bpm (120 bpm a 60 fps = 30 quadros por batida). A imagem e o som leem este arquivo. - Construa as cenas como um "take único" contínuo: a câmera fica parada e o suporte do telefone se move. As mudanças de tela são ocultadas por uma transição: um giro, a navegação própria do app, um zoom ou wipe a partir de um elemento, um push, flip, whip pan, match cut ou avanço rápido. Varie-as, no máximo dois giros por vídeo. Veja
references/techniques.md#transitions. - Itere com folhas de contato (
tools/sheet.sh f1 f2 …) de quadros-chave. Olhe para elas. Renderize o vídeo completo (rápido: ~1–2 min para 30 s). - Ponto de verificação: mostre ao usuário os primeiros ~12 s antes de construir o resto.
- Gere a trilha sonora (
tools/<app>_audio.mjs, copiado de um exemplo) a partir da mesma linha do tempo. Renderize, meça o volume (ffmpeg -af ebur128, mire em −14 a −16 LUFS) e abra o arquivo para o usuário.
12b. Verificação de consistência (obrigatória antes da entrega). Uma incompatibilidade entre o que está na tela do telefone e o que é destacado fora dela parece um artefato de IA. Passe por references/consistency.md e renderize folhas de contato ±2 quadros em torno de cada transição, mudança de tela e levantamento.
13. Texto para compartilhar: escreva um texto curto para colar onde o vídeo for compartilhado (formato abaixo). Copie para a área de transferência (pbcopy) e mostre na resposta em um bloco de código. Não salve como arquivo.
14. Entregue: copie a renderização aprovada mais recente para a pasta de entrega (0b) como <App> promo.mp4. Sobrescreva a entrega anterior para o mesmo aplicativo; o histórico de versões (-v2, -v3 …) fica em out/. Forneça o caminho do arquivo entregue na resposta.
Formato do texto para compartilhar
O texto geralmente é postado no Slack, então use a formatação do Slack (mrkdwn): um título em negrito com asteriscos simples e marcadores com "• " (um "- " colado não se torna uma lista). Escreva no idioma do vídeo.
*<App> – <Tagline em 2–4 frases/palavras curtas, idealmente a do vídeo>.*
<Uma frase: o que é o app, para quem ou o quê.>
• <Ponto: a ação central, concreta e ativa>
• <Ponto: as escolhas que o app oferece (tópicos, modos, área, ritmo …)>
• <Ponto: …>
• <Ponto: recompensa/compartilhamento/o que o torna especial>
Regras: 4–5 pontos, sem ponto final no final dos pontos, dirija-se diretamente ao leitor, verbos concretos, sem clichês de marketing. Comece com como o app é realmente usado: os primeiros 2–3 pontos explicam a mecânica concretamente antes das opções e extras. Em seguida, descreva o que o app permite que você faça, não apenas o que o vídeo mostra: agrupe as opções por ponto ("Pratique países, capitais ou bandeiras") para que o leitor veja o alcance. Use os nomes próprios do app para as coisas e verifique no código o que cada modo realmente faz (READMEs ficam desatualizados). Veja examples/*/share.txt.
2. Um modelo de conceito que funcionou
Um herói, um movimento que amarra tudo, o texto original do app:
| Parte | Unblock | Geral |
|---|---|---|
| Gancho 0–2,5 s | Peças caem em um tabuleiro flutuando no escuro, sem telefone. "Preso." | O problema que o app resolve, mostrado com os elementos do próprio app, sem o telefone |
| Revelação | O telefone se constrói ao redor do tabuleiro enquanto a câmera recua | O mesmo elemento acaba por estar dentro do app |
| Ciclo principal | 4 movimentos na batida, um contador fora da tela | A ação principal em 3–4 batidas |
| Momento herói | O herói sai da tela e voa em direção à câmera, flash dourado | UM grande momento (um efeito fora da tela, ou a melhor animação própria do app em câmera lenta) |
| Recompensa | Tela de resultado, estrelas 3D saltam | A recompensa ou resultado |
| Funcionalidades (transições variadas entre elas) | Seletor de nível, cartão diário, pontuação | 2–3 funcionalidades, cada uma com um elemento destacado |
| Final | Logotipo construído a partir de peças 3D, tagline | Logotipo a partir dos elementos do app, ou a tela inicial com slogan + nome |
Se o app tem uma animação verdadeiramente boa própria (Quiz: o botão "Mostrar resposta" rasgando em Errado/Certo), faça dela o herói: zoom aproximado, desacelere com uma rampa de velocidade, dê seu próprio som e não a legendas.
2b. Dispositivos visuais de bons promos de apps
Bons exemplos usam a tela e o conteúdo, não apenas o layout. Planeje pelo menos 3–4 destes por vídeo:
- Corte a tela: aproxime-se o suficiente para que apenas uma parte apareça (um timer, uma linha de botões, uma equação). O telefone é cortado pela borda do quadro. Use poses de
focus. - Cartões de conteúdo ao lado ou na frente do telefone: cartões ou pôsteres reais do app (cartão de compartilhamento, cartão de resultado, sugestão) como planos planos, ligeiramente rotacionados atrás ou na frente do telefone.
- Vários cartões de conteúdo de uma vez: espalhe 3–5 variantes (páginas, soluções, pôsteres).
- Vários dispositivos: dois telefones lado a lado quando a história é de compartilhamento ou "o mesmo para todos", com chips de nome acima. Telefone + Watch/iPad se o app suportar (baguette tem modelos de iPad e Watch).
- Os elementos do app como decoração: peças reais, botões, chips ou ícones à deriva no fundo (desfocados = distantes), ou ampliados em tipografia acima do telefone. Um motivo temático (linha de pulso, traço de giz, papel quadriculado).
- O que o app produz, como objeto: a impressão, o pôster, o cartão, de preferência sem o telefone.
- Balões de fala ou pensamento para coisas que acontecem fora do telefone (Quiz: a resposta falada aparece ao lado do cartão, depois cai no botão Certo/Errado para "pressioná-lo").
2c. Texto e enquadramento
- Títulos grandes centralizados no topo carregam a mensagem: 2–4 palavras por linha, no máximo duas linhas, a segunda linha ou palavra-chave na cor de destaque.
- Legendas pequenas na parte inferior, com moderação, apenas quando o título precisar de esclarecimento (2–3 vezes em um vídeo de 30 s). Elas devem ser legíveis: pelo menos ~50 px, em um chip com fundo claro e sombra (não texto solto), colocadas baixo para nunca cruzar o quadro do telefone, visíveis por pelo menos 2 s.
- Apenas afirme o que o app realmente faz. Verifique o que uma funcionalidade realmente é antes de escrever sobre ela.
- Cartões de texto em tela cheia são suportados: uma superfície colorida (a cor primária do app) com um título grande centralizado de duas linhas, que entra em cena a partir do elemento que estava em foco e sai deslizando para a próxima cena. Use um como pausa ou ponte antes do final, idealmente uma pergunta que desafie o espectador ("Você consegue encontrá-lo a tempo?"). Não pule diretamente da ação intensa para a tela final. Veja
QuestionCardemexamples/talljakteexamples/quiz. - Sem ícone e nome fixos do app no canto. Mostre o nome apenas no final, no logotipo ou como a última linha do slogan.
- Mantenha o quadro limpo: uma ideia por cena. Se uma funcionalidade tiver pouco para mostrar (uma configuração), trabalhe-a como legenda ou um foco curto em outra cena, em vez de dar a ela uma cena própria. Evite título + telefone com zoom + uma fileira de elementos + legenda ao mesmo tempo.
- Andamento: sem tempo morto. Toda cena tem um evento dentro de ~1 s de começar, e nenhum título fica sobre uma tela estática por mais de ~1,5 s. Etapas que se repetem (perguntas 2–13 de um quiz) podem ser aceleradas.
- Mostre escolhas como ação, não como texto. Se o app tem modos ou configurações, mostre o padrão sendo selecionado (o cartão levanta um pouco), um toque na alternativa (ela levanta, a tela muda de estado) e, em seguida, um toque em iniciar que leva a esse modo.
- Interações que de outra forma não seriam claras (abrir um menu, escolher uma opção) ganham um indicador de toque (um círculo que pressiona e ondula para fora) no que o app realmente responde.
3. Princípios
- UI real supera UI recriada. Use capturas de tela, gravações e recortes, não cópias HTML do app. Texto que precisa mudar (contadores, pontuações) é desenhado na fonte do app com PIL e verificado em relação ao original.
- Dose "fora da tela". É tempero. O padrão é um momento herói e 1–2 funcionalidades levantadas.
- Zoom e foco são as principais ferramentas para ênfase. Mova a câmera para a parte da tela que importa. Eles são gratuitos, rápidos e comunicam imediatamente o que é importante.
- O telefone é uma âncora, não uma gaiola. Use o telefone para estabelecer o contexto, mas fique à vontade para sair dele para mostrar conteúdo ou elementos do app em destaque.
- O som é metade do vídeo. Gere música e efeitos sonoros que sigam o ritmo e as transições da linha do tempo. Cada app tem sua própria paleta sonora.
Nota: Para detalhes técnicos específicos sobre configuração do simulador, gravação, consistência e outras referências, consulte os arquivos em references/.