huypham85/app-3d-video

Video 3D de la App

Descripción general

Un video vertical de 20 s renderizado completamente en esta Mac: un iPhone real en SceneKit en un mundo color marfil brillante, la mascota de la app como un personaje que salta y presiona la interfaz real, titulares centrados en el valor, y una partitura original de swing que aterriza cada salto en una nota de marimba. template/ es un proyecto de ejemplo completo (una app de recordatorio de medicamentos llamada "MyApp") y funciona tal cual. Cambia la historia, la interfaz, los datos, la marca y la música; mantén el aspecto visual a menos que el usuario indique lo contrario.

SUB-SKILL REQUERIDO: motion-video (motor, planificación en cuadrícula de tiempo, revisión de fotogramas). Cada valor (paleta, tamaños, luz, música, errores comunes, segundos dispositivos, real vs ilustrativo) está en reference.md junto a este archivo.

Donde los dos skills difieran, este prevalece: copia template/, ejecuta bash mv3d.sh (no mv.sh), y los saltos, destellos y confeti de la mascota son parte del aspecto visual aunque el preset de salud de motion-video evite esos elementos. La interfaz que contiene datos solo se inclina y aparece; la mascota es la que salta.

Comenzar desde la plantilla

cp -R ~/.claude/skills/app-3d-video/template ~/Movies/MotionVideo/<slug>
cd ~/Movies/MotionVideo/<slug>
bash mv3d.sh audio                   # score.swift -> music.wav, imprime niveles; ejecutar antes de los fotogramas
bash mv3d.sh stills 0.5,4.6,10.1     # BEATS -> stills/ + sheet.png
bash mv3d.sh video                   # out.mp4, alrededor de 5 min para 20 s con un teléfono: ejecutar en segundo plano
bash mv3d.sh frames out.mp4 2.5,6.3  # SEGUNDOS -> check/ + check_sheet.png

La identidad de marca vive en el bloque BRAND al inicio de scenes.swift: APP_NAME (marca de agua en la tarjeta final), APP_VERSION (el número 3D; verifica su tamaño y posición en los fotogramas cuando cambie la duración), LABEL (etiqueta pequeña sobre el primer titular), END_PILL (píldora degradada en la tarjeta final), y los colores de la mascota. Luego reemplaza cada llamada a headline(...) en render(), los comentarios de cabecera y plan.md. "COMING IN …" y "COMING SOON" son texto para avances; para un lanzamiento, pregunta al usuario por la etiqueta y el texto de la tarjeta final.

Las escenas de ejemplo (tarjeta de Live Activity, widget de pantalla de bloqueo, fondo de pantalla de pastillero semanal) pertenecen a la app de ejemplo. Reemplázalas con la interfaz del usuario, manteniendo las técnicas: lienzos 2D por fotograma mapeados en la pantalla del teléfono, la mascota parada sobre y presionando elementos, y lapsos de tiempo impulsados por un solo reloj.

Flujo de trabajo

1. Hechos. Lee el repositorio del usuario para cada característica: cadenas reales, diseño, paleta, estados, restricciones de pago, los colores del ícono de la app (se convierten en los de la mascota). Pregunta lo que el código no pueda responder (qué características, nombres exactos, gratuito o de pago, avance o lanzamiento, duración; por defecto 20 s vertical). Una característica sin interfaz en el repositorio aún: pide un diseño o una captura de pantalla. Sin uno, dibújalo a partir del sistema de diseño de la app, enuméralo como ilustrativo y muéstralo en la primera hoja de fotogramas.
2. Mascota. Por defecto es la cápsula bicolor en los colores de la marca de la app. Si la app tiene su propia mascota o una forma de ícono simple, constrúyela a partir de primitivas de SceneKit en buildCapsule() (mantén CAP_HALF, el tamaño unitario y la lista de materiales para que las sombras y los dos pases sigan funcionando).
3. Plan plan.md en la cuadrícula de tiempo (96 BPM swing, 8 compases = 20 s). Una característica = una interacción de la mascota con su interfaz real. Una mañana, un conjunto de datos, un reloj. El teléfono es el escenario; un segundo dispositivo (Watch, iPad) aparece solo para una característica que vive ahí (reference.md, "Segundo dispositivo"). Enumera real vs ilustrativo.
4. Copia. Titular = lo que el usuario obtiene, nunca un nombre de característica. Un chip PRO en la línea secundaria para cosas de pago. Si hay un skill de humanización instalado, ejecútalo en cada línea, luego verifica los hechos nuevamente.
5. Partitura. Mantén el sonido (ukelele, marimba, silbido, chasquidos, Mi mayor, el chirrido de sintetizador en el tiempo fuerte de la tarjeta final) pero escribe nuevos acordes, melodía y golpes para la nueva coreografía: cada aterrizaje es una nota de marimba en su tiempo visual. Si la app tiene su propio sonido de notificación, puede reemplazar el chirrido de sintetizador (ver el final de score.swift); ajusta la tonalidad de la partitura a él (motion-video references/score-guide.md). Si el usuario pide música diferente, cambia también los instrumentos. Objetivo: −13…−15 dBFS, 0 % de recorte.
6. Fotogramas, mínimo dos rondas, incluyendo tiempos de salto intermedio. Verifica: la mascota nunca cubre información, se detiene en lo que presiona, las sombras son visibles, la parte superior del teléfono está debajo del titular, nada se ve a través del texto, y ningún color de interfaz real compite con el titular naranja.
7. Renderiza en segundo plano, luego frames en el MP4 y míralos.
8. Entrega a ~/Downloads/<App>_<Topic>_3D_<N>s[_vN].mp4 y envía o muestra el archivo al usuario. Informa tiempo por tiempo en segundos, real vs ilustrativo, y que el audio fue evaluado mediante medición. Mantén versiones anteriores en v1/. Mantén el video en un solo idioma hasta que el usuario lo apruebe; cada idioma adicional es un renderizado completo, así que pregunta qué idiomas quieren.

Contrato de apariencia

• Mundo color marfil/avena con un sol suave. Sin fondo de estudio oscuro, sin rosa saturado.
• Teléfono titanio neutro, fondo de pantalla beige estilo foto, reloj de tinta oscura, paletas claras para tarjetas en pantalla.
• Titulares SF Pro Rounded heavy; la línea 2 tiene el degradado naranja.
• La mascota interactúa (aterriza, pisa, topetea, salta sobre elementos). Nunca solo orbita o posa.
• Sombras suaves reales. Sin DOF, sin bloom.

Errores comunes

Error	Solución
Pasar tiempos a frames o segundos a stills	frames = segundos, stills = tiempos (20 s = 32 tiempos)
La mascota abandona un botón en el instante que aterriza	Permanece aproximadamente 0.2 tiempo para que la presión se note
La mascota se para sobre la hora o la etiqueta	Colócala al lado de la información que cubriría
Desvanecer un mesh con opacity	Muévelo, escálalo u ocúltalo
El color de la marca choca con el degradado naranja del titular	Mantén la marca en la mascota y el número de versión; cambia el degradado del titular solo si el usuario lo pide