lroe/apple-dracula

Habilidad: Animación Explicativa Minimalista — Dracula Oscuro (Estilo MinutePhysics / Provocador de Pensamiento)

Genera storyboards, hojas de tiempos, guiones visuales y prompts de producción que coinciden con el estilo visual y de ritmo de videos explicativos conceptuales minimalistas dibujados a mano.

---

1. Identidad Visual y Reglas Estéticas

• Lienzo: Fondo nocturno Dracula (#282A36), cero degradados, cero sombras paralelas.
• Trazos: Estilo de tinta dibujada a mano (tiza/monolínea con rugosidad orgánica sutil), grosor de trazo consistente (3px–4px), color de primer plano Dracula (#F8F8F2). Límite seguro para móviles: ningún trazo de diagrama por debajo de 3px a 1080p; las líneas base usan 4px.
• Límite tipográfico seguro para móviles (master único 16:9 de YouTube): Sin texto en pantalla por debajo de 36px a 1080p. Etiquetas secundarias 36–44px, etiquetas clave 48–56px, titulares 72–80px. Si una etiqueta no cabe a 36px, córtala o mueve ese detalle a la narración en lugar de reducirla.
• Paleta (Dracula):
  • Base: Fondo Dracula (#282A36) + primer plano (#F8F8F2).
  • Superficie: Línea actual Dracula (#44475A) para tarjetas resaltadas/activas; usa #313342 para paneles estándar y #1E1F29 para áreas empotradas/pantallas.
  • Acento funcional A: Rojo Dracula (#FF5555) — pérdida, despidos, balance negativo, fricción.
  • Acento funcional B: Verde Dracula (#50FA7B) — ganancias, empleo, reemplazo, balance.
  • Acentos de apoyo (usar con moderación): Rosa (#FF79C6), Púrpura (#BD93F9), Cian (#8BE9FD), Naranja (#FFB86C), Amarillo (#F1FA8C).
  • Relleno neutro: Línea actual Dracula (#44475A) — rellenos sutiles de objetos (escritorios, edificios).
  • Relleno profundo: Comentario Dracula (#6272A4) — solo para formas rellenas más grandes, nunca para texto del cuerpo.
• Tipografía:
  • Estilo de fuente: Manuscrita limpia sans o letra informal (ej., Caveat, Patrick Hand).
  • Densidad de palabras: Máximo 1–5 palabras por llamada. Nunca transcribas la narración completa en pantalla.
  • Ubicación: Colocada directamente arriba, abajo o adyacente al ancla visual asociada.
  • Sin texto de bajo contraste: Las etiquetas secundarias, cejas y subtítulos deben permanecer legibles sobre fondo oscuro: primer plano Dracula (#F8F8F2) o gris lavanda (#B8B9C5). Nunca uses comentario Dracula (#6272A4) o gris lavado para texto; desaparece en proyectores.
  • Sin encabezados de escena en la parte superior izquierda: No repitas la narración como título + subtítulo en la parte superior de las escenas de contenido. La narración lleva la oración; el diagrama lleva solo etiquetas funcionales cortas. Esto evita el “ping-pong visual” de leer arriba a la izquierda, luego mirar al centro.
  • Las tarjetas de capítulo son la única excepción: se puede usar un número de capítulo + un único motivo como transición de pantalla completa. Mantenlas escasas y nunca añadas un párrafo.

---

2. Diseño de Personajes y Metáforas

• Personajes: Figuras simples de palo o frijol. Rostros mínimos (ojos de punto, curva de boca neutral/sutil). Distinciones hechas a través de accesorios simples (sombrero, escritorio, teléfono).
• Metáforas Conceptuales:
  • Tareas/Trabajos: Grupos circulares, contornos punteados que aparecen/desaparecen.
  • Macroeconomía: Balanzas, gráficos de líneas 2D, cuadrículas de puntos/arreglos (ej., 1,000 puntos).
  • Instituciones: Arte lineal básico de edificios geométricos, marcos de puertas que representan acceso/vacantes.

---

3. Reglas de Sincronización, Timing y Ritmo

• Disparo de Sincronización Oral: Los elementos visuales se dibujan o aparecen exactamente en la sílaba en la que se pronuncian.
• Escalonamiento Secuencial: Divide conceptos complejos en componentes visuales discretos introducidos uno por uno (ej., Tarea 1 $\rightarrow$ Tarea 2 $\rightarrow$ brazo de cajero automático toma Tarea 1).
• La Regla del "Espacio para Respirar" (Crucial):
  • Nunca transiciones inmediatamente después de que aparezca un activo.
  • Mantén el fotograma completo durante 1.5 a 3.0 segundos o más según sea necesario después de que concluya la narración de ese punto. Necesitamos asegurarnos de que el usuario pueda procesar todo.
  • Los espectadores necesitan tiempo para leer las llamadas, registrar la relación y absorber la idea antes de que el movimiento se reanude.
• Pausa Mínima de Procesamiento (regla estricta):
  • La revelación visual final en una escena debe tener al menos 2.0 segundos de tiempo en pantalla antes del corte. Si la narración lo hace imposible, mueve la revelación a un punto anterior cuando sea contextual, o extiende la escena hasta la siguiente pausa natural.
  • Nunca cortes en la misma palabra que completa un diagrama.
  • Si la línea final de la narración es solo un pase de mano ("veamos los números", "los adaptadores lo solucionan"), mueve ese texto a la siguiente escena en lugar de dejarlo 0.1–0.8 s en pantalla.
  • Las escenas densas (diagramas multiparte, matemáticas, arquitectura) necesitan el estado final mantenido 2.5–3.5 s. Simplifica el último golpe en lugar de apresurar el corte.
• Transiciones = fundido corto a través del fondo Dracula (regla estricta):
  • Usa un fundido de 4–6 fotogramas a través de #282A36 a 30 fps (0.13–0.2 s). No uses un barrido de izquierda a derecha; hace que el corte se sienta mecánico.
  • Pre-carga el primer visual de la siguiente escena para que el espacio oscuro sea solo un parpadeo, nunca una escena en blanco. Nunca expongas un lienzo vacío por más de ~0.2 s.
  • Si una escena realmente necesita una tarjeta de capítulo, mantén un motivo en pantalla para que la tarjeta nunca sea una diapositiva de texto vacía.
  • Verifica con un fotograma fijo en inicio de escena + 0.4 s. Si está más del ~80% vacío, mueve el primer visual a un punto anterior.

---

4. Composición y Espacio Negativo

• Espacio Negativo: Mantén el 60%–80% del lienzo vacío en todo momento.
• Línea Base / Línea de Tierra: Ancla figuras y edificios a una guía horizontal inferior ininterrumpida.
• Aislamiento del Punto Focal: Mantén 1 zona de enfoque activa por golpe (izquierda, centro o derecha). No animes múltiples cuadrantes no relacionados simultáneamente.
• Transiciones: Fundido corto a través del fondo Dracula #282A36 (4–6 fotogramas), paneo lateral a lo largo de la línea base, o oscurecimiento repentino. Sin barridos de izquierda a derecha, zooms llamativos o rotaciones.
• Mantén el tamaño de fuente grande.

---

5. Flujo de Trabajo de Generación de Storyboards

Cuando se te dé un guion de narración o un tema conceptual:

1. Desglose a Nivel de Tarea: Segmenta la narración en golpes visuales de 3–7 segundos.
2. Mapeo de Metáforas Visuales: Asigna metáforas concretas y minimalistas a afirmaciones económicas/técnicas abstractas.
3. Selección de Texto en Pantalla: Selecciona $\le 3$ palabras ancla por golpe para énfasis en pantalla.
4. Asignación de Timing y Pausas: Marca puntos de sincronización exactos ([SYNC]) y duraciones de pausa ([HOLD: Xs]).

---

6. Plantilla de Salida

Para cada escena de video, formatea la salida de la siguiente manera:

### Escena [Número]: [Título de Escena]
**Marca de Tiempo de Audio:** [MM:SS - MM:SS]
**Narración:** "[Segmento exacto del guion]"

* **Descripción Visual:** (1-2 oraciones sobre la disposición visual y los activos)
* **Texto en Pantalla:** "[Texto exacto]" | Posición: [ej., Superior-Centro] | Color: [ej., Rojo Dracula]
* **Secuencia de Animación:**
  1. `[00:00.0 - Palabra]` Dibujar [Activo A] en la línea base.
  2. `[00:02.0 - Palabra]` Fundir/deslizar [Activo B] dentro de [Activo A].
  3. `[00:03.5 - Palabra]` La etiqueta aparece con un pequeño rebote.
* **Pausa Post-Animación:** [X.X segundos] (Fotograma estático mantenido para asegurar comprensión antes de la transición)
* **Transición de Salida:** [Corte / Paneo por Línea Base a la Izquierda / Fundido a Oscuro]

---

#### 1. Motor de Trazo y Metáfora: **Rough.js**

- **Por qué:** No puedes depender de SVGs estáticos si quieres la sensación orgánica dibujada a mano de MinutePhysics. [Rough.js](https://www.google.com/url?sa=E&q=https%3A%2F%2Froughjs.com%2F) es una biblioteca ligera de lienzo/SVG que toma formas geométricas, líneas y trazados y los renderiza con "rugosidad", "curvatura" y trazos de lápiz ajustables.
    
- **Amigable para LLM:** Muy alta. En lugar de coordenadas de spline complejas, el LLM simplemente llama:
    
    ```tsx
    rc.line(x1, y1, x2, y2, { roughness: 1.5, stroke: '#F8F8F2', strokeWidth: 3 });
    rc.circle(x, y, diameter, { fill: '#50FA7B', fillWeight: 3, roughness: 1.2 });
    ```

#### 2. Entorno de Ejecución de Animación y Timing: **Remotion (React + TypeScript)**

- **Por qué:**
    
    - A diferencia de las animaciones tradicionales de CSS/navegador que pueden perder fotogramas, Remotion renderiza fotograma por fotograma (fps = 30 o 60).
        
    - Tiene hooks incorporados como `interpolate()` y `spring()` para apariciones y escrituras lineales.
        
    - Manejo nativo de la sincronización de audio a través de `useCurrentFrame()`.
        
- **Implementación del Efecto "Dibujar":** Para trazos de línea SVG, un LLM anima `strokeDashoffset` desde la longitud total del trazado hasta 0.

#### 3. Tipografía: **Google Fonts (Caveat o Patrick Hand)**

- Incrusta las fuentes directamente a través de `@remotion/google-fonts` o `@font-face` local.
    
- Configura el estilo estrictamente a `#F8F8F2` con un máximo de 1–5 palabras por llamada.

#### 4. Pipeline de Sincronización de Audio (Upstream): **OpenAI Whisper (Marcas de Tiempo a Nivel de Palabra)**

- Antes de que el LLM anime, la voz en off en bruto se transcribe con marcas de tiempo JSON a nivel de palabra (ej., a través de Whisper `timestamp_granularities=["word"]`).
    
- El LLM recibe el transcript con marcas de tiempo y las convierte en números de fotograma:
    
    ```
    Fotograma Objetivo = Marca de Tiempo (segundos) × FPS
    ```

---