# Crear un vídeo explicativo animado a partir de cualquier documento ## Descripción Este prompt viene de mi vídeo de YouTube [5 prompts de IA que te enseñan lo que no ves de tu negocio](https://youtu.be/8WMWcH1_rbI).  Le das un documento y te devuelve una película explicativa animada y narrada en castellano. Es una sola página HTML que se abre en el navegador, con voz, subtítulos, música y una cámara que se mueve por un lienzo de papel dibujado a mano. Tiene tres estilos: manual (tinta y acuarela), pixel art o los dos combinados. Ojo, es muy largo, más de 500 líneas, porque lleva todo dentro: cómo analizar el documento, cómo escribir el guion, cómo se dibuja cada estilo y qué hay que revisar al final. No hace falta leerlo entero para usarlo. Se copia tal cual. ## Uso 1. Copia el prompt entero y pégalo en tu asistente. Tiene que ser uno que pueda crear una página HTML y enseñártela, porque el resultado es eso. 2. Rellena el bloque de datos de entrada. Lo único obligatorio es el documento. Lo que dejes vacío lo decide la IA y te dice qué ha supuesto. 3. Primero te da una ficha del documento y el guion, y se para. Revísalos y corrige lo que no te guste. 4. Cuando apruebes el guion, construye la película y repasa una lista de comprobaciones antes de dártela. > La voz por defecto es la del navegador y suena robótica. Si la película es para clientes, genera la voz aparte y adjunta el audio. ## Prompt ``` ## PELÍCULA EXPLICATIVA ANIMADA DE UN DOCUMENTO (ESTILO MANUAL Y PIXEL ART) Eres a la vez guionista, diseñador de información, director de animación y programador creativo. Tu trabajo es convertir el documento que te doy en una película explicativa animada, narrada en castellano, con mucha energía visual, que cualquier persona entienda a la primera aunque no conozca el tema. La película se dibuja en un estilo manual: papel marfil, tinta carbón, acuarela suave y letras dibujadas a mano. Se puede hacer en tres versiones: manual, pixel art (el mismo estilo manual pasado por una capa de píxeles) o las dos combinadas. Todo lo necesario para cada una está en este prompt. Todo en español de España: guion, voz, subtítulos, títulos, etiquetas de gráficos, botones y textos de la interfaz. La sensación final debe ser la de una pizarra de papel que cobra vida: todo se mueve todo el rato, nada está quieto, cada segundo pasa algo. Nunca debe parecer una presentación de diapositivas con transiciones. --- ## DATOS DE ENTRADA (rellena lo que sepas, deja vacío lo demás) - DOCUMENTO: [pega el texto o adjunta el archivo] - PÚBLICO: [ej. dirección, equipo comercial, clientes, empleados nuevos, público general] - OBJETIVO: [ej. que lo entiendan, que lo aprueben, que lo apliquen, que lo compren] - ESTILO: [A = manual · B = pixel art · C = combinado. Si está vacío, usa A] - VARIANTE: [clara = papel marfil · oscura = fondo azul profundo. Si está vacío, usa clara] - ACABADO: [habitual · Blueprint de alto impacto. Por defecto, habitual. "Estilo Cowork" también activa el alto impacto] - DURACIÓN DESEADA: [ej. 2 minutos. Si está vacío, decide tú] - TONO: [ej. sobrio, cercano, entusiasta. Si está vacío, decide tú] - COLORES DE MARCA: [ej. #0A2540 y #00D4A0. Si está vacío, usa la paleta Flexoki] - VOZ: [vacío = voz del navegador · o adjunto un audio de voz ya grabado o generado] - QUÉ DEBE QUEDAR CLARO SÍ O SÍ: [opcional] - QUÉ NO DEBE APARECER: [opcional: datos sensibles, nombres, cifras internas] Si un dato está vacío, dedúcelo del documento y dime qué has supuesto. --- ## FASE 1: ANALIZA EL DOCUMENTO (antes de escribir nada) Lee el documento entero y prepara una ficha breve con: 1. Tipo de documento (elige uno de la lista de abajo o di que es híbrido). 2. Idea central en una frase de menos de 20 palabras. Si no puedes resumirla así, todavía no lo has entendido: vuelve a leer. 3. Las 3-7 ideas clave que sostienen esa idea central, en orden de importancia. 4. Datos y cifras clave, con la página o sección de donde salen. 5. Términos técnicos o internos que el público no conocerá y cómo los explicarás. 6. Nivel técnico del documento y nivel del público. Si hay diferencia, cómo la salvas. 7. Qué parte del documento es relleno y vas a dejar fuera. 8. Huecos: cosas que el público preguntará y el documento no responde. 9. Metáfora visual principal: un objeto, espacio o sistema visual que represente la idea central y que pueda moverse, crecer y transformarse a lo largo de toda la película. Prefiere objetos sencillos y reconocibles (documentos, herramientas, personas, caminos) antes que cajas abstractas. 10. Colores: qué color Flexoki tiene cada concepto que se repite, y qué parejas de acento usarás en cada capítulo. ## TIPOS DE DOCUMENTO Y SU ESTRUCTURA Elige la estructura según el tipo. Son guías, no jaulas: puedes mezclar o adaptar si el contenido lo pide, pero explícame por qué. - PAPER O ESTUDIO CIENTÍFICO: gancho → la pregunta de investigación → por qué era difícil → método → resultados (uno por capítulo) → límites y controles → qué significa → qué falta. - INFORME DE RESULTADOS O DATOS (trimestral, encuesta, análisis): gancho con el dato más llamativo → contexto → 3-5 hallazgos → qué los explica → qué hacer con ellos. - DOCUMENTO DE PRODUCTO (lanzamiento, especificación, PRD, roadmap): el problema del usuario contado como una escena real → cómo se resuelve hoy y por qué falla → el producto → cómo funciona paso a paso → ventajas con datos → qué viene después. - METODOLOGÍA, PROCESO O PROCEDIMIENTO: qué consigues al final → visión general del proceso entero → cada paso (qué se hace, quién, con qué) → errores típicos → resumen en un esquema. - ESTRATEGIA O PLAN (plan anual, OKR, transformación): dónde estamos → a dónde queremos ir → por qué ahora → las apuestas → cómo lo mediremos → qué se le pide a cada uno. - PROPUESTA COMERCIAL O DE NEGOCIO: el problema del cliente → lo que cuesta no resolverlo → la propuesta → cómo funciona → pruebas (casos, datos) → próximos pasos. - POLÍTICA, NORMATIVA O DOCUMENTO INTERNO DE RRHH: por qué existe → a quién afecta → qué cambia (antes / después) → qué se puede y qué no, con ejemplos → a quién acudir. - DOCUMENTACIÓN TÉCNICA O ARQUITECTURA: para qué sirve el sistema → vista general → cada pieza y su función → recorrido de un dato o petición de principio a fin → puntos débiles y decisiones clave. - CASO DE ÉXITO O CASO DE ESTUDIO: el cliente y su situación → el problema → lo que se probó → la solución → resultados en cifras → lección aplicable. - MATERIAL DE FORMACIÓN: qué sabrás hacer al terminar → conceptos de uno en uno, cada uno con ejemplo → ejercicio mental o pregunta → resumen. - COMPARATIVA O EVALUACIÓN DE OPCIONES: la decisión a tomar → criterios → cada opción frente a los criterios → tabla final → recomendación y por qué. - POSTMORTEM O ANÁLISIS DE INCIDENTE: qué pasó (línea de tiempo) → impacto → causa raíz → por qué no se detectó → qué se cambia para que no vuelva a pasar. Tono neutro, sin culpables. - ARTÍCULO DE OPINIÓN O ENSAYO: gancho → tesis → argumentos uno a uno → la mejor objeción y su respuesta → conclusión. - OTRO O HÍBRIDO: propón tú la estructura y justifícala en dos líneas. Reglas para cualquier estructura: - Empieza SIEMPRE con un gancho fuerte: una pregunta, un dato sorprendente o una escena concreta, con un arranque visual potente en los primeros 3 segundos (por ejemplo, la tinta que se dibuja sola a toda velocidad y una mancha de acuarela que estalla). Nunca con "En este vídeo vamos a ver...". - Un capítulo = una idea. Si un capítulo necesita dos ideas, divídelo. - Termina con una idea que se quede en la cabeza o una acción clara, según el objetivo. ## DURACIÓN Si no te la indico, decide según la densidad del contenido, no según su longitud: - Contenido con 1-2 ideas: 1-2 minutos, 4-6 capítulos. - Contenido con 3-5 ideas: 2-4 minutos, 6-10 capítulos. - Contenido denso (paper, informe técnico): 4-6 minutos, 10-15 capítulos. Cada capítulo dura entre 15 y 30 segundos. Mejor corto y claro que largo y completo. --- ## FASE 2: ESCRIBE EL GUION ### Reglas de redacción - Castellano de España, natural, como si se lo contaras a un compañero listo que no conoce el tema. - Frases de menos de 20 palabras. Una idea por frase. - Voz activa. Verbos concretos. Nada de "cabe destacar", "es importante señalar", "en este sentido", "a nivel de", "poner en valor". - Cada término técnico se explica la primera vez con palabras normales o con una comparación de la vida diaria. - Las cifras se dicen como se hablan: "casi la mitad" mejor que "el 48,7 %", salvo que la precisión sea necesaria. En pantalla sí puede ir la cifra exacta. - Escribe para el oído: nada de paréntesis, siglas sin explicar ni listas largas. - Ritmo ágil: alterna frases cortas y medias. Usa frases muy cortas como golpes de efecto ("Y no es todo.", "Diez veces más rápido."). - Marca en el guion las palabras clave de cada frase: en ellas habrá un golpe visual. ### Rigor - Usa SOLO información del documento. No inventes cifras, nombres, citas ni ejemplos presentados como reales. - Si redondeas o simplificas, que no cambie el sentido. - Si pones un ejemplo inventado para explicar algo, que se note que es un ejemplo ("imagina que..."). - Si el documento tiene límites, dudas o riesgos, cuéntalos. No lo vendas como más de lo que es. - No incluyas datos personales ni información sensible que no sea necesaria para entender el mensaje. - No inventes conexiones entre elementos que el documento no relaciona. ### Formato del guion Entrégame una tabla con, para cada capítulo: - Número y nombre corto del capítulo (2-4 palabras). - Texto de la narración, frase a frase, con las palabras clave marcadas. - Qué se ve en pantalla en cada frase y qué se mueve. - Pareja de colores del capítulo. - Tipo de transición de entrada al capítulo. - Duración estimada. - Fuente en el documento de cada dato. Y además el título de la película, el subtítulo y el párrafo de la pantalla de inicio. PARA AQUÍ y espera a que apruebe la ficha y el guion. No programes nada todavía. --- ## FASE 3: CONSTRUYE LA PELÍCULA ### Formato técnico - Una sola página HTML autocontenida (todo el CSS y JS dentro), publicada como artefacto. - Toda la película vive en UN lienzo infinito de papel (canvas 2D, a 60 fps). Cada capítulo ocupa una zona del lienzo. La cámara viaja entre zonas con zoom, desplazamiento y rotación, sin cortes. - Las zonas pueden estar anidadas: un detalle puede vivir dentro de otro elemento, y la cámara se lanza hacia él para "entrar". - Un MANIFEST en JSON con escenas (id, inicio, fin) y frases con tiempos t0/t1 controla todo: cámara, animaciones, voz y subtítulos. - Se puede saltar a cualquier momento y todo se dibuja bien (las animaciones dependen del tiempo, no de lo que pasó antes). Esto incluye lo aleatorio: usa siempre semillas fijas, nunca Math.random() suelto al dibujar. - Los subtítulos y los controles se dibujan siempre nítidos y legibles, sea cual sea el estilo. - Si un efecto no sale bien con código, simplifícalo antes que dejarlo feo. ### Narración, subtítulos y sonido - Voz: si te adjunto un audio, intégralo en base64 y sincroniza el MANIFEST con él. Si no, usa la Web Speech API con una voz es-ES (elige la más natural disponible) y ajusta los tiempos a lo que tarda en leer cada frase. Avísame de que la voz del navegador suena robótica y de que, si la película es para clientes, conviene una voz generada aparte. - Subtítulos centrados abajo, que se iluminan palabra a palabra al ritmo de la voz. Las palabras clave se marcan con el color de acento del capítulo y un pequeño salto de escala. - Música de fondo generada con Web Audio, con pulso rítmico claro (unos 100-120 BPM), que baja de volumen cuando habla la voz. En estilo manual, sonidos suaves y acústicos (notas punteadas, marimba, piano ligero). En pixel art, la misma música con ondas cuadradas y triangulares, tipo videojuego. En combinado, mezcla de las dos. Botón para silenciarla. - Efectos de sonido sutiles generados con Web Audio: un roce de papel en cada viaje de cámara, un trazo de lápiz o pluma cuando aparece un elemento, un golpe grave en las cifras clave. En pixel art, sus versiones en "blip". Que acompañen, no que molesten. --- ## LOS TRES ESTILOS ### A. Manual Es la base de los otros dos. **Papel y tinta** - Papel marfil #F2F0E5 con cuadrícula casi invisible y textura de papel discreta, generada con ruido. - Tinta carbón #100F0F. Contornos finos y ligeramente imperfectos. - Mucho espacio libre. Serio, limpio y explicativo. - Sin borde coloreado, firma, cajetín, cotas ni anotaciones ficticias. **Acuarela Flexoki** - Color en manchas de acuarela localizadas y translúcidas: se extienden desde dentro, con el borde un poco más oscuro y capas que se superponen con transparencia. - Colores lo más próximos posible a Flexoki, rebajados como acuarela transparente: - Azul #4385BE, cian #3AA99F, púrpura #8B7EC8. - Naranja #DA702C, ocre #D0A215, verde #879A39, magenta #CE5D97. - Rojo #D14D41, reservado para riesgo o error. - Dos acentos por capítulo, con un tercero puntual si ayuda a leer. Alterna parejas entre capítulos con suavidad: azul-púrpura, cian-azul, cian-púrpura, naranja-azul, verde-cian, ocre-púrpura. No hagas toda la película azul-púrpura. - Un concepto que se repite tiene siempre el mismo color en toda la película, aunque cambie la pareja del capítulo. Dentro de una comparación, cada lado conserva su color. **Trazo que hierve** - Cada contorno se redibuja con pequeñas variaciones a unos 8-12 fotogramas por segundo, alternando 3 o 4 versiones fijas (con semilla), como el dibujo animado a lápiz. El movimiento general sí va a 60 fps. - Las líneas se dibujan con presión variable: más gruesas al empezar, más finas al terminar. **Letra dibujada a mano, inspirada en Consolas** - Parte de una monoespaciada de programación parecida a Consolas (por ejemplo Inconsolata de Google Fonts, con tildes y eñe) y dibuja cada letra por separado. - A cada letra, con su semilla: pequeño desplazamiento, giro de 1-3 grados, altura algo distinta, grosor variable y contorno algo tembloroso. Línea base suavemente irregular y espaciado imperfecto. Las letras repetidas no son idénticas. - Aspecto manual primero, parecido a Consolas después. Nada de cursiva ornamental, letra escolar ni serifas editoriales. - Si una etiqueta parece texto digital pegado encima, añade más irregularidad. - En títulos, etiquetas y cifras, la letra tiembla al ritmo del trazo. En subtítulos, irregularidad mínima y sin temblor, para que se lean sin esfuerzo. **Objetos y personas** - Objetos esquemáticos reconocibles (documentos, herramientas, pantallas, caminos) cuando expliquen mejor que una caja. Las cajas solo para ideas abstractas. - Personas: figuras sobrias, dibujadas con pocos trazos, sin rasgos de nadie real. - Sin mascotas, robots, cerebros ni engranajes de adorno, salvo que sean el contenido real. - Flechas solo para dirección, líneas para relación, contenedores para pertenencia. ### B. Pixel art (el estilo manual con una capa de píxeles) Es la misma película del estilo A, con el mismo papel, tinta, acuarela, letra y composición, pero vista a través de una rejilla de píxeles. Debe parecer pixel art hecho con intención, no una imagen borrosa reducida. **Cómo se construye** - Dibuja cada fotograma en estilo manual en un lienzo interno, y pásalo a un lienzo de baja resolución (por defecto 320×180; 480×270 si hay mucho texto o datos). - Reduce los colores a una paleta cerrada de 16-24 colores sacada de Flexoki (papel, tinta, neutros #DAD8CE, #B7B5AC y #6F6E69, y 2-3 tonos de cada acento). Ningún color fuera de esa paleta. - Las transparencias de la acuarela y la textura del papel se convierten en tramas de puntos (dithering tipo Bayer 4×4). Nada de degradados suaves ni transparencias parciales dentro de la capa de píxeles. - Amplía a pantalla con escala entera y sin suavizado (imageSmoothingEnabled = false, image-rendering: pixelated), centrado. - Sin desenfoques ni shadowBlur. Los brillos y estelas se hacen con píxeles de la paleta. **Movimiento en píxeles** - La cámara y los objetos se colocan siempre en píxeles enteros, para que la imagen no vibre. - Los zooms se hacen redibujando la escena a la resolución base desde la nueva posición, nunca ampliando píxeles a medias. - El trazo que hierve y los personajes cambian de pose a 6-12 fotogramas por segundo, como en los juegos antiguos. No se giran ni escalan sprites por código: si hace falta otro ángulo, se dibuja otro fotograma. - Partículas y objetos móviles se crean una vez al principio y se reutilizan. **Letra y personas** - La letra de la escena se dibuja en la misma rejilla, con poco detalle, aunque los objetos tengan más. - Personas como sprites compactos y coloridos, de cuerpo completo y silueta clara. Nunca figuras de palo. - Malla de píxeles muy suave, activable con una tecla (G), activa por defecto. ### C. Combinado Mezcla los dos en la misma pantalla, con una regla clara: - El papel, la estructura y lo que ya se ha contado se ven en estilo manual nítido. - Lo que está en acción (lo que aparece, se mueve, cuenta o se transforma) pasa por la capa de píxeles: partículas, cifras que cuentan, personajes, paquetes de datos que viajan. - Transición propia: los elementos entran pixelados y al asentarse "se revelan" en trazo manual, o al revés cuando se van. - Que se note que es intencionado. Si en algún momento parece un error, acércalo al estilo A. ### Acabado opcional - Blueprint de alto impacto Aplica este acabado si David pide "Blueprint de alto impacto", "estilo Cowork" o que el dibujo tipo plano tenga más saturación o una lectura más dirigida. Es un acabado del estilo elegido y se puede usar en una sola escena o en toda la pieza, según el encargo. - Conserva la tinta irregular, el sombreado a rayas y las marcas discretas de plano. Sobre papel marfil cuadriculado, deja zonas de papel visible entre las formas. Adapta el color al fondo que pida el encargo. - Usa manchas de acuarela más amplias y saturadas, con granulación y bordes que se expanden. Elige dos familias de color contrastadas según el tema y concentra el contraste en el motivo principal. - Haz que el motivo principal se entienda de un vistazo al tamaño final de reproducción. Guía la mirada con escala, posición, color y orden de aparición. Muestra objetos, personas o interfaces reales del caso y usa flechas únicamente para indicar relaciones concretas. Mantén los rótulos breves y legibles. Mantén el ritmo de la narración y haz que la animación siga el orden de lectura de la escena. ### Variante oscura (para cualquiera de los tres) - Fondo azul profundo #01152F, con zonas en #1E3650 y #12253B. Nunca negro. - La tinta pasa a #F2F0E5 o #DAD8CE. Nunca blanco puro. - Acuarela más luminosa (tonos claros de cada familia Flexoki). - En pixel art, el paso de un azul a otro se hace por bandas o con tramas, no con degradado suave. --- ## DINAMISMO: LA PRIORIDAD DE ESTA PELÍCULA Esta sección manda sobre todo lo visual. Si dudas entre algo más quieto o algo más dinámico, elige lo dinámico (sin perder claridad). ### Regla general: nada está quieto nunca - En cada fotograma tiene que haber algo moviéndose: la cámara, el papel, los elementos o todo a la vez. - Cada 2-3 segundos pasa algo nuevo en pantalla: aparece un elemento, cambia un dato, la cámara se mueve, algo se transforma. - No hay ningún momento de más de 1 segundo con la imagen congelada, ni siquiera entre capítulos. - El trazo que hierve ya da vida a todo, pero no basta: además tiene que haber movimiento real. ### Cámara viva - La cámara nunca se queda fija: cuando no viaja, deriva despacio (ligero desplazamiento, zoom lento hacia dentro o hacia fuera y una rotación de 1-2 grados). - Viajes entre capítulos rápidos y con energía: 0,8-1,5 segundos, con aceleración fuerte al salir y frenada suave al llegar. Mezcla tipos: zoom out → desplazamiento → zoom in, barridos laterales rápidos, caídas en picado hacia un detalle, giros de 90 grados para pasar a otra zona. - En estilo manual, los barridos rápidos dejan un rastro de trazos de lápiz. En pixel art, fotogramas de arrastre (smear) en píxeles. - Pequeños empujones de cámara (zoom del 3-5 % en 0,3 segundos) en cada palabra clave. - Ligero temblor de cámara solo en los golpes más fuertes (cifra clave, giro de la historia). En pixel art, de 1-2 píxeles. - Profundidad con parallax: al menos 3 capas (papel y cuadrícula, dibujo principal, primer plano con manchas o trazos sueltos) que se mueven a velocidades distintas cuando la cámara se desplaza. ### Papel vivo - El fondo nunca es plano: la cuadrícula se desplaza despacio, manchas de acuarela muy tenues que se extienden y respiran, motas de pigmento flotando, salpicaduras pequeñas de tinta. - El papel reacciona a la historia: más manchas y salpicaduras en los momentos de energía, cambio de pareja de color según el capítulo, se llena de motas cuando algo crece. - Textura de papel animada encima de todo (en pixel art, una trama que cambia). ### Elementos que respiran - Todo elemento en pantalla tiene micro-movimiento continuo: flota, respira (escala del 98 al 102 %), oscila, gira despacio o su acuarela late. - Las líneas y flechas tienen algo que circula por ellas: puntos de tinta, pulsos de color o trazos discontinuos que avanzan. - Los números no aparecen: se dibujan y cuentan hacia arriba con velocidad variable, y terminan con un pequeño rebote. - Los gráficos no aparecen: se construyen (barras que se rellenan de acuarela con rebote, líneas que se trazan a mano con una punta de lápiz visible, puntos que caen como gotas de tinta y se colocan). - Las formas entran con energía: el contorno se dibuja solo a toda velocidad y la acuarela lo rellena después, escala desde 0 con rebote, deslizamiento con estela de trazos, o una explosión de motas que se juntan y forman el objeto. ### Entradas escalonadas y coreografía - Cuando aparecen varios elementos, nunca a la vez: en cascada, con 60-120 ms entre uno y otro. - Los elementos que salen no desaparecen sin más: se borran como con goma, se encogen hacia un punto, se disuelven en motas o se transforman en el siguiente elemento. - Usa transformaciones siempre que puedas: un número que se convierte en una barra, un círculo que se abre y se convierte en un diagrama, un documento que se divide en sus partes. La continuidad visual entre ideas es clave. - La metáfora visual principal vuelve en varios capítulos y evoluciona: crece, se divide, cambia de color, se conecta con otras cosas. ### Texto cinético - Los títulos de capítulo se escriben solos, letra a letra, como si una mano invisible los dibujara rápido, con una mancha de acuarela del color de acento detrás. - Las frases clave en pantalla (no los subtítulos) se animan: palabras que caen y se colocan, se subrayan con un trazo que se dibuja, o se tachan y se reemplazan. - Las cifras clave salen enormes, ocupando media pantalla, con una salpicadura de color y un golpe de cámara. ### Ritmo sincronizado - Cada palabra clave del guion dispara un golpe visual: mancha de color, empujón de cámara, aparición de un elemento o subrayado. - Las manchas del fondo y las motas laten al ritmo de la música. - Las transiciones entre capítulos coinciden con un tiempo fuerte de la música. ### Efectos - Estelas de trazos en lo que se mueve rápido, salpicaduras breves en los momentos clave, acuarela que se expande como "brillo" de los elementos de acento. - Viñeteado suave en los bordes, como papel envejecido, que se intensifica en los viajes de cámara. - Nada de neón ni brillos digitales: todo tiene que parecer hecho con tinta, lápiz, acuarela o píxeles. - Sin pasarse: los efectos refuerzan la idea, nunca la tapan. ### Límites del dinamismo (para que se siga entendiendo) - El texto que hay que leer se queda estable mientras se lee: puede respirar un poco, pero no se mueve tanto que cueste leerlo. - En cada momento hay UN foco principal claro, con color. Lo demás se mueve, pero en gris tinta o más pálido, y más despacio. - Nada parpadea más de 3 veces por segundo (evita destellos que puedan molestar). - Con prefers-reduced-motion activado: sin temblores, sin barridos rápidos ni salpicaduras, trazo que hierve casi parado, transiciones por fundido y micro-movimientos muy suaves. - Rendimiento: 60 fps en un portátil normal y fluido en móvil. Si hace falta, reduce motas y capas en pantallas pequeñas. Cachea los trazos que hierven (3-4 versiones por elemento) en vez de recalcularlos en cada fotograma. --- ## LENGUAJE VISUAL: ELIGE EL GRÁFICO SEGÚN EL TIPO DE IDEA Todo se dibuja con código, en el estilo elegido. Nada de imágenes de stock, emojis ni iconos genéricos. Usa esta guía, y anima siempre cada gráfico como se explica arriba: - Una cifra clave → número enorme dibujado a mano que cuenta hacia arriba, con su contexto que entra después. - Comparación entre dos cosas → dos columnas o dos objetos, cada uno con su color de acuarela, que se enfrentan o se separan. - Antes / después → la misma escena que se transforma ante tus ojos: se borra una parte y se redibuja. - Proceso o pasos → flujo de objetos o cajas que se van coloreando, con una gota de tinta que recorre el camino. - Línea de tiempo o evolución → eje dibujado a mano que la cámara recorre a toda velocidad, frenando en cada hito. - Jerarquía o partes de un todo → árbol que crece rama a rama, o un objeto en el que la cámara entra con zoom. - Relaciones entre actores → red de nodos que se atraen, se conectan y vibran, con puntos de tinta viajando por las conexiones. - Proporciones → barras o bloques que se llenan de acuarela con rebote, nunca tartas con más de 3 partes. - Tendencia en datos → gráfico de líneas o dispersión que se dibuja punto a punto, con la punta del lápiz visible. Los datos se colocan con sus valores exactos: el trazo puede temblar, pero los puntos no se mueven de su sitio. - Tabla de evaluación → cuadrícula dibujada a mano que se rellena celda a celda con marcas que aparecen con un golpe. - Producto o interfaz → maqueta de la pantalla dibujada a mano, con un cursor que la usa, clics con ondas y pantallas que se deslizan. - Arquitectura técnica → cajas y flechas con paquetes de datos que viajan sin parar entre ellas. - Persona o usuario → figura sobria (o sprite compacto en pixel art) que se mueve y gesticula, sin rasgos de nadie real. - Concepto abstracto → una metáfora visual sencilla y coherente, en movimiento, que se reutiliza cada vez que vuelve esa idea. - Riesgo o límite → el mismo gráfico con una zona que se marca en rojo, tiembla o se tacha. En los gráficos con cifras, conserva valores, unidades, escalas y línea de base. El estilo manual nunca cambia un dato. Un mismo concepto tiene siempre el mismo color, forma y posición relativa en toda la película. Esto ayuda a seguir el hilo. ## TIPOGRAFÍA Y COLORES DE MARCA Tipografías de Google Fonts (comprueba que tienen tildes, eñe y signos de apertura): - Base de la letra dibujada: Inconsolata (u otra monoespaciada tipo Consolas), deformada letra a letra como se explica en el estilo A. - Subtítulos: la misma base, casi sin deformar, en peso alto y tamaño cómodo. - Pixel art: un alfabeto de píxeles definido en el propio código (5×7 o 6×8, con tildes, eñe, ¿ y ¡), o Pixelify Sans dibujada a la resolución de la rejilla y sin suavizado. Si hay COLORES DE MARCA, úsalos como acentos en lugar de una de las parejas Flexoki, rebajados como acuarela, y comprueba que se leen bien sobre el papel. Ajusta la intensidad del dinamismo al tipo de documento, pero nunca por debajo de "movimiento constante": - Producto, comercial o formación: máxima energía, más color, más rebotes, más salpicaduras. - Científico o técnico: energía alta pero precisa, movimientos limpios, menos rebote. - Interno, RRHH o normativo: energía media, movimientos suaves y continuos, tono cercano. - Incidente o riesgo: energía media, movimientos firmes, sin salpicaduras festivas. ## INTERFAZ - Pantalla de inicio animada (papel vivo con motas y la metáfora visual principal moviéndose detrás): etiqueta pequeña ("Película de X minutos · [tipo de documento, fecha]"), título grande que se dibuja letra a letra con una palabra en color de acento, un párrafo de resumen y botón "Ver la película" dibujado a mano que late suavemente. Debajo, una línea: "Con narración · puedes hacer zoom y moverte por el lienzo en cualquier momento". Al pulsar el botón, la cámara se lanza hacia dentro del papel y empieza la película. - Arriba a la derecha: número de capítulo ("03 / 12") y nombre del capítulo, que cambian con una animación. - Barra inferior: play/pausa, línea de tiempo dividida por capítulos (con el nombre al pasar el ratón), tiempo actual / total, botones de subtítulos (C), música (M), malla de píxeles (G, solo en pixel art y combinado) y pantalla completa. Barra espaciadora para pausar, flechas para saltar de capítulo. Controles con aspecto dibujado a mano (o en píxeles en estilo B), pero claros. - El usuario puede hacer scroll para zoom y arrastrar para moverse por el lienzo en cualquier momento. Entonces aparece un botón "SEGUIR PELÍCULA" para volver. Doble clic también vuelve. Mientras explora, el lienzo sigue vivo. - Al final: la cámara se aleja y se ve todo el lienzo como un cuaderno lleno, un mapa vivo de lo contado, con botones "Ver otra vez" y "Explorar el lienzo". - Funciona en móvil (pellizcar para zoom, interfaz simplificada). - El canvas y los controles tienen etiquetas accesibles. Nada esencial depende solo del color. --- ## FASE 4: REVISA ANTES DE ENTREGAR Comprueba y dime el resultado de cada punto: - Cada cifra de la película coincide con el documento. - Voz, subtítulos y animaciones van sincronizados en todos los capítulos. - No hay ningún momento con la imagen quieta más de 1 segundo. - Cada 2-3 segundos pasa algo nuevo en pantalla. - Aun con todo el movimiento, en cada momento se sabe dónde mirar y el texto se lee bien. - El estilo elegido se respeta en toda la película: - Manual: papel marfil (o azul en la variante oscura), tinta carbón, acuarela Flexoki, parejas que varían entre capítulos, letra que parece dibujada y no tipografía pegada. - Pixel art: una sola rejilla, escala entera, ningún píxel borroso, ningún color fuera de la paleta, posiciones enteras. - Combinado: la regla de qué va en píxeles y qué en manual se cumple siempre. - Si se pidió Blueprint de alto impacto, comprueba que el motivo principal se reconoce en un fotograma reducido y que el color y el orden de aparición aclaran lo que se explica. - Saltar a cualquier punto de la línea de tiempo dibuja lo mismo que verlo de seguido (semillas fijas). - No hay texto en inglés en ninguna parte (incluidos botones y etiquetas). - No hay textos que se solapen ni que se salgan de pantalla, ni en escritorio ni en móvil. - Va fluido (60 fps). - Alguien que no ha leído el documento podría explicar la idea central tras verla. Al final, dame en cuatro líneas: qué tipo de documento has detectado, qué estructura has usado, qué estilo y variante has aplicado y qué has dejado fuera. ```