name: paper-collage-film description: Película de collage en técnica de papel rasgado, 5–30 s (intro de YouTube o tráiler de canal, promoción de marca o tienda, 16:9), stop-motion a pares, construido en código; IA solo para recortes de fotos. Úsalo para videos estilo collage / scrapbook / recorte / recorte de revista / papel rasgado / técnica mixta / estilo fanzine, o cuando alguien envíe una referencia de collage de papel y diga "hazlo como esta ref" (RU: коллаж, рваная бумага, вырезки, аппликация, журнальные вырезки, заставка, интро, «сделай как на рефе», «как San Diego Zoo»). No es para collages de fotos estáticas, moodboards, rejillas de clips en pantalla dividida o una sola transición. Técnica del Zoológico de San Diego "Africa Rocks": papel rasgado en capas con bordes fibrosos blancos, medios tonos, cielo de acuarela, recortes de fotos que caen, empuje hacia una lente → iris de papel → caleidoscopio, cohete de tiras, caída de título, rasgadura de página hacia el logo, parpadeo del logo. Incluye un motor de lienzo funcional, ejemplos de edición de 10 s y 30 s (kaye.creatives), una banda sonora sintetizada con efectos de papel, reasignación de paleta, hojas de elección de fuentes y paletas, y herramientas de croma y renderizado.
¿Qué hace paper-collage-film?
Una película de collage = un viaje continuo de cámara en stop-motion a través de papel rasgado, sincronizado con la música, que termina en un título, una rasgadura de página hacia el logo y una llamada a la acción. Todo es código excepto los recortes fotográficos. assets/template/ es una película completa de 10 s (lanzamiento del canal de YouTube kaye.creatives) que se renderiza tal cual — adáptalo, no empieces desde cero.
Lo que los usuarios de este skill esperan (references/lessons.md tiene la historia)
- Mira la referencia primero. Abre cada enlace enviado, extrae fotogramas a 12 fps, lee las hojas. Varias referencias → encuentra la que más les guste.
- Técnica de la referencia, historia de la marca. Copia la gramática de movimiento, nunca la trama (sin mapear suricato-por-suricato).
- Código primero; genera solo recortes de fotos. Sin fondos generados, sin personas ni personajes IA a menos que se solicite, sin generación de video.
- Decisiones como hojas renderizadas, no suposiciones: fuente del título →
tools/font_sheet.sh, colores →tools/palette_sheet.sh; el usuario responde con un número. - Rápido y visible: envía la tabla de beats, la hoja de recortes y un borrador temprano, da ETAs en tiempo real, usa agentes en paralelo (references/agent_workflow.md).
- Habla en el idioma del usuario; texto en pantalla en inglés a menos que se solicite. Sin parpadeo de fotograma completo (fotosensibilidad).
0 · Recepción (pregunta una vez, en un solo mensaje, solo lo que no puedas inferir)
Ortografía exacta de la marca/handle y cada palabra en pantalla · duración · formato (ver abajo) · idioma del texto (el cirílico cambia las fuentes) · CTA (suscribirse / seguir / visitar) · archivo de logo o logo de texto · música: sintetizada o su propia pista · Está bien gastar ≈ N×2 créditos en recortes.
Formato. Los diseños de collage están dibujados para 1920×1080 solamente (collage.js y scenes.js usan coordenadas absolutas). Para un Reel 9:16 sin rediseño: renderiza la película 16:9 y colócala a ancho completo (1080×608) en una página 1080×1920 entre bandas de papel rasgado que lleven el título, el handle y la CTA. Un video vertical real significa reubicar cada coordenada — cotízalo como tiempo extra.
1 · Proyecto (1 min)
<skill>/scripts/new_project.sh <output_root> <slug> # nueva marca: paleta desactivada (colores de papel originales)
<skill>/scripts/new_project.sh <output_root> <slug> --example # reproduce la película enviada de kaye.creatives (paleta nocturna)
cd <project> # ejecuta cada comando desde el proyecto (agentes: prefija cada llamada con `cd <project> &&`)
Crea comp/, audio/score.html, tools/ (compilados extract/encode/mux/greenkey), cutouts/, refs/, review/. Necesita macOS (Swift, AVFoundation, afconvert), Chrome/Brave, Node ≥ 22 (NODE_BIN=/path/to/node fuerza uno; si se vinculó una alternativa, export PATH="<project>/tools/bin:$PATH" para llamadas directas a node — tools/*.sh lo hacen solos), internet para Google Fonts.
Los recortes faltantes se renderizan como tarjetas grises etiquetadas, por lo que un borrador funciona antes de cualquier generación. El ejemplo carga: 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 · Referencia (10–15 min)
Descarga la ref (Pinterest: resuelve pin.it → página del pin → la URL v1.pinimg.com/videos/…/720w.mp4 o /mc/720p/ H.264; GIF: divide fotogramas con ImageIO/Swift — sin ffmpeg). tools/extract ref.mp4 refs/f 12 960 0.85, luego hojas de contacto con tools/sheet.mjs (leyendas = fotograma/12 s; tools/strip.sh asume 24 fps, por lo que sus etiquetas son la mitad del tiempo real en fotogramas de 12 fps). MIRA. Escribe refs/analysis.md con los encabezados de references/reference_san_diego.md: tiempos de corte, curvas de movimiento, códigos hex de paleta, fuentes similares, lista de elementos a copiar — y mapea cada dispositivo de la ref a un dispositivo de CL/CLX o márcalo como "nuevo dispositivo"; lista los dispositivos de San Diego a eliminar. La referencia del usuario anula los números de San Diego a continuación.
Gramática de movimiento (mediciones de San Diego — references/reference_san_diego.md)
- Todo a pares (12 dibujos/s): tiempo de movimiento
q(t) = floor(t*12)/12, 1–2 px de ebullición de capa por dibujo. - Sin cortes bruscos hasta el logo: zoom-throughs, rasgadura de página, wipe rasgado, agujero hexagonal en el caleidoscopio, inclinación hacia arriba detrás de un cohete de tiras.
- Caída en 3 dibujos (borde entra → en el aire −8° → aterriza) + 1 dibujo de asentamiento (1.03→1); apariciones en 1–2 dibujos.
- Empuje hacia un detalle: zoom exponencial ~1→6× en ~1 s, el centro del zoom lerpea hacia el detalle.
- Caleidoscopio: anillos reflejados, sin rotación, la escala se duplica cada ~0.35–0.38 s; una pegatina repetida solo como un anillo.
- El título cae desde arriba, expo-out en 9 dibujos, sin sobrepaso, contorno de papel blanco + extrusión en perspectiva.
- Rasgadura de página ~0.42 s con un reverso oscuro y curvo → banda rasgada con la marca; parpadeo de estilo alternativo sostenido en fotogramas 2-1-2-3-2-2, dentro de la banda.
3 · Historia + tabla de beats (enviar en ~15 min)
Escribe script.md: tiempo | música | lo que vemos | texto en pantalla (literal), cuadrícula de 120 BPM (beat 0.5 s, 24 fps). Elige la duración:
10 s (el ejemplo enviado)
| t | beat |
|---|---|
| 0–1.0 | página de collage; ▶ cae (aterriza 0.5); etiqueta del canal; cursor presiona ▶ 0.875 |
| 1.0 | la página se rasga del centro → mundo 1 (coche F1 a través de bandas diagonales, centro 1.75; casco golpea 2.0; etiqueta) |
| 2.5 | wipe rasgado → cámara de cine, empuje acelerado hacia la lente, iris de papel 2.9–3.4 (etiqueta) |
| 3.5–4.5 | anillos de caleidoscopio, volantes 4.2/4.3/4.4, agujero hexagonal → escritorio |
| 4.5–5.5 | escritorio: laptop 4.5, equipo 4.75/5.0/5.25, mensaje escrito, "generate ✦" 5.15 → resultado |
| 5.5–5.95 | inclinación hacia arriba, cohete de tiras lleva ▶ lejos |
| 6.0 | título "KAYE / CREATIVES" (Fraunces Black Italic), estallido radial, biplano cruza |
| 7.5–7.92 | rasgadura de página → banda del logo |
| 8.0–8.5 | parpadeo del logo dentro de la banda |
| 8.5–10 | SUBSCRIBE golpea, clic 9.0 → SUBSCRIBED ✓, campana 9.15, empuje lento |
6 s intro (se reproduce antes de cada video: sin rasgadura, sin escritorio, sin CTA): 0–0.5 héroe cae · 0.75–1.5 empuje hacia un detalle, iris 1.0–1.42 · 1.5–2.5 caleidoscopio, volantes 2.17/2.33, agujero 2.33–2.5 · 2.5–2.96 inclinación cohete · 3.0 título (aterriza 3.75) + estallido · 4.5–4.92 rasgadura · 5.0–5.5 parpadeo de banda · 5.5–6 golpe final + sostenido. Partitura: dur 6, drop 0.5, mid 1.5, build 2.5, vac 2.95, lift 3.0, end 5.5. Logo ≥ 1.0 s en pantalla.
15 s promoción (refleja la ref de 15 s): 0–0.5 héroe cae · 0.5–2.5 apariciones · 2.5–3.5 empuje + iris · 3.5–5.5 caleidoscopio, agujero 5.33 · 5.5–7.5 mundo 2, estallido liderado por un volante · 7.5–9.5 mundo 3 / momentos del producto · 9.5–10.5 cohete · 10.5 título (aterriza 11.25) · 12.5–12.92 rasgadura · 13.0–13.5 parpadeo · 13.5–15 CTA.
30 s: assets/examples/kaye_30s_scenes.js + kaye_30s_score.html (anuncio de teléfono, letras de rescate, muro de miniaturas).
Revestir para otra marca
| dispositivo | kaye (YouTube) | p. ej., cafetería |
|---|---|---|
| caída del héroe | ▶ botón de reproducción | taza / bolsa de granos (CL.sprite + CL.drop) |
| apariciones | accesorios de cámara | croissant, granos |
| rasgadura → mundo 1 | coche F1 a través de bandas | tambor tostador, granja |
| empuje + iris | lente de cámara (cam_front) | crema en la taza (medir centro + radio en px de sprite; fórmula de iris en api.md) |
| anillos de caleidoscopio | coches, carretes | granos, tazas (un anillo por pegatina) |
| escritorio + pantalla | interfaz de usuario de mensaje | mostrador + ticket de pedido (CLX.tag / CLX.ransom) — o elimínalo |
| cohete | ▶ en tiras | taza en una pluma de tiras |
| título / banda | nombre del canal / kaye.creatives | nombre de la tienda / logo o @handle |
| CTA | SUBSCRIBE + campana + cursor | handle + chip de dirección (CLX.tag), estrella de horario (CLX.star) |
CLX.play, subscribe, thumb, screen y cursor son dispositivos de YouTube. Los fondos en collage.js usan nombres de recortes fijos (CL.page: grass_strip + rocks_; CL.diag: rocks_ + cassette; CL.cloudsky: cloud_1..4): el revestimiento sin código es generar sustitutos bajo los mismos nombres (grass_strip = una tira rasgada de granos de café, rocks_* = sacos de medios tonos en blanco y negro); de lo contrario, copia pageLayers en scenes.js. Actualiza la lista warm()'s cuts: para nuevos nombres. |
4 · Recortes (5 min, ~2 créditos cada uno)
Solo lo que el código no puede dibujar — plantilla de mensaje, el conjunto de ejemplo y claves en references/cutouts.md. tools/greenkey keyframes/raw/x.png cutouts/x → PNG con alfa, las hojas de múltiples objetos se dividen automáticamente. Renderiza una hoja de verificación sobre un fondo de color y envíala.
Un archivo de logo real → cutouts/logo.png, dibujado con CL.sprite dentro del drawUnder de la rasgadura; los looks de parpadeo = el fondo de estilo logoBand + ese sprite. Para un logo de texto, ajústalo a min(190, 0.78·W / ancho medido).
5 · Editar en código
comp/scenes.js es la película: COPY (palabras en pantalla), funciones de escena (pageScene, f1Scene, camScene, kalDraw, deskScene, titleBg, titleScene, endScene), transiciones (wipe, ripDraw, tearDone), K.setup({bars}) zooms de impacto. Palabras fuera de COPY: el "PROMPT"/título de la interfaz de usuario (CLX.screen o.title), los glifos de póster del look de parpadeo 'posters' (collage_fx.js) — revísalos. API: references/api.md; tiempos reales y problemas del ejemplo: references/edit_notes_10s.md.
Re-temporiza reasignando el tiempo, no editando literales: Cut(a, b, (ctx, t) => titleScene(ctx, t + (6.0 - a))). Mantén los desplazamientos múltiplos de 1/12 s. Las escenas que dibujan un vecino se mueven como un bloque (kalDraw→deskScene a través de drawNext, titleBg→deskScene antes de 71/12, endScene→titleScene/titleBg). Luego actualiza K.setup({bars}), las señales de la partitura y los tiempos fijos. Los tiempos más allá de la duración se recortan al último fotograma.
La fuente del título reside en 4 lugares: el <link> en comp/index.html (carga UNA cara de la familia), la lista fonts() en comp/film.js (de lo contrario, los sprites se hornean con una alternativa), COPY.titleFont y el <link> de comp/font_sheet.html para candidatos. Texto cirílico: Ultra, Fraunces, Cinzel, Bevan, Abril Fatface, Shrikhand, Chango, Rye, Lilita One, Bungee, Chewy y Gluten no tienen cirílico — usa Rubik / Rubik Spray Paint, Unbounded, Yeseva One, Lobster, Playfair Display, Russo One para el título y logoBand o.font, y revisa los chips de rescate.
Fijos: node tools/capture.mjs comp/index.html review/st --stills 0.5,1.75,….
6 · Música
audio/score.html sintetiza la partitura en el navegador (sin muestras): funky groove + efectos de papel (golpes, rasgaduras, silbidos, chasquidos, tecleo, clics, campana), limitador. Configura window.SCORE_CONFIG {dur, drop, mid, build, vac, lift, end} en su primer <script> desde la tabla de beats y mueve las señales con window.SCORE_CUES = {…}; elimina las líneas en paper() para eventos que la película no tenga (busca CUE.car, CUE.plane, CUE.type, CUE.gen, CUE.subClick, CUE.ding) — anular una señal genera un error. Silencia capas con ?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 gran golpe más fuerte en su ventana
python3 tools/music_window.py audio/score.wav --timeline 0.25
Su propia pista en su lugar: python3 tools/music_window.py track.mp3 --len <dur> → elige una ventana → python3 tools/cut_audio.py track.mp3 <start> <dur> audio/score.m4a → re-temporiza la imagen a sus caídas (cuadrícula = BPM de la pista). No puedes escuchar audio — verifica con números (references/music_notes_10s.md) y dilo.
7 · Borrador → decisiones → 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 "LINE1|LINE2" # fuentes de título numeradas en el tratamiento real y la paleta de la película
tools/palette_sheet.sh 0.75 3.75 6.9 8.75 # cada paleta de comp/grade.js en fotogramas clave (0 = original)
tools/render_film.sh final audio/score.m4a <slug>_final.mp4 # fotogramas PNG, 30 Mbps
Hornea la paleta elegida con window.PALETTE = '<nombre>' en comp/index.html (null = colores originales). grade.js recolorea cada píxel, fotos y logo incluidos: para colores de marca agrega una entrada PALS con los códigos hex de la marca en los roles (rojo → primario) y verifica que las fotos del producto y el logo sigan siendo fieles — o establece null y edita CL.C / CLX.PAL directamente.
QA antes de enviar (mira los fotogramas tú mismo)
- Sincronización: eventos de imagen vs picos de
--hits/--timeline, ≤ 1 fotograma. - A pares: los hashes de pares de fotogramas difieren solo en eventos deliberados de 1 fotograma.
- Uniones: sin fotogramas vacíos/saltos; nada estático > ~1 s excepto las pausas de título/logo.
- Nada cubre el objeto héroe, el título, la etiqueta del botón, la URL (¡rutas del cursor!).
- Etiquetas ≥ 36 px en chips de papel, cada una ≥ 0.8 s; título ≥ 1.5 s; logo ≥ 1.5 s (≥ 1.0 s para películas ≤ 8 s).
- Sin parpadeo de fotograma completo; el brillo del parpadeo de banda cambia en una dirección. Sin tarjetas grises "recorte faltante" restantes.
- Duración exacta (afinfo), audio presente, pico ≤ −1 dBFS.
- Solo un renderizado a la vez por proyecto (
render_film.shborra su carpeta de fotogramas).
Archivos
| necesidad | dónde |
|---|---|
| gramática, tomas, paleta, fuentes medidas de San Diego | references/reference_san_diego.md |
| API de CL / CLX | references/api.md (+ comentarios de encabezado de collage.js / collage_fx.js) |
| indicaciones de recortes, conjunto de ejemplo, claves | references/cutouts.md |
| mapa de señales de partitura + mediciones | references/music_notes_10s.md |
| notas de edición del ejemplo de 10 s (problemas, tiempos) | references/edit_notes_10s.md |
| guía de lecciones aprendidas | references/lessons.md |
| flujo de trabajo de agente (paralelo) | references/agent_workflow.md |
| hoja de estilo de collage de la marca (rellenar) | comp/brand_style.md |
| ejemplo de 10 s | assets/examples/kaye_10s_scenes.js + kaye_10s_score.html |
| ejemplo de 30 s | assets/examples/kaye_30s_scenes.js + kaye_30s_score.html |