ClaudinNarsis/claude-video-demo

Demostración predeterminada

Una demo de producto premium y tranquila, como la que una startup bien financiada pondría en su página de inicio. Todo su truco es la moderación: un lienzo brillante y aireado, una línea de texto corta a la vez, y la interfaz real del producto reconstruida limpiamente y filmada de cerca mientras se usa. La cámara cuenta la historia: se acerca a una línea de texto, sigue la escritura, se aleja para revelar el resultado, y se desliza hacia la siguiente característica.

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: 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 falte, decide tú mismo y di lo que elegiste.

1. Producto: nombre y qué hace en unas pocas frases. Una URL del sitio web es aún mejor.
2. Lo único que el espectador debe recordar (ej. "escribe una idea, obtén una app en vivo").
3. Marca: colores, fuentes, archivo del logotipo, o "usa el sitio web". Si no hay, usa la paleta predeterminada a continuación.
4. Formato: 16:9 (1920×1080) o 9:16 (1080×1920). Por defecto 16:9.
5. Duración: la duración predeterminada se indica a continuación para este estilo.
6. Música: su propia pista (una ruta de archivo), o dejar que sintetices una. Por defecto: sintetizar.
7. Dirección (opcional): escenas que quieran, un eslogan, una llamada a la acción, cualquier cosa para evitar.

Si dieron una URL, léela (obtención web) para obtener las frases reales del producto, características, colores y nombres de fuentes antes de escribir nada. Usa sus palabras reales para las etiquetas de la interfaz de usuario y los eslóganes.

Nunca inventes hechos. Nada de números de clientes, ingresos, valoraciones, testimonios o citas inventadas. 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 de usuario (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, valoraciones, ofertas como "gratuito") 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): las 3–5 características o pasos del flujo de trabajo a mostrar, y cualquier cosa con la que el producto se conecte (integraciones). Si dieron una URL, tómalos del sitio.

Duración predeterminada para este estilo: 60 segundos. Rango de 45 a 90. Ajusta por duración (elimina primero las secciones opcionales):

Duración	Características	Secciones opcionales
45 s	2–3, aprox. 9 s cada una	prueba o integraciones, no ambas
60 s	3–4, aprox. 10 s cada una	una de prueba / integraciones
90 s	4–5, aprox. 12 s cada una	ambas

Paso 2: Escribir el guion, luego construir

La estructura

Escribe primero el guion y la hoja de ritmo: cada línea de texto en pantalla, qué momento de la interfaz de usuario le sigue, y su tiempo; suma los tiempos contra el presupuesto anterior. El texto en pantalla es la única "voz", por lo que debe contar la historia por sí mismo.

Cómo encajan las escenas y la cámara: cada escena (una línea de título, un momento de la interfaz de usuario) es su propia capa con su propia cámara. Dentro de una escena, la cámara se acerca, sigue y se aleja; entre escenas, la capa saliente se disuelve con un breve desenfoque (0.3–0.4 s) hacia la siguiente, que ya se está moviendo.

1. Apertura (0–5 s). Lienzo claro y liso. Una palabra pequeña aparece en el centro: Presentamos. Se disuelve en el momento de la marca: el degradado suave de la marca se despliega (bandas de luz diagonales sedosas que se mueven lentamente) con el logotipo o nombre centrado, pequeño.
2. El problema o la pregunta (≈5 s). Una línea corta que el espectador reconoce (¿Todavía armas listas de prospectos a mano?), o ve directamente a la entrada del producto: un gran cuadro de entrada redondeado, vacío con texto de marcador de posición, chips de sugerencia debajo.
3. Capítulos de características (3–5, aprox. 8–15 s cada uno). Cada uno es:
   • Una línea de título: una oración corta, pequeña (aproximadamente 28 px a 1080p), centrada en el lienzo claro. Se escribe o aparece palabra por palabra. Luego la cámara se acerca a la línea hasta que ocupa aproximadamente el 75% del ancho del fotograma, y una palabra clave o frase corta recibe un resaltado: un cuadro suave del color de la marca que se desliza de izquierda a derecha detrás de ella (Llama al que toma la decisión. Directamente.).
   • El momento de la interfaz de usuario: la interfaz real del producto, reconstruida como una interfaz de usuario vectorial limpia (no capturas de pantalla), recortada solo a la parte que importa y mostrada en grande. La cámara está lo suficientemente cerca como para que el elemento llene la mayor parte del fotograma, y sigue la acción: texto que se escribe en la entrada (la cámara sigue el cursor; mide el texto con measureText para saber dónde está), los pasos de un agente que se marcan uno por uno (spinner → marca de verificación, Se encontraron 247 coincidencias), tarjetas de resultados que se apilan con las lejanas borrosas (profundidad de campo), una tabla que se llena fila por fila, el cursor que hace clic en un botón de celda y se revela el valor, una nueva columna que se agrega y cada celda "piensa" con un brillo antes de que aparezca su valor, un popover que se abre con razonamiento y fuentes.
   • El alejamiento: después de la acción, la cámara se aleja suavemente para mostrar la pantalla completa por un momento, para que el espectador entienda dónde está, luego se desliza.
4. Prueba (opcional, solo números reales). Una oración con un número que cuenta hacia arriba, el número resaltado (Respaldado por una base de datos de más de 300 millones de perfiles), sobre un sutil globo punteado o cuadrícula.
5. Integraciones (opcional). Construido para tu flujo de trabajo existente. en el centro mientras 8–12 mosaicos de aplicaciones (cuadrados redondeados, logotipos reales solo si se proporcionan; repite las integraciones si hay pocas) flotan desde los bordes a diferentes profundidades: los cercanos más grandes y ligeramente borrosos, los lejanos pequeños y nítidos, todos desplazándose con paralaje. Aquí el texto escala por sí mismo en lugar de un movimiento de cámara, para que los mosaicos permanezcan en el encuadre.
6. Cierre. Sobre el degradado de la marca: una oración con una palabra resaltada que gira entre los casos de uso (Haz todo tu [prospección / investigación / captación] en Producto.), luego, solo si el producto realmente tiene una, otra forma de usarlo (ej. O solo pregúntale a Claude para un producto con un conector de Claude), luego el eslogan con su frase clave resaltada.
7. Tarjeta final (3 s). Logotipo o nombre sobre el degradado de la marca, URL o llamada a la acción pequeña debajo.

Reglas que lo hacen sentir premium

• Una cosa a la vez. Nunca más de una línea de texto más un elemento de la interfaz de usuario en pantalla. El texto y la interfaz de usuario casi nunca comparten el encuadre: escena de texto, luego escena de interfaz de usuario.
• La cámara es el editor. Sin cortes bruscos. Cada cambio de escena es un movimiento de cámara (acercarse, alejarse, deslizarse) o una disolución suave con desenfoque en el lienzo claro. Los movimientos de cámara son suaves (ease durante 0.6–1.2 s) o resortes fuertemente amortiguados (z ≥ 0.95); nada rebota.
• Interfaz de usuario real, hecha limpia. Reconstruye la interfaz del producto a partir de lo que sabes de él (o su sitio web): su diseño real, etiquetas, colores, fuentes y radios de esquina, simplificados a lo que la escena necesita. El contenido interior son datos de ejemplo creíbles que se ajustan al producto. Sombras suaves, bordes de 1 px, espacios en blanco generosos.
• Cursor: una flecha normal al estilo de macOS, que se mueve en curvas suaves, llega un instante antes de hacer clic, con una pequeña presión y una ondulación suave en el control clickeado. Los estados de hover cambian.
• Tipo: la fuente de la marca si se conoce; de lo contrario, Inter o Geist. Pequeña, peso regular para las líneas de título (se agrandan con la cámara, no con el tamaño de fuente). Espaciado entre letras ajustado en texto grande.
• Paleta predeterminada: lienzo #F7F7F8, texto #111114, secundario #8A8A94, superficies de la interfaz de usuario blancas con bordes #E7E7EC, acento de marca #2E6BFF, cuadro de resaltado = acento con opacidad del 15–20%. Degradado de marca: blanco → acento claro → acento, como bandas de seda diagonales lentas (dibújalas en un lienzo, no con desenfoque CSS). Los colores de la marca reemplazan el acento.
• Ritmo: cada línea de título se mantiene aproximadamente 2 s después de aterrizar; los momentos de la interfaz de usuario se ejecutan a velocidad real (escritura a aproximadamente 25 caracteres por segundo), con pausas de 0.5 s después de cada resultado para que el espectador pueda leerlo.
• Prohibido: fondos ocupados detrás de la interfaz de usuario, más de un color de acento, easing con rebote, emojis, sombras paralelas grandes, glassmorphism en todas partes, métricas o testimonios inventados.

Sonido

Una base alegre y suave a 100–110 BPM (piano suave o acordes pulsados, percusión ligera que entra después de la apertura, un impulso hacia el cierre), tranquila y cálida. Efectos de sonido pequeños: tecleos mientras se escribe, clics suaves, un "tick" ligero por paso completado, un "whoosh" suave en movimientos grandes de cámara, un timbre suave en la tarjeta final. La música debe estar como un fondo en un video de producto bien hecho, no conducirlo.

Cómo se debe construir la página

Un archivo HTML autónomo (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 funcione.

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 o animaciones CSS, sin setTimeout, sin estado arrastrado del fotograma anterior. Cualquier fotograma debe renderizarse correctamente por sí solo, en cualquier orden. Medir el diseño dentro de seek (ej. offsetLeft, measureText) está bien; es determinista.
• La aleatoriedad (grano, partículas, ruido en el audio) proviene de un generador con semilla, nunca Math.random.
• Cualquier cosa que necesite un historial (una cámara que se retrasa detrás de un objeto en movimiento, una simulación) se hornea una vez al cargar: recórrela desde 0 hasta duration a 1/240 s, almacena los valores, y haz que seek los lea con interpolación. Para bucles, inicia 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 cruzan la costura (un aterrizaje comprimido, 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: incrustarlas. Descarga los archivos woff2 (Google Fonts o los de la marca) e insértalos como @font-face en base64, para que el renderizado nunca caiga en una fuente alternativa silenciosamente. Para una variació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 accidentalmente una anterior. El texto con posicionamiento absoluto recibe white-space: nowrap.
• Velocidad: los grandes filter: blur() de CSS y los degradados borrosos grandes son muy lentos de capturar. Dibuja degradados y brillos en un lienzo una vez al cargar (o como imagen) y muévelo.

Ayudantes: pégalos y construye todo sobre ellos

// respuesta de resorte amortiguado paso a paso 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(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; };
// fotogramas clave con easing 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 + 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: la cadena 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 envoltorio 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 las imágenes. Sintetiza con osciladores, ruido filtrado (de un búfer con semilla) y envolventes. Si el usuario dio un archivo de música, cárgalo con fetch + decodeAudioData, establece la cuadrícula 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 búfer, 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 (pausa, establece, reproduce)

• 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

…