tu motion designer con IA

ES

Abrir la app beta

Simple Motion

Promo con billete, maleta y formatos con revelación de logo

Un promo plano de motion graphics de 15 segundos: billete inclinado, barridos circulares rosas, tarjetas de pasos desde una maleta, tres paneles de formato y revelación del logo.

Publicado 10 de noviembre de 2026Usado 2 veces

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

Denunciar este prompt

Concepto

Crea un promo de motion graphics horizontal de 15 segundos (1920x1080, 60 fps) para [your brand], un producto que convierte una descripción en un vídeo terminado (adapta las palabras a las tuyas). La idea: una petición se convierte en un billete, el billete se abre a una promesa, una maleta entrega los pasos uno a uno, tres formatos pasan volando y todo aterriza en mi logo. No hay voz en off: las palabras están en pantalla y la música lo lleva todo. Todo está dibujado: gráficos 2D planos con una tarjeta inclinada en 3D, sin metraje. El aspecto es claro, limpio y enérgico: un acento rosa sobre una página clara, con un campo oscuro de tinta profunda. Evita el metraje, la voz, el desenfoque dentro de máscaras de texto y cualquier deriva o distorsión del logo. El logo se forma entero, exactamente como está dibujado, y se mantiene perfectamente quieto desde aproximadamente 13,3 s hasta el final.

Estructura

0–1,9 s, la petición. A la izquierda, un pequeño texto superior rosa con espaciado entre letras «YOUR AI MOTION DESIGNER» está sobre un titular de tres líneas de unos 180 px, «Describe» / «the» / «video.» (sustitúyelo por el tuyo; la última línea es rosa). Las líneas suben desde sus líneas base una tras otra. La primera ya se mueve en el fotograma 0 y las demás la siguen con 0,13 s de diferencia, lineal, 0,17 s cada una. A la derecha hay una tarjeta-billete blanca inclinada en perspectiva, con su lado izquierdo más cercano. Tiene una cabecera rosa «FROM IDEA TO VIDEO» y mi logo pequeño con «[your brand]» a su lado. Dos campos, «FROM IDEA · Your idea» y «TO MP4 · Video», están unidos por una línea discontinua con un triángulo de play rosa. También lleva pequeñas etiquetas «EDIT WORDS», «STEP 03», «EFFECTS 3D» y «PREVIEW LIVE», un código de barras y «03» en la matriz. La tarjeta entra volando desde la derecha a 0,23 s (power3.out, 0,35 s), se pasa unos 125 px hacia la izquierda y vuelve a asentarse (sine.inOut, 0,37 s). Mientras tanto, el código «MP4» cicla letras aleatorias 15 veces por segundo y se fija letra a letra a 0,67, 0,8 y 0,93 s. A 1,17 s un sello rosa de contorno «MP4 EXPORT», inclinado -14°, golpea desde 2,4x en 8 fotogramas con un pequeño rebote. A 1,67 s el triángulo de play se encoge en un punto rosa que crece hasta convertirse en un barrido circular centrado en él, con dos anillos rosa pálido justo fuera de su borde. El radio pasa por 15, 36, 66, 120, 210, 330, 540, 900 y 1500 px, un paso cada dos fotogramas. Las líneas del titular salen hacia arriba en orden a medida que crece el círculo.
1,9–4,0 s, la promesa, sobre un campo totalmente rosa (radial, más claro en el centro). Un triángulo de play blanco, algo más largo que ancho para que apunte hacia donde va, nace dentro del círculo. Vuela un bucle alrededor de las palabras, girado a lo largo de su trayectoria: arriba, a la izquierda por la parte superior, abajo por la izquierda, a lo largo de la parte inferior, arriba por el lado derecho y fuera por la esquina superior derecha. Tras de sí dibuja una órbita punteada blanca cuyos puntos más antiguos se desvanecen en una línea fina y tenue. Dos grandes círculos tenues están en el fondo. «No keyframes.» (unos 220 px, blanco) entra girando letra a letra, con 0,03 s de diferencia, en un arco desde abajo a la derecha, empezando a 38° y enderezándose. A 2,8 s sale volando hacia arriba letra a letra. A la vez, «The agent animates it.» (unos 157 px) sube desde su línea base letra a letra, con 16 ms de diferencia. A 3,03 s una píldora blanca redondeada entra desde la izquierda tras «animates it.» en 0,18 s, y esas palabras se vuelven rosas dentro de ella. A 3,77 s las palabras se desenfocan y se desvanecen. Una maleta de tinta profunda con correa rosa y una etiqueta «MP4» cae desde arriba y aterriza a 4,02 s con un pequeño aplastamiento.
4,0–8,95 s, los pasos. Un círculo claro se abre desde la maleta con dos anillos rosa pálido, y dos elipses de ondas rosas se extienden desde su base. Arriba sube «Edit in words.» (tenue, unos 56 px). Luego sube «Your idea is ready to move.» (unos 93 px) palabra a palabra, con «move.» en rosa y un subrayado rosa dibujado a mano trazándose debajo. Sobre la maleta llegan seis tarjetas de pasos blancas, una cada 0,58 s. Cada tarjeta mide 900x165 px y es redondeada, con un icono en una pieza a la izquierda y un chip de estado a la derecha. Cada una sube desde detrás de la maleta (desde 100 px más abajo y al 72 % de tamaño, 0,3 s, power2.inOut) con un chip lavanda «Animating» y un spinner. Luego se ilumina en dos tiempos: primero un borde rosa y un halo exterior suave, 0,07 s después la pieza del icono se vuelve rosa y el chip se convierte en un «✓ Ready» rosa. Cuando llega la siguiente tarjeta, la anterior sube 40 px y se desvanece en 0,15 s. Las tarjetas dicen: «Kinetic type», «Shapes», «3D effects», «Sound», «Your own footage», «Fonts for every script» (sustitúyelas por las tuyas). Bajo la maleta, seis puntos y un contador avanzan con cada tarjeta, de «1 / 6 in motion» a «6 / 6 in motion». A 7,9 s la última tarjeta cambia en su sitio a «Ready to move.» con una pieza de check y un chip rosa «6 / 6». El contador se sustituye por «✓ Live preview. MP4 export.» A 8,4 s todo salvo la maleta se eleva y se desenfoca. A 8,7 s la cámara se sumerge en la maleta hasta que su cuerpo de tinta profunda llena el encuadre.
8,95–11,4 s, los formatos. Un grupo de tres bandas inclinadas barre de derecha a izquierda en 0,2 s y abre un panel a pantalla completa tras su borde de salida. Las bandas se inclinan unos 18°: una franja rosa oscuro, una banda rosa ancha y una franja rosa claro. El mismo barrido vuelve a 9,76 s y 10,5 s. Los tres paneles son bloques de degradado suave con un horizonte:

de lavanda a violeta, con una luz cálida en la mitad inferior;
un cielo violeta sobre un «mar» de tinta profunda;
un cielo naranja sobre tinta profunda, con una banda de neblina turquesa.
Cada panel avanza lentamente de 1,07 a 1 y tiene un degradado de tinta profunda abajo. Su nombre sube letra a letra abajo a la izquierda, unos 226 px, en blanco: «Vertical», «Horizontal», «Square». Arriba a la izquierda hay un pequeño HUD con espaciado entre letras: «01 / 03» en rosa claro, luego «9:16», luego «MP4 EXPORT» escribiéndose, con un subrayado rosa creciendo debajo. Cambia a «02 / 03 · 16:9 · LIVE PREVIEW» y luego a «03 / 03 · 1:1 · NO KEYFRAMES».

11,4–12,5 s, la cuadrícula. El último panel se encoge hasta la tarjeta derecha mientras los otros dos entran deslizándose desde la izquierda. Juntos forman tres tarjetas verticales (580x780 px, 30 px de separación) sobre un campo de tinta profunda. La cuadrícula avanza suavemente a 1,05 y se asienta en medio segundo. «Vertical, horizontal or square.» sube sobre ella en blanco. Una vez asentada la cuadrícula, pequeños nombres se desvanecen sobre las tarjetas («Vertical», «Horizontal», «Square»), bien dentro del encuadre.
12,2–15 s, el logo. Un punto rosa crece desde la tarjeta central, con anillos de halo pálidos, mientras la cuadrícula se encoge a 0,9 sobre una página blanca. Su radio se anima cada dos fotogramas de 12 a 1150 px. Luego el punto se encoge rápido y se ralentiza (260, 125, 90, 75 px) al viajar a la izquierda del centro. Allí se abre directamente en la forma de fondo de mi logo, sin superponerse nunca al logo, y las partes interiores del logo crecen como una sola pieza, exactamente como está dibujado el logo. A 13,03 s «[your brand]» sale deslizándose desde detrás del logo hacia la derecha (power3.out, 0,32 s), mientras un fino anillo rosa se extiende alrededor del logo y se desvanece. El nombre mide unos 150 px, tinta profunda, con sus letras centradas en la línea media del logo y todo el conjunto centrado en el encuadre. Luego «Describe the video. The agent animates it.» sube palabra a palabra debajo, con la segunda frase en rosa. Aparecen tres chips lavanda: «• Vertical», «• Horizontal», «• Square». «[your website]» sube en gris tenue. El logo permanece perfectamente quieto desde aproximadamente 13,3 s, y todo se mantiene hasta el final.

Composición

La base es una página clara #FAF9FF con una tenue cuadrícula de puntos de 40 px #E9E4F2 y suaves resplandores radiales rosas. La tinta profunda #1C0B5D es para el texto oscuro, los objetos oscuros y el campo oscuro. Hay un solo acento, el rosa #FB2D89, para resaltados, el campo de acento y el progreso. El tono tenue #6B6385 es para líneas secundarias y el lavanda #F0EDFF para chips suaves. El naranja #FE9117, el violeta #7C6CF2 y el turquesa #2DD4B0 aparecen solo en los tres paneles de formato (y en mi logo si los usa). Los titulares usan una sans geométrica gruesa, Manrope ExtraBold, con un interletraje ajustado de aproximadamente -0,05em. Las etiquetas pequeñas, el texto del HUD y el sitio web usan una sans limpia, Inter SemiBold. Composición por plano:

Plano 1: titular a la izquierda, billete inclinado a la derecha.
Plano 2: palabras centradas sobre el campo rosa.
Plano 3: tarjetas de pasos apiladas sobre la maleta, puntos y contador debajo, titular arriba.
Plano 4: nombres de formato abajo a la izquierda, HUD arriba a la izquierda.
Plano 6: cierre con el logo centrado, con el eslogan, los chips y el sitio web apilados debajo.

Técnicas

Las revelaciones son limpias. El texto sube desde su propia línea base dentro de un recorte que se mueve con él, nunca un desenfoque dentro de una máscara. Las salidas aceleran y desaparecen en aproximadamente 0,1 s.

Los barridos circulares crecen en radios escalonados animados cada dos fotogramas, con anillos rosa pálido justo fuera del borde.
El código del billete cicla letras y se fija letra a letra.
El sello golpea desde 2,4x con un pequeño rebote.
Las letras entran en un arco giratorio, y la píldora de resaltado barre tras palabras que cambian de color dentro de ella.
Las tarjetas de pasos se iluminan en dos tiempos: primero borde y halo, luego la pieza y el chip.
La cámara se sumerge en la maleta a escala 1,5, 3,1, 6,2 y 7 en un cuarto de segundo.
Los barridos inclinados de tres bandas llevan las transiciones entre los paneles de formato, y cada panel avanza lentamente.
El panel único se colapsa en una cuadrícula de tres tarjetas.
Un punto viaja y se abre en el logo, que se construye como una sola pieza y nunca se mueve ni se deforma una vez formado.

Música

Usa un tema original de house electrónico animado y optimista a 120 BPM, de exactamente 15 s. El groove completo suena desde el primer fotograma, con un bombo en cada pulso aproximadamente en x,05 y x,55 s. Se mantiene estable bajo las tarjetas y los formatos. La batería desaparece a 12,55 s cuando el punto se traga la cuadrícula, dejando un pad cálido y un arpegio ascendente que se desvanecen hacia 15 s. Los cortes y los golpes clave caen sobre la cuadrícula de pulsos.

Sonido

El diseño de sonido va sobre el tema, sin batería adicional:

un whoosh cuando el billete entra volando;
tics suaves cuando el código se fija;
un impacto suave en el sello;
whooshes en cada barrido circular y en la píldora de resaltado;
un golpe sordo cuando aterriza la maleta;
un blip que sube de tono cuando cada tarjeta se vuelve rosa;
una campanilla cuando aterriza la última tarjeta;
un riser hacia la inmersión y un impacto cuando se abre el primer panel;
whooshes en cada barrido de bandas y cuando las tarjetas se juntan;
un riser hacia el drop;
una campana cuando se forma el logo;
clics suaves en los chips.
Mezcla a unos -14 LUFS con un pico real por debajo de -1 dBTP.

Referencias

Un anuncio moderno de lanzamiento de app en estilo vectorial plano, construido sobre tipografía cinética y una metáfora de viaje: una tarjeta de embarque, una maleta y paneles de horizonte. Termina con un cierre limpio con el logo centrado.

Qué preparar

Tu logo, idealmente vectorial o PNG transparente; aparece pequeño en la tarjeta del billete y se forma a partir de un punto rosa en el cierre final.

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 «Subida desde la línea base con clip a juego» — En el 0:00 del video

Tipografía

Subida desde la línea base con clip a juego

Un antetítulo y un titular de tres líneas suben desde sus propias líneas base: cada línea se mueve hacia arriba su propia altura mientras el inset inferior de su clip-path se reduce al mismo ritmo, de modo que la línea base es un borde nítido y fijo y nada se desenfoca dentro de la máscara. La primera línea ya se mueve en el fotograma 0 (sine.in desde 88 %), las otras dos la siguen con unos 0,13 s de diferencia con easing lineal durante 0,17 s, así que el conjunto se lee como un solo gesto; la última línea toma el color de acento. Salen de la misma forma hacia arriba, en orden de lectura, cada una desaparece en 0,1 s.

Cuándo usarla Abrir un promo con un titular grande apilado que debe leerse en el primer segundo.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Subida desde la línea base con clip a juego</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=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--line) 0 1.6px, transparent 2.2px); background-size: 40px 40px; }
#kicker { position: absolute; left: 110px; top: 650px; font: 800 30px/1 "Manrope"; letter-spacing: 0.16em; color: var(--accent); }
#head { position: absolute; left: 100px; top: 700px; font: 800 200px/192px "Manrope"; letter-spacing: -0.055em; }
.ln { white-space: nowrap; }
.ln span { display: inline-block; padding: 0.12em 0.06em 0.16em; margin: -0.12em -0.06em -0.16em; }
.acc { color: var(--accent); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div id="kicker" class="ln"><span></span></div>
    <div id="head"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const KICKER = "YOUR ONLY TASK";          // example text
const LINES = ["Write", "the", "brief."]; // example text; the last line takes the accent
document.querySelector("#kicker span").textContent = KICKER;
const head = document.getElementById("head");
LINES.forEach((w, i) => {
  const ln = document.createElement("div"); ln.className = "ln";
  const sp = document.createElement("span"); sp.textContent = w; if (i === LINES.length - 1) sp.className = "acc";
  ln.appendChild(sp); head.appendChild(ln);
});
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
const spans = [...head.querySelectorAll(".ln span")];
rise(document.querySelector("#kicker span"), 0.03, 0.12, "none");
rise(spans[0], 0, 0.24, "sine.in", 88); // already moving on frame 0
rise(spans[1], 0.18, 0.18, "none");     // about 0.13 s apart, linear
rise(spans[2], 0.32, 0.17, "none");
sink(document.querySelector("#kicker span"), 3.1, 0.1);
spans.forEach((el, i) => sink(el, 3.15 + i * 0.08, 0.1)); // out upwards in reading order
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 «Barrido circular desde un icono con anillos de halo» — En el 0:01 del video

Transición

Barrido circular desde un icono con anillos de halo

La siguiente escena se revela mediante un clip-path circle centrado en un pequeño icono de la actual, y el propio icono se encoge cuando empieza el círculo. El radio tiene claves cada dos fotogramas a 60 fps (15, 36, 66, 120, 210, 330, 540, 900, 1500 px): un crecimiento acelerado que cubre el encuadre en unos 0,3 s. Dos círculos pálidos rellenos a 1,07 r + 6 y 1,17 r + 12, en tonos del acento, quedan en la escena saliente justo fuera del borde, así que el barrido parece una onda; el icono de la nueva escena empieza un 35 % más grande y se asienta.

Cuándo usarla Saltar de un detalle (un icono, un botón) a una escena a todo color que continúa su idea.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Barrido circular desde un icono con anillos de halo</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=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#a, #b { position: absolute; inset: 0; }
.card { position: absolute; left: 140px; top: 820px; width: 800px; height: 160px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px rgba(28, 11, 93, 0.14); display: flex; align-items: center; gap: 28px; padding-left: 360px; box-sizing: border-box; font: 800 52px/1 "Manrope"; }
.icon { position: absolute; left: 374px; top: 54px; width: 52px; height: 52px; fill: var(--accent); }
.ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
#r1 { background: color-mix(in srgb, var(--accent) 48%, white); }
#r2 { background: color-mix(in srgb, var(--accent) 22%, white); }
#b { background: radial-gradient(ellipse 80% 70% at 50% 45%, #fd4c9c 0%, #e2187a 100%); clip-path: circle(0px at 540px 900px); }
.icon2 { position: absolute; left: 510px; top: 870px; width: 60px; height: 60px; fill: #fff; }
#title { position: absolute; left: 0; width: 1080px; top: 1060px; text-align: center; font: 800 120px/1 "Manrope"; letter-spacing: -0.05em; color: #fff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="a" class="clip" data-start="0" data-duration="1.4">
    <div class="card"><svg class="icon" viewBox="0 0 24 24"><path d="M8.9 4.6 19.1 11.2a1 1 0 0 1 0 1.6L8.9 19.4A1 1 0 0 1 7.4 18.6V5.4a1 1 0 0 1 1.5-.8Z"/></svg><span id="label"></span></div>
    <div id="r2" class="ring"></div><div id="r1" class="ring"></div>
  </div>
  <div id="b" class="clip" data-start="0.95" data-duration="2.05">
    <svg class="icon2" viewBox="0 0 24 24"><path d="M8.9 4.6 19.1 11.2a1 1 0 0 1 0 1.6L8.9 19.4A1 1 0 0 1 7.4 18.6V5.4a1 1 0 0 1 1.5-.8Z"/></svg>
    <div id="title"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
document.getElementById("label").textContent = "Ticket";  // example text
document.getElementById("title").textContent = "Next.";   // example text
const C = { x: 540, y: 900 }; // the icon's centre: the circle grows from here
const iris = { r: 0 }, b = document.getElementById("b"), r1 = document.getElementById("r1"), r2 = document.getElementById("r2");
const ring = (el, r) => Object.assign(el.style, { width: 2 * r + "px", height: 2 * r + "px", transform: `translate(${C.x - r}px, ${C.y - r}px)` });
const draw = () => {
  b.style.clipPath = `circle(${iris.r}px at ${C.x}px ${C.y}px)`;
  ring(r1, iris.r ? iris.r * 1.07 + 6 : 0);  // two pale rings ride just outside the edge
  ring(r2, iris.r ? iris.r * 1.17 + 12 : 0);
};
draw();
const R = [15, 36, 66, 120, 210, 330, 540, 900, 1500]; // radius every 2 frames at 60 fps
tl.fromTo(iris, { r: 0 }, { keyframes: R.map((r) => ({ r, duration: 2 / 60, ease: "none" })), onUpdate: draw }, 1.0);
tl.fromTo(".icon", { scale: 1, opacity: 1 }, { scale: 0.3, opacity: 0, duration: 4 / 60, ease: "power2.in", transformOrigin: "50% 50%" }, 0.97);
tl.fromTo(".icon2", { scale: 1.35 }, { scale: 1, duration: 0.3, ease: "power2.out", transformOrigin: "50% 50%" }, 1.1);
tl.fromTo("#title", { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, ease: "power3.out" }, 1.45);
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 «Código de destino que se mezcla y se fija letra a letra» — En el 0:00 del video

Tipografía

Código de destino que se mezcla y se fija letra a letra

Una tarjeta de billete entra volando por la derecha con power3.out, se pasa unos 110 px hacia la izquierda y vuelve a su sitio con sine.inOut, mientras su código de tres letras recorre letras aleatorias quince veces por segundo (cada cuatro fotogramas a 60 fps). Las letras se fijan una a una, con 0,13 s de diferencia, en el código real. El azar es un hash con semilla del número de paso, así que cada render muestra las mismas letras; nada depende de un reloj.

Cuándo usarla Revelar un destino, un código, un precio o un nombre con efecto de panel de letras abatibles.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Código de destino que se mezcla y se fija letra a letra</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=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; }
#card { position: absolute; left: 120px; top: 760px; width: 840px; height: 400px; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 34px 70px rgba(28, 11, 93, 0.16); }
.bar { position: absolute; left: 0; top: 0; right: 0; height: 80px; background: var(--accent); }
.from, .to { position: absolute; top: 130px; font: 700 18px/1 "Manrope"; letter-spacing: 0.14em; color: var(--muted); }
.from { left: 50px; } .to { right: 50px; }
.a, .b { position: absolute; top: 160px; font: 800 96px/1 "Manrope"; letter-spacing: 0.06em; }
.a { left: 46px; } .b { right: 46px; text-align: right; }
.line { position: absolute; left: 330px; right: 330px; top: 210px; border-top: 3px dashed var(--line); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="card"><div class="bar"></div><div class="from">FROM</div><div class="to">TO</div><div class="a" id="codeA"></div><div class="b" id="code"></div><div class="line"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
document.getElementById("codeA").textContent = "NOW";  // example codes
const TARGET = "MP4";
const LOCKS = [0.67, 0.8, 0.93]; // each letter locks on its own frame
const RATE = 15;                  // random letters change 15 times a second
const LET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const hash = (n) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); }; // seeded
const el = document.getElementById("code"), p = { t: 0 };
const draw = () => {
  const step = Math.floor(p.t * RATE);
  el.textContent = [...TARGET].map((c, i) => (p.t >= LOCKS[i] ? c : LET[Math.floor(hash(step * 3 + i) * LET.length)])).join("");
};
tl.fromTo(p, { t: 0.2 }, { t: 3, duration: 2.8, ease: "none", onUpdate: draw }, 0.2);
// the card: in from the right, overshoot left, settle
tl.fromTo("#card", { x: 1000 }, { keyframes: [{ x: -110, duration: 0.35, ease: "power3.out" }, { x: 0, duration: 0.37, ease: "sine.inOut" }] }, 0.23);
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 «Píldora de resalte que barre detrás de las últimas palabras» — En el 0:03 del video

Tipografía

Píldora de resalte que barre detrás de las últimas palabras

Una línea blanca sobre un campo de acento sube letra a letra desde su línea base (16 ms de diferencia, 0,22 s cada una, power3.out). Luego una píldora blanca de esquinas redondeadas barre desde la izquierda detrás de las últimas palabras en 0,18 s (power2.inOut), y un gemelo de las mismas letras en color de acento solo se ve dentro de la píldora a través del mismo clip, de modo que las palabras pasan de blanco sobre color a color sobre blanco justo donde ha llegado la píldora. La píldora se dimensiona a partir de las letras medidas tras cargar la fuente.

Cuándo usarla Subrayar el remate de una frase sin una segunda línea de texto.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Píldora de resalte que barre detrás de las últimas palabras</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=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 42%, #fd4c9c 0%, #e2187a 100%); }
.t { position: absolute; top: 880px; font: 800 112px/1 "Manrope"; letter-spacing: -0.045em; color: #fff; white-space: nowrap; }
.t .ch { display: inline-block; white-space: pre; }
#hl { position: absolute; inset: 0; clip-path: inset(0px 1080px 0px 0px); }
#pill { position: absolute; top: 868px; height: 132px; border-radius: 22px; background: #fff; }
#twin { color: var(--accent); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="line" class="t"></div>
    <div id="hl"><div id="pill"></div><div id="twin" class="t"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const TEXT = "We do the rest.", HIGHLIGHT = "the rest."; // example text
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
document.fonts.ready.then(() => {
  const split = (el) => { [...TEXT].forEach((c) => { const s = document.createElement("span"); s.className = "ch"; s.textContent = c; el.appendChild(s); }); return [...el.children]; };
  const line = document.getElementById("line"), twin = document.getElementById("twin");
  const A = split(line), B = split(twin);
  line.style.left = twin.style.left = (1080 - line.offsetWidth) / 2 + "px";
  const i0 = TEXT.indexOf(HIGHLIGHT), a = A[i0], z = A[i0 + HIGHLIGHT.length - 1];
  const x = line.offsetLeft + a.offsetLeft - 16, w = z.offsetLeft + z.offsetWidth - a.offsetLeft + 34;
  Object.assign(document.getElementById("pill").style, { left: x + "px", width: w + "px" });
  A.forEach((ch, i) => rise([ch, B[i]], 0.2 + i * 0.016, 0.22, "power3.out"));
  const hl = document.getElementById("hl"), p = { v: 0 };
  tl.fromTo(p, { v: 0 }, { v: 1, duration: 0.18, ease: "power2.inOut", onUpdate: () => { hl.style.clipPath = `inset(0px ${1080 - x - w * p.v}px 0px ${x}px)`; } }, 0.75);
  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 «Tarjetas de pasos que emergen de detrás de un objeto y se iluminan» — En el 0:06 del video

Datos

Tarjetas de pasos que emergen de detrás de un objeto y se iluminan

Cada paso es una tarjeta blanca que sube desde detrás de un objeto oscuro situado debajo (y +100 px y scale 0,72 hasta el reposo en 0,3 s, power2.inOut), espera y luego se ilumina en dos tiempos: primero el borde y el halo exterior, y 0,07 s después la ficha del icono y el chip de estado. Cuando empieza la siguiente tarjeta, la anterior sube 40 px y se desvanece en 0,15 s con easing lineal, de modo que la pila mantiene una tarjeta en foco. Una fila de puntos y un contador 'n / total' avanzan con cada iluminación; el periodo es de 0,58 s por tarjeta.

Cuándo usarla Mostrar una lista de comprobación, un flujo de onboarding o un pipeline que se completa paso a paso.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tarjetas de pasos que emergen de detrás de un objeto y se iluminan</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=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; }
.pc { position: absolute; left: 90px; top: 700px; width: 900px; height: 165px; }
.halo { position: absolute; inset: -19px; border-radius: 46px; border: 2px solid color-mix(in srgb, var(--accent) 42%, white); opacity: 0; }
.body { position: absolute; inset: 0; border-radius: 28px; background: #fff; border: 2px solid var(--line); box-shadow: 0 26px 56px rgba(28, 11, 93, 0.13); }
.on { position: absolute; inset: -2px; border-radius: 28px; border: 3px solid var(--accent); opacity: 0; }
.tile, .tile-on { position: absolute; left: 30px; top: 27px; width: 108px; height: 108px; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.tile { background: color-mix(in srgb, var(--accent) 11%, white); } .tile-on { background: var(--accent); opacity: 0; }
.tile svg, .tile-on svg { width: 50px; height: 50px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile svg { stroke: var(--accent); } .tile-on svg { stroke: #fff; }
.label { position: absolute; left: 166px; top: 0; height: 100%; display: flex; align-items: center; font: 800 52px/1 "Manrope"; letter-spacing: -0.03em; }
.chip { position: absolute; right: 40px; top: 54px; height: 57px; padding: 0 24px; border-radius: 30px; display: flex; align-items: center; font: 700 28px/1 "Manrope"; }
.wait { background: var(--line); color: var(--muted); } .done { background: var(--accent); color: #fff; opacity: 0; }
#case { position: absolute; left: 425px; top: 930px; width: 230px; height: 290px; border-radius: 42px; background: var(--ink); overflow: hidden; }
.strap { position: absolute; left: 0; right: 0; top: 110px; height: 34px; background: var(--accent); }
#prog { position: absolute; left: 0; width: 1080px; top: 1300px; display: flex; justify-content: center; align-items: center; gap: 24px; font: 700 30px/1 "Manrope"; }
#dots { display: flex; gap: 13px; } .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3.5">
    <div id="cards"></div>
    <div id="case"><div class="strap"></div></div>
    <div id="prog"><div id="dots"></div><span id="count"></span></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const ICONS = {"type": "M4 7V4h16v3M9 20h6M12 4v16", "cube": "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16ZM3.3 7 12 12l8.7-5M12 22V12", "note": "M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0M21 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0"};
const STEPS = [["Type", "type"], ["3D", "cube"], ["Sound", "note"]]; // example labels and their icons
const START = [0.2, 0.78, 1.36], ON = [0.62, 1.2, 1.78];               // 0.58 s per card
const svg = (d) => `<svg viewBox="0 0 24 24"><path d="${d}"/></svg>`;
const cards = document.getElementById("cards");
STEPS.forEach(([label, icon], i) => {
  const c = document.createElement("div"); c.className = "pc";
  c.innerHTML = `<div class="halo"></div><div class="body"><div class="on"></div><div class="tile">${svg(ICONS[icon])}</div><div class="tile-on">${svg(ICONS[icon])}</div><div class="label"></div><div class="chip wait">Working</div><div class="chip done">Done</div></div>`;
  c.querySelector(".label").textContent = label;
  cards.appendChild(c);
  tl.fromTo(c, { y: 100, scale: 0.72, opacity: 0 }, { y: 0, scale: 1, opacity: 1, duration: 0.3, ease: "power2.inOut" }, START[i]);
  tl.fromTo(c.querySelectorAll(".on, .halo"), { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "power1.out" }, ON[i] - 0.07); // border first
  tl.fromTo(c.querySelectorAll(".tile-on, .done"), { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "power1.out" }, ON[i]); // then icon and chip
  tl.fromTo(c.querySelector(".wait"), { opacity: 1 }, { opacity: 0, duration: 0.06, ease: "power1.out" }, ON[i]);
  if (i < STEPS.length - 1) tl.fromTo(c, { y: 0, opacity: 1 }, { y: -40, opacity: 0, duration: 0.15, ease: "none", immediateRender: false }, START[i + 1] - 0.02);
});
const dots = document.getElementById("dots"), count = document.getElementById("count"), p = { t: 0 };
STEPS.forEach(() => { const d = document.createElement("div"); d.className = "dot"; dots.appendChild(d); });
const draw = () => {
  const n = ON.filter((a) => p.t >= a).length;
  count.textContent = `${n} / ${STEPS.length}`;
  [...dots.children].forEach((d, k) => { d.style.background = k < n ? "var(--accent)" : "var(--line)"; d.style.transform = `scale(${k === n - 1 ? 1.6 : 1})`; });
};
draw();
tl.fromTo(p, { t: 0 }, { t: 3.5, duration: 3.5, ease: "none", onUpdate: 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 «Barrido de bandas inclinadas entre paneles a pantalla completa» — En el 0:09 del video

Transición

Barrido de bandas inclinadas entre paneles a pantalla completa

Un grupo de tres bandas inclinadas (skewX -18,4 deg: una franja oscura, una banda ancha de acento y una franja clara) cruza el encuadre de derecha a izquierda en unos 0,2 s con sine.inOut. El siguiente panel a pantalla completa se revela con un polygon clip-path cuyo borde izquierdo sigue el borde trasero de las bandas, así que el panel antiguo sigue visible delante de las bandas y el nuevo se abre detrás. Después cada panel levanta su nombre grande letra a letra desde la línea base (35 ms de diferencia).

Cuándo usarla Recorrer una lista de lugares, productos o formatos al ritmo del beat.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Barrido de bandas inclinadas entre paneles a pantalla completa</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=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
.pan { position: absolute; inset: 0; overflow: hidden; }
#p0 { background: linear-gradient(180deg, #e9e4ff 0%, #7c6cf2 55%, #1c0b5d 100%); }
#p1 { background: linear-gradient(180deg, #fe9117 0%, #fb2d89 50%, #1c0b5d 100%); }
#p2 { background: linear-gradient(180deg, #2dd4b0 0%, #1c0b5d 70%); }
.name { position: absolute; left: 70px; top: 1500px; font: 800 190px/1.1 "Manrope"; letter-spacing: -0.05em; color: #fff; white-space: nowrap; }
.name span { display: inline-block; white-space: pre; }
#band { position: absolute; left: 0; top: -100px; width: 700px; height: 2120px; display: flex; transform: translateX(2200px) skewX(-18.4deg); }
#band .d { width: 60px; background: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
#band .m { width: 580px; background: var(--accent); }
#band .l { width: 60px; background: color-mix(in srgb, var(--accent) 55%, white); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="p0" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="p1" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="p2" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="band" class="clip" data-start="0" data-duration="3"><div class="d"></div><div class="m"></div><div class="l"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NAMES = ["Vertical", "Wide", "Square"]; // example names
const LEAN = 320; // horizontal shift of the slant over half the frame height (tan 18.4 deg x 960)
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
const band = document.getElementById("band");
const clipAt = (x) => `polygon(${x + LEAN}px 0px, 2600px 0px, 2600px 1920px, ${x - LEAN}px 1920px)`;
["#p0", "#p1", "#p2"].forEach((sel, k) => {
  const pan = document.querySelector(sel), name = pan.querySelector(".name");
  [...NAMES[k]].forEach((c) => { const s = document.createElement("span"); s.textContent = c; name.appendChild(s); });
  const t0 = k * 1.0;
  if (k > 0) {
    pan.style.clipPath = clipAt(2400);
    const w = { x: 2400 };
    tl.fromTo(w, { x: 2400 }, { x: -480, duration: 0.2, ease: "sine.inOut", immediateRender: false, onUpdate: () => {
      band.style.transform = `translateX(${w.x - 700}px) skewX(-18.4deg)`; // the trailing edge is at w.x
      pan.style.clipPath = clipAt(w.x);
    } }, t0 - 0.2);
  }
  [...name.children].forEach((ch, i) => rise(ch, t0 + 0.05 + i * 0.035, 0.26, "power3.out"));
});
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 «Punto que se traga el encuadre y se convierte en la marca» — En el 0:12 del video

Transición

Punto que se traga el encuadre y se convierte en la marca

Un punto de acento crece desde la tarjeta central (radio con claves cada dos fotogramas: de 12 a 1150 px en unos 0,3 s, con dos anillos de halo pálidos) mientras el diseño de debajo se reduce a 0,9 sobre una página blanca. Luego se encoge rápido y desacelera (a 260, 125, 90 y 75 px en 0,4 s) mientras viaja al lugar de la marca, donde el círculo se convierte en el cuadrado redondeado de la marca (rx de 50 a 24, de acento a tinta oscura, 0,12 s) y las formas interiores entran escalando. El nombre se desliza desde detrás de la marca (power3.out, 0,32 s) a través de un clip en el centro de la marca, y un anillo fino se expande y se desvanece alrededor de ella.

Cuándo usarla Cerrar un promo: colapsar todo en un punto que se convierte en el logotipo.

Ver código

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Punto que se traga el encuadre y se convierte en la marca</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=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#end { position: absolute; inset: 0; background: #fff; }
#grid { position: absolute; inset: 0; background: var(--ink); display: flex; flex-direction: column; gap: 30px; padding: 260px 120px; box-sizing: border-box; }
#grid .c { flex: 1; border-radius: 24px; background: linear-gradient(180deg, #7c6cf2, #1c0b5d); }
#dotl { position: absolute; inset: 0; pointer-events: none; }
.dd { position: absolute; left: 0; top: 0; border-radius: 50%; }
#dot { background: var(--accent); } #h1 { background: color-mix(in srgb, var(--accent) 55%, white); } #h2 { background: color-mix(in srgb, var(--accent) 25%, white); }
#mark { position: absolute; top: 845px; width: 150px; height: 150px; opacity: 0; }
#wclip { position: absolute; inset: 0; }
#word { position: absolute; top: 820px; font: 800 150px/1.2 "Manrope"; letter-spacing: -0.045em; white-space: nowrap; }
#ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 58%, white); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="end" class="clip" data-start="0" data-duration="4">
    <div id="ring"></div>
    <div id="wclip"><div id="word"></div></div>
    <svg id="mark" viewBox="0 0 100 100"><rect class="bg" width="100" height="100" rx="24" fill="#1c0b5d"/><g class="in"><circle cx="50" cy="50" r="27" fill="#fe9117"/><path d="M42 36 66 50 42 64Z" fill="#fff"/></g></svg>
  </div>
  <div id="grid" class="clip" data-start="0" data-duration="1.2"><div class="c"></div><div class="c mid"></div><div class="c"></div></div>
  <div id="dotl" class="clip" data-start="0" data-duration="2"><div id="h2" class="dd"></div><div id="h1" class="dd"></div><div id="dot" class="dd"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NAME = "Brand"; // example name
document.fonts.ready.then(() => {
  const word = document.getElementById("word"); word.textContent = NAME;
  const W = word.offsetWidth, L0 = 540 - (150 + 40 + W) / 2, MX = L0 + 75, MY = 920; // mark, gap and name centred together
  document.getElementById("mark").style.left = L0 + "px";
  word.style.left = L0 + 190 + "px";
  document.getElementById("wclip").style.clipPath = `inset(0px 0px 0px ${MX}px)`;
  const at = (el, x, y, r) => Object.assign(el.style, { width: 2 * r + "px", height: 2 * r + "px", transform: `translate(${x - r}px, ${y - r}px)` });
  const d = { r: 0, x: 540, y: 960, h: 1 }, dot = document.getElementById("dot"), h1 = document.getElementById("h1"), h2 = document.getElementById("h2");
  const draw = () => { at(dot, d.x, d.y, d.r); at(h1, d.x, d.y, d.r ? d.r * 1.06 + 8 : 0); at(h2, d.x, d.y, d.r ? d.r * 1.14 + 18 : 0); h1.style.opacity = h2.style.opacity = d.h; };
  draw();
  // grow out of the middle card, two frames per key at 60 fps
  tl.fromTo(d, { r: 0 }, { keyframes: [12, 30, 48, 90, 150, 270, 570, 900, 1150].map((r) => ({ r, duration: 2 / 60, ease: "none" })), onUpdate: draw }, 0.4);
  tl.fromTo("#grid", { scale: 1 }, { scale: 0.9, duration: 0.12, ease: "power1.in", transformOrigin: "50% 50%" }, 0.58);
  tl.fromTo(d, { h: 1 }, { h: 0, duration: 0.05, ease: "none", onUpdate: draw, immediateRender: false }, 0.7);
  // shrink fast, then slow, onto the mark
  tl.to(d, { keyframes: [{ r: 260, x: 540 + (MX - 540) * 0.82, y: 960 + (MY - 960) * 0.9, duration: 0.08, ease: "power2.in" }, { r: 125, x: 540 + (MX - 540) * 0.93, y: MY, duration: 0.1, ease: "none" },
    { r: 90, x: 540 + (MX - 540) * 0.97, y: MY, duration: 0.1, ease: "none" }, { r: 75, x: MX, y: MY, duration: 0.11, ease: "power1.out" }], onUpdate: draw }, 0.72);
  tl.fromTo("#dotl", { opacity: 1 }, { opacity: 0, duration: 0.02, ease: "none" }, 1.12);
  // the circle becomes the mark
  tl.fromTo("#mark", { opacity: 0 }, { opacity: 1, duration: 0.01, ease: "none" }, 1.1);
  tl.fromTo("#mark .bg", { attr: { rx: 50 }, fill: "#fb2d89" }, { attr: { rx: 24 }, fill: "#1c0b5d", duration: 0.12, ease: "power2.out" }, 1.11);
  tl.fromTo("#mark .in", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.12, ease: "power2.out", svgOrigin: "50 50" }, 1.13);
  // the name slides out from behind it; a ring spreads and fades
  tl.fromTo("#word", { x: -(115 + W) }, { x: 0, duration: 0.32, ease: "power3.out" }, 1.23);
  const ring = document.getElementById("ring"), g = { r: 110, o: 0 };
  const drawRing = () => { at(ring, MX, MY, g.r); ring.style.opacity = g.o; };
  drawRing();
  tl.fromTo(g, { r: 110, o: 1 }, { keyframes: [{ r: 175, duration: 0.17, ease: "power2.out" }, { r: 260, o: 0.6, duration: 0.25, ease: "sine.out" }, { r: 300, o: 0, duration: 0.2, ease: "power1.in" }], onUpdate: drawRing, immediateRender: false }, 1.17);
  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 “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>

Vista previa del prompt “Promo de app soft-tech: muro de iconos, móvil y estudio 3D”

Promo de app soft-tech: muro de iconos, móvil y estudio 3D

placeholder

Vista previa del prompt “Un punto rosa a través de un collage de grabados”

Un punto rosa a través de un collage de grabados

placeholder

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