Composición launch estilo Apple

Video de demostración de producto estilo Apple

El objetivo es una página de producto al estilo apple.com que se mueve: fondo claro, gran SF Pro con interletraje ajustado, un mensaje en pantalla a la vez, tarjetas de color a sangre completa, la interfaz real del producto, SF Symbols reales, iconos de aplicaciones reales, una pista musical alegre compuesta, y una simple llamada al valor al final. Construido como una composición JSX de Diffusion Studio para que cada fotograma sea determinista y pueda ser revisado antes de la exportación.

Empieza desde templates/promo-project/ junto a este archivo (una composición completa y funcional: un vídeo de lanzamiento de una utilidad de pantalla de bloqueo de Mac). Lee su BRIEF.md y POSITIONING.md para ver la forma finalizada.

Estilo de trabajo

• La retroalimentación llega en viñetas concisas, a menudo con capturas de pantalla de los fotogramas deseados. Realiza todos ellos; verifica cada uno mediante captura; exporta; responde con una hoja de contactos de fotogramas.
• Cuando se te pida una lluvia de ideas, enumera 3 o 4 opciones en una línea cada una, luego construye la mejor sin esperar.
• Mantén BRIEF.md (tabla de ritmos con tiempos y texto) y POSITIONING.md (justificación del texto con fuentes) actualizados en cada ronda.
• Nunca inventes pruebas: no uses recuentos de usuarios, citas o logotipos inventados. Capturas de pantalla reales, cadenas de texto reales del código fuente del producto, iconos reales.
• Informa fielmente: di qué se verificó mediante captura y qué no.

Estructura

Un mensaje por tarjeta, cortes bruscos a cada lado, una toma de demostración del producto entre las tarjetas donde exista uno. Los cortes coinciden con la cuadrícula rítmica de la música.

1. Gancho, 3 s para detener el desplazamiento — el problema del espectador, el producto en acción, sin logotipo. Una tarjeta por caso de uso: una ventana + una línea, el par centrado como grupo en el medio del fotograma. Cubre todos los casos de uso que enumera el sitio web, no solo la persona principal ("A tu agente le faltan tres horas más." / "Tu render necesita cuarenta minutos." / "Tu compilación está a la mitad." / "Necesitas marcharte.").
2. Problema — una tarjeta solo de texto, las malas alternativas apilándose en el medio del fotograma, el costo en rojo ("¿Bloquearlo? El Mac se duerme.").
3. Revelación — el icono aparece en un golpe de la música, marca denominativa, la línea de héroe propia del sitio web (coincidencia de mensaje con la página de aterrizaje).
4. Cuadrícula "Hecho para" — los casos de uso del sitio como 4 mosaicos: círculo de color con un Símbolo SF, título, iconos de aplicaciones reales debajo. Sin subtítulos.
5. Demostración — la interfaz real haciendo la única cosa, subtítulos justo debajo de la acción, palabras clave resaltadas.
6. Tarjetas de características — beneficio como titular, característica como subtítulo. Azul / granulado pizarra / verde / negro con texto degradado / gris página. Muestra, no cuentes: un reloj avanzando durante la noche, teclas estampadas "✕ Bloqueado" en rojo, notificaciones llegando en la pantalla de bloqueo.
7. Resultado — volver al trabajo terminado, cada tarea completada.
8. Cuadrícula de más características — 4 mosaicos, una línea corta cada uno.
9. Confianza — "Sin nube. Sin seguimiento. Sin suscripción."
10. Despedida — icono + nombre, "Pruébalo gratis por 7 días.", "Luego $8.99, una vez.", la URL. Nada más.

Duración aproximada de 45 s. Tarjetas de gancho ≈ 1.3 s, tarjetas de texto ≈ 2 s, demostraciones 1.6–2.8 s, cuadrículas ≈ 3.4 s, despedida ≈ 7 s. Ritmo rápido, pero cada pantalla permanece el tiempo suficiente para ser leída.

Apariencia

Elementos en references/design.md. En resumen:

• Fondo de página #f5f5f7, texto #1d1d1f, secundario #6e6e73, acento = el azul del producto, rojo del sistema #ff3b30 para costos y el glifo Touch ID, verde del sistema para éxito. Solo modo claro.
• SF Pro mediante -apple-system; titulares 76–120 px, peso 600–700, interletraje −0.03 a −0.04 em; SF Pro Rounded para relojes.
• Tarjetas con degradado a sangre completa (azul, verde, pizarra con granulado SVG, negro con texto monocromático recortado por degradado) al estilo de las páginas de producto de apple.com.
• Superficies de Cristal Líquido: blanco translúcido, borde iluminado, formas de cápsula, sombra suave amplia, desenfoque de fondo. Interfaz de producto reconstruida desde su propio código fuente con los mismos tamaños, pesos y texto.
• Símbolos SF reales renderizados desde macOS (tools/render-symbols.swift); iconos de aplicaciones reales extraídas de aplicaciones instaladas. Resalta palabras con **…** a través de Rich.tsx.
• El texto está centrado; una ventana y su línea se mueven como un grupo centrado. Nunca cambies el texto en la parte inferior mientras algo se anima en la parte superior; coloca los subtítulos junto a la acción y retrasa cualquier otro movimiento hasta que la línea haya aterrizado.

Texto

Principios con fuentes en references/copy.md. Reglas:

• Palabras simples, líneas cortas, sin subtítulos a menos que contengan un hecho.
• El titular describe completamente lo que hace el producto; reutiliza el del sitio.
• Números específicos ("tres horas más", "340 pruebas", "2:06 AM").
• Beneficio primero, característica como prueba; aborda las objeciones que detienen a un comprador (privacidad, bloqueo, precio, "¿encaja en mi caso?").
• CTA es una llamada al valor con el precio a su lado.

Audio

Compón la base musical en código (tools/make-music.py, numpy + ffmpeg): 126 BPM, un golpe en cada tiempo y palmada en 2/4 desde el primer compás, arpegio de pulso, sub, pad; ascensor + impacto en la revelación y el bloqueo; ruptura en el desbloqueo; resolver bajo la despedida; un tic suave en cada corte de tarjeta. Los momentos son parámetros al inicio del script; reajústalos cada vez que cambie el corte. Usa los sonidos reales del sistema del producto donde los tenga. Sin música con licencia.

Flujo de trabajo

1. Lee el sitio web del producto y su código fuente para casos de uso, cadenas de texto, capturas de la interfaz, iconos. Lee references/copy.md.
2. Escribe BRIEF.md y POSITIONING.md.
3. Copia templates/promo-project/; establece ROOT en src/theme.ts.
4. Construye primero la línea de tiempo (src/timeline.ts: momentos, texto, interpolaciones), luego las tarjetas, luego las demostraciones. Regenera la música según los momentos.
5. Verifica: dapi check, luego dapi capture hojas de contactos de cada ritmo; léelos; corrige; solo entonces dapi export. Analiza el MP4 (duración, pico de audio) y coloca fotogramas de muestra para la respuesta.
6. Detalles del pipeline y problemas del rasterizador: references/pipeline.md.