Corto de calle pixel

Cortometraje pixelado (Remotion + three.js + sprites pixel)

Mundo 3D suave, personajes pixel-art. Todo (personajes, edificios, texturas, música, efectos de sonido) se dibuja o sintetiza mediante código, por lo que el resultado es original y no necesita activos ni licencias. La plantilla es un iniciador completo y funcional; este archivo es todo lo que necesitas.

Inicio

Nuevo proyecto (copia template/, instala, genera la música y los sonidos, verifica tipos):

~/.claude/skills/pixel-film/bin/new-film.sh <carpeta>
cd <carpeta> && npm run studio      # composiciones: Film (un iniciador de 36 s) y CharSheet (cada persona y pose)

Dentro de un proyecto Remotion existente en su lugar: copia template/src/film/, template/src/components/ui.tsx, template/src/theme.ts, template/scripts/ y template/public/fonts/, y añade las dependencias de template/package.json (three, @remotion/three, @react-three/fiber, @types/three, @remotion/bundler, @remotion/renderer; cada paquete de Remotion en una versión exacta).

Antes de construir, acuerden

Pregunta solo lo que cambie el trabajo; de lo contrario, elige y di lo que elegiste.

• Formato. 16:9 (1920×1080) funciona para una calle, tomas de seguimiento, YouTube y el feed de Facebook. 9:16 (1080×1920) funciona para Reels/TikTok/Shorts pero el marco es estrecho (aproximadamente la mitad del campo de visión horizontal), por lo que los planos generales y los planos sobre el hombro deben repensarse. Pregunta cuando no esté claro: cambia cada toma.
• Historia y duración. Escríbela como una tabla de escenas con tiempos de inicio en barras de 2 s (60 cuadros a 30 fps): qué sucede, quién dice qué, la hora del día, la cámara. 45–80 s funciona para un anuncio o un corto.
• Idioma. Tarjetas de título y subtítulos en el idioma de la audiencia.
• Qué mostrar (para un producto o aplicación): un momento claro para la característica, colocado en el drop de la música, usando el producto real (consulta "Mostrar una aplicación real").

Bloques de construcción (template/src)

Archivo	Qué es	Personalizar
film/people.ts	Personajes pixel, 64×112, dibujados con formas de canvas luego convertidos a pixel art (colores ajustados a una paleta, sombreado cel en el lado opuesto a la luz, líneas más oscuras entre partes, contorno). Vistas: frente, lado (ciclo de caminar walk0–3), atrás. Poses: idle blink talk happy wave think worried phone pay, sideIdle sideTalk, back backPhone, sitPhone sitHappy. Elenco de muestra: owner kid uncle woman grandma man.	PEOPLE: piel, cabello y hairStyle (moño, corto, cola de caballo, calvo, gorra), colores de parte superior/inferior/zapatos, topDots, dress, apron, sleeveless, glasses, mustache, belly, kid, iris. Verifícalos en CharSheet. Nueva ropa, accesorios o cabello van en drawPerson, face, hairFront.
film/Street3D.tsx	El decorado. Una tienda en el medio: interior (estantes con productos, mostrador, bombilla, congelador, taburete), frente (abertura ancha sobre el mostrador, rejilla metálica opcional y tiras colgantes, letrero, tableros del mostrador, toldo). Vecinos (una tienda con frente de vidrio, una tienda con persiana y toldo a rayas, casas), segundos pisos con balcones y ventanas persianas iluminadas de noche, acera, carretera, postes con lámparas y cables opcionales caídos, un árbol, plantas, una mesa y sillas. Iluminación por time (0 mañana, 1 mediodía, 2 hora dorada, 3 atardecer, 4 noche; las fracciones se mezclan) con sombras, cielo, estrellas, niebla y resplandores de lámparas. Las personas son carteles iluminados que proyectan sombras. Opcionales items (productos en el mostrador), cat, fx.beam / fx.scanX (un teléfono escaneando el mostrador).	SET en la parte superior: palabras y colores del letrero, colores de paredes, tableros del mostrador, rejilla, tiras colgantes, productos (public/products/<nombre>.png), nombres y colores de vecinos, pisos superiores, cables. Coordenadas: frente de la tienda en z = 1.2 (abertura x −2..2, y 1..2.3, parte superior del mostrador y = 1.0), alguien detrás del mostrador en [0, 0, 0.25], un cliente al frente en [0.7, 0.12, 1.95]; parte superior de la acera y = 0.12 desde z 1.2 a 3.6, carretera más allá; edificios a lo largo de x desde −19 hasta 19. Para un tipo diferente de lugar (cafetería, oficina, mercado), cambia las piezas de la tienda en el JSX: son cajas, planos y texturas de canvas simples.
film/kit.tsx	camMove (keyframes de cámara suavizados + deriva manual), who (una persona en un camino: camina en vista lateral mirando hacia donde va, de lo contrario la pose programada; inactivo parpadea), headAt (punto de pantalla sobre una cabeza), Line (subtítulos con colores de hablante), Card (leyenda grande o tarjeta de tiempo), Sfx, steps (pasos), PhoneIn (un teléfono con pantallas de aplicación), Dim, Fade, num.	SPEAKER_COLORS; HEAD para la altura de cabeza de niños.
film/Look.tsx	FilmLook: rayos de sol desde el lado del sol, una gradación de color por hora del día, viñeta, grano, barras de letterbox.	Colócalo sobre cada escena 3D con el mismo time.
film/overlay.tsx, film/pixel.ts	Iconos pixel sobre las cabezas (bulb sweat heart question coin wifiOff clock zzz) y FoundBox (un cuadro alrededor de un elemento encontrado con una etiqueta de % de conteo).	Los iconos son pequeñas cuadrículas de letras en pixel.ts.
components/ui.tsx	Phone: un marco de teléfono que muestra capturas de pantalla 1080×1920, con keyframes de zoom (cams), toques y transiciones.	—
film/Film.tsx	El iniciador: grúa matutina con el título y una caminata de seguimiento; una conversación en plano americano a la hora dorada; noche, todos saludan, zoom out y arriba, tarjeta final.	Reemplázalo con la historia.
scripts/make-music.mjs + music-plan.json	Una pista original alegre (120 BPM, C–G–Am–F; marimba, pads, bajo, un gancho principal, subidas, un golpe final) diseñada según el plan, más sonidos cinematográficos (whoosh, pop, tap, tick, beep, chaching, chime, shutter, scan, detect, check, sparkle, impact, printer, stamp, page, womp).	El plan, en segundos: sections (intro / main / break / end), rangos lead y up, hits (drops), final (4 s antes del final).
scripts/make-sfx.mjs	Sonidos de 8 bits en public/audio/8bit/ (talk, coin, idea, cash, step, jump, select, done, scan, detect, womp, pop, tap, whoosh) y una pista chiptune opcional.	—
scripts/capture-screens.mjs	Capturas de pantalla reales de una aplicación web como capturas de teléfono (ver más abajo).	scripts/shots.json
scripts/stills.mjs, scripts/audio-check.mjs	Verifica cuadros y música antes de una representación larga.	—

Gramática de cámara (qué hace que se sienta como una película)

• Abrir con una grúa: alto y amplio sobre la calle, bajando al nivel de la calle ([-5, 7.5, 21] → [-1.5, 2.6, 13.5], fov 34).
• Seguimiento: sigue a una persona caminando desde el lado de la carretera: cámara x = su x + 0.9, z ≈ 7.4, y ≈ 1.35, mirándola, fov 30.
• Plano americano en el frente de la tienda desde el lado del cliente, no desde detrás de él (cámara x ≈ −0.9 cuando el cliente está en x 0.7), o el sprite del cliente oculta a la otra persona.
• Primer plano: un lento acercamiento (fov 24–28) con la cámara por encima de la altura del mostrador (y ≈ 2.1 mirando a y ≈ 1.36), para que las cosas en el mostrador no cubran la cara.
• Sobre el hombro desde el interior, detrás de alguien en la pose backPhone: ellos abajo en el encuadre, el mostrador y el cliente afuera a la vista.
• Una fila de personas: travelling lateral a lo largo de ella.
• Final: todos saludan cerca de la cámara, luego zoom out y arriba sobre toda la calle ([0, 1.6, 7.6] → [0, 10.5, 27], mirando hacia arriba a [0, 3.6, 0]), con la tarjeta final encima, luego fundido a negro.
• Tarjetas de tiempo (MAÑANA, MEDIODÍA, HORA DORADA, NOCHE…) en la parte superior mientras la luz cambia; subtítulos en la parte inferior para el diálogo (se leen mejor que los globos de diálogo al tamaño de la película).
• Inicia las escenas en líneas de compás (múltiplos de 60 cuadros) y establece el plan de música para que el drop caiga en el momento clave y el golpe final en la tarjeta final.

Mostrar una aplicación real

Muestra el producto real, no un maqueta. Para una aplicación web (o la versión web de una aplicación móvil): siémbrala con datos ficticios, luego node scripts/capture-screens.mjs scripts/shots.json (necesita npm i -D playwright && npx playwright install chromium). Toma capturas de pantalla de teléfono 1080×1920 en public/shots/. Dale a "camera" un JPEG y la cámara de la aplicación ve esa imagen, por lo que las funciones de escaneo o reconocimiento realmente se ejecutan; dibuja esa escena con productos ficticios (SVG → JPEG con sharp o un canvas) en lugar de marcas reales. Coloca las capturas en PhoneIn / Phone con toques sincronizados con sonidos tap/select. Cualquier número mostrado en la película (un precio, un % de coincidencia) debe ser lo que la aplicación realmente produjo.

Verifica, luego renderiza

1. npm run stills -- 100 400 900 … → out/stills/*.jpeg a mitad de tamaño. Mira los cuadros de cada escena: personas ocultándose entre sí, caras cubiertas, texto sobre letreros, una noche que parece de día, subtítulos sobre áreas ocupadas. Corrige antes de renderizar; un renderizado completo es lento.
2. node scripts/audio-check.mjs: por debajo de 250 Hz aproximadamente al 65% y 250–2000 Hz al 30% o más, o la música suena a nada en los altavoces del teléfono y la computadora portátil.
3. npm run render (--gl=swangle: WebGL en la CPU). Con sombras a 1080p espera segundos por cuadro (80 s de película ≈ 2 h en un servidor pequeño); ejecútalo en segundo plano. O el usuario renderiza desde el estudio en un navegador con GPU.

Errores comunes

• El retrato es estrecho: una persona a 1 m del eje de la cámara a 2 m de distancia está fuera del encuadre. En 9:16, separa los sujetos verticalmente (cámara alta, la persona cercana abajo en el encuadre).
• Los sprites bloquean la cámara: una persona entre la cámara y el sujeto llena el encuadre (son planos grandes). Mueve la cámara, no solo a la persona.
• La música con mucho bajo suena a silencio en altavoces pequeños: da armónicos al bajo, mantén acordes y melodía en los medios, y no filtres en paso bajo fuerte.
• Noche demasiado brillante: mantén la luz ambiental y del cielo bajas y deja que las lámparas, el letrero y las ventanas iluminadas iluminen la escena (los preajustes lo hacen).
• Texturas: envuelve las cargas asíncronas en delayRender / continueRender, y nunca solicites un archivo que no exista (el renderizado se cuelga).
• Determinismo: sin Math.random en los cuadros o el audio generado (aleatorio con semilla, o random(seed) de Remotion), para que los re-renderizados coincidan.
• Fuentes se incluyen en public/fonts (Poppins, Caveat, Press Start 2P; SIL Open Font License), por lo que el renderizado no necesita internet.
• El ffmpeg propio de Remotion (node_modules/@remotion/compositor-*/ffmpeg) tiene pocos filtros: decodifica a PCM WAV para análisis, codifica MP3 con libmp3lame, captura cuadros con -ss.

Reglas

• Solo personajes, lugares y productos originales: sin marcas, logotipos o personas reales, y sin recreación de un juego, película o programa existente específico (sus personajes, arte o apariencia), incluso renombrado.
• Las afirmaciones en un anuncio deben ser verdaderas sobre el producto. Señala cualquier cosa que el usuario deba confirmar antes de publicar (por ejemplo, "gratis en la tienda de aplicaciones" solo una vez que sea público).