apple-design

Apple Design: vídeos de lanzamiento

Esta habilidad crea vídeos de producto de 30 a 35 segundos al estilo de un spot de lanzamiento de Apple. Se incluyen dos vídeos terminados, y cada nuevo vídeo comienza a partir de uno de ellos:

Vídeo	Aspecto	Úsalo para
films/oto	Pop. Campos de color plano y saturado que cambian en cada tiempo, enormes palabras blancas, un producto juguetón que rebota al ritmo del bajo, pista house a 120 BPM.	Gadgets de consumo, altavoces, auriculares, juguetes, cualquier cosa divertida o colorida.
films/vela	Cinematográfico. Escenario negro, metal iluminado de estudio, resplandor, movimientos de cámara lentos, haces de luz y mundos proyectados, vista explosionada, partitura a 100 BPM.	Hardware premium, cámaras, wearables, cualquier cosa "ingenieril".

Abre out/sheet.jpg en cualquiera de las carpetas (después de un renderizado) o simplemente lee film.js para ver cada plano. references/film-recipe.md explica cómo se compone una película y enumera los patrones de plano reutilizables. Léelo antes de escribir un nuevo vídeo.

Cómo funciona un vídeo

• films/<nombre>/index.html configura las fuentes y los estilos de texto.
• films/<nombre>/film.js construye el producto a partir de primitivas de Three.js y define SHOTS, una lista de intervalos de tiempo { a, b, f(t, p) }. renderAt(t) reinicia la escena y llama al plano para ese segundo. Cada fotograma es una función pura de t: no hay Date.now, ni animación CSS, ni estado entre fotogramas. Esto es lo que permite un renderizado fotograma exacto.
• films/<nombre>/music.py compone la banda sonora con numpy y escribe out/score.wav. La versión de Oto también escribe env.json (tiempos de bombo y una envolvente de bajo por fotograma) para que el producto y los anillos reaccionen a la pista real.
• render.mjs sirve la carpeta, renderiza los fotogramas en Chrome sin cabeza con la GPU, y codifica el MP4.

Flujo de trabajo para un nuevo vídeo

1. Briefing. Obtén el nombre del producto, qué es y la única cosa sorprendente que tiene, 3 a 5 datos reales (números con unidades), colores o acabados, eslogan y línea de lanzamiento ("Próximamente 2027"). Si el usuario solo da una idea aproximada, inventa detalles específicos de buen gusto y dilo. Haz como máximo una pregunta.
2. Elige el vídeo base (Oto para pop, Vela para cinematográfico) y cópialo: cp -r films/oto films/<nombre> (minúsculas, sin espacios). Elimina la carpeta out/ copiada y env.json.
3. Escribe primero el guión gráfico. Elige un BPM (100–124). Distribuye de 8 a 11 planos en la cuadrícula de compases (a 120 BPM un compás son 2 s, así que los planos duran 2, 4 u 8 s), con las palabras en pantalla para cada uno. Sigue el arco de la receta: apertura en frío → golpe → nombre → qué hace → por dentro → el número clave → gama → silencio → tarjeta final. Muéstralo al usuario en una tabla breve solo si pidió revisarlo; de lo contrario, continúa.
4. Modela el producto en film.js, reemplazando makeOto / makeDevice. Constrúyelo a partir de perfiles torneados, esferas, toros y cajas redondeadas con MeshPhysicalMaterial (barniz claro, brillo, metalicidad), más texturas de canvas para rejillas, pantallas y etiquetas. Dale una función pose(...) o setFinish(...) que los planos puedan llamar. Consulta la sección de modelado de la receta.
5. Reescribe los planos y el texto: SHOTS, CAPS, etiquetas, nombres de gamas, tarjeta final. Mantén los cortes en los límites de los compases. Reutiliza los helpers que ya están ahí (showWord, showRings, drawField, panels, cam, el soporte para planos detalle, las líneas guía de las etiquetas).
6. Compón la música editando el music.py copiado: establece el BPM, la lista de acordes o tonalidad, y los bloques de arreglo para que cada sección coincida con su plano (golpe en la revelación, ruptura en el plano detalle, silencio antes de la tarjeta final). Mantén kick_times y la exportación de envolvente si el vídeo usa env.json.
7. Revisa fotogramas fijos, luego renderiza (desde la carpeta de la habilidad):

   python3 films/<nombre>/music.py
   node render.mjs <nombre> sheet            # 8 fotogramas → films/<nombre>/out/sheet.jpg
   node render.mjs <nombre> stills 4.2,9,17  # cualquier segundo exacto
   node render.mjs <nombre> final            # → <Nombre>_Launch_Film.mp4 con música
   

   Mira la hoja de contactos. Arregla cualquier cosa recortada, superpuesta, descentrada o ilegible antes del renderizado completo. final a 60 fps tarda entre 3 y 8 minutos para 34 s; usa final 30 para un borrador rápido.
8. Entrega. Proporciona la ruta del MP4 final y la hoja de contactos, enumera los planos en una línea cada uno y ofrece ajustes específicos (copia, colores, temporización, música).

Configuración (una vez)

cd ~/.claude/skills/apple-design && npm install
python3 -m pip install numpy scipy      # o usa un entorno virtual

Necesita Google Chrome y ffmpeg. Establece CHROME_PATH si Chrome está en una ubicación inusual.

Nivel de calidad

• Cada corte y cada palabra caen en la cuadrícula de tiempo de la pista. Verifica los tiempos a/b con respecto al BPM.
• Una idea por plano. Subtítulos ≤ 7 palabras, palabras gigantes 1 palabra.
• El producto está lo suficientemente iluminado para apreciar su forma: luz principal, luz de contra, sombra de contacto suave, reflejos del entorno en el metal.
• Al menos un plano que solo este producto podría tener (el plano detalle de Oto y "más fuerte lo eleva más alto", la pared, la mesa y el techo de Vela).
• La tarjeta final tiene el nombre, un eslogan y una línea de lanzamiento, seguido de un fundido en la última nota.
• Mira una hoja de contactos antes del renderizado final, siempre.

Límites

"Estilo Apple" es el aspecto. No uses los logotipos, nombres de productos, marcas registradas, archivos de SF Pro ni metraje real de Apple. Las fuentes aquí son Inter e Inter Tight. Inventa nombres de productos y especificaciones solo cuando el usuario haya pedido una pieza conceptual, y etiquétala como concepto.