Communitygithub.com

vitozev/phone-portal-reel

Use ao criar um pequeno vídeo vertical de produto (Instagram Reels, TikTok, YouTube Shorts) em que uma mão desliza num telefone e cada produto cai da tela para a cena real, ou qualquer anúncio de "portal de telefone", "deslizar para soltar" ou "cai da tela", especialmente quando não há filmagem de câmera e o cenário, as mãos e o produto precisam ser gerados.

O que é phone-portal-reel?

Este skill cria anúncios verticais de 9 segundos (9:16) no estilo "portal de telefone", onde produtos parecem cair da tela de um smartphone para o cenário real. É ideal para plataformas como Instagram Reels, TikTok e YouTube Shorts, especialmente quando não há filmagem real de câmera. O fluxo de trabalho é dividido em três batidas: gotas do portal (produtos caem da tela), embaralhamento stop-motion (produtos giram numa linha) e logotipo final. O skill usa uma única foto gerada como base, cortada em camadas (cenário, telefone com mão segurando, mão deslizando) e animada com código, combinada com um modelo 3D real do produto que atravessa a tela como um único objeto. Ele requer chaves de API para OpenAI (gpt-image-2 e gpt-image-1.5) e ElevenLabs (para música e efeitos sonoros), além do CLI HyperFrames e ferramentas como ffmpeg e Python. O skill enfatiza verificações rigorosas de continuidade quadro a quadro para manter a ilusão de uma filmagem real.

Funciona com~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/vitozev/claude-skills/tree/HEAD/skills/phone-portal-reel

Perguntar na sua IA favorita

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

Documentação

Phone-portal reel (Anúncio de portal de telefone)

Visão geral

Um anúncio de produto de 9 segundos no formato 9:16, filmado com um único quadro de tripé fixo, em três batidas:

  1. Gotas do portal (cerca de 4,3 s). Uma mão segura um telefone. Uma segunda mão desliza na tela, e cada deslize solta um produto para fora da tela, caindo numa prateleira abaixo, batendo no ritmo. O produto herói cai por último, após uma pausa na música.
  2. Embaralhamento stop-motion (cerca de 2,7 s). Um corte seco remove as mãos e o telefone. O produto gira por toda a linha, um quadro a cada seminima, parando nos tempos.
  3. Logotipo fixo (cerca de 2 s). A marca aparece gradualmente ao longo de 6 a 8 quadros e permanece parada. Apenas música, sem voz.

Não há filmagem de câmera. Uma única foto gerada é cortada em camadas (cenário, telefone com mão segurando, mão deslizando) e animada em código. O produto é um modelo 3D real, renderizado pela mesma câmera dentro do telefone e na sala, de modo que atravessa o vidro como um único objeto.

O padrão: Deve parecer uma filmagem real. Cada falha que tivemos foi uma quebra de continuidade que alguém viu em um único quadro. Veja em tamanho real, em cada momento de contato, no arquivo finalizado.

Você precisa de

NecessidadePara
OPENAI_API_KEYgpt-image-2 para a placa e o mestre; gpt-image-1.5 com input_fidelity: high para edições que devem manter a foto
ELEVENLABS_API_KEYA música de fundo (music_v2_5) e efeitos sonoros
CLI HyperFrames (npx hyperframes), three.js r169O motor de quadros e a renderização
ffmpeg; Python 3 com numpy opencv-python-headless pillow openaiOs scripts

Os scripts leem as chaves do ambiente ou de um arquivo .env na pasta de trabalho ou em qualquer pasta acima. Eles nunca as exibem. Informe o gasto de cada execução: dólares da OpenAI (os scripts registram uma estimativa) e créditos da ElevenLabs.

Se alguém puder filmar uma mão real deslizando num telefone em um tripé, use essa filmagem para a mão. É a parte mais difícil de falsificar.

Etapas de revisão: pare para obter aprovação em cada uma

  1. Brief e folha de batidas. A marca, 4 a 6 produtos (o herói por último, na cor que complementa o cenário), o cenário e um tempo em que uma batida seja um número inteiro de quadros. A 30 qps, 112,5 BPM dá 16 quadros, 120 BPM dá 15 e 90 BPM dá 20. Coloque cada aterrissagem na grade da música, numa batida ou meia batida, nunca entre elas. Para o número de gotas, veja references/build.md, seção 1.
  2. Aparência. A placa, o mestre (mãos e telefone), uma primeira renderização do produto 3D na câmera ajustada e o cartão final em 3 pares de fontes, tudo numa única folha.
  3. Teste de movimento. Um deslize e uma gota, renderizados na qualidade final e verificados quadro a quadro. A maioria das falhas aparece aqui.
  4. Construção, depois som, depois o final.

Construção

Siga references/build.md. Ele tem todos os passos, com os números que funcionaram. Em ordem:

  1. Gere uma placa (o cenário vazio), depois um mestre: uma edição da placa que adiciona ambas as mãos e um telefone em branco. O mestre é o quadro. Cada placa limpa é feita a partir dele.
  2. Corte camadas do mestre e meça os cantos da tela, a borda inferior da tela, a ponta do dedo e o pulso.
  3. Ajuste a câmera 3D às bordas da prateleira.
  4. Construa o motor. Copie example/studio/ (a construção de referência: uma marca de chá, cinco caixas) e meça novamente suas constantes para sua placa. Ele contém apenas código: traga suas próprias imagens, fontes, arte de rótulo e arquivos three.js. Se o produto não for uma caixa (um pote, uma garrafa, uma lata, algo de vidro), leia "Outros produtos" em build.md primeiro.
  5. Faça a música primeiro e meça suas batidas. Depois, trave as aterrissagens na grade, adicione efeitos sonoros e faça a mixagem.
  6. Renderize e, em seguida, execute as verificações abaixo.

Regras que quebraram a ilusão

O que apareceuCorreção
O produto aparece embaixo do telefone alguns quadros atrasadoÉ um único objeto 3D em ambos os lados do vidro. Resolva cada deslize retrocedendo a partir do quadro de aterrissagem: a partir do quadro em que seu ponto mais baixo atinge a borda, ele cai sob a gravidade na velocidade da rolagem
O produto cai atrás da mãoAbaixo da borda inferior da tela, desenhe-o na frente da moldura e dos dedos
Ele fica suspenso sob o telefone por alguns quadrosA gravidade assume na borda. Não deixe que ele continue seguindo o deslize da página
O deslize parece uma foto deslizandoFaça um movimento rápido a partir do pulso e mantenha o antebraço rígido. Resolva o ângulo do pulso para que a ponta do dedo se mova com a página. Nenhum deslize igual ao outro
O quadro parece paradoO telefone seguido se desloca de 1,5 a 2 px e cede sob cada pressão. A parede nunca se move
Uma linha escura se move através do telefoneSem divisores de página no feed. Mantenha qualquer fantasma baixo
Um relógio ou joia desliza no pulsoPeça um pulso nu no mestre. Se um aparecer, mascare tudo e remova-o com scripts/blend-edit.py
Um corte se transforma em um dissolveDecida cada corte, troca e parada no quadro inteiro, nunca dentro das amostras do obturador
O rótulo aparece como um pente de cópiasUse 48 subquadros enquanto o produto cai e 10 caso contrário, com um obturador de 0,38 quadro
Uma edição gerada moveu coisas fora de sua máscaraEdições mascaradas não são respeitadas. Registre a edição, depois pegue-a apenas dentro da máscara
Um baque chega antes da caixaCorte cada take para 4 ms antes de seu ataque mais forte e alinhe nesse ataque

A lista completa, com causas, está em references/lessons.md.

Verifique antes de enviar

  • Recortes em tamanho real do arquivo final em cada momento de contato: o primeiro quadro de cada deslize, o produto cruzando a borda, cada aterrissagem, o corte e o braço saindo do quadro.
  • python3 scripts/sync-sheet.py final.mp4 --audio sound/stems/sfx.wav: cada batida está no seu quadro delineado.
  • bash scripts/check-final.sh final.mp4 1080x1920: -14 LUFS ±1 e um pico verdadeiro em ou abaixo de -1 dBTP.

Scripts

ScriptFaz
scripts/openai-image.py OUT.png "prompt" [--edit IN.png --mask M.png --fidelity high]Gera ou edita uma imagem e registra tokens e um custo estimado
scripts/blend-edit.py crop / blendPrepara uma edição mascarada de uma região, depois registra o resultado e o pega apenas dentro da máscara
scripts/elevenlabs.py spec.json OUTDIRGera a música de fundo e efeitos a partir de uma especificação, armazena em cache e registra os créditos gastos
scripts/beats.py bed.mp3Encontra o tempo da faixa, sua grade de batidas e seu primeiro tempo forte
scripts/sync-sheet.py VIDEO --audio sfx.wav ou --cues cues.jsonMostra os cinco quadros em torno de cada batida de som, numa única folha
bash scripts/check-final.sh VIDEO [WxH]Verifica tamanho, qps, duração, volume e pico verdadeiro

Execute cada um com --help para suas opções. example/README.md mapeia a construção de referência.

Habilidades Relacionadas