tu motion designer con IA

ES

Abrir la app beta

Simple Motion

Showreel hipnótico de inmersión en un ojo en synthwave neón

Un reel psicodélico totalmente dibujado: un ojo se abre, la cámara se sumerge por su pupila en un túnel de ojos, una masa cromada y una espiral, y aterriza en un título.

Publicado 10 de noviembre de 2026

El prompt se abre en la app: añade tus propios materiales y el agente crea el video.

Denunciar este prompt

Usar con tu agenteEn tu agente

Concepto

Haz un showreel de motion graphics psicodélico e hipnótico de 20 segundos, 16:9 a 1920x1080 y 60 fps. Todo está dibujado y generado: patrones procedurales y formas renderizadas en 3D, sin metraje ni fotos. Móntalo sobre un tema de synthwave neón a 120 BPM. La idea: un ojo se abre a partir de una sola línea, y la cámara sigue sumergiéndose a través de él en mundos cada vez más extraños antes de aterrizar en un título. Cada fotograma depende del tiempo. Las secciones cambian en los compases (cada 2 s) tras destellos blancos, y los pulsos de brillo en los tiempos mantienen la imagen respirando. El aspecto es tinta profunda y casi negro con rosa neón, naranja, violeta, turquesa y amarillo, bloom suave, ligera aberración cromática, grano fino y viñeta, con un HUD técnico fino que lo enmarca todo. Todas las palabras entre comillas son ejemplos que debes sustituir por las tuyas; mantén una longitud parecida para que el diseño aguante. Evita metraje e imágenes de stock, rellenos planos sin textura, negro puro (los oscuros nunca por debajo de #0D0B1E), colores sobresaturados y cualquier nombre o marca real en pantalla.

Estructura

0,0–4,0 s, el ojo. Negro, y a los 0,3 s aparece una fina línea de pestañas luminosa. El ojo es una almendra puntiaguda: la forma de lente entre dos círculos que se solapan, de aproximadamente 0,55 del ancho del cuadro. Todo el cuadro a su alrededor se llena con sus líneas de contorno, que son isolíneas de la misma forma de dos círculos en pasos logarítmicos (cada hueco un 13 % más ancho que el anterior). Fluyen despacio hacia fuera y se desvanecen con la distancia: lavanda pálido, naranja y turquesa cerca del ojo, rosa más lejos, sobre bandas de tinta profunda. De 0,3 a 0,85 s el ojo es una rendija. De 0,85 a 1,33 s los párpados se abren (power2.out) mientras el ojo crece del 86 % al tamaño completo. El iris es fibroso, en bandas naranja, melocotón, menta y violeta, con un anillo rosa en el borde, un resplandor turquesa y un brillo en forma de anillo arriba a la izquierda; los párpados tienen un suave borde interior blanco. Ondas de ritmo recorren las líneas a 1,5, 1,75, 2,5 y 2,75 s. Un texto centrado en monoespaciada pequeña con espaciado de letras («YOUR LINE OF TWENTY-SIX LETTERS») se descifra desde 1,4 s a unas 45 letras por segundo y se desintegra desde la derecha en 2,8–3,1 s. Desde 2,75 s la pupila se dilata y muestra dentro la siguiente escena ya en marcha, mientras las bandas del iris pasan a violeta y amarillo. De 3,42 a 3,98 s la cámara avanza hacia la pupila hasta que la escena interior llena el cuadro a 1:1.
4,0–8,0 s, el túnel. Corte con un destello blanco con rayos radiales. Es un túnel en perspectiva de anillos espaciados de modo que el radio inverso crece 0,75 por anillo. Cada anillo contiene 18 ojos almendrados con contornos turquesa, iris rosa y violeta y un brillo blanco. Los anillos alternos están desfasados media celda y giran en sentidos opuestos. Los anillos salen despedidos hacia fuera a unos 11 anillos por segundo con un empujón en cada tiempo, y los anillos lejanos se funden en una neblina de tinta alrededor de un núcleo blanco. En cada tiempo un anillo luminoso sale del núcleo y crece, sucesivamente blanco, rosa y luego turquesa. De 6,05 a 6,45 s los ojos se transforman en un tablero de ajedrez polar, luego en un estallido solar de 36 rayos que giran despacio en colores arcoíris apagados, con un anillo brillante alrededor del centro que se hincha después de 7,0 s. De 7,45 a 7,8 s el tablero vuelve a destellar, y de 7,72 a 7,97 s todo se queda en blanco.
8,0–11,33 s, la masa cromada. El blanco se desvanece en 0,5 s para revelar una metabola cromada iridiscente sobre ondas concéntricas oscuras. Son seis esferas en una unión suave: un cuerpo oscuro con finas bandas de contorno de aceite en turquesa y rosa, una luz de borde rosa y brillos especulares blancos nítidos. Gira y se transforma. Una cadena vertical se reúne en un grumo, dos gotas se separan en 9,1–9,5 s, y se arruga en 9,5–9,9 s. Desde 10,0 s el cuadro se convierte en un caleidoscopio que pasa por 4, 6, 3, 8 y luego 10 pliegues de espejo, y un arco pálido barre hacia fuera en 10,0–10,25 s.
11,33–14,0 s, la espiral. Un destello glitch, y luego doce brazos de espiral logarítmica de celdas en forma de lágrima. Cada celda es 1,5 veces la anterior a lo largo de su brazo, y los brazos giran hacia fuera en sentido antihorario. Las celdas tienen contornos lavanda dobles y contienen un iris (turquesa, rosa o naranja) o un rombo de degradado anidado (rosa o violeta). Finas líneas doradas trazan los brazos y los anillos, y un núcleo blanco brilla en el centro. La espiral hace zoom hacia el centro a aproximadamente 1 unidad logarítmica por segundo y gira despacio; ambos movimientos reciben un empujón en cada tiempo, con un pulso de brillo en cada tiempo. De 13,82 a 14,0 s un bloom blanco crece desde el centro hasta llenar el cuadro.
14,0–15,5 s, la sala de esferas. El blanco se desvanece en 0,7 s hacia una sala 3D. Los arcos están hechos de cuentas de perla, grandes esferas iridiscentes bordean las paredes, y discos planos en el suelo llevan rayas op-art en zigzag en arcoíris pastel, todo en niebla violeta tinta. La cámara avanza en travelling y se inclina hacia la derecha.
15,5–16,0 s, montaje en semicorcheas (cortes a 15,5, 15,633, 15,75 y 15,883 s): un primer plano del iris, los rayos, el caleidoscopio y la espiral, cada uno con un pequeño destello.
16,0–18,0 s, el ojo otra vez. Un destello blanco con un disco oscuro en el centro que se encoge hasta desaparecer en 50 ms. La cámara se retira de la pupila, con la sala de esferas visible dentro, hasta el ojo completo a los 16,32 s. Ahora las líneas de contorno son gruesas bandas de neón: rosa cerca del ojo, luego violeta, luego tinta profunda más lejos, que se vuelve turquesa en 16,9–17,8 s. El iris es un anillo arcoíris pastel alrededor de una gran pupila oscura. Pulsos de ritmo llegan a 16,5, 17,0 y 17,5 s. De 17,84 a 17,98 s el ojo parpadea y se cierra: las bandas se enderezan en rayas horizontales con una línea brillante en el medio. A los 18,0 s todo colapsa a oscuro en 50 ms.
18,1–20,0 s, el título. Una palabra en la grotesca negra ancha («YOUR WORD») se ajusta a unos 1436 px de ancho y se centra. Entra con un barrido de izquierda a derecha con borde suave y desenfocado durante 0,52 s. Sus letras son pálidas (lavanda, menta y luego rubor, de izquierda a derecha) y están rellenas de grano, con una separación roja/azul que se asienta de 10 a 3 px y un resplandor teñido de violeta, turquesa y rosa. A los 18,62 s aparece en fundido debajo un subtítulo en cursiva («your short tagline»). A los 19,1 s se descifra encima una diminuta línea monoespaciada con espaciado de letras («( a short call to action )»). De 19,55 a 19,95 s la palabra se disuelve en ruido y el cuadro se desvanece.

Composición

Paleta: tinta profunda #1C0B5D y casi negro #0D0B1E para toda zona oscura (fondos, bandas, el blanco del ojo). Los acentos son rosa #FB2D89 (principal), naranja #FE9117, violeta #7C6CF2, turquesa #2DD4B0, amarillo #FFD23F y blanco #FFFFFF. Usa lavanda claro #F0EDFF / #FAF9FF para tonos pálidos y texto, lavanda apagado #9890B4 para el texto pequeño del HUD y #E9E4F2 para las líneas. Los elementos arcoíris alternan rosa, violeta, turquesa, amarillo, naranja.
Corrección sobre todo: bloom suave en las formas brillantes (umbral de aproximadamente 0,7), ligera aberración cromática radial hacia las esquinas, grano fino, una viñeta y saturación ligeramente apagada. Los oscuros nunca por debajo de #0D0B1E.
Tipografías: Unbounded 900 (una grotesca negra muy ancha) para el título, JetBrains Mono 400/700 a 11–15 px con espaciado de letras de aproximadamente 0,3 em para el HUD, y Spectral Italic 400 a unos 43 px para el subtítulo.
HUD: va por encima de todo desde 1,0 s, aparece en 0,5 s y se desvanece en 19,6–19,9 s. Finos corchetes de esquina en forma de L están a 28 px de cada esquina.

Arriba a la izquierda: un nombre en monoespaciada negrita («YOUR NAME») con un lema debajo («YOUR TAGLINE»).
Arriba a la derecha, alineado a la derecha: un contador de capítulos («01 / 07») y una etiqueta de capítulo en negrita («FIRST CHAPTER»), que cambian en cada sección.
Abajo a la izquierda: un timecode «TC 00:00:SS:FF» que cuenta fotogramas a 60 fps, y «120 BPM · bar.beat.sixteenth» (por ejemplo 02.3.3).
Abajo a la derecha: cuatro cuadrados de 8 px con el tiempo actual iluminado en blanco, y un breve crédito en negrita (por ejemplo «YOURSITE.COM»).
Una línea de progreso de 1,5 px corre entre los corchetes inferiores y se llena con el cabezal de reproducción.

Técnicas

Descifrar texto: al comienzo de cada sección el contador y la etiqueta de capítulo se descifran letra por letra en 0,38 s. Cada letra se mezcla entre glifos como # % & = + @ < | / $ a 30 cambios por segundo y se resuelve de izquierda a derecha. El texto central y la llamada a la acción usan el mismo descifrado, y el texto central se desintegra desde la derecha de la misma manera.
Destellos de sección: cada destello blanco con rayos radiales decae como 0.94 / (1 + (t / 0.07)^2.5).
Empuje a la pupila (3,42–3,98 s): el zoom se acelera exponencialmente, con zoom logarítmico = 5.5·x² / (x + 0.1) a lo largo del movimiento. La siguiente escena se reproduce dentro de la pupila y termina exactamente a 1:1, de modo que el corte es continuo. La salida a 16,0 s lo refleja.
Empujes de ritmo: la velocidad del túnel, el zoom y el giro de la espiral, y las ondas y los anillos reciben un golpe en cada tiempo, con pulsos de brillo en los tiempos.
Transformaciones en lugar de cortes dentro de las escenas: ojos a tablero a estallido solar, la cadena de la metabola a grumo a gotas a arruga, luego los números de pliegues del caleidoscopio 4, 6, 3, 8, 10.
Transiciones: blancos totales y fundidos desde blanco en los compases, un destello glitch hacia la espiral, un bloom blanco desde el centro hacia la sala de esferas, cortes con destello en semicorcheas en el montaje, un colapso a oscuro de 50 ms antes del título.
Título: un barrido de izquierda a derecha con borde suave, una separación RGB que baja de 10 a 3 px, luego una disolución en ruido y un fundido al final.

Música

Synthwave neón a 120 BPM en la menor, un acorde por compás (2 s): Am F para la intro, luego Am F C G Am, F en el breakdown, G en el retorno, Am al final. El bombo cae exactamente en los tiempos de la imagen (cada 0,5 s).

0–4 s: una figura de campana en corcheas sobre un pad cálido, con un riser largo y un platillo invertido, sin batería.
A los 4,0 s: un bombo four-on-the-floor, un bajo de corcheas con saltos de octava y un arpegio de sierra en semicorcheas. El bajo y el arpegio bombean con el bombo.
Desde 8,0 s: una gran caja con reverb en dos y cuatro, hats a contratiempo y un lead cuadrado con notas largas, con un redoble de caja hacia 14,0 s.
14,0–16,0 s: la batería y el bajo se retiran, el pad crece, y un arpegio filtrado sube con un redoble de caja en fusas hacia 16,0 s.
A los 16,0 s: todo vuelve de golpe.
La batería se detiene medio tiempo antes de 18,0 s, y un único acorde resonante de la menor add9 lleva la tarjeta final.

Sonido

Efectos de sonido sobre la imagen:

un seno agudo y suave a 0,3 s para la línea de pestañas
un riser hacia un boom profundo a 4,0 s
un riser corto y boom a 8,0 s
un glitch a 11,33 s
un riser y whoosh hacia 14,0 s
cuatro cortos clics glitch en los cortes del montaje
un riser largo hacia un boom a 16,0 s
un whoosh en el parpadeo a 17,95 s
un downer y sub drop a 18,0 s
una campana suave cuando aparece el título a 18,12 s
un whoosh aireado mientras el título se disuelve
Sin voz en off. Mezcla a unos −14 LUFS, con pico real por debajo de −1 dBTP.

Referencias

Colores outrun y synthwave de finales de los 80, muaré op-art e ilusiones de líneas de contorno, imaginería psicodélica de ojos, showreels procedurales al estilo demoscene y reels de estudios de motion design enmarcados por un HUD técnico.

Los recursos de motion design con los que está hecho el video, cada uno con código independiente que puedes abrir en el navegador o pasar a tu agente.

Vista previa de la técnica «Ojo almendrado con líneas de contorno en escala logarítmica» — En el 0:02 del video

Formas

Ojo almendrado con líneas de contorno en escala logarítmica

Un ojo dibujado en un solo fragment shader: los párpados son la lente entre dos círculos (puntas en ±0.53, semialtura de 0.237 de la altura del encuadre), y cada línea exterior es una isolínea de la misma distancia a los dos círculos, así que las líneas se mantienen puntiagudas y se vuelven rayas horizontales rectas cuando el ojo se cierra. Las líneas siguen pasos logarítmicos (cada separación un 13% mayor aprox.) y su fase fluye hacia fuera; un iris fibroso (70 ondas angulares retorcidas) en bandas melocotón, menta y violeta, un brillo anular y un borde interior suave lo completan. Los párpados se abren como una rendija (0.3 s) y luego con power2.out durante 0.48 s.

Cuándo usarla Una forma hipnótica para el hero que puede abrirse, parpadear y cerrarse en líneas al ritmo.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ojo almendrado con líneas de contorno en escala logarítmica</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="6" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Pointed-almond eye with log-spaced contour lines: the lids are the lens between two circles; every
// line outside is an iso-line of the same two-circle distance, spaced in log steps and flowing outward.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uT, uOpen, uFlow;
out vec4 o;
float almond(vec2 q, float a, float b) {          // two-circle lens, tips at (+-a, 0), half-height b
  b = max(b, 1e-4);
  float R = (a * a + b * b) / (2.0 * b), c = R - b, k = b * (2.0 * R - b), qq = dot(q, q);
  float d1 = (qq + 2.0 * q.y * c - k) / (length(q + vec2(0.0, c)) + R);
  float d2 = (qq - 2.0 * q.y * c - k) / (length(q - vec2(0.0, c)) + R);
  return max(d1, d2);
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float px = 1.0 / uRes.y;
  float d = almond(p, 0.53, 0.237 * uOpen);
  // lines: log spacing (each step ~13% wider), phase flowing outward
  float dd = max(d, 0.0);
  float lu = log(1.0 + dd / 0.207) / 0.089 - uFlow;
  float dist = abs(fract(lu + 0.5) - 0.5) / (px / ((0.207 + dd) * 0.089));
  float idx = floor(lu + 0.5);
  vec3 lineCol = mod(idx, 3.0) < 1.0 ? vec3(0.94, 0.93, 1.0) : mod(idx, 3.0) < 2.0 ? vec3(0.94, 0.54, 0.16) : vec3(0.18, 0.77, 0.64);
  lineCol = mix(lineCol, vec3(0.88, 0.16, 0.49), smoothstep(0.08, 0.6, dd));
  float fade = exp(-dd * 2.8);
  vec3 outside = vec3(0.06, 0.02, 0.19) * (0.3 + 0.7 * fade) + lineCol * exp(-dist * dist / 0.8) * (0.15 + 0.85 * fade);
  // inside: sclera, iris bands with twisted fibres, pupil, a ring highlight
  float r = length(p), ang = atan(p.y, p.x), rp = 0.08;
  float rn = clamp((r - rp) / (0.235 - rp), 0.0, 1.0);
  float a2 = ang + 0.15 * uT + rn * 1.3;
  float fib = 0.5 + 0.5 * sin(70.0 * a2 + 4.0 * sin(11.0 * a2 + rn * 6.0) + rn * 8.0);
  float w = rn + 0.05 * (fib - 0.5);
  vec3 ic = mix(vec3(0.85, 0.48, 0.12), vec3(1.0, 0.86, 0.7), smoothstep(0.0, 0.12, w));
  ic = mix(ic, vec3(0.78, 0.95, 0.91), smoothstep(0.4, 0.5, w));
  ic = mix(ic, vec3(0.6, 0.55, 0.96), smoothstep(0.7, 0.8, w)) * (0.8 + 0.3 * fib);
  vec3 sclera = mix(vec3(0.15, 0.1, 0.32), vec3(0.03, 0.02, 0.06), smoothstep(0.1, 0.55, r));
  vec3 inside = mix(sclera, ic, smoothstep(0.235 + px, 0.235 - px, r));
  inside = mix(inside, vec3(0.23, 0.16, 0.37), smoothstep(rp + px, rp - px, r));
  inside += exp(-pow((length(p - vec2(-0.118, 0.094)) - 0.037) / 0.0035, 2.0));
  inside *= mix(0.42, 1.0, smoothstep(0.0, 0.05, -d));
  vec3 col = mix(outside, inside, smoothstep(px, -px, d));
  col += vec3(0.92, 0.9, 0.98) * (exp(-pow(d / (px * 1.6), 2.0)) * 0.85 + exp(d / (px * 5.0)) * step(d, 0.0) * 0.45);
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0, open: 0, flow: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: 6, flow: 3.3, duration: 6, ease: "none" }, 0);           // lines flow outward ~0.55 line/s
tl.fromTo(s, { open: 0 }, { open: 0.06, duration: 0.35, ease: "sine.inOut" }, 0.3);   // a slit first
tl.to(s, { open: 1, duration: 0.48, ease: "power2.out" }, 0.85);       // then the lids open
tl.to(s, { open: 0, duration: 0.15, ease: "power2.in" }, 5.6);         // a blink at the end
tl.eventCallback("onUpdate", () => draw({ uT: s.t, uOpen: s.open, uFlow: s.flow }));
draw({ uT: 0, uOpen: 0, uFlow: 0 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vista previa de la técnica «Zoom a través de la pupila hacia la siguiente escena» — En el 0:03 del video

Transición

Zoom a través de la pupila hacia la siguiente escena

La siguiente escena ya se reproduce dentro de la pupila, reducida para llegar exactamente a 1:1 cuando la pupila cubre el encuadre (sin ampliarse más). La cámara hace zoom exponencial hacia la pupila (ln zoom = 5.5 x^2 / (x + 0.1) en unos 0.55 s) y el corte cae sobre un destello blanco que decae como 0.94 / (1 + (t / 0.07)^2.5), con estelas radiales creadas muestreando el fotograma 12 veces hacia el centro.

Cuándo usarla Siempre que un mundo deba abrirse hacia el siguiente a través de un agujero, una lente o un ojo.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zoom a través de la pupila hacia la siguiente escena</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Push-in through the pupil: the next scene is already playing inside the pupil, scaled so that it reaches
// 1:1 when the pupil covers the frame; the zoom is exponential (ln zoom = 5.5 x^2 / (x + 0.1)), and the cut
// lands on a white flash whose radial streaks are the same frame sampled toward the centre.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uT, uZoom, uFlash;
out vec4 o;
vec3 inner(vec2 p, float t) {                       // the next scene: rings of dots flying outward
  float r = max(length(p), 1e-3), a = atan(p.y, p.x);
  float cu = (1.0 / r) / 0.75 - t * 4.0, cv = a / 6.2832 * 18.0 + floor(cu) * 0.5;
  vec2 c = vec2(fract(cv) - 0.5, (fract(cu) - 0.5) * r * 2.1);
  float dot1 = smoothstep(0.2, 0.15, length(c));
  vec3 col = mix(vec3(0.03, 0.02, 0.1), mix(vec3(0.98, 0.18, 0.54), vec3(0.18, 0.83, 0.69), mod(floor(cu), 2.0)), dot1);
  return col + vec3(0.94, 0.93, 1.0) * exp(-r / 0.06);
}
vec3 scene(vec2 p) {
  vec2 q = p / uZoom;                               // camera pushes into the pupil at the centre
  float r = length(q), px = 1.0 / (uRes.y * uZoom);
  float a = atan(q.y, q.x);
  float fib = 0.5 + 0.5 * sin(70.0 * (a + r * 5.0));
  vec3 iris = mix(vec3(1.0, 0.82, 0.25), vec3(0.49, 0.42, 0.95), smoothstep(0.12, 0.22, r)) * (0.75 + 0.35 * fib);
  vec3 col = mix(vec3(0.05, 0.03, 0.12), iris, smoothstep(0.235 + px, 0.235 - px, r));
  float rp = 0.12;                                  // pupil radius
  float k = max(1.05 / (rp * uZoom), 1.0);          // inner scene shrunk into the pupil, never past 1:1
  col = mix(col, inner(p * k, uT), smoothstep(rp + px, rp - px, r));
  return col;
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  vec3 col = scene(p);
  if (uFlash > 0.0) {
    vec3 acc = vec3(0.0);
    for (int i = 0; i < 12; i++) acc += scene(p * (1.0 - uFlash * 0.3 * float(i) / 11.0));
    col = mix(col, acc / 12.0, clamp(uFlash * 1.5, 0.0, 1.0));
    col = mix(col, vec3(1.0) * (1.0 - 0.26 * dot(p, p)), uFlash);
  }
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 4.0, CUT = 2.6;                           // push-in 2.0 -> 2.6 s, flash at the cut
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  const t = s.t;
  const x = Math.max(0, Math.min(t, CUT) - 2.0);
  const zoom = t < CUT ? Math.exp((5.5 * x * x) / (x + 0.1)) : 9.0;
  const flash = t >= CUT ? 0.94 / (1 + Math.pow((t - CUT) / 0.07, 2.5)) : 0;
  draw({ uT: t, uZoom: zoom, uFlash: flash });
});
draw({ uT: 0, uZoom: 1, uFlash: 0 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vista previa de la técnica «Túnel en perspectiva de anillos de iconos» — En el 0:05 del video

Formas

Túnel en perspectiva de anillos de iconos

Anillos de iconos almendrados situados a profundidad 1/r = 0.75 k, de modo que se amontonan hacia el centro como un tubo real; 18 iconos por anillo, con anillos alternos desplazados media celda y girando en sentidos opuestos. El vuelo es un desplazamiento del índice de profundidad (unos 11 anillos por segundo), los anillos lejanos se funden en bruma y, en cada pulso, un anillo luminoso sale del núcleo blanco y crece con power2.out.

Cuándo usarla Un recorrido rápido e infinito para un drop o una sección de mucha energía.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Túnel en perspectiva de anillos de iconos</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="5" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Perspective tunnel of icons: ring k sits at depth 1/r = 0.75 k, so rings crowd toward the centre like a real
// tube; N icons per ring, alternate rings turn opposite ways and sit half a cell apart; each beat sends a
// glowing ring out from the core.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uFly, uSpin, uRingR, uRingI;
out vec4 o;
float almond(vec2 q, float a, float b) {
  b = max(b, 1e-4);
  float R = (a * a + b * b) / (2.0 * b), c = R - b, k = b * (2.0 * R - b), qq = dot(q, q);
  return max((qq + 2.0 * q.y * c - k) / (length(q + vec2(0.0, c)) + R), (qq - 2.0 * q.y * c - k) / (length(q - vec2(0.0, c)) + R));
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float r = max(length(p), 1e-4), a = atan(p.y, p.x);
  const float N = 18.0, DZ = 0.75;
  float cu = (1.0 / r) / DZ + uFly;                 // depth rings
  float ring = floor(cu);
  float dir = mod(ring, 2.0) < 1.0 ? 1.0 : -1.0;
  float cv = a / 6.2832 * N + uSpin * dir + ring * 0.5;
  float aspect = r * DZ * N / 6.2832;               // radial / tangential size of a cell
  vec2 c = vec2(fract(cv) - 0.5, (fract(cu) - 0.5) * aspect);
  float px = N / (6.2832 * r * uRes.y);
  float hb = min(0.22, 0.42 * aspect);
  float d = almond(c, 0.46, hb);
  float inside = smoothstep(px, -px, d);
  vec3 irisC = mod(ring, 2.0) < 1.0 ? vec3(0.91, 0.16, 0.5) : vec3(0.6, 0.56, 0.96);
  vec3 eye = mix(vec3(0.05, 0.04, 0.16), irisC, smoothstep(min(0.155, hb * 0.75) + px, min(0.155, hb * 0.75) - px, length(c)));
  vec3 col = mix(vec3(0.02, 0.02, 0.05), eye, inside);
  col += vec3(0.15, 0.71, 0.59) * exp(-pow(d / (px * 1.4 + 0.014), 2.0));
  col = mix(col, vec3(0.16, 0.08, 0.38), smoothstep(0.1, 0.4, px));     // far rings melt into haze
  col += vec3(0.94, 0.93, 1.0) * (exp(-r / 0.05) * 0.9 + exp(-r / 0.12) * 0.35);
  float rr = abs(r - uRingR);
  col += vec3(1.0, 0.35, 0.66) * (exp(-pow(rr / 0.011, 2.0)) * 1.3 + exp(-rr / 0.044) * 0.45) * uRingI;
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 5.0, BEAT = 0.5;
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  const t = s.t, x = (t % BEAT) / BEAT;
  const out = 1 - Math.pow(1 - x, 2);
  draw({ uFly: t * 11.0, uSpin: t * 0.35, uRingR: 0.045 + 0.062 * out, uRingI: 0.6 + 0.8 * Math.exp(-x * 3.0) });
});
draw({ uFly: 0, uSpin: 0, uRingR: 0.045, uRingI: 1.4 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vista previa de la técnica «Espiral log-polar sesgada de celdas en forma de lágrima» — En el 0:12 del video

Formas

Espiral log-polar sesgada de celdas en forma de lágrima

Las celdas se sitúan en 12 brazos de espiral logarítmica (ángulo + K ln r constante, K = -1.25) y avanzan 1.5x hacia fuera a lo largo de cada brazo; cada celda se dibuja en el sistema propio de su brazo, de modo que lágrimas, iris y rombos siguen la espiral con contornos dobles. El zoom hacia el centro es un desplazamiento de ln r (aprox. 1 por segundo) y el giro es un desplazamiento del ángulo; ambos reciben un pequeño impulso en cada pulso.

Cuándo usarla Un vórtice fascinante que lleva siempre la mirada al centro.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Espiral log-polar sesgada de celdas en forma de lágrima</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="5" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Sheared log-polar spiral: cells sit on N arms (a + K ln r = const) and step 1.5x outward along each arm;
// every cell gets a teardrop outline drawn in the arm's own frame, so the shapes follow the spiral. Zooming
// is a shift of ln r, turning a shift of the angle; both pulse on the beat.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uZoom, uRot;
out vec4 o;
float hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float r = max(length(p), 1e-4), a = atan(p.y, p.x);
  const float N = 12.0, DU = 0.405, K = -1.25;
  float u = log(r) + uZoom;
  float cu = u / DU, cv = (a + uRot + K * u) / 6.2832 * N;
  float cw = 6.2832 / N;
  float sd = (fract(cu) - 0.5) * DU, td = (fract(cv) - 0.5) * cw - K * sd;
  vec2 dir = normalize(vec2(-K, 1.0));
  float halfW = 0.5 * cw / sqrt(1.0 + K * K), L = 0.5 * DU * sqrt(1.0 + K * K) / halfW;
  vec2 c = vec2(dot(vec2(td, sd), vec2(dir.y, -dir.x)), dot(vec2(td, sd), dir)) / halfW;
  float px = 1.0 / (r * uRes.y * halfW);
  float h = hash(vec2(mod(floor(cv), N), mod(floor(cu), 61.0)));
  float egg = length(vec2(c.x / 0.86, c.y / (L * 0.86 + 0.1 * c.y))) - 1.0;
  float inside = smoothstep(px, -px, egg);
  vec3 fill = h < 0.5
    ? mix(vec3(0.06, 0.04, 0.15), h < 0.25 ? vec3(0.16, 0.74, 0.62) : vec3(0.94, 0.16, 0.5), smoothstep(0.6, 0.5, length(c)))
    : mix(vec3(0.99, 0.76, 0.86), vec3(0.98, 0.18, 0.54), smoothstep(0.0, 1.0, abs(c.x) / 0.62 + abs(c.y) / (L * 0.62)));
  vec3 col = mix(vec3(0.01, 0.01, 0.02), fill, inside);
  col += vec3(0.77, 0.74, 0.94) * (exp(-pow(egg / (px * 1.2 + 0.01), 2.0)) * 0.85 + exp(-pow((egg + 0.13) / (px * 1.2 + 0.008), 2.0)) * 0.4 * inside);
  col = mix(col, vec3(0.7, 0.5, 0.8), smoothstep(0.06, 0.25, px));
  col += vec3(0.98, 0.98, 1.0) * exp(-r / 0.06) * 1.1;
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 5.0;
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  let burst = 0;
  for (let b = 0.5; b < s.t; b += 0.5) burst += 1 - Math.pow(1 - Math.min(1, (s.t - b) / 0.3), 2);
  draw({ uZoom: -(s.t * 1.0 + burst * 0.3), uRot: -s.t * 0.5 - burst * 0.08 });
});
draw({ uZoom: 0, uRot: 0 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vista previa de la técnica «HUD que lleva el tiempo y descifra sus etiquetas» — En el 0:04 del video

Tipografía

HUD que lleva el tiempo y descifra sus etiquetas

Un marco estilo emisión en tipografía mono pequeña y espaciada: esquinas en corchete, nombre y eslogan, un contador y una etiqueta de sección que se descifran letra a letra (cada letra se resuelve de izquierda a derecha en 0.38 s, recorriendo glifos 30 veces por segundo), un timecode en fotogramas a 60 fps, compás.tiempo.semicorchea a 120 BPM, cuatro cuadrados de pulso y una línea de progreso.

Cuándo usarla Para enmarcar un reel o showreel con capítulos, tempo y un reloj en marcha.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HUD que lleva el tiempo y descifra sus etiquetas</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(60% 60% at 50% 50%, #1c0b5d, #0d0b1e); }
#hud { position: absolute; inset: 0; font-family: "JetBrains Mono", monospace; white-space: pre; }
.br { position: absolute; width: 21px; height: 21px; border: 0 solid #e9e4f2; }
.tl { left: 28px; top: 28px; border-left-width: 1.5px; border-top-width: 1.5px; }
.tr { right: 27px; top: 28px; border-right-width: 1.5px; border-top-width: 1.5px; }
.bl { left: 28px; bottom: 27px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.bbr { right: 27px; bottom: 27px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.big { position: absolute; font-size: 15px; line-height: 15px; font-weight: 700; letter-spacing: 4.9px; color: #faf9ff; }
.small { position: absolute; font-size: 11px; line-height: 11px; letter-spacing: 3.4px; color: #9890b4; }
.bright { color: #faf9ff; opacity: 0.8; }
#name { left: 46px; top: 45px; } #tag { left: 46px; top: 69px; }
#num { right: 45px; top: 49px; } #label { right: 44px; top: 68px; }
#tc { left: 46px; top: 1007px; } #bpm { left: 46px; top: 1027px; } #credit { right: 44px; top: 1024px; }
#track { position: absolute; left: 106px; top: 1051px; width: 1709px; height: 1.5px; background: rgba(233, 228, 242, 0.2); }
#fill { width: 100%; height: 100%; background: rgba(233, 228, 242, 0.72); transform-origin: 0 50%; transform: scaleX(0); }
.sq { position: absolute; top: 1008px; width: 8px; height: 8px; background: rgba(233, 228, 242, 0.26); }
.sq.on { background: #ffffff; }
#sq0 { left: 1818px; } #sq1 { left: 1834px; } #sq2 { left: 1850px; } #sq3 { left: 1866px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
  <div id="hud" class="clip" data-start="0" data-duration="6">
    <div class="br tl"></div><div class="br tr"></div><div class="br bl"></div><div class="br bbr"></div>
    <div id="name" class="big">"YOUR NAME"</div>
    <div id="tag" class="small">"YOUR TAGLINE"</div>
    <div id="num" class="small">01 / 03</div>
    <div id="label" class="big">"FIRST"</div>
    <div id="tc" class="small bright">TC 00:00:00:00</div>
    <div id="bpm" class="small">120 BPM · 01.1.1</div>
    <div class="sq" id="sq0"></div><div class="sq" id="sq1"></div><div class="sq" id="sq2"></div><div class="sq" id="sq3"></div>
    <div id="credit" class="big">"SITE.COM"</div>
    <div id="track"><div id="fill"></div></div>
  </div>
</div>
<script>
// A HUD that keeps time: timecode in frames of 60 fps, bar.beat.sixteenth at 120 BPM, four beat squares,
// a progress line, and section labels that decode letter by letter (each letter resolves left to right
// over 0.38 s; until then it shows a glyph that changes 30 times a second).
const SECTIONS = [{ t: 0, n: "01", label: '"FIRST"' }, { t: 2, n: "02", label: '"SECOND"' }, { t: 4, n: "03", label: '"THIRD"' }];
const D = 6, GLYPHS = "#%&=+@<>|\\/$*Z0X1";
const $ = (id) => document.getElementById(id);
const pad = (n) => String(n).padStart(2, "0");
const hash = (a, b) => { const h = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return h - Math.floor(h); };
function decode(text, t, t0, dur, seed) {
  let out = "";
  for (let i = 0; i < text.length; i++) {
    const ch = text[i];
    if (" /()".includes(ch)) { out += ch; continue; }
    out += t >= t0 + ((i + 0.6) * dur) / text.length ? ch : GLYPHS[Math.floor(hash(i + seed * 13.7, Math.floor(t * 30)) * GLYPHS.length) % GLYPHS.length];
  }
  return out;
}
function render(t) {
  let si = 0;
  SECTIONS.forEach((s, i) => { if (t >= s.t) si = i; });
  const s = SECTIONS[si];
  $("num").textContent = si ? decode(s.n + " / 03", t, s.t, 0.38, si) : s.n + " / 03";
  $("label").textContent = si ? decode(s.label, t, s.t, 0.38, si + 7) : s.label;
  const fr = Math.floor(t * 60 + 1e-4);
  $("tc").textContent = "TC 00:00:" + pad(Math.floor(fr / 60)) + ":" + pad(fr % 60);
  const sx = Math.floor(t * 8 + 1e-4), beat = Math.floor((sx % 16) / 4) + 1;
  $("bpm").textContent = "120 BPM · " + pad(Math.floor(sx / 16) + 1) + "." + beat + "." + ((sx % 4) + 1);
  for (let i = 0; i < 4; i++) $("sq" + i).classList.toggle("on", i === beat - 1);
  $("fill").style.transform = "scaleX(" + (t / D).toFixed(4) + ")";
}
const s = { t: 0 };
const tl = gsap.timeline({ paused: true });
tl.fromTo("#hud", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power1.inOut" }, 0.1);
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => render(s.t));
render(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vista previa de la técnica «Logotipo con grano luminoso, barrido, división RGB y disolución» — En el 0:19 del video

Tipografía

Logotipo con grano luminoso, barrido, división RGB y disolución

La palabra se dibuja una vez en una textura con mipmaps; el shader la lee nítida para las letras con una división rojo/azul que se asienta de 10 a 3 px, y en tres niveles de desenfoque para un resplandor teñido de violeta, turquesa y rosa de izquierda a derecha. Las letras se rellenan con grano, entran con un barrido de izquierda a derecha con borde suave y difuminado en 0.52 s y al final las devora el ruido en 0.4 s.

Cuándo usarla Una tarjeta final o un título que debe brillar como luz grabada en el ojo.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logotipo con grano luminoso, barrido, división RGB y disolución</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@900&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="3.5" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Glowing grain wordmark: the word is drawn once into a mipmapped texture; the shader reads it sharp for the
// letters (with a red/blue split), at three blur levels for a glow tinted left-to-right, fills the letters
// with grain, wipes them in left to right with a soft blurred edge, and at the end eats them with noise.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform sampler2D uText;
uniform float uReveal, uDiss, uSplit, uSeed;
uniform vec2 uBox;   // left and right edge of the word, 0..1
out vec4 o;
float hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
void main() {
  vec2 uv = gl_FragCoord.xy / uRes;
  float tx = (uv.x - uBox.x) / (uBox.y - uBox.x);
  float rev = smoothstep(uReveal + 0.05, uReveal - 0.03, tx);
  float lod = (1.0 - rev) * 2.5;
  float sp = uSplit / uRes.x;
  vec3 core = vec3(textureLod(uText, uv - vec2(sp, 0.0), lod).r, textureLod(uText, uv, lod).r, textureLod(uText, uv + vec2(sp, 0.0), lod).r);
  float glow = textureLod(uText, uv, 3.0).r * 0.35 + textureLod(uText, uv, 4.6).r * 0.55 + textureLod(uText, uv, 6.0).r * 0.55;
  vec3 tint = mix(mix(vec3(0.94, 0.93, 1.0), vec3(0.88, 1.0, 0.96), smoothstep(0.15, 0.5, tx)), vec3(1.0, 0.88, 0.93), smoothstep(0.55, 0.92, tx));
  vec3 gcol = mix(mix(vec3(0.49, 0.42, 0.95), vec3(0.18, 0.83, 0.69), smoothstep(0.15, 0.48, tx)), vec3(0.98, 0.18, 0.54), smoothstep(0.58, 0.95, tx));
  float g = hash(floor(gl_FragCoord.xy) + uSeed * 17.0);
  float keep = smoothstep(uDiss - 0.1, uDiss + 0.1, g);
  vec3 col = core * tint * (0.74 + 0.34 * g) * keep + gcol * glow * 0.55 * (0.35 + 0.65 * keep);
  o = vec4(vec3(0.05, 0.04, 0.12) + col * rev, 1.0);
}`;
const canvas = document.getElementById("gl");
const W = canvas.width, H = canvas.height;
const WORD = "YOUR WORD";
document.fonts.load('900 100px "Unbounded"', WORD).then(() => {
  const c = document.createElement("canvas");
  c.width = W; c.height = H;
  const g = c.getContext("2d");
  g.fillStyle = "#000"; g.fillRect(0, 0, W, H);
  g.font = '900 100px "Unbounded"';
  const size = (100 * 1436) / g.measureText(WORD).width;   // fit the word to 1436 px
  g.font = `900 ${size}px "Unbounded"`;
  g.textAlign = "center";
  const m = g.measureText(WORD);
  g.fillStyle = "#fff";
  g.fillText(WORD, W / 2, H / 2 + m.actualBoundingBoxAscent / 2);
  const box = [(W / 2 - m.actualBoundingBoxLeft) / W, (W / 2 + m.actualBoundingBoxRight) / W];
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const draw = makeShader(canvas, FS);
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  const s = { t: 0 };
  const D = 3.5;
  const tl = gsap.timeline({ paused: true });
  tl.to(s, { t: D, duration: D, ease: "none" }, 0);
  const frame = () => {
    const t = s.t;
    const e = (x) => 1 - Math.pow(1 - Math.min(1, Math.max(0, x)), 1.6);
    draw({ uReveal: -0.08 + 1.18 * e((t - 0.1) / 0.52), uDiss: -0.2 + 1.3 * Math.pow(Math.min(1, Math.max(0, (t - 3.0) / 0.4)), 1.4),
           uSplit: 10 - 7 * e((t - 0.1) / 0.8), uSeed: Math.floor(t * 24), uBox: box });
  };
  tl.eventCallback("onUpdate", frame);
  frame();
  window.__timelines = window.__timelines || {};
  window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Más prompts

Vista previa del prompt “Showreel matemático vivo con cortes glitch al ritmo”

Showreel matemático vivo con cortes glitch al ritmo

<direction> Haz un showreel de motion graphics de 20 segundos construido enteramente con matemáticas: cada fotograma se genera a partir del tiempo t en marcha, sin fotos, metraje ni imágenes. Horizontal 1920x1080 a 60 fps. Debe sentirse como un instrumento de laboratorio preciso que de pronto se vuelve hermoso: oscuro, brillante, exacto, con un corte glitch cada dos segundos al ritmo. Ocho escenas matemáticas se reproducen dentro de un marco fijo estilo instrumento (esquinas, wordmark, contador y etiqueta de escena, punto de ritmo, reloj en marcha, línea de progreso, ecuación en vivo), y luego una tarjeta final con la marca. Evita el grano, las imágenes de stock y cualquier decoración que no salga de las matemáticas. </direction> <structure> Cortes a los 2, 4, 8, 10, 12, 14, 16 y 18 s, todos al ritmo. 1) 0-2 s, origen: un anillo turquesa tenue crece desde el centro hasta r 238 px (0-0,45 s, ease out); ejes con marcas cada 60 px crecen desde un punto central brillante; un anillo de onda sale del punto en cada pulso. Una línea con mucho espaciado como "YOUR AI MOTION DESIGNER" se resuelve desde caracteres aleatorios (0,3-0,78 s); una línea corta con serifa como "Ideas in motion" se escribe letra por letra junto al origen (0,5-1,12 s). De 1,35 a 1,95 s un arco turquesa de r 220 da una vuelta alrededor del origen con un punto blanco en la punta, y las palabras se desvanecen. 2) 2-4 s, círculo unitario: un círculo turquesa (r 220) a la izquierda, con el ángulo creciendo a 4,52 rad/s. Radio blanco, cateto del coseno turquesa, cateto del seno rosa, un arco de ángulo naranja con la etiqueta θ, una línea rosa discontinua hasta un punto rosa en x 820 donde se escribe el seno; el historial del ángulo se extiende hacia la derecha como un seno rosa brillante (104 px por radián) con un coseno turquesa tenue al lado y guías punteadas +1/-1. Lecturas en vivo "θ = 4.524 rad" y "sin θ = -0.982". Ecuación: y = sin θ. 3) 4-8 s, epiciclos de Fourier: una cadena de 180 círculos giratorios (ordenados por tamaño, anillos lavanda tenues, radios blancos) dibuja el contorno de un gran π en naranja brillante de 4,3 a 7,2 s (progreso sine in-out), luego la forma se rellena con un degradado suave de rosa a violeta mientras la cadena se desvanece. A la izquierda, un espectro de |cₙ| para n = -24...24 (altura de las barras según la raíz cuadrada de la amplitud) se ilumina del centro hacia fuera a medida que avanza el dibujo; lecturas "K = 180 terms" y "t/2π = 0.527". Ecuación: f(t) = Σ cₙ e^{int}. 4) 8-10 s, un nudo de Lissajous en 3D (sin 3t, sin 2t, sin 5t) trazado en 0,6 s, y luego girando en perspectiva: una cinta cuyo color va de turquesa a violeta y rosa a lo largo de la curva y cuyo ancho y brillo siguen la profundidad. A la derecha, una cuadrícula de 3x3 de pequeñas figuras de Lissajous planas con etiquetas 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 se dibuja una a una con la fase a la deriva; la última se vuelve turquesa dentro de un marco fino. 5) 10-12 s, una superficie de ondas en malla z = cos(kr - ωt)/(1 + r) en una cuadrícula de 48x48 vista desde 67° por encima, revelada desde el centro hacia fuera en 0,55 s y girando despacio, con líneas coloreadas por altura de turquesa a violeta y rosa. Un punto sonda naranja recorre la superficie en r = 3.2 con una línea guía y lecturas en vivo "r = 3.200", "z = 0.276". 6) 12-14 s, un conjunto de Julia z² + c que llena el encuadre, abierto por un portal circular que se expande desde el centro con un borde blanco. c = 0.7885·e^{iα} se desliza por su círculo (sine in-out), de modo que el fractal se transforma de espirales separadas en una forma conexa con interior negro; zoom lento y rotación. Colores por tiempo de escape: índigo, violeta, rosa, naranja, crema pálido hasta blanco. Un recuadro muestra c moviéndose por su círculo con lecturas "Re c" e "Im c". 7) 14-16 s, filotaxis: 1500 semillas con θₙ = n·137.508°, rₙ = c√n aparecen del centro hacia fuera y giran, blancas al principio, luego rosa, violeta y turquesa. A la izquierda, φ = 1.6180339887... se escribe dígito a dígito, crece una fila de Fibonacci (21 y 34 en turquesa), con "seeds n = 1500" y "spirals 21 ⟲ 34 ⟳". 8) 16-18 s, identidad de Euler: las semillas se arremolinan en un anillo que se convierte en un círculo unitario turquesa a la izquierda; un punto barre de 1 a -1 dejando un arco naranja por encima; e^{iπ} aparece grande, luego "+", "1", "=" uno a uno al ritmo, un anillo pulsa en -1 y "0" aterriza a los 18 s en un anillo rosa. 9) 18-20 s, tarjeta final: la identidad se encoge hacia arriba; un wordmark grande con mucho espaciado como "YOUR BRAND" (sustitúyelo por el tuyo) sube letra por letra desde abajo dentro de una máscara (0,06 s de desfase), un subrayado turquesa-violeta-rosa se dibuja debajo, una línea espaciada como "IDEAS IN MOTION × [your web address]" se resuelve desde caracteres aleatorios y una línea itálica con serifa "From idea to video in one chat" aparece en fundido. Todo se funde a negro de 19,35 a 19,95 s. </structure> <composition> Fondo: un resplandor radial índigo-negro profundo, centro #10063A que se desvanece a #03030A en los bordes, sin grano. Acentos: rosa #FB2D89 (principal), naranja #FE9117, violeta #7C6CF2, turquesa #2DD4B0 y blanco. Líneas y etiquetas en grises lavanda: #9A98A4 para etiquetas, #57516F para leyendas tenues, #433E53 para ejes. Los trazos brillan suavemente con un desenfoque de 12-16 px de su propio color. Tipografía: ecuaciones en una serifa estilo Computer Modern (Old Standard TT, variables en cursiva, funciones en redonda); toda lectura, contador y leyenda en monoespaciada (Liberation Mono o similar), pequeña y con mucho espaciado; el nombre de marca en una grotesca negrita con un espaciado muy amplio. Un marco fijo permanece todo el tiempo, apareciendo en 0,15-0,9 s: finas esquinas de 27 px de largo, a 47 px de cada esquina. Arriba a la izquierda: un wordmark como "YOUR BRAND" (negrita, 22 px, espaciado de unos 0,35 em) con una diminuta línea espaciada debajo como "IDEAS IN MOTION · [your web address]". Arriba a la derecha: un contador de escenas "01 / 08" y debajo una etiqueta corta por escena, por ejemplo "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (sustitúyelas por tus lemas), con un pequeño punto rosa a su izquierda. Abajo a la derecha: un reloj en marcha "t = 03.35 s" (dos decimales) y una diminuta línea con el número de fotograma. Abajo: una línea de progreso de 1 px de x 80 a 1840 que se llena con un degradado turquesa-violeta-rosa a medida que pasa el tiempo, con pequeñas marcas en cada límite de escena. Abajo a la izquierda: la ecuación de la escena actual. </composition> <techniques> Cada corte es un glitch de 0,2 s: la imagen saliente se corta en bandas horizontales desplazadas hacia los lados, parpadean 3-6 líneas finas de ancho completo en turquesa, rosa, naranja y blanco, todo el fotograma destella en blanco a un 14 % aproximadamente y decae en 0,25 s, y las etiquetas del marco se mezclan con caracteres aleatorios durante unos fotogramas. El punto rosa de ritmo destella con fuerza en cada pulso y decae en medio pulso. La ecuación de la escena aparece en fundido de 0,1 a 0,35 s después de cada corte. Las lecturas, el reloj y los contadores se actualizan en vivo con la animación. Las líneas espaciadas se resuelven desde caracteres aleatorios; las líneas con serifa se escriben letra por letra; el wordmark final sube desde abajo dentro de una máscara con un desfase de 0,06 s. Los trazados y transformaciones usan ease-out o sine in-out según se indica por escena. </techniques> <music> Un tema electrónico optimista a 120 BPM (acordes de piano, pads cálidos, bajo sintético, bombo four-on-the-floor), de exactamente 20 s, con cada corte cayendo en un pulso. Suave y filtrado durante los dos primeros segundos con un riser hacia un boom a los 2 s, plena energía hasta los 16 s, un breakdown filtrado con un riser hacia un boom final a los 18 s, y luego se apaga hasta los 20 s. Mezcla a unos -14 LUFS con pico real por debajo de -1 dBTP. </music> <sound> Un whoosh suave y tres clics glitch en cada corte, y un whoosh más grave y un boom cuando se abre el portal del fractal a los 12 s, todo sobre la música y en la rejilla del ritmo. Sin voz en off. </sound> <references> Animaciones matemáticas explicativas mezcladas con arte generativo de creative coding y un HUD de osciloscopio o instrumento de laboratorio de ciencia ficción: líneas finas y brillantes sobre casi negro, lecturas monoespaciadas, ecuaciones con serifa de libro de texto. </references>

Ensamblaje de logo low-poly con nombre escrito en lockup

<direction> Haz un logo reveal horizontal de 21 segundos, 1920x1080 a 60 fps. Ensambla lentamente mi logo a partir de facetas low-poly y termina en un lockup horizontal con el nombre de mi marca escrito y un eslogan debajo. La idea es una construcción larga y tranquila sin cortes durante catorce segundos, una liberación en el drop de la música en dos segundos y luego un final tranquilo con el texto escrito. El aspecto: un fondo casi negro con una suave viñeta circular, colores de marca planos y tipografía grotesca limpia. Evita degradados en el logo, costuras visibles entre los triángulos, cortes durante la construcción y cualquier cosa recargada detrás del logo. </direction> <structure> 1. 0–2,6 s, la estructura de alambre: una estructura de alambre low-poly del contorno de mi logo se dibuja sola desde la parte inferior del logo hacia fuera. Tiene unos 35–45 vértices y 90 líneas finas. 2. 1,9–13,3 s, el ensamblaje: el logo se corta en unos 55 triángulos a lo largo de esa estructura, y entran volando pieza a pieza desde fuera del encuadre. Los aterrizajes empiezan lentos en la parte inferior del logo y se vuelven más densos hacia arriba. La última pieza aterriza a los 13,3 s, y entonces el logo queda completo y exacto. Mantén el logo terminado durante aproximadamente un segundo. 3. 14,38 s, el destello, exactamente en el drop de la música. Una ráfaga de luz, un anillo naranja en expansión y un destello brillante sobre el logo se disparan a la vez. 0,1 s después del golpe, una placa de tinta oscura crece detrás del logo y se cuadra hasta convertirse en un icono de app. Mantén el icono centrado durante un segundo. 4. 15,74–16,15 s, el deslizamiento: el icono se reduce a cerca del 42% y se mueve al tercio izquierdo, dejando espacio para el nombre. 5. 16,1–21 s, el nombre: aparece un cursor rosa a la derecha del icono y el nombre se escribe, por ejemplo "Brand Name" (sustitúyelo por tu marca). A los 18,15 s el eslogan entra barriendo debajo, por ejemplo "Your tagline here" (sustitúyelo por el tuyo). El cursor parpadea tres veces al ritmo y desaparece a los 19,9 s. Mantén el lockup hasta el final. </structure> <composition> Fondo: una viñeta radial casi negra, #0D0B1E en el centro oscureciéndose hasta #040308 en las esquinas. Paleta: - Tinta profunda #1C0B5D para la placa del icono. - Rosa #FB2D89 como acento principal. - Naranja #FE9117. - Blanco #FFFFFF. - Lavanda claro #E9E4F2 y #F0EDFF para líneas y texto suave. - Violeta #7C6CF2 solo en el resplandor del fondo. El logo se mantiene en colores planos sin degradados. Estructura de alambre: líneas en lavanda #E9E4F2 al 60% de opacidad, 1,3 px de grosor; puntos de vértice en #F0EDFF con 2,6 px de radio. Placa del icono: un círculo de 676 px que se convierte en un cuadrado redondeado con un radio de esquina del 24% y una suave sombra proyectada. Tipografía: el nombre en una grotesca en negrita (Golos Text 700, unos 155 px, blanco). El eslogan va debajo en una grotesca ligera (Onest 400, unos 49 px, lavanda al 74% de opacidad). Cursor: una barra rosa #FB2D89, de 10 x 128 px, con un suave resplandor rosa. El lockup final (icono a la izquierda, nombre y eslogan a la derecha) está centrado en conjunto en el encuadre. </composition> <techniques> Push-in: el inicio avanza con un push-in muy lento hacia el centro del encuadre, de escala 0,886 a 0 s a 0,998 a 11 s, y luego queda quieto. Dibujo de la estructura: cada línea crece linealmente desde su vértice anterior hasta el posterior en 0,08–0,45 s. Un pequeño punto aparece en cada vértice cuando una línea lo alcanza. Entrada volando: cada pieza son uno a tres triángulos. Entra rápido siguiendo una trayectoria curva y desacelera hasta su sitio en unos 0,5 s, girando en 3D. El giro, el volteo y la inclinación se suavizan hasta cero al llegar. En vuelo está atenuada a cerca del 60% y ligeramente suave; al aterrizar es nítida y está totalmente iluminada. Cada triángulo muestra exactamente su parte del logo plano, así que el ensamblaje terminado no tiene costuras. Resplandor: un tenue resplandor rosa #FB2D89, con menos del 10% de opacidad y que se funde en violeta #7C6CF2, crece detrás del logo a medida que se llena. Destello a los 14,38 s: - Una ráfaga de luz rosa-malva en modo screen estalla alrededor del logo y se desvanece en 0,8 s. - Un anillo fino naranja cálido, de 7 px, empieza con un radio de 300 px y sale disparado del encuadre a velocidad constante en 0,38 s. - El logo destella con brillo y se asienta en 0,3 s. Placa: 0,1 s después del golpe, la placa #1C0B5D crece desde un punto hasta el círculo de 676 px en 0,21 s (sine ease-out). Al principio está iluminada y luego sus esquinas se cuadran hasta el radio del 24%. Deslizamiento: el icono se escala a cerca del 42% y se mueve al tercio izquierdo en 0,415 s (power3 ease-in-out). Se desenfoca hasta 7 px en su momento más rápido y aterriza nítido. Después sigue creciendo muy despacio, cerca de un 3% en cinco segundos. Escritura: una letra por cada semicorchea de la música (0,156 s a 96 BPM). Cada letra aparece en 0,05 s mientras el cursor salta tras ella. Eslogan: entra barriendo de izquierda a derecha en unos 0,2 s, carácter por carácter. </techniques> <music> Un instrumental a 96 BPM, esperanzador y moderno, de exactamente 21 segundos. - Inicio: un suave glockenspiel de caja de música sobre pads cálidos. - Hacia los 4,4 s: entra un arreglo completo y animado (batería, bajo, cuerdas, una línea brillante de glockenspiel). Un filtro se abre durante dos compases y va creciendo hacia el destello. - 14,38 s: un golpe de platillo y un gran acorde caen exactamente en el destello. - Después del drop: la caja de música vuelve sobre pads sostenidos bajo el lockup y se apaga hasta el silencio a los 21 s. Mantenlo en la cuadrícula del compás para que la escritura y los parpadeos del cursor caigan en semicorcheas y tiempos. </music> <sound> Efectos de sonido sobre la música: - Un riser suave hacia el primer aterrizaje de triángulo. - Un riser hacia el destello, luego un boom profundo y un ligero impacto de cristal sobre él. - Un whoosh corto cuando el anillo sale disparado, y otro cuando el icono se desliza. - Un suave clic de tecla por cada letra escrita, y uno tenue cuando aparece el eslogan. Sin voz en off. Volumen general de unos -14 LUFS, true peak por debajo de -1 dBTP. </sound> <references> Un sting de logo premium de tecnología o lanzamiento de app: un ensamblaje de estructura de alambre low-poly a sólido al estilo de una construcción de facetas 3D, liberado en el drop en una revelación de icono de app, con un lockup de nombre escrito al estilo de terminal. </references>

Vista previa del prompt “Showreel de motion design sincronizado con el ritmo”

Showreel de motion design sincronizado con el ritmo

<direction> Haz un showreel de motion design de 15 segundos para [your brand], 1920x1080 en horizontal a 60 fps, totalmente dibujado: tipografía animada, formas, partículas, una nube de puntos 3D y un panel, sin metraje real. La idea: un reel de producto rápido donde cada cambio de escena cae en un beat house a 128,57 BPM. Un beat son exactamente 28 fotogramas (0,4667 s), cada corte se apoya en esa cuadrícula y el primer golpe grande cae en 1,867 s (beat 4). El aspecto alterna escenas casi negras y claras de blanco lavanda, con rosa intenso como acento principal más violeta y naranja. Los títulos usan una grotesca pesada, los pies de texto una mono y la declaración una serif cursiva. Un marco de estilo televisivo cubre todo el reel hasta un glitch final. Usa mi marca de logotipo en la tarjeta final y sustituye cada texto entre comillas por mis propias palabras, manteniendo cada una con una longitud parecida para que el diseño aguante. Evita fotos, metraje de stock, fundidos suaves genéricos y todo lo que se desvíe de la cuadrícula del beat. </direction> <structure> 1. 0–1,85 s, intro sobre casi negro. Una fina línea de regla (1440 px de ancho, clara al 22 % de opacidad) crece desde su centro a 0,34 s (expo.out, 0,65 s); luego aparecen 13 marcas de izquierda a derecha, con un fotograma de diferencia. Una bola rosa de 80 px cae desde arriba a la izquierda y deriva al centro (power2.out, 1,25 s). Rebota tres veces en la regla, aplastándose en cada impacto y estirándose en cada caída, con un poco de desenfoque de movimiento a velocidad. Una línea mono se teclea bajo la regla, un carácter cada 1,56 fotogramas, seguida de un cursor de bloque parpadeante (ejemplo "no keyframes.", sustitúyelo por el tuyo). A 1,28 s la bola se comprime a 0,8x y luego se hincha con una curva expo-in hasta llenar el encuadre de rosa a 1,82 s. 2. 1,82–3,70 s, cuatro palabras, una por beat. Cada palabra pesada de 300 px está sobre su propio fondo con una línea mono de comentario debajo (ejemplos "// describe your idea", "// live preview", "// refine in words", "// mp4 export"). Detrás, dos filas de copias con contorno de 205 px de las cuatro palabras se desplazan arriba y abajo a 760 px/s en sentidos opuestos. Los contornos se trazan con el color de texto de la escena al 7–14 % de opacidad. - Palabra 1 (ejemplo "DESCRIBE"), índigo profundo sobre rosa: la palabra aterriza desde una escala de 1,39x con expo.out (0,33 s) mientras sus letras aparecen con 0,03 s de diferencia y un rápido desenfoque que se aclara. - Palabra 2 (ejemplo "PREVIEW"), clara sobre casi negro a 2,333 s: el espaciado se cierra de 150 px a ajustado con expo.out (0,45 s), con aparición en 3 fotogramas. - Palabra 3 (ejemplo "REFINE"), violeta sobre la página clara a 2,8 s: las letras suben 340 px desde detrás de una línea de máscara 40 px bajo la línea base con back.out(2.2), 0,3 s cada una, con 0,035 s de diferencia. - Palabra 4 (ejemplo "EXPORT"), clara sobre violeta a 3,267 s: las letras saltan a notas de 1/32 (3,5 fotogramas de separación), cada una de 0,6x a un salto de 1,13x de 50 px de alto, y luego se asienta. 3. 3,46–4,02 s, barrido de franjas. Ocho franjas verticales de 240 px, alternando rosa y página clara, suben desde abajo (power2.inOut, 0,18 s, 0,7 fotogramas de separación, primero la izquierda). Se mantienen y luego siguen subiendo hasta salir, revelando la siguiente escena desde abajo. 4. 3,70–5,60 s, formas sobre casi negro. Una cuadrícula de 120 px de pequeños cuadrados redondeados apagados (una quinta parte son contornos) con diminutas cruces entre ellos. Una onda sale del centro en cada beat (3,73, 4,2, 4,67 y 5,13 s) a 2000 px/s. Donde pasa su frente, cada celda crece de 42 a 74 px, se redondea hacia un círculo, gira 38 grados y se vuelve rosa. La primera onda revela la cuadrícula, y la cuadrícula gira lentamente en sentido antihorario, cada vez más rápido. Tras la última onda las celdas se vacían y se desvanecen a 5,47 s. 5. 5,55–7,42 s, partículas. Un punto de destello blanco con un fino anillo de choque aparece a 5,62 s; luego 7000 cuadraditos estallan desde el centro. Se reúnen en una enorme palabra de 590 px (ejemplo "IDEA") coloreada a lo ancho del naranja al lavanda y al violeta, con un centelleo de un píxel. Desde 7,0 s salen en torrente hacia la derecha con estelas, primero la parte izquierda de la palabra. Detrás hay un suave resplandor radial rosa. 6. 7,42–9,45 s, 3D sobre un fondo radial índigo profundo. Una esfera de Fibonacci de 1700 puntos (radio 362 px) gira despacio sobre un suelo en perspectiva de finas líneas violetas cuyas filas avanzan hacia el espectador. Los puntos son rosas o violetas, más grandes y brillantes delante. Desde 8,12 s cada punto viaja a su lugar en un nudo tórico (2,3) (cubic in-out, retrasos aleatorios de hasta 0,16 s), y el nudo sigue girando. 7. 9,08–9,65 s, un segundo barrido de franjas como en la escena 3, en violeta, rosa y página clara. 8. 9,27–11,1 s, panel sobre la página clara con tenues guías verticales. - Pasos: tres filas de números de paso pesados de 180 px cuentan hacia arriba con expo.out ("01", "02", "03", el tercero en rosa) con pies mono (ejemplo "PICK A TEMPLATE"). Cada fila sube a su propia caja recortada, con 0,08 s de diferencia. - Tarjeta: una tarjeta blanca (880x740, esquinas de 26 px, sombra suave índigo) se eleva 90 px (power3.out, 0,45 s). Contiene un título en minúsculas en negrita, una pequeña píldora "LIVE" y un anillo que se llena con power3.out con una etiqueta corta dentro. - Gráfico: catorce barras naranjas crecen desde la base con 0,031 s de diferencia, la última sólida en rosa. Una línea violeta se dibuja sobre ellas con sine.inOut (0,72 s), con un punto, un halo y una etiqueta oscura en su cabeza (ejemplo "No keyframes"). 9. 10,96–11,45 s, barrido de barras. Ocho bandas horizontales, alternando casi negro y rosa, entran desde la izquierda (power3.inOut, 0,2 s, un fotograma de diferencia, primero la superior) y siguen hacia la derecha hasta salir. 10. 11,07–13,07 s, declaración sobre casi negro. Cuatro haces de 28 líneas finísimas fluyen por el encuadre como cintas, mezcladas de forma aditiva: rosa a naranja arriba, luego rosa a violeta, violeta, y violeta a rosa abajo. Una declaración de dos líneas en serif cursiva de 290 px entra letra por letra. Cada letra sube 36 px y se desenfoca hacia nítido en 0,16 s, con 0,02 s de diferencia en la línea uno y 0,035 s en la línea dos. La línea uno es clara y empieza en x 334 (ejemplo "Ideas in"); la línea dos es rosa y termina en x 1438 (ejemplo "motion."). 11. 12,73–13,07 s, glitch. Trozos del texto saltan de lado, el encuadre se invierte dos veces, parpadean pequeños bloques violetas, amarillos y rosas, y el texto se separa en rosa y turquesa. El marco televisivo y sus contadores desaparecen. 12. 13,07–15,0 s, tarjeta final sobre casi negro. - Un destello pálido se apaga (0,26 s). - Un logotipo tipográfico pesado de 260 px ("[your brand]") sube letra por letra desde detrás de su línea base (back.out(1.6), 0,32 s, 0,05 s de diferencia). - Mi marca de logotipo cae desde arriba como la bola de la intro, se aplasta al aterrizar a 13,51 s y se asienta como el punto final del logotipo tipográfico. - Una fina línea se dibuja bajo el conjunto (power3.out, 0,3 s). - Una línea mono con mucho espaciado se descifra debajo, de caracteres rosas revueltos a letras claras (13,76–14,6 s). - Una llamada a la acción en serif cursiva rosa aparece con fundido a 14,33 s (ejemplo "try it free."). - Una fila tenue de cuatro funciones breves aparece con fundido en la parte inferior. Mantén la tarjeta final hasta los 15 s. </structure> <composition> - Paleta: - Casi negro #0D0B1E para fondos oscuros. - Índigo profundo #1C0B5D para texto oscuro y la escena 3D. - Página clara #FAF9FF para fondos claros y texto claro. - Lavanda #F0EDFF para paneles suaves. - Apagado #6B6385 para pies de texto y #E9E4F2 para líneas. - Acentos: rosa principal #FB2D89, segundo violeta #7C6CF2, naranja cálido #FE9117, más blanco. - Amarillo #FFD23F y turquesa #2DD4B0 solo como motas de glitch. - Si te doy colores de marca, ponlos según su función. - Fuentes: Roboto Flex con peso 900 y espaciado ajustado (-0,035 em) para todos los títulos. JetBrains Mono para el marco, los pies de texto y las líneas de comentario. Instrument Serif Italic para la declaración de dos líneas y la llamada a la acción. - Una suave viñeta lateral, más oscura solo en los bordes izquierdo y derecho: alrededor de -8 % a mitad de borde y -12 % en las esquinas. - Un marco de estilo televisivo sobre todo hasta el glitch: - Esquinas de 26 px. - Un título arriba a la izquierda (ejemplo "[YOUR BRAND] / YOUR TAGLINE"). - Un código de tiempo en marcha arriba a la derecha (00:00:SS:FF a 60 fps). - El nombre del capítulo actual abajo a la izquierda. - Un contador de fotogramas "NNN / 900" con una barra de progreso de 300 px abajo a la derecha. - Cada parte es clara al 0,9 de opacidad en modo de fusión exclusión, así que se vuelve oscura en escenas claras y teñida sobre rosa o violeta. El marco aparece con fundido a 0,3 s. </composition> <techniques> - Cada cambio de escena se apoya en la cuadrícula de beats de 28 fotogramas. Las escenas y los barridos se solapan unos fotogramas, así que ningún fotograma queda vacío. - Varía las transiciones: la bola que se hincha hasta el siguiente fondo, cortes de color duros entre las cuatro palabras, barridos verticales de franjas, un barrido horizontal de barras, un destello con anillo de choque y un glitch con separación RGB hacia la tarjeta final. - Da a la bola y a la marca de logotipo un movimiento físico: aplastamiento al impactar, estiramiento en la caída, ligero desenfoque de movimiento a velocidad. - Usa entradas letra por letra en todo momento, cada palabra con su propia curva (aterrizajes expo.out, subidas back.out desde una máscara, saltos en notas de 1/32), aclarando el desenfoque conforme llegan las letras. - Mantén todo nítido y vectorial: las partículas, los puntos y las líneas son diminutos y definidos, y los resplandores se mantienen suaves y detrás del texto. </techniques> <music> Haz una base house original a 128,57 BPM, de exactamente 15 s, colocada sobre la cuadrícula de beats. - Intro: un pad aéreo con plucks burbujeantes. - Desde el golpe a 1,867 s: el groove completo, con bombo a cuatro por el suelo, palmas, hats y bajo con sidechain. - Final: un riser y glitch hacia un gran golpe final a 13,07 s, y después el acorde de cierre resuena hasta los 15 s. </music> <sound> Sobre la base, añade golpes compuestos para el corte: - un riser hacia un boom en el fill de 1,867 s - whooshes cortos con su pico en cada corte de palabra y cada barrido - clics suaves en las ondas de formas - un pequeño boom y un tic de cristal en el destello de partículas - un whoosh de estela cuando las partículas se van - una caída de sub hacia la escena 3D - un riser y tics digitales de glitch hacia el boom final a 13,07 s - una campana cuando la marca de logotipo aterriza a 13,51 s Sin locución. Mezcla a unos -14 LUFS, pico real por debajo de -1 dBTP. </sound> <references> Un showreel de lanzamiento de producto tecnológico al estilo de elegantes reels animados de marca: una superposición HUD televisiva, tipografía cinética, partículas generativas, una nube de puntos 3D giratoria y un panel de interfaz limpio. </references>

Boletín

Te enviamos los mejores prompts nuevos de la comunidad con sus videos. Sin spam, y cada correo trae un enlace para darte de baja.

Usamos tu correo solo para este boletín. Política de privacidad

Las cookies esenciales recuerdan tus ajustes del sitio. Con tu permiso, Google Analytics nos ayuda a entender cómo se usa Motion Fab. Puedes cambiar tu elección en el pie de página.

Tus opciones de privacidad según las leyes estatales de privacidad de EE. UU. aplicables. Política de privacidad