Curta da rua pixel

Curta-metragem Pixel (Remotion + three.js + sprites pixel)

Mundo 3D suave, personagens pixel-art. Tudo (pessoas, construções, texturas, música, efeitos sonoros) é desenhado ou sintetizado por código, então o resultado é original e não precisa de assets ou licenças. O modelo é um starter completo e funcional; este arquivo é tudo que você precisa.

Início

Novo projeto (copia template/, instala, gera a música e os sons, verifica tipos):

~/.claude/skills/pixel-film/bin/new-film.sh <pasta>
cd <pasta> && npm run studio      # composições: Film (um starter de 36 s) e CharSheet (cada pessoa e pose)

Dentro de um projeto Remotion existente: copie template/src/film/, template/src/components/ui.tsx, template/src/theme.ts, template/scripts/ e template/public/fonts/, e adicione as dependências de template/package.json (three, @remotion/three, @react-three/fiber, @types/three, @remotion/bundler, @remotion/renderer; todo pacote Remotion em uma versão exata).

Antes de construir, combine

Pergunte apenas o que muda o trabalho; caso contrário, escolha e diga o que escolheu.

• Formato. 16:9 (1920×1080) adequado para uma rua, travelling shots, YouTube e feed do Facebook. 9:16 (1080×1920) adequado para Reels/TikTok/Shorts mas o quadro é estreito (cerca da metade do campo de visão horizontal), então planos abertos e sobre o ombro devem ser repensados. Pergunte quando não estiver claro: muda cada cena.
• História e duração. Escreva como uma tabela de cenas com tempos de início em barras de 2 s (60 quadros a 30 fps): o que acontece, quem diz o quê, a hora do dia, a câmera. 45–80 s adequado para um anúncio ou um curta.
• Idioma. Cartelas de título e legendas no idioma do público.
• O que mostrar (para um produto ou aplicativo): um momento claro para o recurso, colocado no drop da música, usando o produto real (veja "Mostrando um app real").

Blocos de construção (template/src)

Arquivo	O que é	Personalizar
film/people.ts	Pessoas pixel, 64×112, desenhadas com formas canvas depois transformadas em pixel art (cores ajustadas a uma paleta, sombreamento cel no lado oposto à luz, linhas mais escuras entre partes, contorno). Vistas: frente, lado (ciclo de caminhada walk0–3), costas. Poses: idle blink talk happy wave think worried phone pay, sideIdle sideTalk, back backPhone, sitPhone sitHappy. Elenco de exemplo: owner kid uncle woman grandma man.	PEOPLE: cor da pele, cabelo e hairStyle (coque, curto, rabo de cavalo, careca, boné), cores da parte superior/inferior/sapatos, topDots, dress, apron, sleeveless, glasses, mustache, belly, kid, iris. Verifique em CharSheet. Novas roupas, adereços ou cabelo vão em drawPerson, face, hairFront.
film/Street3D.tsx	O cenário. Uma loja no meio: interior (prateleiras com mercadorias, balcão, lâmpada, freezer, banco), frente (abertura larga acima do balcão, grade de arame opcional e tiras penduradas, placa, painéis do balcão, toldo). Vizinhos (uma loja com vitrine de vidro, uma loja fechada com toldo listrado, casas), segundos andares com varandas e janelas venezianas acesas à noite, calçada, estrada, postes com lâmpadas e fios caídos opcionais, uma árvore, plantas, uma mesa e cadeiras. Iluminação por time (0 manhã, 1 meio-dia, 2 hora dourada, 3 crepúsculo, 4 noite; frações se misturam) com sombras, céu, estrelas, neblina e brilhos de lâmpadas. Pessoas são outdoors iluminados que projetam sombras. Opcionais items (produtos no balcão), cat, fx.beam / fx.scanX (um telefone escaneando o balcão).	SET no topo: palavras e cores da placa, cores das paredes, painéis do balcão, grade, tiras penduradas, produtos (public/products/<nome>.png), nomes e cores dos vizinhos, andares superiores, fios. Coordenadas: frente da loja em z = 1.2 (abertura x −2..2, y 1..2.3, topo do balcão y = 1.0), alguém atrás do balcão em [0, 0, 0.25], um cliente na frente em [0.7, 0.12, 1.95]; topo da calçada y = 0.12 de z 1.2 a 3.6, estrada além; construções ao longo de x de −19 a 19. Para um tipo diferente de lugar (café, escritório, mercado), mude as peças da loja no JSX: são caixas, planos e texturas canvas simples.
film/kit.tsx	camMove (keyframes de câmera suavizados + oscilação portátil), who (uma pessoa em um caminho: anda de lado olhando para onde vai, caso contrário a pose agendada; parado pisca), headAt (ponto da tela acima de uma cabeça), Line (legendas com cores do falante), Card (legenda grande ou cartela de tempo), Sfx, steps (passos), PhoneIn (um telefone com telas de app), Dim, Fade, num.	SPEAKER_COLORS; HEAD para altura da cabeça de crianças.
film/Look.tsx	FilmLook: raios de sol do lado do sol, uma gradação de cor por hora do dia, vinheta, granulação, barras letterbox.	Coloque sobre toda cena 3D com o mesmo time.
film/overlay.tsx, film/pixel.ts	Ícones pixel sobre as cabeças (bulb sweat heart question coin wifiOff clock zzz) e FoundBox (uma caixa ao redor de um item encontrado com um rótulo de % de contagem).	Ícones são pequenas grades de letras em pixel.ts.
components/ui.tsx	Phone: uma moldura de telefone mostrando capturas de tela 1080×1920, com keyframes de zoom (cams), toques e transições.	—
film/Film.tsx	O starter: manhã grua com o título e uma caminhada com travelling; uma conversa em dois planos na hora dourada; noite, todos acenam, recuo e para cima, cartela final.	Substitua pela história.
scripts/make-music.mjs + music-plan.json	Uma faixa animada original (120 BPM, C–G–Am–F; marimba, pads, baixo, um riff principal, risers, um hit final) estruturada pelo plano, mais sons cinematográficos (whoosh, pop, tap, tick, beep, chaching, chime, shutter, scan, detect, check, sparkle, impact, printer, stamp, page, womp).	O plano, em segundos: sections (intro / main / break / end), intervalos lead e up, hits (drops), final (4 s antes do fim).
scripts/make-sfx.mjs	Sons 8-bit em public/audio/8bit/ (talk, coin, idea, cash, step, jump, select, done, scan, detect, womp, pop, tap, whoosh) e uma faixa chiptune opcional.	—
scripts/capture-screens.mjs	Telas reais de um app web como capturas de tela de telefone (veja abaixo).	scripts/shots.json
scripts/stills.mjs, scripts/audio-check.mjs	Verifique quadros e música antes de uma renderização longa.	—

Gramática de câmera (o que faz parecer um filme)

• Abra com uma grua: alto e amplo sobre a rua, descendo ao nível da rua ([-5, 7.5, 21] → [-1.5, 2.6, 13.5], fov 34).
• Travelling: siga uma pessoa andando pelo lado da rua: câmera x = x deles + 0.9, z ≈ 7.4, y ≈ 1.35, olhando para eles, fov 30.
• Dois planos na frente da loja do lado do cliente, não de trás deles (câmera x ≈ −0.9 quando o cliente está em x 0.7), ou o sprite do cliente esconde a outra pessoa.
• Close-up: um lento push-in (fov 24–28) com a câmera acima da altura do balcão (y ≈ 2.1 olhando para y ≈ 1.36), para que coisas no balcão não cubram o rosto.
• Sobre o ombro de dentro, atrás de alguém na pose backPhone: eles baixos no quadro, o balcão e o cliente do lado de fora à vista.
• Uma fileira de pessoas: truck lateralmente ao longo dela.
• Final: todos acenam perto da câmera, depois recuo e para cima sobre toda a rua ([0, 1.6, 7.6] → [0, 10.5, 27], olhando para [0, 3.6, 0]), com a cartela final por cima, então fade para preto.
• Cartelas de tempo (MANHÃ, MEIO-DIA, HORA DOURADA, NOITE…) no topo conforme a luz muda; legendas no final para diálogo (elas leem melhor que balões de fala no tamanho do filme).
• Inicie as cenas nas linhas de barra (múltiplos de 60 quadros) e defina o plano de música para que o drop caia no momento chave e o hit final na cartela final.

Mostrando um app real

Mostre o produto real, não um mock-up. Para um app web (ou a versão web de um app mobile): alimente com dados fictícios, então node scripts/capture-screens.mjs scripts/shots.json (precisa de npm i -D playwright && npx playwright install chromium). Ele captura telas de telefone 1080×1920 em public/shots/. Dê ao "camera" um JPEG e a câmera do app vê essa imagem, então funções de escaneamento ou reconhecimento realmente rodam; desenhe essa cena com produtos fictícios (SVG → JPEG com sharp ou um canvas) em vez de marcas reais. Coloque as telas em PhoneIn / Phone com toques sincronizados com sons tap/select. Qualquer número mostrado no filme (um preço, uma % de correspondência) deve ser o que o app realmente produziu.

Verifique, depois renderize

1. npm run stills -- 100 400 900 … → out/stills/*.jpeg em metade do tamanho. Olhe quadros de cada cena: pessoas se escondendo, rostos cobertos, texto sobre placas, uma noite que parece dia, legendas sobre áreas movimentadas. Corrija antes de renderizar; uma renderização completa é lenta.
2. node scripts/audio-check.mjs: abaixo de 250 Hz abaixo de ~65% e 250–2000 Hz em 30% ou mais, ou a música soa como nada em alto-falantes de telefone e laptop.
3. npm run render (--gl=swangle: WebGL na CPU). Com sombras em 1080p, espere segundos por quadro (80 s de filme ≈ 2 h em um servidor pequeno); execute em segundo plano. Ou o usuário renderiza do estúdio em um navegador com GPU.

Armadilhas

• Retrato é estreito: uma pessoa a 1 m do eixo da câmera a 2 m de distância está fora do quadro. Em 9:16, separe os sujeitos verticalmente (câmera alta, a pessoa próxima baixa no quadro).
• Sprites bloqueiam a câmera: uma pessoa entre a câmera e o sujeito preenche o quadro (são grandes planos planos). Mova a câmera, não apenas a pessoa.
• Música com graves pesados soa como silêncio em alto-falantes pequenos: dê harmônicos aos graves, mantenha acordes e melodia nos médios, e não corte graves de forma agressiva.
• Noite muito clara: mantenha a luz ambiente e do céu baixas e deixe lâmpadas, a placa e janelas acesas iluminarem a cena (as predefinições fazem isso).
• Texturas: envolva cargas assíncronas em delayRender / continueRender, e nunca solicite um arquivo que não existe (a renderização trava).
• Determinismo: sem Math.random em quadros ou áudio gerado (aleatório com semente, ou random(seed) do Remotion), para que re-renderizações correspondam.
• Fontes são enviadas em public/fonts (Poppins, Caveat, Press Start 2P; SIL Open Font License), então a renderização não precisa de internet.
• O próprio ffmpeg do Remotion (node_modules/@remotion/compositor-*/ffmpeg) tem poucos filtros: decodifique para PCM WAV para análise, codifique MP3 com libmp3lame, capture quadros com -ss.

Regras

• Apenas personagens, lugares e produtos originais: sem marcas reais, logotipos ou pessoas, e sem recriação de um jogo, filme ou show existente específico (seus personagens, arte ou aparência), mesmo renomeado.
• Alegações em um anúncio devem ser verdadeiras sobre o produto. Aponte qualquer coisa que o usuário deva confirmar antes de publicar (por exemplo, "gratuito na loja de aplicativos" apenas quando estiver público).