paper-collage-film

O que paper-collage-film faz?

Um filme de colagem = uma jornada contínua de câmera em stop-motion através de papel rasgado, cortada ao som da música, terminando em um título, um rasgo de página para o logotipo e uma chamada para ação. Tudo é código, exceto os recortes fotográficos. assets/template/ é um filme completo de 10 s (lançamento do YouTube kaye.creatives) que renderiza como enviado — adapte-o, não comece do zero.

O que os usuários desta skill esperam (references/lessons.md tem a história)

• Olhe a referência primeiro. Abra todos os links enviados, extraia quadros a 12 qps, leia as folhas. Várias refs → encontre a que eles mais amam.
• Técnica da ref, história da marca. Copie a gramática de movimento, nunca o enredo (sem mapeamento suricata-por-suricata).
• Código primeiro; gere apenas recortes fotográficos. Nenhum fundo gerado, nenhuma pessoa ou personagens de IA, a menos que solicitado, nenhuma geração de vídeo.
• Escolhas como folhas renderizadas, não palpites: fonte do título → tools/font_sheet.sh, cores → tools/palette_sheet.sh; o usuário responde com um número.
• Rápido e visível: envie a tabela de batidas, a folha de recortes e um rascunho cedo, dê ETAs em tempo real, use agentes paralelos (references/agent_workflow.md).
• Fale no idioma do usuário; texto na tela em inglês, a menos que solicitado. Nenhum flash em tela cheia (fotossensibilidade).

0 · Captação (pergunte uma vez, em uma mensagem, apenas o que você não puder inferir)

Ortografia exata da marca/handle e cada palavra na tela · duração · formato (veja abaixo) · idioma do texto (cirílico altera fontes) · CTA (inscrever-se / seguir / visitar) · arquivo de logotipo ou logotipo de texto · música: sintetizada ou faixa própria · OK gastar ≈ N×2 créditos em recortes.

Formato. Os layouts de colagem são desenhados para 1920×1080 apenas (collage.js e scenes.js usam coordenadas absolutas). Para um Reel 9:16 sem um novo layout: renderize o filme 16:9 e coloque-o em largura total (1080×608) em uma página 1080×1920 entre faixas de papel rasgado que carregam o título, handle e CTA. Um filme vertical verdadeiro significa reposicionar cada coordenada — cite como tempo extra.

1 · Projeto (1 min)

<skill>/scripts/new_project.sh <output_root> <slug>             # nova marca: paleta desligada (cores de papel originais)
<skill>/scripts/new_project.sh <output_root> <slug> --example   # reproduzir o filme kaye.creatives enviado (paleta noturna)
cd <project>                                                    # execute todos os comandos abaixo a partir do projeto (agentes: prefixe cada chamada com `cd <project> &&`)

Cria comp/, audio/score.html, tools/ (extract/encode/mux/greenkey compilados), cutouts/, refs/, review/. Precisa de macOS (Swift, AVFoundation, afconvert), Chrome/Brave, Node ≥ 22 (NODE_BIN=/path/to/node força um; se um fallback foi vinculado, export PATH="<project>/tools/bin:$PATH" para chamadas node diretas — tools/*.sh fazem isso sozinhas), internet para Google Fonts. Recortes ausentes renderizam como cartões cinza rotulados, então um rascunho funciona antes de qualquer geração. O exemplo carrega: cam_side cam_front car helmet phone plane_front plane_side clap reel laptop headphones midi phone_gimbal cassette cloud_1..4 rocks_a/b/c tree_a/b grass_strip.

2 · Referência (10–15 min)

Baixe a ref (Pinterest: resolva pin.it → página do pin → URLs v1.pinimg.com/videos/…/720w.mp4 ou /mc/720p/ H.264; GIF: divida quadros com ImageIO/Swift — sem ffmpeg). tools/extract ref.mp4 refs/f 12 960 0.85, depois folhas de contato com tools/sheet.mjs (legendas = quadro/12 s; tools/strip.sh assume 24 qps, então suas etiquetas são metade do tempo real em quadros de 12 qps). OLHE. Escreva refs/analysis.md com os cabeçalhos de references/reference_san_diego.md: tempos de corte, curvas de movimento, hexadecimais de paleta, semelhanças de fonte, lista de itens a copiar — e mapeie cada dispositivo da ref para um dispositivo CL/CLX ou marque como "novo dispositivo"; liste os dispositivos San Diego a serem descartados. A ref do usuário substitui os números San Diego abaixo.

Gramática de movimento (medições San Diego — references/reference_san_diego.md)

• Tudo em pares (desenho a cada 2 quadros) (12 desenhos/s): tempo de movimento q(t) = floor(t*12)/12, 1–2 px de agitação de camada por desenho.
• Sem cortes duros até o logotipo: zoom-throughs, rasgo de página, wipe rasgado, buraco hexagonal no caleidoscópio, inclinação para cima atrás de um foguete de tiras.
• Drop-in em 3 desenhos (borda entra → no ar −8° → pousa) + 1 desenho de estabilização (1.03→1); pop-ups em 1–2 desenhos.
• Pressione em um detalhe: zoom exponencial ~1→6× em ~1 s, centro do zoom interpola para o detalhe.
• Caleidoscópio: anéis espelhados, sem rotação, escala dobra a cada ~0.35–0.38 s; um adesivo repetido apenas como um anel.
• Título chega de cima, expo-out em 9 desenhos, sem ultrapassagem, contorno de papel branco + extrusão de perspectiva.
• Rasgo de página ~0.42 s com um verso escuro enrolando → faixa rasgada com a marca; cintilação de estilo alternativo segurada em quadros 2-1-2-3-2-2, dentro da faixa.

3 · História + tabela de batidas (envie em ~15 min)

Escreva script.md: tempo | música | o que vemos | texto na tela (textual), grade de 120 BPM (batida 0.5 s, 24 qps). Escolha a duração:

10 s (o exemplo fornecido)

t	batida
0–1.0	página de colagem; ▶ cai (pousa 0.5); tag do canal; cursor pressiona ▶ 0.875
1.0	página rasga do centro → mundo 1 (carro F1 através de faixas diagonais, centro 1.75; capacete bate 2.0; tag)
2.5	wipe rasgado → câmera de filme, pressione acelerado na lente, iris de papel 2.9–3.4 (tag)
3.5–4.5	anéis de caleidoscópio, panfletos 4.2/4.3/4.4, buraco hexagonal → mesa
4.5–5.5	mesa: laptop 4.5, equipamento 4.75/5.0/5.25, prompt digita, "generator ✦" 5.15 → resultado
5.5–5.95	inclinação para cima, foguete de tiras leva ▶ embora
6.0	título "KAYE / CREATIVES" (Fraunces Black Italic), explosão radial, biplano cruza
7.5–7.92	rasgo de página → faixa de logotipo
8.0–8.5	cintilação do logotipo dentro da faixa
8.5–10	INSCREVA-SE bate, clique 9.0 → INSCRITO ✓, sino 9.15, movimento lento

6 s intro (toca antes de cada vídeo: sem rasgo, sem mesa, sem CTA): 0–0.5 hero cai · 0.75–1.5 pressione em um detalhe, íris 1.0–1.42 · 1.5–2.5 caleidoscópio, panfletos 2.17/2.33, buraco 2.33–2.5 · 2.5–2.96 inclinação do foguete · 3.0 título (pousa 3.75) + explosão · 4.5–4.92 rasgo · 5.0–5.5 cintilação da faixa · 5.5–6 batida final + segura. Partitura: dur 6, drop 0.5, mid 1.5, build 2.5, vac 2.95, lift 3.0, end 5.5. Logotipo ≥ 1.0 s na tela.

15 s promo (espelha a ref de 15 s): 0–0.5 hero cai · 0.5–2.5 pop-ups · 2.5–3.5 pressione + íris · 3.5–5.5 caleidoscópio, buraco 5.33 · 5.5–7.5 mundo 2, explosão liderada por um panfleto · 7.5–9.5 mundo 3 / momentos de produto · 9.5–10.5 foguete · 10.5 título (pousa 11.25) · 12.5–12.92 rasgo · 13.0–13.5 cintilação · 13.5–15 CTA.

30 s: assets/examples/kaye_30s_scenes.js + kaye_30s_score.html (anúncio de telefone, cartas de resgate, parede de miniaturas).

Revestimento para outra marca

dispositivo	kaye (YouTube)	ex.: cafeteria
hero drop	▶ botão play	xícara / saco de grãos (CL.sprite + CL.drop)
pop-ups	adereços de câmera	croissant, grãos
rasgo → mundo 1	carro F1 através de faixas	tambor de torrefação, fazenda
pressione + íris	lente de câmera (cam_front)	creme no café (meça centro + raio em px do sprite; fórmula da íris em api.md)
anéis de caleidoscópio	carros, rolos	grãos, xícaras (um anel por adesivo)
mesa + tela	interface do prompt	balcão + ticket de pedido (CLX.tag / CLX.ransom) — ou descarte
foguete	▶ em tiras	xícara em uma pluma de tiras
título / faixa	nome do canal / kaye.creatives	nome da loja / logotipo ou @handle
CTA	INSCREVA-SE + sino + cursor	handle + chip de endereço (CLX.tag), estrela de horário (CLX.star)
CLX.play, subscribe, thumb, screen e cursor são dispositivos do YouTube. Fundos em collage.js usam nomes de recortes fixos (CL.page: grass_strip + rocks_; CL.diag: rocks_ + cassette; CL.cloudsky: cloud_1..4): o revestimento de código zero é gerar substitutos sob os mesmos nomes (grass_strip = uma tira rasgada de grãos de café, rocks_* = sacos de meio-tom preto/branco); caso contrário, copie pageLayers para scenes.js. Atualize a lista cuts: de warm() para novos nomes.

4 · Recortes (5 min, ~2 créditos cada)

Apenas o que o código não pode desenhar — modelo de prompt, conjunto de exemplo e keying em references/cutouts.md. tools/greenkey keyframes/raw/x.png cutouts/x → PNG(s) alfa, folhas de múltiplos objetos divididas automaticamente. Renderize uma folha de verificação em um fundo colorido e envie-a. Um arquivo de logotipo real → cutouts/logo.png, desenhado com CL.sprite dentro do drawUnder do rasgo; aparência de cintilação = os fundos de estilo logoBand + esse sprite. Para um logotipo de texto, dimensione-o min(190, 0.78·W / largura medida).

5 · Edição em código

comp/scenes.js é o filme: COPY (palavras na tela), funções de cena (pageScene, f1Scene, camScene, kalDraw, deskScene, titleBg, titleScene, endScene), transições (wipe, ripDraw, tearDone), K.setup({bars}) zoom de soco. Palavras fora de COPY: o "PROMPT"/título da interface (CLX.screen o.title), os glifos de pôster da aparência de cintilação 'posters' (collage_fx.js) — verifique-os. API: references/api.md; tempos e pegadinhas do exemplo: references/edit_notes_10s.md. Re-temporize remapeando o tempo, não editando literais: Cut(a, b, (ctx, t) => titleScene(ctx, t + (6.0 - a))). Mantenha deslocamentos múltiplos de 1/12 s. Cenas que desenham um vizinho movem-se como um bloco (kalDraw→deskScene via drawNext, titleBg→deskScene antes de 71/12, endScene→titleScene/titleBg). Em seguida, atualize K.setup({bars}), as deixa da partitura e os tempos de imagem estática. Tempos além da duração fixam ao último quadro. Fonte do título está em 4 lugares: o <link> em comp/index.html (carregue UMA face da família), a lista fonts() em comp/film.js (senão sprites assam com fallback), COPY.titleFont, e o <link> de comp/font_sheet.html para candidatos. Texto cirílico: Ultra, Fraunces, Cinzel, Bevan, Abril Fatface, Shrikhand, Chango, Rye, Lilita One, Bungee, Chewy e Gluten não têm cirílico — use Rubik / Rubik Spray Paint, Unbounded, Yeseva One, Lobster, Playfair Display, Russo One para o título e logoBand o.font, e verifique os chips de resgate. Imagens estáticas: node tools/capture.mjs comp/index.html review/st --stills 0.5,1.75,….

6 · Música

audio/score.html sintetiza a partitura no navegador (sem samples): groove funk + foley de papel (tapas, rasgos, whooshes, estalos, digitação, cliques, sino), limitador. Defina window.SCORE_CONFIG {dur, drop, mid, build, vac, lift, end} em seu primeiro <script> a partir da tabela de batidas e mova as deixa com window.SCORE_CUES = {…}; exclua as linhas em paper() para eventos que o filme não tem (procure CUE.car, CUE.plane, CUE.type, CUE.gen, CUE.subClick, CUE.ding) — anular uma deixa lança um erro. Silencie camadas com ?lv_<name>=0.

node tools/render_audio.mjs "<project>/audio/score.html" audio/score.wav
afconvert -f m4af -d aac -b 256000 audio/score.wav audio/score.m4a
python3 tools/music_window.py audio/score.wav --hits 0.5:0.35,1.0:1.0,6.0:1.0,7.5:0.45,8.5:1.0   # cada grande batida mais alta em sua janela
python3 tools/music_window.py audio/score.wav --timeline 0.25

Faixa própria em vez disso: python3 tools/music_window.py track.mp3 --len <dur> → escolha uma janela → python3 tools/cut_audio.py track.mp3 <inicio> <dur> audio/score.m4a → re-temporize a imagem para suas batidas (grade = BPM da faixa). Você não pode ouvir áudio — verifique por números (references/music_notes_10s.md) e informe.

7 · Rascunho → escolhas → final

tools/render_film.sh draft                       # ~30 s para 10 s → <slug>_draft.mp4 (+ .frames_draft)
tools/strip.sh .frames_draft review/strip.png 1
tools/font_sheet.sh "LINHA1|LINHA2"                # fontes de título numeradas no tratamento real e na paleta do filme
tools/palette_sheet.sh 0.75 3.75 6.9 8.75        # cada paleta de comp/grade.js em quadros-chave (0 = original)
tools/render_film.sh final audio/score.m4a <slug>_final.mp4   # quadros PNG, 30 Mbps

Grave a paleta escolhida com window.PALETTE = '<nome>' em comp/index.html (null = cores originais). grade.js recoloriza cada pixel, fotos e logotipo incluídos: para cores da marca, adicione uma entrada PALS com os hexadecimais da marca nos papéis (vermelho → primário) e verifique se as fotos do produto e o logotipo ainda parecem verdadeiros — ou defina null e edite CL.C / CLX.PAL diretamente.

QA antes de enviar (olhe os quadros você mesmo)

• Sincronia: eventos de imagem vs picos de --hits / --timeline, ≤ 1 quadro.
• Em pares: hashes de par de quadros diferem apenas em eventos deliberados de 1 quadro.
• Junções: sem quadros vazios/saltos; nada estático > ~1 s, exceto seguras de título/logotipo.
• Nada cobre o objeto herói, o título, o rótulo do botão, a URL (caminhos do cursor!).
• Tags ≥ 36 px em chips de papel, cada ≥ 0.8 s; título ≥ 1.5 s; logotipo ≥ 1.5 s (≥ 1.0 s para filmes ≤ 8 s).
• Nenhuma cintilação em tela cheia; cintilação da faixa com passos de brilho em uma direção. Nenhum cartão cinza "recorte ausente" restante.
• Duração exata (afinfo), áudio presente, pico ≤ −1 dBFS.
• Apenas uma renderização por vez por projeto (render_film.sh limpa sua pasta de quadros).

Arquivos

necessidade	onde
gramática San Diego medida, planos, paleta, fontes	references/reference_san_diego.md
API CL / CLX	references/api.md (+ comentários de cabeçalho de collage.js / collage_fx.js)
prompts de recorte, conjunto de exemplo, keying	references/cutouts.md
mapa de deixa da partitura + medições	referen…

[truncado para tradução]