Explicador por defecto

Una demo de producto calmada y premium, del tipo que una startup bien financiada pone en su página de inicio. Todo su truco es la moderación: un lienzo brillante y aireado, una línea corta de texto a la vez, y la interfaz del producto reconstruida de forma limpia y filmada en primer plano 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 función.

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 banda sonora.

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

Pregunta todo en un mensaje, luego trabaja por tu cuenta. Solo el producto es obligatorio; para cualquier campo dejado 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 (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 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 a continuación para este estilo.
Música: su propia pista (una ruta de archivo), o dejar que tú la sintetices. Por defecto: sintetizar.
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 conocer las palabras reales del producto, características, colores y nombres de fuentes antes de escribir nada. Usa sus palabras reales para las etiquetas de la interfaz y los eslóganes.

Nunca inventes hechos. Nada de recuentos de clientes, ingresos, valoraciones, testimonios o citas inventados. 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 aviso, 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 "gratis") no lo están. Las llamadas a la acción usan solo una URL u ofrecen al usuario o el sitio web proporcionaron; 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 pidió. 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 por defecto para este estilo: 60 segundos. Rango 45–90. Presupuesta por duración (elimina primero las secciones opcionales):

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

Paso 2: Escribe el guion, luego construye

La estructura

Escribe primero el guion y la hoja de tiempos: 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 interfaz de usuario) es su propia capa con su propia cámara. Dentro de una escena, la cámara se acerca, sigue y retrocede; entre escenas, la capa saliente se disuelve con un breve desenfoque (0.3–0.4 s) hacia la siguiente, que ya se está moviendo.

Apertura (0–5 s). Lienzo claro y plano. Una palabra pequeña aparece gradualmente en el centro: Presentando. Se disuelve en el momento de la marca: el degradado suave de la marca entra (bandas diagonales de luz sedosas que se mueven lentamente) con el logotipo o nombre centrado, pequeño.
El problema o la pregunta (≈5 s). Una línea corta que el espectador reconoce (¿Todavía creas listas de prospección a mano?), o ve directamente a la entrada del producto: un cuadro de entrada grande y redondeado, vacío con texto de marcador de posición, chips de sugerencia debajo.
Capítulos de características (3–5, aproximadamente 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 plano. Se escribe o aparece palabra por palabra. Luego la cámara se acerca a la línea hasta que abarca aproximadamente el 75% del ancho del fotograma, y una palabra clave o frase corta se resalta: un cuadro suave del color de la marca que barre de izquierda a derecha detrás de ella (Llama al responsable de la decisión. Directamente.).
- El momento de la interfaz de usuario: la interfaz real del producto, reconstruida como UI vectorial limpia (no capturas de pantalla), recortada solo a la parte que importa y mostrada grande. La cámara está lo suficientemente cerca para que el elemento llene la mayor parte del fotograma, y sigue la acción: texto escribiéndose en la entrada (la cámara sigue el cursor; mide el texto con measureText para saber dónde está), los pasos de un agente marcándose uno por uno (spinner → marca de verificación, Se encontraron 247 coincidencias), tarjetas de resultado apilándose con las más lejanas borrosas (profundidad de campo), una tabla llenándose fila por fila, el cursor haciendo clic en un botón de celda y revelando el valor, una nueva columna agregándose y cada celda "pensando" con un brillo antes de que aparezca su valor, un popover abriéndose con el razonamiento y las fuentes.
- El alejamiento: después de la acción, la cámara se aleja suavemente para mostrar toda la pantalla por un momento, para que el espectador entienda dónde está, luego se desliza.
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 o cuadrícula punteada.
Integraciones (opcional). Construido para tu flujo de trabajo existente. en el centro mientras 8–12 mosaicos de aplicaciones (cuadrados redondeados, solo logotipos reales 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 fotograma.
Cierre. Sobre el degradado de la marca: una oración con una palabra resaltada rotativa que recorre los casos de uso (Haz toda tu [prospección / investigación / divulgación] en Producto.), luego, solo si el producto realmente tiene una, otra forma de usarlo (ej. O simplemente pregúntale a Claude para un producto con un conector de Claude), luego el eslogan con su frase clave resaltada.
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 fotograma: 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 (acercamiento, alejamiento, deslizamiento) o una suave disolución borrosa sobre el lienzo plano. Los movimientos de cámara son suaves y uniformes (ease durante 0.6–1.2 s) o resortes muy amortiguados (z ≥ 0.95); nada rebota.
UI real, hecha limpia. Reconstruye la interfaz del producto a partir de lo que sabes de él (o de su sitio web): su diseño real, etiquetas, colores, fuentes y radios de esquina, simplificado a lo que la escena necesita. El contenido interno 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 de macOS, que se mueve en curvas suaves, llega un momento antes de hacer clic, con un pequeño hundimiento de presión y una ondulación suave en el control en el que se hace clic. 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 vuelven grandes a través de la cámara, no del tamaño de fuente). Espaciado entre letras ajustado en texto grande.
Paleta por defecto: lienzo #F7F7F8, texto #111114, secundario #8A8A94, superficies de UI blancas con bordes #E7E7EC, acento de marca #2E6BFF, cuadro de resaltado = acento al 15–20% de opacidad. Degradado de marca: blanco → acento pálido → 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 que aterriza; los momentos de UI 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 UI, más de un color de acento, curvas de aceleración rebotantes, emojis, sombras paralelas grandes, glassmorphism por todas partes, métricas o testimonios inventados.

Sonido

Una cama de fondo edificante y suave a 100–110 BPM (acordes suaves de piano o punteo, percusión ligera que entra después de la apertura, un impulso hacia el cierre), tranquila y cálida. Efectos de sonido pequeños: tics de teclas mientras se escribe, clics suaves, un "tic" ligero por paso completado, un susurro suave en movimientos grandes de cámara, un timbre suave en la tarjeta final. La música debe sentirse como un fondo en un vídeo de producto bien hecho, no impulsarlo.

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 se ajuste.

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 heredado 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 de Math.random.
Cualquier cosa que necesite un historial (una cámara que va detrás de un objeto en movimiento, una simulación) se hornea una vez al cargar: se recorre de 0 a duración a 1/240 s, se almacenan los valores, y seek los lee 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 % duración; los efectos que cruzan 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 insértalos como base64 @font-face, para que el renderizado nunca recurra silenciosamente a una fuente de respaldo. 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 una anterior por accidente. El texto con posición absoluta obtiene white-space: nowrap.
Velocidad: los grandes filter: blur() de CSS y los grandes degradados borrosos son muy lentos de capturar. Dibuja degradados y brillos en un lienzo una vez al cargar (o como imagen) y muévelos.

Ayudantes: pégalos y construye todo sobre ellos

// respuesta escalonada de resorte amortiguado 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(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 con interpolación suave 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 ascendentes: formato lerp(a, b, ease(seg(t, …))).
Una cámara es un elemento contenedor con transform: translate() scale() rotate() controlado 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 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 control de desplazamiento establece el desplazamiento (pausa, establece, reproduce)

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

Paso 3: Revisa, renderiza, entrega

Configuración única en la carpeta de trabajo

…

explicador-por-defecto

¿Qué es explicador-por-defecto?

Preguntar en tu IA favorita

Documentación