Explicador de alta energía

Una pieza de hype de 12 a 20 segundos que impacta como un showreel. Cada medio segundo algo aterriza en el ritmo, pero nunca se siente como cortes aleatorios, porque una forma lleva la mirada a través de cada transición: una chispa se convierte en una línea, la línea inunda la pantalla para convertirse en el siguiente fondo, un punto se separa y se convierte en la bola alrededor de la cual se construye la siguiente escena.

Lo escribes como una sola página HTML que renderiza cualquier fotograma a partir de un valor de tiempo, y luego lo renderizas a MP4 con desenfoque de movimiento y una banda sonora sintetizada.

Paso 1: Obtener el briefing (un mensaje, luego a trabajar)

Pregunta todo en un mensaje, luego trabaja por tu cuenta. Solo el producto es obligatorio; para cualquier cosa que quede en blanco, decide tú mismo y di lo que elegiste.

Producto: nombre y qué hace en unas pocas frases. Una URL del sitio web es aún mejor.
La única cosa que el espectador debe recordar (por ejemplo, "escribe una idea, obtén una app en vivo").
Marca: colores, fuentes, archivo de logo, o "usa el sitio web". Si no hay, usa la paleta por defecto a continuación.
Formato: 16:9 (1920×1080) o 9:16 (1080×1920). Por defecto 16:9.
Duración: la duración por defecto se indica abajo para este estilo.
Música: su propia pista (una ruta de archivo), o deja que sintetices una. Por defecto: sintetizar.
Dirección (opcional): escenas que quieran, un eslogan, un llamado a la acción, cualquier cosa para evitar.

Si te dieron una URL, léela (fetch web) para obtener las palabras reales, características, colores y nombres de fuentes del producto antes de escribir nada. Usa sus palabras reales para etiquetas de UI y eslóganes.

Nunca inventes hechos. No inventes cifras de clientes, ingresos, calificaciones, testimonios ni citas. Números solo si el usuario o el sitio web los indica; de lo contrario, usa barras relativas, progreso y líneas de esqueleto de marcador de posición. El contenido de ejemplo dentro de la UI (un prompt, un nombre de archivo, un nombre de proyecto, precios en un recibo) está bien y debe ser creíble; las afirmaciones sobre el producto en sí (estadísticas, recuentos de usuarios, calificaciones, ofertas como "gratis") no lo están. Los llamados a la acción usan solo una URL o una oferta que el usuario o el sitio web haya dado; si no, termina con el nombre y el eslogan.

Logos. Usa un logo solo si el usuario proporciona el archivo o es su propio producto y lo solicita. De lo contrario, escribe el nombre como texto en la fuente de la marca. Logos de terceros (integraciones) solo si se proporcionan; de lo contrario, azulejos redondeados neutros con el nombre.

Duración por defecto para este estilo: 15 segundos (128 BPM, 8 compases). Rango 12–20.

Paso 2: Planificar las escenas, luego construir

La estructura (6–8 escenas de 1.5–3 s, en una rejilla de 120–140 BPM)

Elige entre estos tipos de escena y mapea el producto en ellas. Escribe primero la hoja de ritmo (escena, hora de inicio en la rejilla de ritmo, qué entra, qué sale, sonido).

Apertura chispa (oscuro). Lienzo casi negro con una rejilla tenue. Aparece una pequeña marca de acento, pulsa, se estira hasta convertirse en una línea horizontal delgada a través del marco con una pequeña etiqueta mono (producto / lanzamiento — 2026), tiembla una vez, luego la línea se expande verticalmente en una inundación de pantalla completa del color de acento. Esa inundación es el siguiente fondo.
Golpe de marca. El nombre del producto en una grotesca pesada, todo en mayúsculas, enorme, las letras reveladas por máscaras en corcheas consecutivas, un pequeño texto mono arriba (PRESENTANDO — 2026) y una línea serif itálica debajo (qué es, 2–4 palabras). El peso puede transformarse de fino a negro. El punto final o el punto de una letra se separa y crece hasta convertirse en la forma que comienza la siguiente escena.
Trío cinético. La propuesta de valor como tres palabras o frases cortas, dos tiempos cada una (tres para una palabra escrita a mano, para que pueda leerse), cada una con su propio tratamiento y su propio fondo, intercambiadas bruscamente en el ritmo (dentro de esta escena los intercambios son el ritmo, por lo que no cuentan como cortes): oscuro sobre crema; acento sobre negro con la palabra repetida como un patrón de contorno que llena el marco; blanco sobre azul eléctrico dentro de soportes de esquina de visor con una pequeña etiqueta 1920 × 1080; una última palabra en escritura a mano que se dibuja a sí misma. Cada palabra entra con un desenfoque/deslizamiento rápido y aterriza con un ligero sobrepaso.
Visual distintivo. Un momento de "cómo hicieron eso" que simboliza el producto: un campo 3D de cubos que ondulan desde el centro (dibujado en canvas con tu propia proyección de perspectiva, coloreado por altura con la paleta), un flujo de partículas generativo que se condensa en un anillo y estalla hacia afuera, o una gota líquida que se transforma entre formas. Elige la que se ajuste a la idea del producto (bloques de construcción → cubos, datos/IA → partículas, flexibilidad → líquido). La cámara se inclina u orbita lentamente mientras se reproduce.
Micro-momento del producto. Una interacción real del producto como una tarjeta UI flotante, ligeramente inclinada en 3D con dos tarjetas fantasma apiladas detrás: el cursor activa un interruptor, presiona el botón principal, una barra de progreso se llena en el color de acento con un porcentaje, el botón cambia a Listo ✓, un toast se desliza en la parte superior derecha. Usa las etiquetas reales del producto.
Prueba (solo si existen números reales). Un gran contador (+312% estilo, dígitos borrosos mientras giran), un anillo de dona, barras escalonadas que se elevan con una barra de acento, una línea que se dibuja sobre ellas con un tooltip. Sin números reales → saltar esta escena o mostrar las capacidades reales del producto como una lista que aparece de golpe.
Puente líquido/morfosis. La forma de la escena anterior se colapsa en un punto, el punto se convierte en un pulso de anillo sobre oscuro, que se convierte en el punto del logo.
Tarjeta final (mantener 2 s). Logo o nombre con el punto de acento, eslogan serif itálico, una línea mono con tracking que se escribe letra por letra (la URL real o llamado a la acción si se proporcionan; de lo contrario, una línea corta del briefing), una regla fina.

No todos los productos necesitan todas las escenas; 6 fuertes superan a 8 débiles. Mantén una idea por escena.

Reglas que lo hacen parecer caro

Las transiciones son objetos, no cortes. Cada escena pasa a la siguiente a través de una forma (inundación, barrido por una barra que crece, un punto que crece hasta convertirse en el siguiente fondo, una palabra que se acerca a la cámara). Un corte brusco entre escenas está permitido solo en un tiempo fuerte, como máximo dos veces.
Todo aterriza en la rejilla. Cambios grandes en los tiempos fuertes, tipografía en corcheas o semicorcheas. Sobrepaso ligeramente (z ≈ 0.6–0.7) para impactos, luego asentamiento.
Marco HUD en cada escena: soportes de esquina delgados, ESCENA 02 / 07 arriba a la derecha, una etiqueta de categoría abajo a la izquierda en mono pequeño (TIPO CINÉTICO, PRODUCTO, DATOS), y un código de tiempo en ejecución abajo a la derecha con un punto rojo. Pequeño (12–14 px a 1080p) y aproximadamente 50% de opacidad; debe sentirse como un visor de cámara.
Textura: una viñeta radial suave en cada fondo plano, un grano de película muy sutil (pre-genera algunas baldosas de grano con semilla al cargar y cíclalas), y desenfoque de movimiento real.
Tipografía: una grotesca pesada para impactos (por ejemplo, Inter Tight 900 o Archivo Black), una serif itálica para la línea humana (Instrument Serif italic), una mono para HUD y subtítulos (JetBrains Mono o Geist Mono). Si la marca tiene fuentes, usa las suyas para el nombre y mantén la mono para el HUD.
Paleta por defecto: tinta #0B0B10, acento #FF4F1A, crema #EDEBE4, azul eléctrico #2F47FF, blanco. El color principal de la marca reemplaza el acento y su segundo color reemplaza el azul; una marca de un solo color usa un tono profundo de su color como segundo.
Prohibido: aspecto de plantilla estándar, brillos en todo, emoji, más de 3 colores en una escena (sin contar blanco y negro), texto más pequeño de lo legible de un vistazo, cualquier escena sin movimiento.

Sonido

128 BPM (o la pista del usuario). Contundente: bombo en cada tiempo, palmada en 2 y 4, un subgrave siguiendo las raíces de la escena, un riser filtrado antes del golpe de marca y la tarjeta final, un impacto (bajo boom + ráfaga de ruido) en cada inundación, bips tonales cortos en cada palabra escrita, un whoosh (barrido de ruido con filtro pasa banda) en cada transición transportada, un suave ring-out en la tarjeta final. Mezcla la música debajo de los golpes.

Cómo se debe construir la página

Un archivo HTML autónomo (CSS y JS inline; imágenes solo si el usuario las proporcionó). Dibuja con DOM + transformaciones CSS, SVG, o un canvas de pantalla completa, lo que sea adecuado.

El contrato de la página

window.VIDEO = {w, h, duration} y window.seek(t), una función pura del tiempo: establece cada elemento para el tiempo t (segundos). Sin transiciones ni animaciones CSS, sin setTimeout, sin estado heredado del fotograma anterior. Cualquier fotograma debe renderizarse correctamente por sí solo, en cualquier orden. Medir el layout dentro de seek (por ejemplo, offsetLeft, measureText) está bien; es determinista.
La aleatoriedad (grano, partículas, ruido en audio) proviene de un generador con semilla, nunca de Math.random.
Cualquier cosa que necesite un historial (una cámara que se retrasa respecto a un objeto en movimiento, una simulación) se hornea una vez al cargar: itera desde 0 hasta duration a 1/240 s, almacena los valores, y seek los lee con interpolación. Para bucles, comienza la simulación desde el estado en el que comienza el bucle (ver la regla de costura del estilo).
Bucles: seek(t) usa t % duration; los efectos que cruzan la costura (un aterrizaje aplastado, una cola de sonido) se dibujan o mezclan en ambos extremos.
Con ?render en la URL: sin controles, sin escalado de vista previa; el escenario es exactamente w × h en la parte superior izquierda. Sin él: el escenario se escala con CSS para ajustarse a la ventana y se muestran los controles de vista previa.
Fuentes: incrústalas. Descarga los archivos woff2 (Google Fonts o los de la marca) e inclúyelos como base64 @font-face, para que el render nunca recurra a fuentes de respaldo en silencio. Para una transformación de peso, usa una fuente variable con un rango ([email protected]).
Capas: da a las capas de escena fondos transparentes y deja que un fondo de escenario detrás de ellas proporcione el color base, para que una capa posterior nunca oculte una anterior por accidente. El texto posicionado absolutamente obtiene white-space: nowrap.
Velocidad: los grandes filter: blur() CSS y los grandes degradados borrosos son muy lentos de capturar. Dibuja degradados y brillos en un canvas una vez al cargar (o como imagen) y muévelo.

Ayudantes: pégalos y construye todo sobre ellos

// respuesta de resorte amortiguado paso 0 -> 1. w = velocidad (8 lento, 14 normal, 22 rápido), z = amortiguación (1 = sin sobrepaso)
function spring(t, w = 14, z = 0.82) {
  if (t <= 0) return 0;
  if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
  const wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// un valor que cambia de objetivo muchas veces, saltando a cada uno: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// keyframes con interpolación suave (mejor para movimientos de cámara): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);   // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a));      // progreso 0..1 de t a través de [a, b]
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);

Escritura: el string visible es full.slice(0, n(t)) con un cursor parpadeando desde t. Contadores: formatea lerp(a, b, ease(seg(t, …))).
Una cámara es un elemento contenedor con transform: translate() scale() rotate() impulsado por kf o track.

Sonido

window.buildAudio(ctx) programa toda la banda sonora (música + efectos) desde el tiempo 0 en cualquier AudioContext o OfflineAudioContext que se le dé, usando los mismos números de línea de tiempo que los visuales. Sintetiza con osciladores, ruido filtrado (de un buffer con semilla) y envolventes. Si el usuario dio un archivo de música, cárgalo con fetch + decodeAudioData, establece la rejilla de ritmo a su tempo (mídelo), y agrega solo los efectos encima.
Reproducción de vista previa: en la primera reproducción, renderiza la banda sonora una vez en un buffer, luego reproduce desde cualquier posición desplazada. El reloj impulsa seek:

let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
  ac ??= new AudioContext();
  if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
  src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
  src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })();   // el desplazador establece offset (pausar, establecer, reproducir)

Pon la hoja de ritmo como comentario al principio del script: una fila por momento con su tiempo, qué sucede y qué sonido.

Paso 3: Verificar, renderizar, entregar

Configuración una vez en la carpeta de trabajo: npm i playwright, luego npx playwright install chromium si Chromium no está instalado aún; ffmpeg debe estar en el PATH. Guarda el script al final de este archivo como render.mjs.

Fotogramas fijos. node render.mjs demo.html check.png --stills 0.5,1.2,… con un tiempo por fila de la hoja de ritmo (la hoja está a tamaño legible, 3 por fila). Míralo. Arregla cualquier cosa recortada, superpuesta, ilegible, fuera de la marca, mal enmarcada o vacía. Verifica de nuevo.
Borrador. node render.mjs demo.html draft.mp4 30 1 4 (rápido: 30 fps, sin desenfoque de movimiento, 4 trabajadores paralelos; establece el último número al núcleo de la máquina). Esta es la copia de revisión: envíala al usuario con el HTML y pide cambios antes del final.
Final. node render.mjs demo.html demo.mp4 60 8 8. El desenfoque de movimiento multiplica el tiempo de renderizado por el número de subfotogramas; un final de 60 s puede tardar 20–60 minutos en un portátil, así que dilo antes de comenzar. Funciona...

ClaudinNarsis/claude-video-skills

¿Qué es claude-video-skills?

Preguntar en tu IA favorita

Documentación