tu motion designer con IA

ES

Abrir la app beta

Simple Motion

Showreel de tipografía cinética en dos partes al ritmo de la música

Un showreel dibujado de 32 segundos: bola que rebota, palabras cinéticas, cuadrículas de formas, barras 3D y partículas, y luego diapositivas editoriales al ritmo con objetos 3D giratorios.

Publicado 10 de noviembre de 2026Usado 1 vez

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

Denunciar este prompt

Concepto

Crea un showreel de motion graphics horizontal de 32 segundos (1920x1080, 60 fps) para [your brand], en dos mitades con estilos distintos, cortado con precisión al ritmo de la música. Todo está dibujado: sin metraje, sin clips de stock. La parte uno (0–15,9 s, 128 BPM) es una secuencia oscura, granulada y llena de energía de tipografía cinética, formas, 3D y partículas dentro de un marco HUD fino. La parte dos (15,9–31,8 s, 144 BPM) es un conjunto de diapositivas editoriales limpias, cada una con un objeto 3D que gira lentamente. Sin voz en off. Evita el metraje, los fundidos encadenados lentos y suaves entre escenas, los cortes fuera del ritmo y cualquier fuente aparte de las dos familias nombradas abajo.

Estructura

Parte uno (0–15,9 s, 128 BPM), dentro del marco HUD:

0–0,9 s: tarjeta de título "[Your brand]" con "01 / 02" debajo, que aparece en 0,17 s y desaparece en 0,18 s.
0,9–2,7 s: una bola rosa cae sobre una línea de suelo rayada y rebota tres veces al ritmo (1,40; 1,88; 2,36 s). Cada aterrizaje recibe una trayectoria de vuelo punteada, un anillo que se expande y una pequeña anotación mono ("BIGGER", "SLOWER", "ANOTHER COLOUR"). Después la bola vuelve volando al centro y crece hasta llenar el cuadro de rosa.
2,7–3,25 s: sobre el rosa, "YOUR" en negro, en peso expandido, sube letra a letra desde detrás de la línea base, se dibuja un subrayado debajo y una pequeña etiqueta "(01)" queda encima.
3,25–3,7 s: "IDEA" en rosa pasa de trazo finísimo a peso negro en 0,11 s dentro de un cuadro de selección violeta de herramienta de diseño con ocho tiradores y una píldora de tamaño que cuenta hacia arriba.
3,7–4,1 s: una "is" cursiva ligera en violeta sobre el fondo lavanda crece con desenfoque. Su punto se convierte en una mancha que inunda el cuadro de violeta.
4,1–4,65 s: "READY" en blanco condensado se descodifica a partir de glifos aleatorios con separación magenta/cian y desplazamientos en franjas, sobre tenues líneas mono de comandos de chat (por ejemplo 'chat.say("Bigger")', 'export("mp4")') y un bloque de cursor rosa parpadeante. Luego el cuadro colapsa en una línea brillante como un monitor CRT al apagarse, seguida de un destello gris.
4,65–6,5 s: una cuadrícula de 19 x 11 puntos crece desde el centro. Un anillo violeta hace ondular los puntos hasta convertirlos en signos más. Un barrido de izquierda a derecha convierte los signos más en equis, círculos y rombos, con celdas rosas y violetas aleatorias. Un segundo barrido rápido los vuelve todos cuadrados.
6,5–8,4 s: la cuadrícula cuadrada se inclina hacia atrás hasta formar un campo 3D de barras redondeadas que suben en olas. Una bola rosa brillante salta por sus cimas al ritmo, con poca profundidad de campo, y termina en un desenfoque de zoom.
8,4–10,25 s: un muro tipográfico de siete bandas horizontales entra de golpe desde la derecha con desenfoque de movimiento, empezando por la banda central. Las bandas violetas y claras repiten "[YOUR BRAND]" en cuatro cortes de la fuente variable (cursiva heavy expandida, cursiva light condensada, recta heavy, recta light), con puntos rosas entre ellos, desplazándose en direcciones alternas. La banda del medio es rosa, con el nombre quieto y grande. Las bandas se deslizan hacia los lados y dejan la palabra sola en blanco.
10,25–12,1 s: la palabra se disuelve de izquierda a derecha en unas 3.000 partículas. Forman una esfera giratoria, luego dos anillos cruzados con un núcleo rosa, luego una galaxia de dos brazos (uno rosa) y salen disparadas radialmente.
12,1–14,2 s: un resumen de las escenas anteriores en pantalla dividida (dos paneles, luego cuatro, luego nueve), con destellos de glitch de un solo fotograma y un destello gris al final.
14,2–15,9 s: tarjeta final. "[YOUR BRAND]" sube letra a letra y se dibuja una línea debajo. "YOUR AI MOTION DESIGNER" y "[YOURSITE.COM]" se descodifican en mono con espaciado entre letras. La bola rosa cae y aterriza como el punto final. Luego entran deslizándose "● TRY IT FREE" y una cursiva "describe the video. the agent animates it.".
Parte dos (15,9–31,8 s, 144 BPM), diapositivas editoriales:

15,9 s: tarjeta de título "Your AI motion designer" con "02 / 02".
16,8 s, casi negro: "EDIT" / "IN WORDS." (segunda línea en naranja), texto "TELL THE CHAT WHAT TO SHOW. / THE AGENT BUILDS THE ANIMATION.", etiquetas "LIVE PREVIEW / MP4 EXPORT", un nudo toroidal cromado con reflejos naranjas y mi logotipo arriba a la derecha.
19,2 s, naranja: "IDEAS" / "IN MOTION." en casi negro, una píldora "NO KEYFRAMES", "FONTS FOR EVERY SCRIPT.", "BIGGER / SLOWER / ANOTHER COLOUR" y un anillo oscuro de cinta retorcida impreso con "IDEAS IN MOTION •".
21,7 s, casi negro: "IDEA." / "TO VIDEO." / "ONE CHAT.", "SHAPES / 3D EFFECTS / SOUND", un tubo cromado ondulado, corchetes en las esquinas y un contador de porcentaje con barra de progreso.
24,2 s, página clara: "MUSIC" / "TO RHYTHM.", "MUSIC AND / SOUND EFFECTS.", una estrella hinchada naranja y brillante, y una bola negra que rebota al ritmo sobre una forma de onda animada.
26,7 s, 27,6 s, 28,5 s: una palabra centrada por diapositiva. "BIGGER." sobre casi negro, "SLOWER." sobre página clara con un pequeño garabato cromado en la esquina, "COLOUR." sobre naranja. Subtítulos: "SAY WHAT SHOULD CHANGE.", "NO KEYFRAMES TO HUNT FOR.", "THE PREVIEW UPDATES AS YOU TALK.".
29,2 s, casi negro: "OPEN" / "[YOUR BRAND].", "[YOURSITE.COM]", "IDEA → CHAT → VIDEO", un botón naranja "TRY IT FREE" y una estrella hinchada cromada de cuatro puntas. El vídeo termina con el golpe musical final a los 31,5 s, con 31,8 s en total.
Todo el texto entre comillas es un ejemplo. Sustitúyelo por tus propias palabras de longitud similar para que el diseño se mantenga.

Composición

Paleta de la parte uno: casi negro #0D0B1E con grano de película y viñeta suave; página clara #FAF9FF para la tipografía; rosa #FB2D89 como acento principal; violeta #7C6CF2 como segundo; lavanda #F0EDFF solo como fondo del plano de "is". Paleta de la parte dos: diapositivas planas en casi negro, naranja #FE9117 y página clara #FAF9FF con una tenue cuadrícula de 96 px. El texto es casi negro sobre las diapositivas naranjas y claras, y claro sobre las casi negras.
Tipografía: una familia display neogrotesca variable con ejes de ancho y peso para todos los titulares (Mona Sans). Una monoespaciada para cada etiqueta pequeña, línea de HUD, subtítulo y contador (JetBrains Mono).
HUD de la parte uno: finos corchetes en las esquinas. Arriba a la izquierda "[YOUR BRAND] [YOURSITE.COM]". Arriba a la derecha "LIVE PREVIEW MP4 EXPORT NO KEYFRAMES". Abajo a la izquierda un código de tiempo en marcha, cuatro cuadrados pequeños y una línea de progreso. Abajo a la derecha el nombre de la sección actual, que cambia con las escenas: "IDEAS IN MOTION", "KINETIC TYPE", "SHAPES", "3D EFFECTS", "EDIT IN WORDS", "LIVE PREVIEW", "MP4 EXPORT", "TRY IT FREE".
Las diapositivas de la parte dos comparten cabecera y pie. Cabecera: "● [YOUR BRAND] / IDEAS IN MOTION" a la izquierda, "MP4 [YOURSITE.COM]" a la derecha, con una línea fina debajo. Pie: "[YOUR BRAND]", seis guiones pequeños que marcan la diapositiva actual, un código de tiempo en marcha y una línea de progreso naranja que crece a lo largo de toda la mitad. Los titulares van grandes a la izquierda. Cada diapositiva tiene un objeto 3D a la derecha, girando lentamente dentro de una fina elipse de órbita. Mi logotipo aparece como una pequeña insignia en las diapositivas.

Técnicas

Bola: aplastamiento a 1,9 x 0,45 durante 60 ms en cada impacto y estiramiento a lo largo de su velocidad en vuelo.
Subida de letras: cada letra tarda 0,2 s con cubic out y 35 ms de desfase, subiendo desde detrás de la línea base. Los subrayados y las líneas se dibujan con expo out.
Los cortes de palabra de la parte uno son secos y al ritmo. Cada palabra tiene su propio tratamiento: subida, rampa de peso, inundación de mancha, descodificación glitch.
Descodificación glitch: glifos aleatorios se resuelven con separación RGB y desplazamientos en franjas, y terminan en un apagado de CRT.
Las etiquetas mono se descodifican a partir de glifos aleatorios.
Muro tipográfico: las bandas entran de golpe con desenfoque de movimiento, se desplazan a 260 px/s y salen deslizándose hacia los lados.
Los titulares de la parte dos entran desde 90 px a la izquierda, con opacidad de 0,35 a 1 en 0,3 s, cubic out. La segunda línea sigue 30 ms después.
Transiciones de la parte dos: un panel del color de la siguiente diapositiva entra barriendo desde la izquierda en 83 ms. Empieza justo antes del compás para que la nueva diapositiva caiga exactamente en el primer tiempo.
Diapositivas de una palabra: cortes secos entre ellas. Cada palabra está entre dos copias tenues de contorno de sí misma que se separan.
Objetos 3D: materiales cromados y brillantes con un giro lento y continuo.
Forma de onda: sus barras se iluminan en naranja al pasar el cabezal de reproducción.
Grano y viñeta solo en la parte uno. La parte dos se mantiene plana.

Música

Una pista instrumental original, exactamente tan larga como el vídeo y colocada sobre su rejilla de ritmo. La parte uno abre con un riser tenso sobre hi-hats que tictaquean. Un drop electrónico pesado golpea hacia los 2,8 s (bajo distorsionado, zaps glitch, 128 BPM) y empuja todo hasta la tarjeta final. A los 15,6 s sigue un respiro de un segundo. La parte dos es un groove electro-pop más brillante y rebotón a 144 BPM desde los 16,8 s hasta un golpe final a los 31,5 s. Los rebotes de la bola, los cortes de palabra, los barridos y los aterrizajes de las diapositivas caen todos en tiempos o primeros tiempos.

Sonido

Sin voz en off. Efectos de sonido sobre la música:

un clic en cada rebote de la bola
un riser hacia el drop y un boom en la primera palabra
cortos whooshes en los cortes de palabra
un downer cuando la pantalla se apaga
whooshes hacia la inmersión 3D y hacia el muro tipográfico
un sub drop hacia el resumen
un boom cuando el nombre aterriza en la tarjeta final
un riser y un boom hacia la parte dos
un whoosh en cada barrido de diapositiva y un clic en cada corte seco
Masterización a unos -14 LUFS con true peak por debajo de -1 dBTP.

Referencias

Un reel de estudio de diseño de movimiento o un sizzle de lanzamiento de app. La primera mitad es tipografía cinética brutalista con superposiciones de herramientas de diseño y HUD. La segunda mitad son diapositivas editoriales de estilo suizo con objetos 3D cromados.

Qué preparar

Tu logotipo o icono de app, cuadrado y con fondo transparente, que se muestra como una pequeña insignia en las diapositivas de la parte dos.

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 «Las letras suben desde detrás de la línea base, el subrayado se dibuja» — En el 0:02 del video

Tipografía

Las letras suben desde detrás de la línea base, el subrayado se dibuja

Una palabra gruesa y expandida sobre un campo plano de color de acento: cada letra sube 360 px desde debajo de una línea de recorte invisible en la línea base (0,2 s, cubic out, desfase de 35 ms), y luego un subrayado de 8 px se dibuja de izquierda a derecha con expo out desde 0,12 s. Una pequeña etiqueta mono entre corchetes queda sobre la primera letra.

Cuándo usarla Un golpe de una sola palabra en un tiempo fuerte, como primera palabra grande tras un crescendo.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Las letras suben desde detrás de la línea base, el subrayado se dibuja</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#field { position: absolute; inset: 0; background: #FB2D89; }
.word { position: absolute; left: 0; right: 0; top: 330px; height: 390px; overflow: hidden; display: flex; justify-content: center; clip-path: inset(0 0 0 0); }
.word span { display: inline-block; font: 900 440px/0.88 'Mona Sans'; font-stretch: 125%; color: #0D0B1E; }
.rule { position: absolute; left: 190px; top: 731px; width: 1540px; height: 8px; background: #0D0B1E; transform-origin: 0 50%; }
.tag { position: absolute; left: 196px; top: 330px; font: 500 19px 'JetBrains Mono'; color: rgba(13,11,30,.7); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="field" class="clip" data-start="0" data-duration="3"><div class="tag">(01)</div><div class="word"><div class="mask"></div></div><div class="rule"></div></div></div>
<script>
const word = "YOUR"; // the word
const box = document.querySelector('.word');
box.innerHTML = '';
for (const ch of word) { const s = document.createElement('span'); s.textContent = ch; box.appendChild(s); }
const tl = gsap.timeline({ paused: true });
tl.fromTo('.word span', { y: 360 }, { y: 0, duration: 0.2, ease: 'power3.out', stagger: 0.035 }, 0.1); // rise from below the clip
tl.fromTo('.rule', { scaleX: 0 }, { scaleX: 1, duration: 0.3, ease: 'expo.out' }, 0.22);            // underline
tl.fromTo('.tag', { opacity: 0 }, { opacity: 1, duration: 0.1 }, 0.15);
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 «Rampa de peso dentro de un cuadro de selección de herramienta de diseño» — En el 0:03 del video

Tipografía

Rampa de peso dentro de un cuadro de selección de herramienta de diseño

Una palabra entra con peso hairline y sube a peso black en 0,11 s (cubic out) con una fuente variable; un cuadro de selección de 3 px con ocho tiradores cuadrados entra con rebote a su alrededor (back out, 0,14 s) y una píldora debajo cuenta su tamaño hasta las dimensiones finales en píxeles.

Cuándo usarla Para mostrar que el texto se diseña en vivo, como en un editor.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rampa de peso dentro de un cuadro de selección de herramienta de diseño</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#s { position: absolute; inset: 0; }
.w { position: absolute; left: 0; right: 0; top: 345px; text-align: center; font: 150 360px/1 'Mona Sans'; color: #FB2D89; font-variation-settings: 'wght' 150; }
.sel { position: absolute; left: 520px; top: 368px; width: 880px; height: 343px; border: 3px solid #7C6CF2; }
.sel i { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #7C6CF2; }
.sel i:nth-child(1){left:-8px;top:-8px}.sel i:nth-child(2){left:calc(50% - 6px);top:-8px}.sel i:nth-child(3){right:-8px;top:-8px}.sel i:nth-child(4){left:-8px;top:calc(50% - 6px)}.sel i:nth-child(5){right:-8px;top:calc(50% - 6px)}.sel i:nth-child(6){left:-8px;bottom:-8px}.sel i:nth-child(7){left:calc(50% - 6px);bottom:-8px}.sel i:nth-child(8){right:-8px;bottom:-8px}
.pill { position: absolute; left: 898px; top: 731px; width: 124px; height: 30px; border-radius: 4px; background: #7C6CF2; color: #fff; font: 500 16px/30px 'JetBrains Mono'; text-align: center; }
.tag { position: absolute; left: 528px; top: 330px; font: 500 19px 'JetBrains Mono'; color: #FAF9FF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="s" class="clip" data-start="0" data-duration="3"><div class="w">IDEA</div><div class="sel"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="pill">0 × 0</div><div class="tag">(02)</div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const wv = { w: 150 }, size = { n: 0 };
tl.to(wv, { w: 900, duration: 0.11, ease: 'power3.out', onUpdate: () => (document.querySelector('.w').style.fontVariationSettings = `'wght' ${wv.w}`) }, 0.2); // hairline to black
tl.fromTo('.sel', { scale: 0.92, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.14, ease: 'back.out(2)' }, 0.26);
tl.to(size, { n: 1, duration: 0.24, ease: 'power3.out', onUpdate: () => (document.querySelector('.pill').textContent = `${Math.round(880 * size.n)} × ${Math.round(343 * size.n)}`) }, 0.26);
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 «Cuadrícula de morfología de formas: onda y barrido» — En el 0:05 del video

Formas

Cuadrícula de morfología de formas: onda y barrido

Una cuadrícula de 19 x 11 celdas con paso de 100 px, cada una dibujada como dos rectángulos redondeados cruzados; interpolando la longitud del brazo, su grosor y el radio de esquina, una forma se transforma en otra (círculo, más, cuadrado), y un giro de 45 grados crea la x y el rombo. Un anillo se expande desde el centro a 15 celdas por segundo convirtiendo círculos en signos más con un frente de color; luego un barrido de izquierda a derecha a 26 celdas por segundo recorre más, x, círculo y rombo mientras las celdas toman colores de acento aleatorios, y un segundo barrido rápido las vuelve cuadradas.

Cuándo usarla Un interludio generativo entre escenas de texto, o un fondo guiado por el 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>Cuadrícula de morfología de formas: onda y barrido</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const COLS = 19, ROWS = 11, PITCH = 100;                       // the grid
const INK = '#FAF9FF', A = '#FB2D89', B = '#7C6CF2';          // colours
// a shape is two crossed rounded rects: [arm length, arm width, corner radius] in cell units
const SH = { circle: [1, 1, .5], plus: [1.25, .36, .18], diamond: [.84, .84, .16], square: [1.08, 1.08, .15] };
const mix = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
const cl = (v) => Math.max(0, Math.min(1, v));
const hash = (i, j) => { const s = Math.sin(i * 127.1 + j * 311.7) * 43758.5453; return s - Math.floor(s); };
function cell(cx, cy, D, s, rot) {
  const L = s[0] * D, W = s[1] * D, r = Math.min(s[2] * D, W / 2);
  x.save(); x.translate(cx, cy); x.rotate(rot); x.beginPath(); x.roundRect(-L / 2, -W / 2, L, W, r); x.roundRect(-W / 2, -L / 2, W, L, r); x.fill(); x.restore();
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  for (let j = 0; j < ROWS; j++) for (let i = 0; i < COLS; i++) {
    const d = Math.hypot(i - 9, (j - 5) * 1.1);
    let s = SH.circle, rot = 0, col = INK, D = 52 * cl((t - d * 0.03) / 0.25);
    const R = (t - 0.6) * 15;                                  // ripple: circles become pluses
    if (R > 0) { const k = cl((R - d) / 2); s = mix(SH.circle, SH.plus, k); D = 52 + 4 * k; if (R - d > -0.5 && R - d < 3) col = B; }
    if (t > 1.2) {                                             // sweep: plus -> x -> circle -> diamond
      const p = cl((4 + (t - 1.2) * 26 - i) / 5);
      s = p < .33 ? SH.plus : p < .66 ? mix(SH.plus, SH.circle, (p - .33) / .33) : mix(SH.circle, SH.diamond, (p - .66) / .34);
      rot = p < .33 ? p / .33 * Math.PI / 4 : Math.PI / 4; D = 58;
      const h = hash(i, j); col = p > .4 ? (h < .2 ? A : h < .3 ? B : INK) : INK;
    }
    if (t > 1.7) { const q = cl(((t - 1.7) * 90 - i) / 5); s = mix(SH.diamond, SH.square, q); rot = Math.PI / 4 * (1 - q); }
    if (D < 1) continue; x.fillStyle = col; cell(60 + i * PITCH, 40 + j * PITCH, D, s, rot);
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(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 «Decodificación glitch con división RGB y apagado CRT» — En el 0:04 del video

Transición

Decodificación glitch con división RGB y apagado CRT

Una palabra condensada en peso black se resuelve letra a letra desde glifos aleatorios que cambian en cada fotograma a 30 fps durante 0,34 s, dibujada tres veces (copias magenta y cian desplazadas 12 px en modo screen bajo el blanco) con tres franjas horizontales aleatorias desplazadas hasta 60 px. Después la escena colapsa en una línea blanca brillante de 3 px con expo out en 0,08 s.

Cuándo usarla Un momento tecnológico o de código, y una salida brusca hacia la siguiente escena.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Decodificación glitch con división RGB y apagado CRT</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.6" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="1.6" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const WORD = "READY";                       // the word that decodes
const GLY = "}#!/$1<>%&@";                  // scramble glyphs
const hash = (a, b) => { const s = Math.sin(a * 91.7 + b * 47.3) * 43758.5; return s - Math.floor(s); };
function word(s, dx, col) { x.font = "900 420px 'Mona Sans'"; x.fontStretch = 'condensed'; x.textAlign = 'center'; x.fillStyle = col; x.fillText(s, 945 + dx, 691); }
function draw(t) {
  x.fillStyle = '#7C6CF2'; x.fillRect(0, 0, 1920, 1080);
  const k = Math.min(1, t / 0.34), f = Math.floor(t * 30);
  let s = ''; for (let i = 0; i < WORD.length; i++) s += k > (i + 1) / (WORD.length + 1) ? WORD[i] : GLY[Math.floor(hash(i, f) * GLY.length)];
  const g = t < 0.36 ? 1 - k * 0.7 : 0;
  if (g > 0) { x.globalCompositeOperation = 'screen'; word(s, -12 * g, '#ff2a6a'); word(s, 12 * g, '#2affe0'); x.globalCompositeOperation = 'source-over'; }
  word(s, 0, '#FAF9FF');
  if (g > 0) for (let n = 0; n < 3; n++) { const y = 389 + hash(n, f) * 300, h = 10 + hash(f, n) * 30; x.drawImage(c, 400, y, 1100, h, 400 + (hash(n + 3, f) - .5) * 120 * g, y, 1100, h); }
  if (t > 1.2) {                                     // CRT switch-off
    const e = Math.min(1, (t - 1.2) / 0.08), ex = 1 - Math.pow(2, -10 * e), h = 1080 + (3 - 1080) * ex;
    x.fillStyle = '#000'; x.fillRect(0, 0, 1920, 1080);
    x.shadowColor = '#fff'; x.shadowBlur = 30; x.fillStyle = e > 0.9 ? '#FAF9FF' : '#7C6CF2';
    x.fillRect(290 * ex, 540 - h / 2, 1920 - 580 * ex, h); x.shadowBlur = 0;
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 1.6 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(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 «Muro tipográfico cinético de bandas» — En el 0:09 del video

Tipografía

Muro tipográfico cinético de bandas

Siete bandas de ancho completo alternan dos colores; cada una repite una palabra en cuatro cortes de una fuente variable (cursiva pesada expandida, cursiva ligera condensada, recta pesada, recta ligera) separados por puntos de acento, y se desplaza a 260 px/s, las filas impares en sentido contrario; el corte cambia en cada tiempo. La banda central es del color de acento con la palabra grande y quieta. Las bandas entran de golpe desde la derecha, empezando por el centro (desfase de 25 ms, expo out, motion blur) y salen de lado con desenfoque.

Cuándo usarla Un desglose tipográfico potente que luce una fuente variable.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Muro tipográfico cinético de bandas</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const WORD = "MOTION FAB";                                   // the repeated word
const ROWS = 7, H = 1080 / ROWS;
const STYLES = [[900, 'expanded', 'italic '], [300, 'condensed', 'italic '], [800, 'expanded', ''], [400, 'condensed', '']];
function row(r, t, x0) {
  const y = r * H, blue = r % 2 === 0;
  if (r === 3) { x.fillStyle = '#FB2D89'; x.fillRect(x0, y, 1920, H); x.font = "800 140px 'Mona Sans'"; x.fontStretch = 'expanded'; x.textAlign = 'center'; x.fillStyle = '#0D0B1E'; x.fillText(WORD, 960 + x0, y + H / 2 + 50); x.textAlign = 'left'; return; }
  x.fillStyle = blue ? '#7C6CF2' : '#FAF9FF'; x.fillRect(x0, y, 1920, H);
  const dir = r % 2 ? -1 : 1; let px = -((t * 260 * dir + r * 333) % 900 + 900) % 900 - 900 + x0, k = r;
  while (px < 1920 + x0) {
    const [w, st, it] = STYLES[(k + Math.floor(t / 0.47)) % 4];
    x.font = `${it}${w} 140px 'Mona Sans'`; x.fontStretch = st; x.fillStyle = blue ? '#FAF9FF' : '#7C6CF2';
    x.fillText(WORD, px, y + H / 2 + 50); px += x.measureText(WORD).width + 28;
    x.fillStyle = '#FB2D89'; x.beginPath(); x.arc(px + 4, y + H / 2, 9, 0, 7); x.fill(); px += 36; k++;
  }
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  for (let r = 0; r < ROWS; r++) {
    const o = Math.abs(r - 3), a = Math.min(1, Math.max(0, (t - o * 0.025) / 0.16)), inK = 1 - Math.pow(2, -10 * a);
    const b = Math.min(1, Math.max(0, (t - 2.6 - o * 0.02) / 0.12)), outK = b * b * b;
    x.save(); x.filter = `blur(${(1 - inK) * 18 + outK * 26}px)`; row(r, t, (1 - inK) * 1920 + outK * (r % 2 ? -2100 : 2100)); x.restore();
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(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 «De palabra a partículas: esfera, galaxia, warp» — En el 0:10 del video

Partículas

De palabra a partículas: esfera, galaxia, warp

Unos 3000 puntos muestreados de los píxeles de una palabra se disuelven de izquierda a derecha (un frente que avanza en 0,2 s mientras el resto de la palabra sigue sólido), se dispersan en una nube (cubic out), luego se suavizan en una esfera de Fibonacci giratoria y después en una galaxia espiral inclinada de dos brazos, todo con una perspectiva simple de 1400 px; cada punto se dibuja como una línea corta desde su posición 30 ms antes, así que los movimientos rápidos dejan estela. Termina con un warp: cada punto sale disparado radialmente, acelerando.

Cuándo usarla Para convertir un título en un interludio abstracto y pasar a la siguiente escena con un warp.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>De palabra a partículas: esfera, galaxia, warp</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2.2" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const N = 3000, WORD = "MOTION FAB";                       // particle count, the word
let P = null;
const rnd = (() => { let s = 7; return () => (s = (s * 16807) % 2147483647) / 2147483647; })();
function build() {
  const o = document.createElement('canvas'); o.width = 1920; o.height = 1080; const g = o.getContext('2d');
  g.font = "900 170px 'Mona Sans'"; g.textAlign = 'center'; g.fillStyle = '#fff'; g.fillText(WORD, 960, 600);
  const d = g.getImageData(0, 0, 1920, 1080).data, pts = [];
  for (let y = 430; y < 640; y += 2) for (let X = 0; X < 1920; X += 2) if (d[(y * 1920 + X) * 4 + 3] > 128) pts.push([X - 960, y - 540]);
  P = []; for (let i = 0; i < N; i++) {
    const p = pts[Math.floor(rnd() * pts.length)], ph = Math.acos(1 - 2 * (i + .5) / N), th = Math.PI * (1 + Math.sqrt(5)) * i;
    const arm = i % 2, rad = 30 + rnd() * 430, an = rad * .0085 + arm * Math.PI + (rnd() - .5) * .7;
    P.push({ t: p, s: (p[0] + 500) / 1000, sph: [Math.sin(ph) * Math.cos(th) * 300, Math.cos(ph) * 300, Math.sin(ph) * Math.sin(th) * 300],
      cl: [(rnd() - .5) * 760, (rnd() - .5) * 640, (rnd() - .5) * 500], gal: [Math.cos(an) * rad, (rnd() - .5) * 40, Math.sin(an) * rad], col: arm === 0 && rad > 180 ? '#FB2D89' : '#FAF9FF' });
  }
}
const cl = (v) => Math.max(0, Math.min(1, v)), io = (k) => (k < .5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2);
const ry = (v, a) => [v[0] * Math.cos(a) + v[2] * Math.sin(a), v[1], -v[0] * Math.sin(a) + v[2] * Math.cos(a)];
const rx = (v, a) => [v[0], v[1] * Math.cos(a) - v[2] * Math.sin(a), v[1] * Math.sin(a) + v[2] * Math.cos(a)];
const lerp3 = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
function pos(p, t) {
  const ds = .2 + p.s * .2; if (t < ds) return null;                 // the word dissolves left to right
  let v = lerp3([p.t[0], p.t[1], 0], p.cl, 1 - Math.pow(1 - cl((t - ds) / .3), 3));
  v = lerp3(v, ry(p.sph, (t - .4) * 1.3), io(cl((t - .4) / .2)));     // -> sphere
  v = lerp3(v, rx(ry(p.gal, -(t - 1.2) * 1.6), -1.2), io(cl((t - 1.2) / .2))); // -> galaxy
  return v;
}
function draw(t) {
  if (!P) build();
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  if (t < .45) { x.save(); x.beginPath(); x.rect(460 + 1000 * cl((t - .2) / .2), 0, 1920, 1080); x.clip(); x.font = "900 170px 'Mona Sans'"; x.textAlign = 'center'; x.fillStyle = '#FAF9FF'; x.fillText(WORD, 960, 600); x.restore(); }
  const warp = cl((t - 1.8) / .2);
  for (const p of P) {
    const v = pos(p, t); if (!v) continue; const v0 = pos(p, t - .03) || v;
    const f = 1400 / (1400 + v[2]), f0 = 1400 / (1400 + v0[2]);
    let a = [960 + v[0] * f, 540 + v[1] * f], b = [960 + v0[0] * f0, 540 + v0[1] * f0];
    if (warp > 0) { const s = 1 + warp * warp * 3; b = [960 + (a[0] - 960) * (1 + warp * .2), 540 + (a[1] - 540) * (1 + warp * .2)]; a = [960 + (a[0] - 960) * s * 1.4, 540 + (a[1] - 540) * s * 1.4]; }
    x.strokeStyle = t > 1.2 ? p.col : '#FAF9FF'; x.lineWidth = 2.2 * f; x.globalAlpha = .85;
    x.beginPath(); x.moveTo(b[0], b[1]); x.lineTo(a[0] + .5, a[1] + .5); x.stroke();
  }
  x.globalAlpha = 1;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
document.fonts.load("900 170px 'Mona Sans'").then(() => draw(tl.time()));
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 «Cortinilla de panel de color hacia una diapositiva editorial» — En el 0:19 del video

Transición

Cortinilla de panel de color hacia una diapositiva editorial

Un panel del color de fondo de la siguiente diapositiva cubre el encuadre desde la izquierda en 83 ms (sine out); debajo entra la nueva diapositiva y sus dos líneas de titular se deslizan desde 90 px a la izquierda con opacidad de 0,35 a 1 en 0,3 s (cubic out), la segunda línea 30 ms después. La cabecera, las reglas, los contadores y el objeto 3D ya están en su sitio.

Cuándo usarla Cortes rápidos y limpios entre diapositivas de un portafolio o presentación de producto.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cortinilla de panel de color hacia una diapositiva editorial</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#a, #b, #w { position: absolute; inset: 0; }
#a { background: #0D0B1E; } #b { background: #FE9117; }
h1 { position: absolute; left: 78px; font: 900 205px/0.95 'Mona Sans'; color: #FAF9FF; }
#a h1 { top: 240px; } #a b { color: #FE9117; }
#b h1 { color: #0D0B1E; } .l1 { top: 220px; font-size: 300px !important; } .l2 { top: 500px; font-size: 145px !important; }
.p { position: absolute; inset: 0; background: #FE9117; transform-origin: 0 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080"><div id="a" class="clip" data-start="0" data-duration="0.583"><h1>EDIT<br><b>IN WORDS.</b></h1></div><div id="b" class="clip" data-start="0.583" data-duration="1.417"><h1 class="l1">IDEAS</h1><h1 class="l2">IN MOTION.</h1></div><div id="w" class="clip" data-start="0.5" data-duration="0.083"><div class="p"></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo('.p', { scaleX: 0 }, { scaleX: 1, duration: 0.083, ease: 'sine.out' }, 0.5);   // the panel
tl.fromTo('.l1', { x: -90, opacity: 0.35 }, { x: 0, opacity: 1, duration: 0.3, ease: 'power3.out' }, 0.583);
tl.fromTo('.l2', { x: -90, opacity: 0.35 }, { x: 0, opacity: 1, duration: 0.3, ease: 'power3.out' }, 0.613);
tl.to({}, { duration: 0.1 }, 1.9);
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 «Rebote con squash and stretch sobre una regla» — En el 0:01 del video

Personaje

Rebote con squash and stretch sobre una regla

Una pelota cae sobre una línea de suelo graduada y rebota con el ritmo (impactos separados 0,48 s, arcos con un máximo de 310 px de altura) a lo largo de una trayectoria punteada; en los 60 ms posteriores a cada impacto se aplasta a 1,9 x 0,45 con la parte inferior fijada al suelo, en vuelo se estira según su velocidad (hasta +32 %), y cada impacto deja un anillo elíptico expansivo en el suelo.

Cuándo usarla Una apertura que demuestra los principios de animación en dos segundos.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rebote con squash and stretch sobre una regla</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2.2" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const IMP = [0.5, 0.98, 1.46], R = 45;          // impact times, ball radius
function state(t) {
  if (t < IMP[0]) { const u = Math.max(0, (t - 0.05) / 0.45); return [608 + 92 * u, -80 + (655 - R + 80) * u * u, 92, 1500 * u]; }
  for (let k = 0; k < 2; k++) if (t < IMP[k + 1]) { const u = (t - IMP[k]) / 0.48; return [[700, 965][k] + 265 * u, 655 - R - 1240 * u * (1 - u), 550, -2600 * (1 - 2 * u)]; }
  const u = Math.min(1, (t - IMP[2]) / 0.5); return [1220 + 200 * u, 655 - R - 1240 * u * (1 - u) * 0.5, 400, -1300 * (1 - 2 * u)];
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  x.strokeStyle = '#FAF9FF'; x.lineWidth = 3; x.beginPath(); x.moveTo(360, 700); x.lineTo(1560, 700); x.stroke();
  x.lineWidth = 1.5; for (let X = 360; X <= 1560; X += 40) { x.beginPath(); x.moveTo(X, 707); x.lineTo(X, X % 200 === 160 ? 721 : 714); x.stroke(); }
  x.save(); x.setLineDash([3, 7]); x.globalAlpha = .5; x.beginPath(); for (let tt = .05; tt < 1.9; tt += .01) { const s = state(tt); tt === .05 ? x.moveTo(s[0], s[1] + R) : x.lineTo(s[0], s[1] + R); } x.stroke(); x.restore();
  IMP.forEach((ti) => { if (t < ti) return; const k = Math.min(1, (t - ti) / .3), e = 1 - Math.pow(1 - k, 3), X = state(ti)[0];
    x.save(); x.globalAlpha = (1 - k) * .8; x.beginPath(); x.ellipse(X, 700, 40 + 40 * e, 10 + 10 * e, 0, 0, 7); x.stroke(); x.restore(); });
  const [bx, by, vx, vy] = state(t); let sx = 1, sy = 1, rot = 0, y = by;
  for (const ti of IMP) { const d = Math.abs(t - ti); if (d < .06) { const k = 1 - d / .06; sx = 1 + .9 * k; sy = 1 - .55 * k; } }
  if (sx === 1) { const st = Math.min(.32, Math.hypot(vx, vy) / 6000); rot = Math.atan2(vy, vx); sx = 1 + st; sy = 1 - st * .55; } else y = 655 - R * sy;
  x.save(); x.translate(bx, y); x.rotate(rot); x.fillStyle = '#FB2D89'; x.beginPath(); x.ellipse(0, 0, R * sx, R * sy, 0, 0, 7); x.fill(); x.restore();
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
draw(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>

Más prompts

Vista previa del prompt “Showreel de app sin cortes de 15 segundos en motion graphics puro”

Showreel de app sin cortes de 15 segundos en motion graphics puro

<direction> Haz un showreel horizontal de motion graphics de 15 segundos para mi app, 1920x1080 a 60 fps. Todo son gráficos dibujados, sin metraje. Lo único que aporto es el logotipo de mi app (un icono de app de cuadrado redondeado). La idea es un movimiento continuo en el que cada sección pasa su último objeto a la siguiente. Un punto se convierte en el logo, el logo en el nombre, las letras en puntos, los puntos en bolas de carrera, una bola inunda el encuadre, una forma se rompe en teselas, las teselas se convierten en una nube de puntos 3D, y después llegan palabras cinéticas y una tarjeta final. Cada sección muestra una habilidad de motion. Usa colores planos, formas vectoriales nítidas y un HUD de visor de cámara sobre todo, con cortes fijados a una pista de 128 BPM. Evita metraje, degradados y texturas, locución y cualquier sección que empiece de la nada en lugar de crecer a partir de la anterior. </direction> <structure> 1. 0–1,9 s, casi negro: un punto rosa está dentro de un anillo gris fino, y el anillo se abre con expo.out. Un segundo anillo se despliega hasta un círculo grande y tenue (0,45 s, expo.out). A los 0,5 s mi logo crece desde el punto, con sus capas apareciendo una tras otra con back.out. Se asienta más grande a los 0,92 s mientras gira suavemente. Aparece a su alrededor un fino anillo rosa de texto mono circulando ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·", sustitúyelo por el tuyo) que gira despacio. A los 1,7 s la marca se encoge con un poco de desenfoque hasta volver a ser un pequeño punto claro. 2. 1,9–3,5 s: en el drop a 1,93 s dos discos estallan desde el punto, primero el claro y el rosa 30 ms detrás (expo.out, 0,3 s), de modo que un anillo claro fino cabalga sobre el borde rosa. El nombre de mi app en la grotesca ancha sube letra por letra desde la línea base: cada letra está recortada a su propia caja, con 30 ms de desfase y 0,26 s expo.out. El nombre siempre ocupa el mismo ancho de 1640 px. Una fina línea oscura se dibuja desde el centro por encima, con "01" escribiéndose a la izquierda y mi dirección web a la derecha. Desde 2,55 s una onda de ancho recorre las letras: cada una se comprime de 150 % a cerca de 55 % de ancho y vuelve en 0,6 s, 0,1 s después de la anterior. La palabra se reajusta a 1640 px en cada fotograma, así que las letras estrechas crecen en altura. A los 2,84 s un eslogan claro en serif cursiva ("ideas in motion") sube palabra por palabra debajo. A los 3,3 s las letras colapsan en puntos oscuros y el eslogan cae. 3. 3,5–5,6 s: un barrido diagonal claro llega desde abajo a la derecha (0,16 s). Seis puntos oscuros se lanzan en curva al inicio de seis filas (power2.inOut, escalonados) y toman los colores de las filas. Un título en serif cursiva se escribe desde la izquierda ("Chat instead of a timeline."), con una nota mono a la derecha ("NO KEYFRAMES · LIVE PREVIEW") y etiquetas de pista "IDEA" y "MP4" en los dos extremos. - Cada fila tiene un número rosa, un nombre mono ("animated type", "shapes", "transitions", "3D effects", "sound", "live preview"), un diminuto icono de curva que se dibuja solo y una línea de pista que se dibuja de izquierda a derecha. - A los 4,215 s seis bolas (oscura, violeta, rosa, repitiendo) corren 1040 px en exactamente 0,94 s, cada una con su propia curva: linear, power2.inOut, expo.out, back.out(1.7), elastic.out(1, 0.3) y bounce.out. - Marcas sobre cada pista señalan dónde estaba la bola en cada 1/16 del recorrido. Tres anillos fantasma que se desvanecen siguen a cada bola, las bolas se estiran según su velocidad, un punto recorre cada icono de curva en sincronía, y cada bola recibe un halo de contorno al llegar. - A los 5,3 s las filas se desvanecen, las bolas vuelan al centro y se fusionan, y la violeta se hincha hasta llenar el encuadre. 4. 5,6–7,5 s, violeta: un círculo claro brota de un punto (elastic.out, 0,45 s). Doce puntos satélite salen disparados a una órbita (expo.out, con 12 ms de separación). - Detrás hay finas líneas guía en cruz, un círculo de órbita punteado con marcas y las etiquetas "270°" y "90°". - Lecturas mono a los lados: "SHAPES NO KEYFRAMES" a la izquierda, y peticiones de edición entre comillas a la derecha ("“BIGGER” “SLOWER”", "“ANOTHER COLOUR”"). - Anillos de onda rosa laten alrededor del círculo. - La forma entonces se transforma: círculo → triángulo → estrella → cuadrado. Cada transformación dura 0,26–0,3 s con back.out(2,2) y un giro de 120°, y contornos eco rosas siguen a la forma solo mientras gira. - Los satélites se transforman un instante después, uno tras otro, y desaparecen a los 7,22 s. Se asienta como un cuadrado vertical de 360 px. 5. 7,5–9,75 s, casi negro: el cuadrado se divide en nueve teselas de 120 px. Un laberinto truchet crece anillo a anillo hasta llenar el encuadre (back.out, unos 30 ms por anillo); cada tesela tiene dos arcos de cuarto de círculo en esquinas opuestas, dibujados como líneas claras de 20 px. Olas rosas lo cruzan: primero dos bandas de izquierda a derecha, luego un anillo que se cierra hacia el centro. Las teselas dentro de una ola giran 90 o 180 grados, se reducen al 80 % y se vuelven rosas, así que las líneas se rompen en trazos y vuelven cuando la banda ha pasado. Una pequeña etiqueta mono se escribe abajo ("SHAPES · TRANSITIONS · NO KEYFRAMES"). Desde 9,45 s las teselas colapsan del centro hacia fuera. 6. 9,5–11,25 s: una cuadrícula de 24 x 24 puntos aparece donde estaban las teselas, vista desde arriba. Se inclina hasta un plano en perspectiva y se pliega en una esfera, un jarrón, una mancha aplastada y un toro mientras gira sobre su eje vertical. Entre formas se mueve con power2.inOut, con líneas tenues entre vecinos, aproximadamente un punto de cada nueve rosa, y los puntos más tenues con la profundidad. Una etiqueta mono debajo ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). Hace zoom a través de la cámara y se desvanece a los 11 s. 7. 11,25–13,0 s, palabras cinéticas: una palabra cada 0,23 s, cada una sobre su propio fondo plano y llenando el ancho con un ancho distinto de la misma fuente. Sustituye las seis palabras por tu propia frase. - "IDEA": oscuro sobre rosa, entra deslizándose desde la izquierda, escala de 1,3 a 1, el desenfoque se aclara en 0,14 s. - "IN.": claro sobre casi negro con un punto final rosa, entra desde la derecha con desenfoque, y una pequeña nota mono arriba a la izquierda ("EDIT IN WORDS ↗"). - "VIDEO": ultracondensado violeta sobre la página clara, letras que suben desde abajo con 25 ms de separación. - "OUT.": claro sobre violeta, entra desde la izquierda con desenfoque, con una nota arriba a la derecha ("↘ MP4 EXPORT"). - "NO": oscuro sobre amarillo. Las letras caen en ángulo con back.out, luego copias con contorno de la palabra llenan filas arriba y abajo y se desplazan en direcciones alternas mientras la fila principal deriva a la izquierda. - "KEYFRAMES.": claro sobre casi negro, deslizándose a la izquierda a velocidad constante con una fina línea diagonal, y luego saliendo rápido con desenfoque. 8. 13,0–15 s, tarjeta final: el rosa inunda desde la derecha y un anillo claro se despliega desde el centro (0,42 s). Mi logo entra girando en el centro (back.out) con una pequeña explosión de confeti de puntos, anillos y triángulos en oscuro, claro y violeta, y luego se mueve a la izquierda del conjunto. El nombre de mi app cae letra por letra a su lado, de borroso a nítido, 0,22 s cada una. Un eslogan en serif cursiva sube debajo ("your AI motion designer"). Se dibuja una línea, y debajo se escribe una línea mono: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT", un pequeño punto de grabación y luego mi dirección web a la derecha. Mantén el último segundo. </structure> <composition> Paleta, todo plano: - casi negro profundo #0d0b1e - rosa intenso #fb2d89 (el acento principal) - página clara #faf9ff - violeta suave #7c6cf2 - amarillo cálido #ffd23f, solo para un corte cinético Fuentes: - Una grotesca ancha variable con eje de ancho (Anybody, peso 900, ancho 50–150 %) para el nombre y las palabras cinéticas. - Una serif cursiva editorial condensada (Instrument Serif Italic) para títulos y eslóganes. - Una mono (JetBrains Mono) para las etiquetas de interfaz, 14 px, espaciado de letras 0,16em. Un HUD de visor de cámara cubre todo el vídeo: - Esquinas en corchete finas de 2 px, a 44 px de cada esquina. - Arriba a la izquierda: el nombre de mi app en mayúsculas mono en negrita con un eslogan más tenue a continuación ("APP NAME IDEAS IN MOTION"). - Arriba a la derecha: la etiqueta de la sección actual ("01 — APP NAME", "02 — NO KEYFRAMES", "03 — SHAPES", "04 — EDIT IN WORDS", "05 — 3D EFFECTS", "06 — KINETIC TYPE", "07 — TRY IT FREE"). - Abajo a la izquierda: un código de tiempo en marcha con fotogramas ("00:00:03:09") y un eslogan corto ("LIVE PREVIEW"). - Abajo a la derecha: otro eslogan ("NO KEYFRAMES"), cuatro cuadraditos que se encienden uno por tiempo, y "MP4". - A lo largo del borde inferior: una línea de progreso de 2 px que crece con el tiempo. El HUD cambia entre tinta oscura y clara en cada corte para leerse sobre cualquier fondo. Todas las palabras en pantalla son ejemplos que debes sustituir por las tuyas. </composition> <techniques> - Cada sección termina en un objeto del que crece la siguiente: punto a logo, logo de vuelta a punto, discos a nombre, letras a puntos, puntos a bolas, bola a inundación violeta, cuadrado a teselas, teselas a cuadrícula de puntos, nube de puntos que hace zoom a través de la cámara hacia las palabras cinéticas. - Cada nueva etiqueta de sección del HUD se escribe en 0,3 s, con glifos aleatorios corriendo por delante del cursor. Las otras líneas mono también se escriben. - Tipografía de ancho variable: anima el eje de ancho de cada letra y reajusta toda la palabra a un ancho fijo en cada fotograma. - Las revelaciones de letras se recortan a la caja de cada letra. - Usa un ligero desenfoque de movimiento solo en movimientos rápidos, y un tenue borde de color violeta en el gran barrido de iris. - Los contornos eco, anillos fantasma y halos son trazos finos rosas o del color correspondiente que se desvanecen rápido. </techniques> <music> Synth-pop electrónico enérgico a 128 BPM, tiempo uno a 0,06 s, exactamente 15 s de duración: - Acordes de pad suaves tipo campana en el primer compás. - Tras el drop a 1,93 s, un bombo four-on-the-floor con palmas en 2 y 4, hi-hats a contratiempo, un bajo sintético contundente y breves acordes secos bajo las secciones. - Un break desde aproximadamente los 10 s que crece hacia la sección cinética. - Un acorde final de pad resonante en la tarjeta final. Las secciones cambian en las barras de compás, el nombre cae en el drop a 1,93 s, y los cortes de las palabras cinéticas caen en corcheas. </music> <sound> Sin voz. Golpes sobre la música: - un riser durante el primer compás - un boom en el drop a 1,93 s - un riser desde unos 10 s hasta un golpe punch a 11,25 s - un bombo y un breve whoosh en cada corte de palabra cinética - un crash de platillo a 12,71 s - un boom con el acorde de pad resonante cuando aterriza la tarjeta final - un pequeño blip a 14,1 s La música lleva la pista y los golpes se oyen claros encima. </sound> <references> Un showreel de motion designer mezclado con un sizzle de lanzamiento de producto tecnológico. Combina una superposición de visor de cámara, tipografía cinética audaz de estilo suizo, demostraciones de curvas de easing, patrones generativos de teselas truchet y una nube de puntos 3D giratoria. </references>

Vista previa del prompt “Promo de landing page con transiciones a través de objetos”

Promo de landing page con transiciones a través de objetos

<direction> Haz una promo de motion graphics horizontal de 15 segundos a 1920x1080 para [your brand], construida como una landing page que cobra vida. Móntala sobre un tema electrónico a 128 BPM sin locución. La idea es que nunca haya un corte simple: cada escena pasa a la siguiente a través de un objeto (un punto, una elección del carrete, un teléfono, una baldosa ganadora). Mantén un aspecto limpio y luminoso de UI de producto: fondos claros, píldoras redondeadas, tarjetas, un teléfono, un panel y un muro de vídeos, con todas las etiquetas en texto oscuro sobre placas blancas y mis colores de marca usados por roles. Evita cortes bruscos, fundidos cruzados, voz, texto blanco sobre fondos claros o rayados y etiquetas que se solapen con anillos o formas vecinas. </direction> <structure> Cinco tiempos de duración aproximadamente igual, unos 3 segundos cada uno, y cada traspaso cae en el pulso. 1. Apertura: un único punto aparece en el centro y crece hasta convertirse en una píldora horizontal con una fila de círculos: pequeños retratos e iconos como "Aa", formas simples y un cubo. Cada icono se ve por completo, sin quedar tapado por el círculo vecino. La cámara se aleja y revela un titular de dos líneas, ambas centradas. La primera línea es algo como "No … keyframes." (sustitúyela por la tuya). La última palabra del titular sigue rodando por alternativas como un carrete de tragaperras. 2. Un zoom se sumerge hacia un carrete giratorio de retratos de creadores y tarjetas. El carrete se ralentiza y se detiene en una elección, que se resalta. 3. La elección se convierte en un teléfono y un abanico de tarjetas de funciones se despliega a su alrededor. Una tarjeta dice "Edit in words" con el número grande "03" y una pequeña etiqueta "Live preview" justo al lado del número (sustitúyelo por tus funciones). Los textos de las tarjetas van sobre placas blancas. 4. Un barrido rápido lleva a un panel de baldosas de vídeo con títulos sobre placas blancas. Las puntúa y elige un vídeo ganador, que se resalta. 5. La baldosa ganadora se abre en un muro inclinado de vídeos con títulos sobre placas blancas. Después el muro se pliega hasta formar mi logo para la tarjeta final, con "[your website]" junto al logo sobre una placa blanca. </structure> <composition> Encuadre centrado y simétrico para el titular y la tarjeta final con el logo. Los elementos de UI se disponen como en una landing page real: una fila de píldoras, tarjetas con números grandes y etiquetas pequeñas, una maqueta de teléfono, una cuadrícula de panel y un muro inclinado en perspectiva. Usa mis colores de marca por roles: tonos de fondo (claros, con algunos rellenos rayados), un acento para resaltados, selecciones y anillos, y un color de texto oscuro. Cada título en tarjetas, baldosas y el muro es texto oscuro sobre una placa blanca redondeada para que se lea sobre cualquier fondo. Usa una sola familia sans-serif limpia: titular en negrita, etiquetas de peso normal y etiquetas de botón en negrita. Deja márgenes generosos para que ningún texto toque anillos ni bordes. </composition> <techniques> Cada transición es un objeto que se convierte en la siguiente escena, nunca un corte. El punto crece hasta la píldora con un ease-out suave y los círculos aparecen con un ligero escalonado. El alejamiento de cámara es una reducción de escala suave que revela el titular. La palabra rodante es un giro vertical tipo tragaperras que recorre palabras en bucle. El zoom atraviesa la píldora hasta el carrete. El carrete gira rápido y desacelera con un ease-out largo para detenerse con precisión en la elección. La elección escala y se transforma en el teléfono, y las tarjetas se abren en abanico a su alrededor con un giro y deslizamiento escalonados. El barrido es un movimiento horizontal rápido con desenfoque de movimiento y un ease in-out marcado. La selección del panel es un anillo de resaltado y un aumento de escala en el ganador. El ganador se expande en el muro 3D inclinado, que se pliega y colapsa en el logo con un asentamiento final. Todos los movimientos y aterrizajes clave caen en la cuadrícula del pulso. </techniques> <music> Crea un tema electrónico original y animado a 128 BPM, de exactamente 15 segundos, con un arco claro: inicio ligero, crecimiento a través de las escenas del carrete y el teléfono, un drop en torno al barrido y un final limpio sobre el logo. Colócalo sobre la cuadrícula de pulso del montaje, con golpes compuestos encima para cada traspaso, un riser hacia el drop y un golpe final cuando el muro se pliega en el logo. Masteriza a unos -14 LUFS con true peak por debajo de -1 dBTP. </music> <sound> Sin locución. Añade whooshes en el zoom y el barrido, un tic y parada corto cuando el carrete se detiene, y un impacto suave en el logo. Mantén todos por debajo de la música y en el pulso. </sound> <references> Una landing page SaaS animada como promo de producto: tarjetas de UI, maqueta de teléfono, panel de analítica y muro de vídeos, al estilo de los vídeos modernos de lanzamiento de apps con transiciones fluidas de objeto a objeto. </references>

Vista previa del prompt “Vídeo cinético de lanzamiento de app con maqueta de interfaz animada”

Vídeo cinético de lanzamiento de app con maqueta de interfaz animada

<direction> Haz un vídeo cinético de lanzamiento de producto horizontal de 1920x1080 y 42 segundos para [your app]. Muestra cómo un fundador crea un vídeo de lanzamiento para su startup solo chateando en la app. Reconstruye la interfaz de mi app a partir de mis capturas como una maqueta animada limpia hecha de formas y texto, muy parecida a la real. En este vídeo es una app oscura azul marino-violeta con una Live preview a la izquierda, pestañas Chat / Files / Panels a la derecha y botones de acento rosas. Nunca muestres las capturas como imágenes fijas: cada elemento debe moverse. Mantén una interfaz continua sin cortes bruscos. La cámara se acerca, hace paneos y se aleja entre paneles mientras un cursor se mueve y hace clic. Mantente en una cuadrícula de ritmo de 120 BPM (un pulso = 0,5 s) y haz que pase algo en cada pulso. Palabras cinéticas enormes golpean sobre la interfaz entre pasos. La startup del fundador es una app inventada, por ejemplo "Pulse — standups your team actually reads" (sustitúyela por la tuya). Evita cortes bruscos, capturas estáticas, cualquier cosa recortada en los bordes del encuadre y texto o barras de resaltado que invadan columnas vecinas. </direction> <structure> 1) Gancho, 0–3 s: "YOUR LAUNCH VIDEO." y luego "IN ONE CHAT." en tipografía enorme, cortadas palabra por palabra al ritmo. "CHAT." se transforma en la pestaña Chat y la cámara se aleja hasta mostrar toda la ventana de la app. 2) Referencias, 3–8 s: un enlace "pulse-demo.app" se pega en el chat. Un pitch deck en PDF y un logo entran volando como tarjetas adjuntas y encajan en su sitio. Palabra grande "DROP". 3) Prompt, 8–13 s: el fundador escribe "Make a 30-second launch video for Pulse, kinetic style, our colours" letra por letra, y luego el cursor pulsa enviar. Palabra grande "ASK". 4) Plan, 13–18 s: el agente responde con un plan de cinco pasos como lista de verificación. Los pasos aparecen y se marcan uno a uno, y la cámara retrocede un poco con cada línea nueva para que el encuadre nunca se sienta vacío. Palabra grande "PLAN". 5) Boceto y Go, aprox. 18–21 s: un boceto gris de estructura del promo llena rápidamente la Live preview, con la etiqueta "Live preview" y la barra de reproducción a la vista. El fundador hace clic en Go, y un fondo rosa crece desde el botón pulsado e inunda la pantalla tras un enorme "GO!". 6) Live, aprox. 21–31 s: líneas de estado aparecen en el chat ("Picking fonts", "Animating the title", "Writing a soundtrack") mientras el boceto se convierte en el promo terminado. La cámara se acerca hasta que el promo llena el encuadre. Hacia los 27 s el titular del promo "Standups your team actually reads." se desliza y una barra de resaltado lima se dibuja bajo "actually reads.". Una columna de estadísticas queda a su lado con "92%" y "updates read". Palabra grande "LIVE". 7) Exportación, aprox. 31–37 s: la cámara se aleja hasta la app. El botón Export y las pestañas se ven por completo mientras la exportación se ejecuta y termina. Palabra grande "DONE". 8) Tarjeta final, aprox. 37–42 s: el logo de [your app] y "Live on [launch site] today" (sustitúyelo por el tuyo), aterrizando en el último pulso y manteniéndose hasta el final. </structure> <composition> Paleta: interfaz oscura azul marino-violeta, botones de acento rosa magenta e inundación rosa, un degradado rosa a naranja en el logo y lima como color de resaltado dentro del promo de demostración. Las palabras cinéticas son enormes, en negrita, mayúsculas, sans-serif con las fuentes de la marca y ocupan la mayor parte del ancho del encuadre. Reduce un poco una palabra larga antes que dejar que se recorte. Mantén márgenes de seguridad en todas partes. En los planos generales toda la ventana de la app está en el encuadre. En el chat el campo de entrada se ve por completo. En la escena de exportación el botón Export y las pestañas están en el encuadre. En el promo el titular y la barra lima se quedan en su propia columna con espacio de sobra. La barra coincide exactamente con el ancho de sus palabras y nunca se superpone a la columna "92%". </composition> <techniques> Una cámara virtual continua con empujes, paneos y retrocesos suaves con ease-in-out entre paneles y sin cortes. El cursor se desliza hacia sus objetivos y hace clic con una pequeña reducción de escala al pulsar. Las palabras del gancho entran una por pulso. Las tarjetas adjuntas entran volando y encajan con un ligero rebasamiento. El texto del chat se escribe letra por letra. Los elementos de la lista aparecen y se marcan en pulsos sucesivos. El boceto gris se llena rápido y luego se transforma elemento por elemento en el promo terminado. La inundación rosa bajo "GO!" crece radialmente desde el botón pulsado. Las palabras grandes golpean con un rápido impacto de reducción de escala sobre la interfaz y se van rápido en el siguiente pulso. Cada pulso tiene un evento visible: una palabra, un clic, una tarjeta, una marca, una línea de estado o un movimiento de cámara. </techniques> <music> Una pista electrónica enérgica a 120 BPM, con cada corte, golpe de palabra y evento de la interfaz sincronizado con el ritmo. Crece durante los pasos de preparación, se eleva hacia "GO!", impulsa la construcción en vivo y se resuelve con un golpe final en la tarjeta final. </music> <sound> Clics de teclado que caen exactamente en cada letra escrita. Clics de ratón en cada toque del cursor. Whooshes en los movimientos de cámara y en la entrada de las tarjetas adjuntas, y chasquidos cuando las tarjetas aterrizan. Tics suaves para los pasos de la lista y las líneas de estado. Un impacto contundente bajo cada palabra grande, un riser hacia "GO!" y un golpe final en la tarjeta final. Mantén la música por debajo de los efectos para que los clics y los impactos se oigan con claridad. </sound> <references> Tráilers cinéticos de lanzamiento de apps que reconstruyen una interfaz SaaS como una maqueta animada nítida con un único movimiento de cámara continuo, al estilo de los promos del día de lanzamiento de un producto. </references>

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