huypham85/motion-video

Video de motion graphics

Crea un spot de motion graphics de 10–30 s como código real: un sintetizador en Swift escribe la partitura, un motor de renderizado Swift CoreGraphics/CoreImage dibuja cada fotograma en la misma cuadrícula de compás (con desenfoque de movimiento subfotograma, desenfoque gaussiano real, vidrio esmerilado, grano de película) y AVFoundation codifica H.264 + AAC. Todo lo necesario está en esta carpeta de habilidad; solo se necesitan macOS + herramientas de línea de comandos de Xcode.

El estándar es "un reel de diseñador de motion", no una demo: cada elemento visual cae en el ritmo de la música, nada en pantalla es ruido decorativo, y cada afirmación es verdadera.

Mapa de carpetas

• engine/ — audio_core.swift + audio_main.swift (motor de partitura), video_core.swift + video_main.swift (motor de renderizado). No editar por proyecto; el código del proyecto va en la carpeta del proyecto.
• scripts/mv.sh — compilar + ejecutar: audio, stills <beats>, video [out]. levels.py, sheet.py, probe.swift son usados por él.
• El proyecto completo trabajado vive en la habilidad complementaria app-3d-video (template/: score.swift, scenes.swift, project.env, más la capa SceneKit s3d.swift). Para un video solo 2D, copia su project.env y score.swift y escribe un scenes.swift nuevo basado en references/engine-api.md.
• examples/scores/energetic-128bpm.swift — partitura de lanzamiento de alta energía (drops, fills, drop-out).
• references/motion-direction.md — ritmo según tono, easing, transiciones, maquetación, patrones narrativos, lista de verificación de revisión. Léelo antes de planificar las escenas.
• references/score-guide.md — recetas de tempo/tono/arreglo, coincidencia con el tono de una marca, objetivos de sonoridad. Léelo antes de escribir la partitura.
• references/engine-api.md — cada función de dibujo/audio con su firma. Léelo al escribir código.

Flujo de trabajo

1. Brief (mantén las preguntas en lo que cambia el resultado)

Acordar: propósito y audiencia, duración, aspecto (por defecto 1080×1920 vertical; 1920×1080 o 1080×1350 mediante W/H), tono, idioma del texto en pantalla. Valores por defecto si al usuario no le importa: 15 s, vertical, texto en inglés, tono acorde al dominio del producto. Si el contenido solicitado no cabe en la duración con un ritmo adecuado al tono, dilo y pregunta de qué prescindir — duración o contenido — en lugar de apretujar. (Una app de salud quería ritmo tranquilo y 15 s; la respuesta fue eliminar escenas, no acelerar.)

2. Investigar lo que es verdad

Todo lo que aparece en pantalla debe ser defendible:

• Lo que se ha lanzado: git log desde los últimos incrementos de versión, CHANGELOG, notas de versión.
• Texto exacto del producto: lee el código para títulos/cuerpos de notificaciones, etiquetas de botones, diálogos de Siri/intents, encabezados de fragmentos, texto de onboarding. Cítalo; no lo parafrasees convirtiéndolo en una promesa.
• Marca cualquier cosa ilustrativa (nombres de muestra, cantidades, horas) e infórmalo al usuario en la entrega.
• Mantén la historia internamente coherente: si la escena 1 registra Metformina a las 9:41, la escena 2 no puede preguntar cuándo se tomó la última Metformina y oír "hace 13 horas" — usa otro medicamento.

3. Activos

Recopila activos reales de la marca: icono de la app (PNG más grande), logotipo, colores de marca (tokens de diseño/catálogo de activos), insignias oficiales que el producto ya usa (ej. "Funciona con Apple Health") y los sonidos propios del producto (notificaciones/logos sónicos WAV). Convierte one-shots para el sintetizador: afconvert -f WAVE -d LEF32@48000 -c 1 in.wav assets/name.wav; SVG → PNG con sharp/resvg si el repositorio los tiene, o qlmanage -t -s 1024.

Prefiere interfaz de usuario vectorial recreada con un conjunto de datos (un fondo de pantalla, una hora de reloj, un conjunto de nombres) en lugar de capturas de pantalla sin procesar. Las capturas de pantalla de diferentes fuentes (diferentes horas, dispositivos, datos, fotogramas) una al lado de otra se ven mal; los espectadores lo notan al instante. Si usas capturas de pantalla, captúralas en una sola sesión con xcrun simctl status_bar booted override --time 9:41 …, límpialo después, y nunca captures otra app que esté abierta.

4. Planificar en la cuadrícula de compás

Duración = compases × 4 × 60 / BPM, así que elige BPM y número de compases juntos (15 s = 6 compases a 96, 8 compases a 128). Escribe plan.md en el proyecto: una tabla de compases → escena → el elemento en cada tiempo (revelaciones de palabra, llegada de tarjeta, marca de verificación, transición). Una idea por compás; los momentos importantes (logotipo, funcionalidad clave, tarjeta final) caen en los tiempos fuertes. Consulta references/motion-direction.md para patrones y ajustes preestablecidos de tono.

5. Carpeta del proyecto

Trabaja en ~/Movies/MotionVideo/<slug>/ (persiste para revisiones posteriores):

mkdir -p ~/Movies/MotionVideo/<slug> && cp ~/.claude/skills/app-3d-video/template/{project.env,score.swift} ~/Movies/MotionVideo/<slug>/

Edita project.env (BPM, DURATION, W, H, FPS), coloca los activos de la marca en assets/, luego reescribe score.swift y escribe scenes.swift. Reasigna las variables de la paleta (INK, TEAL, MINT, GREEN, GLOW, PAPER, DARKTEXT, ORANGE, DARK_MID, LIGHT_GLOW_A/B) al principio de scenes.swift para la marca.

6. Partitura primero

Escribe score.swift (recetas en references/score-guide.md), luego ejecuta mv.sh <dir> audio. No puedes oírlo — lee la impresión de niveles: RMS en el rango objetivo para el tono, sin recorte, contraste de sección donde lo pretendiste (intro tranquila, subida en el drop, un bajón para cualquier drop-out). El video lee music.wav para elementos reactivos al audio, así que renderiza el audio antes de los fotogramas fijos.

7. Escenas, luego revisión de fotogramas fijos — al menos dos rondas

Escribe scenes.swift definiendo func render(_ t: Double, frame: Int), luego:

~/.claude/skills/motion-video/scripts/mv.sh <dir> stills 0.5,2,4.25,6,8.5,10,13,16,20,22.5

Abre <dir>/sheet.png con Read y repasa la lista de verificación en references/motion-direction.md (solapamientos en rebasamiento de resorte, descendentes recortados, texto demasiado pequeño, fundidos embarrados, IU inconsistente, espacio muerto). También elige tiempos de transición intermedios, no solo estados de reposo. Corrige y repite hasta que una ronda salga limpia. Los fotogramas fijos se renderizan a ~0.1 s/fotograma, así que itera libremente.

8. Render final y verificar

mv.sh <dir> video <dir>/out.mp4 — aproximadamente 0.3–0.5 s/fotograma con SUB=5 de desenfoque de movimiento (15 s a 60 fps ≈ 5–8 min), así que ejecútalo en segundo plano. La sonda imprime duración y pistas; también extrae algunos fotogramas (.build/probe out.mp4 <dir> 2,5,9,12) y míralos.

9. Entregar

Copia a ~/Downloads/<Product>_<Topic>_<duration>s[_vN].mp4, envíalo con SendUserFile, e informa: el story beat por beat (segundos), qué activos y cadenas son reales, qué es ilustrativo, que juzgaste el audio solo por medición, y una lista de verificación breve para el usuario (escuchar al volumen, legibilidad en un teléfono, uso de marca/insignia). Mantén las versiones anteriores (v1/) al revisar.

Revisión

La mayoría de los comentarios se asignan a un control: más lento/tranquilo → BPM más bajo + menos escenas + resortes amortiguados (k≈5, w≈6) + revelaciones más largas (0.9–1 compás) + transiciones de rack-focus/iris en lugar de látigos; más energía → la partitura energética, resortes con rebasamiento, látigos, destellos en drops; "No entiendo la funcionalidad X" → muestra la causa y efecto completa en un dispositivo (solicitud → respuesta → resultado) con el texto de respuesta real del producto, y titúlalo con el valor, no con el nombre de la funcionalidad.