Explicador atractivo

Una historia visual en una sola toma. Un único elemento héroe (en el estilo de referencia, una bola blanca que comienza como la perilla de un interruptor) viaja a través de una cadena de pequeñas "estaciones" de interfaz, y cada estación reacciona ante él: rueda a lo largo de un control deslizante y lo empuja al 100, cae desde el extremo y rebota en una pila de notificaciones que aparecen a su paso, aterriza en un teclado y rebota de tecla en tecla escribiendo una palabra, golpea la tecla de retorno y es lanzado de nuevo al aire. La cámara nunca corta: mantiene al héroe cerca del centro y hace zoom para cada interacción, y en el clímax se aleja mucho para que el espectador vea todo el recorrido dispuesto de una vez, antes de sumergirse de nuevo donde todo comenzó.

Para un producto, las estaciones son los pasos de su flujo de trabajo, dispuestos espacialmente en un lienzo, y el héroe es la cosa que se mueve a través de ese flujo de trabajo. El alejamiento es el momento "ahora entiendes cómo funciona".

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

Paso 1: Obtén el brief (un mensaje, luego continúa)

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 oraciones. Una URL del sitio web es aún mejor.
La única cosa que el espectador debe recordar (p. ej., "escribe una idea, obtén una app en vivo").
Marca: colores, fuentes, archivo de logotipo, o "usa el sitio web". Si no hay nada, usa la paleta predeterminada a continuación.
Formato: 16:9 (1920×1080) o 9:16 (1080×1920). Valor predeterminado 16:9.
Duración: el valor predeterminado se indica a continuación para este estilo.
Música: su propia pista (una ruta de archivo), o dejar que sintetices una. Valor predeterminado: sintetizar.
Dirección (opcional): escenas que quieran, un eslogan, una llamada a la acción, cualquier cosa que evitar.

Si dieron una URL, léela (recuperación web) para conocer la redacción real del producto, las funciones, los colores y los nombres de fuentes antes de escribir nada. Usa sus palabras reales para las etiquetas de interfaz y los eslóganes.

Nunca inventes hechos. No hay números de clientes inventados, ingresos, calificaciones, testimonios ni citas. Números solo si el usuario o el sitio web los indican; de lo contrario, usa barras relativas, progreso y líneas de esqueleto de marcador de posición. El contenido de ejemplo dentro de la interfaz (un mensaje, 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. Las llamadas a la acción usan solo una URL u ofrecen lo que el usuario o el sitio web dieron; si no hay ninguna, termina con el nombre y el eslogan.

Logotipos. Usa un logotipo 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. Logotipos de terceros (integraciones) solo si se proporcionan; de lo contrario, mosaicos redondeados neutros con el nombre.

También pregunta (opcional): el flujo de trabajo en 3–6 pasos (qué hace el usuario → qué hace el producto → el resultado). Si dieron una URL, dedúcelo del sitio.

Duración predeterminada para este estilo: 12 segundos, bucle sin costuras. Rango 10–30 (más largo = más estaciones, no estaciones más lentas).

Paso 2: Diseña el recorrido, luego construye

1. Elige al héroe

El héroe es un objeto simple y legible sobre lo que trata la historia del producto, y nunca desaparece ni es reemplazado (puede cambiar de forma por un momento, luego regresar): una bola/perilla (predeterminada, funciona para cualquier cosa), un cursor de texto o puntero, un archivo o mosaico de documento, una burbuja de mensaje, una moneda o pedido, un punto de datos. Debe encajar naturalmente en la interfaz de una estación (una perilla, un pulgar, una tecla, un pin).

2. Mapea el flujo de trabajo en estaciones

Cada paso se convierte en una estación: un elemento de interfaz real compacto con el que el héroe interactúa físicamente, y que cambia visiblemente debido a eso. Saca partido de estas mecánicas:

Mecánica	El héroe...	La estación reacciona
Interruptor / botón	es la perilla, o la presiona	se enciende, el color se llena
Control deslizante / progreso	rueda a lo largo como el pulgar	el valor cuenta en un tooltip, la pista se llena
Pila de notificaciones	cae y rebota en cada tarjeta	cada tarjeta aparece al ser golpeada, con un mensaje que narra la historia
Teclado / entrada	rebota de tecla en tecla	cada tecla se presiona, las letras aparecen en la entrada de arriba
Lista / tabla	se desliza hacia abajo por las filas	cada fila se resalta, se marca o se ordena
Gráfico	se convierte en el punto principal de la línea	la línea se dibuja detrás, las barras se elevan a su paso
Chat	viaja como una burbuja	la respuesta se escribe
Botón de implementar / enviar	es lanzado por él	aparece un toast o una URL

Las etiquetas y mensajes de las estaciones cuentan la historia en pocas palabras cada una, con algo de ingenio (la referencia usa Control deslizante · Alcanzó 100, Gravedad · Algo está cayendo, Mensajes · ¿Y ahora qué?, luego escribe reintentar). Para un producto, escríbelos a partir de su flujo de trabajo real (p. ej., una herramienta de codificación: mensaje escrito → Agente · Escribiendo 12 archivos → progreso → Vista previa · Listo → Presionar implementar → En vivo en miapp.app).

3. Diseña el mundo

Coloca las estaciones en un gran lienzo (aproximadamente 3 veces el fotograma), en el orden en que el héroe las visita, de modo que el camino zigzaguee (derecha a lo largo de la parte superior, hacia abajo por el medio, a través de la parte inferior). La gravedad debe tener sentido: las caídas van hacia abajo, los lanzamientos hacia arriba. Deja el lugar de cada estación fijo durante todo el video. El mundo es un lienzo oscuro con una cuadrícula de puntos tenue que se mueve con la cámara (la cuadrícula es lo que hace que los movimientos de la cámara sean legibles).

4. Guión del camino del héroe

La posición del héroe es una función pura del tiempo, construida a partir de segmentos entre puntos de contacto (cada contacto está en un tiempo):

Rodar/deslizarse a lo largo de una estación: posición mediante ease o un muelle a lo largo de la pista; el valor de la estación se deriva de la posición del héroe.
Saltos y caídas entre contactos: una parábola (x lineal en el tiempo, y = y0 + v·t + ½·g·t², resuelve v para que aterrice en el siguiente contacto en el tiempo). Gravedad constante en todo el video.
Impactos: compresión en el contacto (escala 1.25 × 0.8 durante aproximadamente 60 ms, rebote elástico), estiramiento a lo largo de la velocidad en vuelo (hasta 1.15 × 0.9), más un pequeño empuje hacia abajo de lo que fue golpeado.
El lanzamiento: la última estación dispara al héroe hacia arriba y de regreso al inicio en un arco largo, mientras que cada estación se reinicia en orden inverso detrás de él (los valores cuentan hacia atrás, las notificaciones se descartan, la entrada se borra) para que el bucle se cierre. Ejecuta el arco de lanzamiento en cámara lenta: primero elige la altura del vértice que deseas (la parte superior del recorrido), que fija el tiempo de vuelo real bajo tu gravedad, luego distorsiona el tiempo para que ese vuelo llene la ventana de revelación, más lento en el vértice (a menudo 5–10× allí; p. ej., velocidad 1 − 0.9·sin(πu)^0.6 a lo largo del arco). Programa los reinicios de las estaciones durante la pausa de revelación, después de que el espectador haya visto el recorrido completo, no en el momento del lanzamiento.
Sin costuras: coloca el punto de bucle en el aterrizaje del héroe en la primera estación. seek(duration) debe verse exactamente como seek(0); la compresión de aterrizaje y la presión de tecla también se muestran en el tiempo 0. Para el sonido, renderiza la banda sonora dentro de buildAudio en tu propio OfflineAudioContext ligeramente más largo, dobla la cola más allá de duration de vuelta al inicio y reproduce ese búfer en el contexto dado.
La gravedad es lateral. Coloca las estaciones para que las caídas tengan sentido desde un lado: las tarjetas de notificación forman una escalera (cada tarjeta desplazada lateralmente más que su ancho, para que el héroe nunca pase a través de una), y el teclado se ve de frente con el héroe saltando entre teclas en pequeños arcos.
El espacio vacío: cuando el héroe era parte de una estación (una perilla, un pulgar) y se va, la estación mantiene un contorno tenue del espacio que dejó, que se llena de nuevo cuando el héroe regresa.

5. La cámara

La cámara es la parte difícil; hazla bien antes de pulir cualquier otra cosa.

Seguimiento: el objetivo de la cámara = una combinación de la posición del héroe (más un adelanto de aproximadamente 0.15 s de su velocidad) y un ancla fija para la estación actual, suavizada por un muelle críticamente amortiguado (w ≈ 6) para que no tenga tirones en los impactos. Peso hacia el ancla aproximadamente 0.7 durante una interacción (la estación permanece encuadrada), 0.15 durante caídas y saltos (el héroe lidera), 0.85 en la pausa de recompensa. El suavizado necesita historia, así que hornéalo en la carga (consulta el contrato de la página), comenzando en el tiempo 0 desde el encuadre fijo de la primera estación y combinándolo con el seguimiento durante los primeros 0.8 s. El héroe nunca abandona la mitad central del fotograma.
Zoom: ajustado durante cada interacción: la estación ocupa aproximadamente la mitad del ancho del fotograma y el héroe mide 50–70 px en pantalla (a 1080p). Un poco más amplio durante caídas y saltos para que la siguiente estación ya sea visible. Encuadra la estación, no el lienzo vacío.
La pausa de recompensa: antes del lanzamiento, mantén el resultado final (el toast, la URL en vivo) durante 0.4–0.6 s, completamente en el fotograma.
La revelación: en el lanzamiento, la cámara deja de seguir y se relaja hacia un encuadre fijo que abarca todo el recorrido (aproximadamente 0.3×), con una ligera inclinación 3D (perspective + rotateX de 15–25°) para profundidad. Mantén aproximadamente 1 s mientras el héroe lo cruza en arco; escala al héroe y dale un halo suave para que siga siendo lo más brillante y visible (al menos 24 px en pantalla). Luego sumérgete hacia un encuadre fijo de la primera estación, sincronizado para que el héroe aterrice allí cuando llegue la cámara, y combínalo de nuevo con el seguimiento.
Desenfoque de movimiento real: el héroe y el mundo se difuminan en movimientos rápidos; eso es parte del aspecto visual.

Aspecto visual

Paleta predeterminada (oscura similar a iOS): lienzo #0C0C0E, cuadrícula de puntos #1E1E22, superficies #1C1C1F / #2C2C2E, texto #F2F2F7, secundario #8E8E93, acento #0A84FF, héroe blanco #FFFFFF. Los colores de marca reemplazan el acento; el héroe sigue siendo lo más brillante en pantalla. Una variante clara (lienzo #F2F2F4, héroe = acento) está bien si la marca es clara.
Interfaz de sistema realista: interruptores, controles deslizantes con marcas de graduación, tarjetas de notificación con un cuadrado de icono de app, un título, una línea de cuerpo y ahora; un teclado con teclas y una tecla de retorno. Fuente: similar a SF (Inter o Geist).
Un cursor puede comenzar la cadena (hace clic en la primera estación) y luego se aparta.
Prohibido: cortes, fundidos a negro, superposiciones de texto que explican lo que está sucediendo (las propias etiquetas de las estaciones son el único texto), más de un héroe, estaciones que no reaccionan, física que se vea flotante.

Sonido

Un groove ajustado y mínimo a 110–120 BPM (golpe suave, hi-hats chasqueantes, un bajo pulsado amortiguado), y los contactos del héroe son el instrumento principal: cada impacto reproduce una nota corta y aguda o una nota de marimba (el tono sube a medida que avanza la historia), las teclas presionadas hacen clic, el movimiento del control deslizante reproduce pequeños chasquidos que se aceleran con el valor, las notificaciones tienen un pop suave, el lanzamiento tiene un silbido ascendente y la inmersión un silbido descendente. Cada sonido aterriza exactamente en su contacto visual.

Cómo se debe construir la página

Un archivo HTML autocontenido (CSS y JS en línea; imágenes solo si el usuario las proporcionó). Dibuja con DOM + transformaciones CSS, SVG o un lienzo 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í mismo, en cualquier orden. Medir el diseño dentro de seek (p. ej., offsetLeft, measureText) está bien; es determinista.
La aleatoriedad (grano, partículas, ruido en audio) proviene de un generador con semilla, nunca Math.random.
Cualquier cosa que necesite historia (una cámara que se retrasa detrás de un objeto en movimiento, una simulación) se hornea una vez en la carga: se recorre desde 0 hasta duration a 1/240 s, se almacenan los valores, y seek los lee con interpolación. Para bucles, comienza la simulación desde el estado en que comienza el bucle (consulta la regla de costura del estilo).
Bucles: seek(t) usa t % duration; los efectos que abarcan la costura (una compresión de aterrizaje, una cola de sonido) se dibujan o mezclan en ambos extremos.
Con ?render en la URL: sin controles, sin escala de vista previa; el escenario es exactamente w × h en la esquina 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 incrústalos como @font-face en base64, para que el renderizado nunca falle silenciosamente. Para una variable 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 accidentalmente. El texto con posición absoluta recibe white-space: nowrap.
Velocidad: los grandes CSS filter: blur() y los grandes degradados borrosos son muy lentos para capturar. Dibuja degradados y brillos en un lienzo una vez en la carga (o como imagen) y muévelos.

Ayudantes: pégalos y construye todo sobre ellos

// Respuesta de paso de muelle amortiguado 0 -> 1. w = velocidad (8 lento, 14 normal, 22 rápido), z = amortiguación (1 = sin sobreimpulso)
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(inicio, [[tiempo, valor, 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; };
// Fotogramas clave aliviados precisos (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 +

…

[truncado para traducción]

ClaudinNarsis/claude-video-skills

¿Qué es claude-video-skills?

Preguntar en tu IA favorita

Documentación