Simple MotionCódigo del prompt: NPXReel de producto «Espécimen vivo» con transformación de logo
placeholder
Usado 1 vezPelícula cuadrada en bucle de 20 segundos de tipografía cinética donde palabras pesadas son dintel, carga colgante y soportes, y termina con una frase de marca.
Código del prompt UKEPublicado Usado 1 vez
Usar promptEl prompt se abre en la app: añade tus propios materiales y el agente crea el video.
Denunciar este promptHaz una película cuadrada de tipografía cinética de 20 segundos, 1080x1080 a 60 fps, con música y diseño de sonido. Un mensaje breve de producto construye una estructura con sus propias palabras: una palabra pesada presiona hacia abajo como un dintel, otra cuelga de cables y curva la línea de la que cuelga, dos palabras giran hasta quedar erguidas como soportes, la cámara se sumerge por el contraespacio de una letra y la declaración final se arma sobre una plataforma. Debe repetirse en bucle sin cortes: el último fotograma es exactamente el primero. Todo está dibujado: tipografía plana, líneas y filetes sobre un fondo plano de tinta profunda. Evita metraje, fotos, textura, grano, correcciones de color y degradados. Las cargas pesadas nunca rebotan; solo la línea es elástica. El movimiento sigue el fraseo del mensaje, no un ritmo de baile. Todas las palabras en pantalla son ejemplos que debes reemplazar por tu propio mensaje, elegidas según el papel y la longitud de cada espacio para que la composición se sostenga.
Plano 1, 0–3,3 s, el dintel: una palabra enorme y pesada, de 320 px, cruza el encuadre cerca de la parte superior (ejemplo «CAZA»), con su línea base en y 524. Debajo está la línea, muy ligeramente inclinada (y 712 a la izquierda, y 697 a la derecha). La frase surge de la línea en dos grupos a 0,33 s y 1,03 s, Playfair de 58 px, línea base 17 px sobre la línea (ejemplo «Sin fotogramas clave» / «que cazar.»). Vive en la abertura entre la línea base de la palabra grande, prolongada por todo el encuadre, y la línea. De 0 a 2,9 s la palabra grande desciende 104 px y se inclina de -0,15 a -1,9 grados en torno a su línea base izquierda (power2.inOut), de modo que la abertura se estrecha. A 2,93 s cae sobre la línea con un asentamiento críticamente amortiguado (omega de unos 14 por segundo) y se nivela con el ángulo de la línea. La frase queda cortada por arriba por su línea base y desaparece.
Plano 1 a 2, 3,28–4,03 s: la línea se hunde 5 px bajo el aterrizaje. Luego la palabra grande sale volando recta hacia arriba fuera del encuadre (power2.inOut, 0,7 s, unos 700 px) mientras la línea y todo lo que hay sobre ella se desliza 230 px hacia arriba (power2.inOut, 0,75 s).
Plano 2, 3,5–6,5 s, la carga colgante: una segunda frase surge de la línea a 3,58 s y 4,18 s (ejemplo «Chat en vez» / «de una»). A 4,49 s dos filetes finos (1 px, blanco claro de página al 45 %) caen desde la línea en x 468 y x 627 (power2.inOut, 0,34 s). A 4,79 s una palabra pesada de 138 px (ejemplo «TIMELINE») cae desde detrás de la línea, recortada al área que queda debajo. Cae con un movimiento críticamente amortiguado desde 191 px por encima de su lugar de reposo (omega 8,6 por segundo) y cuelga unos 90 px bajo la línea. A 5,43 s la línea cede: una comba de semionda sinusoidal entre sus extremos, impulsada por un resorte subamortiguado (30 px, omega 11,9 por segundo, razón de amortiguamiento 0,30). Sobrepasa una vez hasta 41 px, rebota un poco y reposa en 30 px. Los filetes se convierten en cables rosas de 2,5 px en 0,12 s y la palabra se hunde con la comba. Cada palabra de la frase cabalga sobre la curva, girada según la pendiente local.
Plano 3, 6,43–9,47 s, el primer soporte: la cámara se aleja al 76 % en torno a un punto muy a la derecha del encuadre (power2.inOut, 0,65 s), de modo que la línea y la palabra colgante se desplazan a la derecha y la frase se hunde en la línea. A 6,96 s una expresión surge arriba a la izquierda, de 49 px en pantalla (ejemplo «Describe el»). A 7,09 s una palabra pesada surge desde debajo del encuadre y se tumba junto al extremo izquierdo libre de la línea (críticamente amortiguada, 0,6 s). Su longitud es aproximadamente la altura del extremo libre de la línea (ejemplo «VIDEO»). A 7,95 s gira 90 grados en sentido antihorario en torno a su extremo lejano (unos 0,8 s) y queda erguida bajo la línea, leyéndose de abajo arriba. Al levantarse alza 61 px el extremo izquierdo de la línea (power4.out, 0,53 s) y la palabra colgante se inclina a +2,7 grados. A 8,83 s una expresión pequeña surge bajo la palabra colgante (ejemplo «Ideas en»). A 9,02 s surge una palabra grande en Playfair (152 px en pantalla, 0,56 s) cuya segunda letra es una O (ejemplo «MOVIMIENTO»). Dentro del contraespacio de la O la siguiente escena ya está dibujada a un 5 % aproximado de su tamaño: la línea, el soporte y la palabra colgante en su siguiente disposición.
Plano 3 a 4, 9,47–10,02 s, a través de la O: la cámara hace zoom en el contraespacio de la O. El logaritmo natural de la escala crece con el cuadrado del tiempo (unas x18 a los 10,0 s) mientras el centro del contraespacio se desliza al centro del encuadre (power2.inOut). La pequeña escena viaja con el zoom, luego lo supera y aterriza exactamente a encuadre completo a 9,93 s mientras el anillo de la O barre más allá de los bordes.
Plano 4, 10–12,5 s, el nivel: una expresión surge arriba a la izquierda a 10,22 s y 10,52 s, de 64 px (ejemplo «Edita con» / «palabras.»). A 10,49 s un segundo soporte erguido (la misma palabra) surge desde abajo en el borde derecho hasta su sitio bajo el extremo derecho bajo de la línea (críticamente amortiguado, 0,89 s). De 11,08 a 11,43 s la línea se nivela hasta quedar perfectamente horizontal y pierde su comba (power1.out), y la palabra colgante se nivela con ella. Es el primer momento perfectamente horizontal de la película. De 11,4 a 11,6 s un filete de suelo de 1 px (#E9E4F2 al 18 %) se dibuja desde el centro en y 965 (power2.in). Luego, quietud.
Plano 5, 12,5–16 s, la plataforma: la expresión del plano 4 se hunde. A 12,53 s la palabra colgante sube para quedar justo bajo la línea (críticamente amortiguada, 0,7 s) y los cables se acortan con ella. A 12,93 s una expresión con serifas (54 px, ejemplo «Tu idea está lista para») surge para esperar unos 58 px sobre la fila, y a 13,83 s se posa sobre ella (críticamente amortiguada, 0,5 s). A 13,33 s la primera palabra pesada de la plataforma surge de la línea (117 px, 0,56 s, ejemplo «MOVERSE.»). A 14,17 s una palabra corta con serifas surge para esperar sobre la línea y a 14,59 s se posa sobre ella (la primera palabra de [your brand]). A 14,87 s la última palabra pesada surge de la línea y aterriza la última (119 px, 0,58 s; la última palabra de [your brand], con un punto final).
Plano 6, 16–18 s: mantén la declaración completa; nada se mueve.
Plano 7, 18–20 s, el bucle: a 18,0 s la cámara se sumerge bajo la plataforma, al pie del asta de una letra de la palabra colgante (una E o una I). El logaritmo de la escala se acelera (unas x40 a los 19 s) mientras el pie del asta es arrastrado hacia abajo fuera del encuadre, hasta que el color claro del asta llena el encuadre. A 19,05 s, bajo esa oclusión total, cambia al fotograma inicial del plano 1, visto desde dentro de un asta de la palabra grande: la palabra grande en su posición inicial, la línea, sin frase. Las marcas de tiempo vuelven a indicar el primer plano. Aléjate con una escala logarítmica que decelera (de unas x22 a x1 a los 20,0 s) para que el último fotograma sea exactamente el primero.
Ritmo: aproximadamente un elemento nuevo cada 0,5–0,7 s dentro de un plano, una presión larga y lenta en el plano 1, una breve quietud tras nivelarse la línea y una pausa de dos segundos antes del bucle.
Campo: tinta profunda #1C0B5D, plano. Toda la tipografía en blanco claro de página #FAF9FF. Un único acento estructural, rosa #FB2D89, usado solo para la línea principal, los cables y la marca de plano.
Palabras pesadas: Pliant 900 con ancho 105 (una grotesca ancha y muy pesada), tracking ajustado. Expresiones: Playfair Display 400. Marcas de tiempo: JetBrains Mono de 13 px en lavanda #F0EDFF al 47 % de opacidad.
Márgenes de 60 px. La línea principal es un trazo rosa de 4 px de x 60 a x 1020.
Marcas de tiempo en cada fotograma, arriba:
arriba a la izquierda: tu dirección web en mayúsculas (ejemplo «YOURSITE.COM»);
arriba a la derecha: el tramo del plano actual, escrito como «06.50 — 10.00»;
debajo: un filete de 1 px (#E9E4F2 al 18 %) de x 60 a x 1020, con una marca de 3 px cada segundo y una de 6 px cada cinco segundos;
sobre ese filete: una barra rosa de 3 px que cubre exactamente el tramo del plano actual.
La barra y los tiempos saltan al siguiente plano en su primer fotograma. Hay siete planos: 0–3, 3–6,5, 6,5–10, 10–12,5, 12,5–16, 16–18 y 18–20 s.
Cada expresión se revela surgiendo de una línea. Está recortada al área sobre la línea (o sobre una línea invisible unos 17 px bajo su línea base) y empieza 1,28 tamaños de fuente más abajo, totalmente oculta. Aterriza en una curva críticamente amortiguada, 1 - (1 + 6p)e^(-6p), normalizada para llegar a 1 en 0,5 s: arranque rápido, aterrizaje largo y suave, sin rebasar.
Las expresiones de una misma frase entran en grupos hablados con 0,6–0,7 s de separación.
Las cargas pesadas se asientan con movimiento verdaderamente críticamente amortiguado y sin rebote. Solo la línea es elástica: un resorte subamortiguado cuando cede.
Las palabras que cabalgan la línea curvada giran según su pendiente local.
Cuando termina un plano, su frase se hunde de nuevo en su línea (power2.in, unos 0,26 s).
La cámara es escala y posición sobre toda la escena:
un alejamiento al 76 % en torno a un punto muy a la derecha del encuadre;
un zoom a través del contraespacio de una letra, donde el logaritmo natural de la escala crece con el cuadrado del tiempo y la siguiente disposición está dibujada de antemano dentro del contraespacio;
una inmersión en el asta de una letra que termina en oclusión total y oculta el corte de vuelta al fotograma inicial.
Una base electrónica cinematográfica minimalista a 120 BPM, exactamente 10 compases, de modo que cada límite de plano caiga en un tiempo (3, 6,5, 10, 12,5, 16 y 18 s). Tiene un bajo de sintetizador profundo y pulsante, pads suaves, un motivo pulsado escaso y percusión ligera que hace tic. El arco:
0–3 s: grave y pesado, con un acento a los 3 s;
desde los 3 s: un impulso;
hacia los 10 s: un crescendo de filtro hasta un tiempo fuerte exactamente a los 10 s, el momento en que aterriza el zoom;
desde los 11,5 s: abierto y casi quieto;
hacia los 15,5 s: un crescendo seguro hasta una declaración plena;
16–18 s: un acorde sostenido;
18–20 s: una oleada que alcanza su pico a los 19 s y vuelve a la textura inicial a los 20 s, de modo que el bucle sea inaudible.
Sin voces.
Efectos de sonido solo sobre la base, sin batería ni bajo propios:
un suave tic de madera en el primer fotograma visible de cada expresión;
un bombo grave con un golpe pesado de madera cuando el dintel aterriza (3,1 s) y un whoosh de aire cuando sale volando;
dos diminutos tics cuando caen los filetes finos;
un whoosh descendente, luego el crujido de una tabla con una breve caída de sub cuando la línea cede;
un suave swoosh bajo el alejamiento de cámara;
whooshes cuando el soporte surge y gira, con un golpe cuando levanta la línea;
un riser hacia un golpe de campana cuando el zoom a través de la O aterriza a los 10 s;
un ligero clic metálico cuando la línea se fija a nivel y un suave siseo cuando se dibuja el filete de suelo;
golpes de madera cuando aterrizan las palabras de la plataforma y suaves toques cuando se asientan las expresiones;
un bombo más profundo con un golpe de madera y una campana tenue bajo la última palabra;
un riser hacia el fundido a blanco de la inmersión, un swoosh invertido en el corte oculto y un whoosh en el alejamiento.
Sin voz en off. Mezcla a unos -14 LUFS con pico real por debajo de -1 dBTP.
Tipografía cinética editorial de estilo suizo donde las palabras tienen peso y actúan como arquitectura (dinteles, cables, columnas, una plataforma). Tipografía con simulación física, con asentamientos críticamente amortiguados y una línea elástica. Bucles tipográficos de zoom infinito que viajan a través de contraespacios y astas de letras.
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.
Cada frase de una oración con serifa se sitúa sobre una regla de acento de 4 px y se recorta al área por encima del borde superior de la regla; empieza 1,28 tamaños de fuente más abajo, totalmente oculta, y sube con una curva críticamente amortiguada normalizada para llegar en 0,5 s (sin rebasar, inicio rápido, aterrizaje largo y suave). La siguiente frase de la misma oración empieza 0,6-0,7 s después, de modo que la oración se lee en grupos hablados.
Cuándo usarla Revelar una oración frase a frase como si creciera desde la línea sobre la que se apoya.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frases que emergen de una línea</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="above-line"><rect x="0" y="0" width="1080" height="558" /></clipPath></defs>
<g clip-path="url(#above-line)">
<text id="phrase-1" class="serif" x="64" y="541" font-size="58">No keyframes</text>
<text id="phrase-2" class="serif" x="430" y="541" font-size="58">to hunt for.</text>
</g>
<rect x="60" y="558" width="960" height="4" fill="#FB2D89" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const SIZE = 58; // font size of the phrases, px
const RISE = 1.28 * SIZE; // travel: the phrase starts fully hidden under the rule
const DUR = 0.5; // seconds to land
tl.fromTo("#phrase-1", { y: RISE }, { y: 0, duration: DUR, ease: arrive }, 0.35);
tl.fromTo("#phrase-2", { y: RISE }, { y: 0, duration: DUR, ease: arrive }, 1.05); // the next spoken group 0.7 s later
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>
Una palabra enorme y pesada cuelga como un dintel sobre una oración con serifa apoyada en una regla de acento; la oración se recorta a la banda entre la línea base de la palabra (extendida por todo el encuadre) y la regla. La palabra desciende 104 px mientras se inclina de -0,15 a -1,9 grados alrededor de su línea base izquierda (power2.inOut durante 2,9 s), y la banda se estrecha; luego cae sobre la regla con un asentamiento críticamente amortiguado (omega 14,4 por segundo) que la nivela al ángulo de la regla y cierra la banda, y tras 0,35 s de reposo se eleva y sale del encuadre (power2.inOut 0,7 s).
Cuándo usarla Cuando una palabra debe apretar, aplastar o cerrar físicamente la línea que tiene debajo.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Palabra pesada que cierra una abertura de texto</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4.2" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="4.2" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="opening"><path id="opening-shape" d="M0 0Z" /></clipPath></defs>
<g clip-path="url(#opening)"><text class="serif" x="64" y="683" font-size="58">No keyframes to hunt for.</text></g>
<rect x="60" y="700" width="960" height="4" fill="#FB2D89" />
<text id="lintel" class="heavy" x="0" y="0" font-size="320" letter-spacing="-5">HUNT</text>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const X0 = 43; // the lintel's left baseline, the pivot of its tilt
const FLOOR = 700; // top edge of the rule
const S = { y: 524, r: -0.15 }; // lintel baseline y and tilt, degrees
function draw() {
document.getElementById("lintel").setAttribute("transform", `translate(${X0} ${S.y}) rotate(${S.r})`);
// the opening: between the lintel's underside (its baseline, extended) and the rule
const k = Math.tan((S.r * Math.PI) / 180), top = (x) => Math.min(S.y + k * (x - X0), FLOOR);
document.getElementById("opening-shape").setAttribute("d", `M-40 ${top(-40)}L1120 ${top(1120)}L1120 ${FLOOR}L-40 ${FLOOR}Z`);
}
// a critically damped settle (omega 14.4/s) written as an ease over 0.45 s
const W = 14.4, D = 0.45, settle = (p) => 1 - (1 + W * D * p) * Math.exp(-W * D * p);
tl.fromTo(S, { y: 524, r: -0.15 }, { y: 628, r: -1.9, duration: 2.9, ease: "power2.inOut" }, 0); // the slow press
tl.fromTo(S, { y: 628, r: -1.9 }, { y: FLOOR, r: 0, duration: D, ease: settle }, 2.93); // the drop seals it
tl.to(S, { y: -420, duration: 0.7, ease: "power2.inOut" }, 3.4); // lift off
tl.eventCallback("onUpdate", draw);
draw();
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>
Dos reglas finas caen desde una línea de acento (power2.inOut 0,34 s); luego una palabra pesada cae desde detrás de la línea, recortada al área inferior, con una caída críticamente amortiguada (191 px, omega 8,6 por segundo). Al aterrizar, la línea se comba con un perfil de semisinusoide impulsado por un muelle subamortiguado (30 px, omega 11,9 por segundo, razón de amortiguamiento 0,30): un rebase, un pequeño rebote y reposo. En ese momento las reglas se convierten en cables de acento de 2,5 px, la palabra cuelga de ellos y desciende con la comba, y las palabras con serifa que se apoyan en la línea siguen la curva, cada una girada según la pendiente local.
Cuándo usarla Dar peso visible a una palabra: la estructura de la que cuelga cede, oscila y aguanta.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Palabra colgante que dobla una línea elástica</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="under-line"><path id="under-shape" d="M0 0Z" /></clipPath></defs>
<g id="words"></g>
<line id="cable-1" /><line id="cable-2" />
<g clip-path="url(#under-line)"><text id="hung" class="heavy" font-size="138" letter-spacing="1.8">TIMELINE</text></g>
<path id="line" fill="none" stroke="#FB2D89" stroke-width="4" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NS = "http://www.w3.org/2000/svg";
const L0 = 482, L1 = 467; // line ends at x 60 and 1020
const T_RULES = 0.2, T_DROP = 0.5, T_SAG = 1.15; // rules drop, word drops, line gives way
const WORDS = [["Chat", 0], ["instead", 137], ["of", 341], ["a", 406]]; // example words and their x offsets
const sagAt = (t) => { if (t < T_SAG) return 0; const z = 0.3, w = 11.9, u = t - T_SAG, wd = w * Math.sqrt(1 - z * z);
return 30 * (1 - Math.exp(-z * w * u) * (Math.cos(wd * u) + (z / Math.sqrt(1 - z * z)) * Math.sin(wd * u))); };
const lineY = (x, A) => { const u = Math.min(1, Math.max(0, (x - 60) / 960)); return L0 + (L1 - L0) * u + A * Math.sin(Math.PI * u); };
const words = WORDS.map(([w]) => { const t = document.createElementNS(NS, "text"); t.setAttribute("class", "serif"); t.setAttribute("font-size", 58); t.textContent = w; document.getElementById("words").appendChild(t); return t; });
const p2 = gsap.parseEase("power2.inOut");
function draw(t) {
const A = sagAt(t);
let d = ""; for (let x = 60; x <= 1020; x += 16) d += (d ? "L" : "M") + x + " " + lineY(x, A).toFixed(2);
document.getElementById("line").setAttribute("d", d);
document.getElementById("under-shape").setAttribute("d", "M-40 1200L1120 1200" + [1120, 560, -40].map((x) => "L" + x + " " + (lineY(x, A) + 2).toFixed(2)).join("") + "Z");
WORDS.forEach(([w, ox], i) => { const x = 64 + ox + 30, slope = (lineY(x + 1, A) - lineY(x - 1, A)) / 2;
words[i].setAttribute("transform", `translate(${x} ${(lineY(x, A) - 17).toFixed(2)}) rotate(${(Math.atan(slope) * 180 / Math.PI).toFixed(3)}) translate(-30 0)`); });
const u = t - T_DROP, fall = u <= 0 ? -191 : -191 * (1 + 8.6 * u) * Math.exp(-8.6 * u);
const hy = 662 + 0.89 * A + fall;
document.getElementById("hung").setAttribute("transform", `translate(179 ${hy.toFixed(2)}) rotate(-0.87)`);
const drop = p2(Math.min(1, Math.max(0, (t - T_RULES) / 0.34))), hot = Math.min(1, Math.max(0, (t - T_SAG) / 0.12));
[["cable-1", 468], ["cable-2", 627]].forEach(([id, x]) => { const el = document.getElementById(id), top = lineY(x, A), bottom = 662 + 0.89 * A - 4 - (x - 179) * 0.0152;
el.setAttribute("x1", x); el.setAttribute("x2", x); el.setAttribute("y1", top); el.setAttribute("y2", top + (bottom - top) * drop);
el.setAttribute("stroke", hot > 0 ? "#FB2D89" : "#FAF9FF"); el.setAttribute("stroke-opacity", drop > 0 ? 0.45 + 0.55 * hot : 0); el.setAttribute("stroke-width", 1 + 1.5 * hot); });
}
const clock = { t: 0 };
tl.to(clock, { t: 4, duration: 4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
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>
Una palabra pesada sube desde debajo del encuadre hasta situarse junto al extremo libre de una línea de acento combada (críticamente amortiguada, 0,6 s), descansa y luego gira 90 grados en sentido antihorario alrededor de su extremo lejano (power2.inOut 0,8 s) hasta quedar vertical, leyéndose de abajo arriba, como un poste bajo la línea. Al subir, el extremo de la línea se eleva sobre ella (power4.out 0,53 s) y la línea mantiene su comba.
Cuándo usarla Convertir una palabra en arquitectura: un soporte, una columna o una palanca que levanta algo.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Palabra que gira hasta quedar vertical como soporte</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3.4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<path id="line" fill="none" stroke="#FB2D89" stroke-width="4" />
<text id="support" class="heavy" x="0" y="0" font-size="141.5" letter-spacing="4">VIDEO</text>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const LEN = 514; // advance of the word, px
const PX = 466, PY = 440; // its far end: the pivot of the swing, at the line's free end
const L = { yL: 482, yR: 470, A: 30 }; // line ends (x 466 and 1080) and sag
function draw() {
let d = ""; for (let x = PX; x <= 1080; x += 16) { const u = (x - PX) / (1080 - PX); d += (d ? "L" : "M") + x + " " + (L.yL + (L.yR - L.yL) * u + L.A * Math.sin(Math.PI * u)).toFixed(2); }
document.getElementById("line").setAttribute("d", d);
}
gsap.set("#support", { x: PX - LEN, y: PY });
tl.fromTo("#support", { y: PY + 700 }, { y: PY, duration: 0.6, ease: arrive }, 0.1); // rises into place
tl.to("#support", { rotation: -90, svgOrigin: `${PX} ${PY}`, duration: 0.8, ease: "power2.inOut" }, 1.2); // swings upright
tl.fromTo(L, { yL: 482 }, { yL: PY - 18, duration: 0.53, ease: "power4.out" }, 1.5); // lifts the line's end
tl.eventCallback("onUpdate", draw);
draw();
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>
La siguiente escena ya está dibujada dentro del ojo de una gran O con serifa, recortada a la forma del ojo a un 5 % aproximado de su tamaño. Después la cámara hace zoom hacia el ojo: el logaritmo natural de la escala crece con el cuadrado del tiempo (unos x18 en 0,53 s) mientras el centro del ojo se desliza al centro del encuadre (power2.inOut); la pequeña escena acompaña el zoom y en los últimos 0,13 s lo supera para llegar exactamente a pantalla completa, mientras el anillo de la letra pasa más allá de los bordes.
Cuándo usarla Una transición que entra en la siguiente idea a través de una letra en lugar de cortar hacia ella.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zoom a través del ojo de una letra hacia la siguiente escena</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="2.4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="counter"><ellipse id="counter-shape" /></clipPath></defs>
<g id="outer">
<text class="serif" x="497" y="620" font-size="48.6">Ideas in</text>
<text class="serif" x="492" y="752" font-size="137">M</text>
<text id="ring" class="serif" x="613" y="752" font-size="137">O</text>
<text class="serif" x="717" y="752" font-size="137">TION</text>
</g>
<g clip-path="url(#counter)"><g id="inner">
<path d="M60 455Q540 515 1020 503" fill="none" stroke="#FB2D89" stroke-width="4" />
<text class="heavy" transform="translate(178 669) rotate(2.7)" font-size="138" letter-spacing="1.8">TIMELINE</text>
<text class="heavy" transform="translate(161 973) rotate(-90)" font-size="141.5" letter-spacing="4">VIDEO</text>
</g></g>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const T0 = 0.6, T1 = T0 + 0.53; // zoom start and end, s
let C0 = [0, 0], R = [1, 1];
function measure() { // the counter: the middle of the O's box, about 0.36 x 0.43 of its size
const b = document.getElementById("ring").getBBox();
C0 = [b.x + b.width / 2, b.y + b.height * 0.55]; R = [b.width * 0.36, b.height * 0.43];
}
const p2 = gsap.parseEase("power2.inOut");
function draw(t) {
const u = Math.max(0, (t - T0) / (T1 - T0)), zs = Math.exp(2.9 * Math.min(u, 1.2) ** 2);
const zp = p2(Math.min(1, Math.max(0, (t - T0 + 0.04) / 0.6)));
const c = [C0[0] + (540 - C0[0]) * zp, C0[1] + (548 - C0[1]) * zp];
const cam = `translate(${c[0]} ${c[1]}) scale(${zs}) translate(${-C0[0]} ${-C0[1]})`;
document.getElementById("outer").setAttribute("transform", cam);
const ce = document.getElementById("counter-shape");
ce.setAttribute("cx", C0[0]); ce.setAttribute("cy", C0[1]); ce.setAttribute("rx", R[0]); ce.setAttribute("ry", R[1]); ce.setAttribute("transform", cam);
// the small scene: 5.4 % of the zoom, then it outgrows it and lands at full size
const grow = Math.min(1, Math.max(0, (t - (T1 - 0.2)) / 0.13)), g = Math.exp(Math.log(2) * grow * grow * (3 - 2 * grow));
const s = t >= T1 - 0.07 ? 1 : Math.min(1, 0.054 * zs * g);
const f = s >= 1 ? [540, 540] : [c[0] + (540 - c[0]) * s, c[1] + (540 - c[1]) * s];
document.getElementById("inner").setAttribute("transform", `translate(${f[0]} ${f[1]}) scale(${s}) translate(-540 -540)`);
document.getElementById("outer").style.display = t < T1 + 0.02 ? "inline" : "none";
}
const clock = { t: 0 };
document.fonts.ready.then(() => {
measure();
tl.to(clock, { t: 2.4, duration: 2.4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
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>
Una frase de cierre se ensambla sobre una línea de acento: las palabras pesadas emergen de la línea (recortadas por encima, críticamente amortiguadas, unos 95 px en 0,56-0,58 s), mientras que cada frase con serifa sube primero desde una línea invisible justo debajo de una posición de espera sobre la fila (0,5 s), se mantiene y, una vez liberado el recorte, se asienta sobre la fila o la línea en otros 0,5 s de aterrizaje críticamente amortiguado. La última palabra pesada llega al final, así que el énfasis surge de la alineación y la escala compartidas.
Cuándo usarla Construir una declaración final como una estructura, una palabra de carga a la vez.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frases que se asientan sobre una plataforma</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.6" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3.6" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="over-line"><rect x="-40" y="-400" width="1160" height="852.5" /></clipPath>
<clipPath id="wait-a"><rect x="-40" y="-400" width="1160" height="716" /></clipPath>
<clipPath id="wait-b"><rect x="-40" y="-400" width="1160" height="809" /></clipPath>
</defs>
<g id="g-a" clip-path="url(#wait-a)"><text id="phrase-a" class="serif" x="60" y="300" font-size="54">Your idea is ready to</text></g>
<g id="g-b" clip-path="url(#wait-b)"><text id="phrase-b" class="serif" x="509" y="396" font-size="54">Motion</text></g>
<g clip-path="url(#over-line)">
<text id="heavy-a" class="heavy" x="57" y="452" font-size="117" letter-spacing="4.1">MOVE.</text>
<text id="heavy-b" class="heavy" x="706" y="453" font-size="119" letter-spacing="4.1">FAB.</text>
</g>
<rect x="60" y="452.5" width="960" height="4" fill="#FB2D89" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const RISE = 70; // serif phrases start this far under their waiting place, hidden by the clip
tl.fromTo("#phrase-a", { y: RISE }, { y: 0, duration: 0.5, ease: arrive }, 0.1); // rises to wait above the row
tl.fromTo("#heavy-a", { y: 90 }, { y: 0, duration: 0.56, ease: arrive }, 0.5); // rises out of the line
tl.set("#g-a", { attr: { "clip-path": "none" } }, 1.0); // release, then settle onto it
tl.fromTo("#phrase-a", { y: 0 }, { y: 58, duration: 0.5, ease: arrive, immediateRender: false }, 1.0);
tl.fromTo("#phrase-b", { y: RISE }, { y: 0, duration: 0.5, ease: arrive }, 1.34);
tl.set("#g-b", { attr: { "clip-path": "none" } }, 1.76);
tl.fromTo("#phrase-b", { y: 0 }, { y: 55.9, duration: 0.5, ease: arrive, immediateRender: false }, 1.76);
tl.fromTo("#heavy-b", { y: 95 }, { y: 0, duration: 0.58, ease: arrive }, 2.04); // the last word lands last
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>
La cámara se sumerge en el pie del asta de una letra pesada: el logaritmo natural de la escala se acelera (unos x40 en 1 s) mientras el pie del asta es arrastrado hacia abajo fuera del encuadre, hasta que el color papel del asta llena el encuadre. Bajo esa oclusión total la escena cambia al fotograma inicial visto desde dentro de un asta de su primera palabra, y la cámara se aleja con una escala logarítmica desacelerada (de unos x22 a x1 en 0,95 s), aterrizando exactamente en la composición inicial para que la película haga un bucle sin costuras.
Cuándo usarla Un bucle sin costuras, o un corte por coincidencia entre dos escenas que comparten la forma de una letra.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inmersión en el asta de una letra y salida en bucle por otra</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="2.2" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<g id="scene-a">
<path d="M60 455H1020" stroke="#FB2D89" stroke-width="4" />
<text id="word-a" class="heavy" x="178" y="568" font-size="138" letter-spacing="1.8">TIMELINE</text>
</g>
<g id="scene-b">
<path d="M60 712L1020 697" stroke="#FB2D89" stroke-width="4" />
<text id="word-b" class="heavy" x="43" y="524" font-size="320" letter-spacing="-5">HUNT</text>
</g>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const CUT = 1.05; // the switch, under full occlusion
let A = [0, 0], B = [0, 0];
function measure() { // stem feet: the I of the first word and the T of the second, on their baselines
const a = document.getElementById("word-a").getExtentOfChar(1), b = document.getElementById("word-b").getExtentOfChar(3);
A = [a.x + a.width / 2, 568]; B = [b.x + b.width / 2, 524];
}
function draw(t) {
const sa = document.getElementById("scene-a"), sb = document.getElementById("scene-b");
if (t < CUT) { // dive: ln(scale) accelerates, the foot is carried down past the frame
const u = t / CUT, s = Math.exp(4.6 * u * u * u), ax = A[0] + (540 - A[0]) * u, ay = A[1] + 3000 * Math.pow(u, 6);
sa.setAttribute("transform", `translate(${ax} ${ay}) scale(${s}) translate(${-A[0]} ${-A[1]})`);
sa.style.display = "inline"; sb.style.display = "none";
} else { // pull out of the other stem, decelerating, to rest
const u = Math.min(1, (t - CUT) / 0.95), w = 1 - u, s = Math.exp(3.1 * w * w * w), ax = B[0] + (520 - B[0]) * w * w, ay = B[1] + 2800 * Math.pow(w, 4);
sb.setAttribute("transform", `translate(${ax} ${ay}) scale(${s}) translate(${-B[0]} ${-B[1]})`);
sa.style.display = "none"; sb.style.display = "inline";
}
}
const clock = { t: 0 };
document.fonts.ready.then(() => {
measure();
tl.to(clock, { t: 2.2, duration: 2.2, ease: "none", onUpdate: () => draw(clock.t) }, 0);
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>
Simple MotionCódigo del prompt: NPXplaceholder
Usado 1 vez
Simple MotionCódigo del prompt: MOV<direction> Haz un reel de marca vertical de 19,2 segundos (1080x1920, 30 fps) que se repita sin cortes. Es todo motion graphics, montado a un ritmo de 150 BPM (0,4 s por pulso, 12 compases). La idea: una pelota brillante es la protagonista de toda la película. Rebota por un manifiesto de gancho de una palabra por pulso, se convierte en la lenteja de un péndulo, pasa a ser una lámpara que ilumina una página, espera un montaje rápido detrás del nombre de tu marca y acaba sola en la tarjeta final justo donde empieza el primer fotograma. El estilo es tipografía editorial atrevida sobre fondos planos de noche profunda y papel, con un acento de degradado rosa a naranja y un segundo acento violeta. Ritmo: frenético los primeros 3,2 s, luego dos escenas largas que respiran con un pulso de dos tiempos, una ráfaga de 3,2 s de cortes a corcheas, un clímax de 2 s y un punto de bucle tranquilo. Evita metraje, voz en off, fundidos suaves y cualquier corte que no caiga en el ritmo: cada corte cae en un pulso o medio pulso. Las palabras de color de acento deben usar el mismo peso ExtraBold que el resto, nunca más fino. </direction> <structure> 1. Gancho, 0–3,2 s. Un fotograma oscuro. La pelota (140 px) empieza en el centro y cae hacia una línea de suelo en torno a y 1516, reduciéndose a 88 px, y aterriza a los 0,37 s. Desde 0,4 s aparece una palabra por pulso, luego por medio pulso: «no» (0,4), «solo» (0,8), «escribimos» (1,2), «prompts.» (1,6), «dirigimos» (2,0), «cine.» (2,2, en el degradado de acento), «escribe» (2,6), «luz» (2,8), «profundidad» (3,0). Sustitúyelas por tus propias líneas de manifiesto. El fondo alterna entre oscuro y papel en cada corte. En «luz» y «profundidad» la pelota sale volando hacia arriba por la esquina superior izquierda. 2. Péndulo, 3,2–8,0 s. Fondo de papel. La pelota se convierte en la lenteja (112 px) de una varilla oscura y fina colgada de un pivote 380 px por encima del centro superior (longitud del brazo 1317 px). Una sombra difuminada de varilla y lenteja se desplaza a la derecha. Un título de dos líneas en mayúsculas está en el centro y cambia en cada oscilación: «¿HECHO / A MANO?» → «HECHO / CON CÓDIGO.» (segunda línea en el acento) → «SIN / LÍNEA DE TIEMPO.» → «SIN / FOTOGRAMAS CLAVE.» → «SOLO / PALABRAS.» (acento) → «Y / LUZ.». Son ejemplos para sustituir. A los 7,2 s la luz se apaga más allá de la varilla y la última oscilación arrastra la oscuridad por el encuadre. 3. Lámpara, 8,0–12,8 s. Oscuro #14112E. La pelota se convierte en una lámpara brillante cuyo cono de luz revela una página de papel. La página contiene «LA LUZ / SON SOLO / MATEMÁTICAS.» en mayúsculas (ejemplo; la última línea en violeta) y un pequeño logotipo cerca de y 1430: un punto de degradado y tu marca en tinta. Desde 12,27 s toda la página está iluminada. 4. Montaje, 12,8–16,0 s. En el drop, «[tu marca]» en Anton (unos 260 px de alto, centrado) permanece quieto mientras el mundo de detrás cambia en cada corchea (0,2 s). Los mundos, en orden: - un blob 3D brillante y marmoleado rosa y naranja con un borde claramente visible, sobre gris - el mismo blob más cerca - bloques planos: cuadrados violetas, oscuros y de papel, y el degradado de acento - anillos hipnóticos de tinta y papel que se acercan y giran - una etiqueta de papel en blanco que se balancea de un cordel sobre violeta - un campo de teclas oscuras visto desde arriba, con algunas teclas rosas y naranjas pulsándose - un toro dibujado con puntos de trama claramente diferenciados sobre oscuro - violeta plano con una cuadrícula tenue - formas 3D de juguete que dan volteretas sobre un ciruela oscuro (cubos, bolas, anillos, conos y cápsulas en la paleta más amarillo #FFD23F) - las mismas formas desenfocadas sobre rosa pastel - un teléfono de cristal sobre gris - el blob sobre violeta - un suelo de cubos blancos con columnas rosas y naranjas que suben - el toro de trama como puntos de tinta sobre blanco - coral plano con cuadrícula 5. Final de vóxeles, 16,0–18,2 s. Fondo violeta. Una palabra corta (tu producto, o la segunda mitad del nombre de tu marca) se construye con cubos pequeños. Está completamente formada a los 16,6 s, respira y estalla desde 17,72 s mientras un agujero negro se abre desde el centro y llena el encuadre a los 18,17 s. 6. Tarjeta final, 18,2–19,2 s. Oscura. La pelota crece desde la nada en el centro (142 px en x 539, y 959). Tu marca en degradado rosa a naranja aparece debajo a los 18,1 s, se mantiene y se desvanece a los 18,85 s. Queda solo la pelota, exactamente donde empieza el primer fotograma de la película, así que el bucle es perfecto. </structure> <composition> Paleta: - noche profunda #0C0A1E y un #14112E algo más claro para las escenas oscuras - papel #F2EFFA para las claras - tinta #1C0B5D para el texto sobre papel - un degradado de acento rosa a naranja #FB2D89 → #FE9117 - un segundo acento violeta #7C4DFF - amarillo #FFD23F solo para las formas de juguete Las palabras del gancho son color papel en los cortes oscuros y tinta en los de papel. Tipografía: - palabras y títulos en Manrope ExtraBold, con interletraje ajustado (-0,035em en los títulos en mayúsculas) - el nombre de la marca en el montaje en Anton - un pequeño usuario «@yourbrand» (sustitúyelo) en JetBrains Mono arriba a la izquierda, a 56 px del borde izquierdo y 246 px de arriba, durante toda la película Título del péndulo: la línea uno de unos 145 px de altura de mayúscula, la línea dos de unos 128 px, centrado. La pelota es una esfera brillante: un suave reflejo blanco arriba a la izquierda sobre un cuerpo con degradado naranja → rosa → magenta profundo. Nombre de marca del montaje: tres capas (una sombra dura desplazada 9 px, un contorno de 16 px y el relleno). Es blanco con contorno oscuro en mundos oscuros o cargados, y oscuro con contorno blanco en los claros. Palabra de vóxeles: una fila, de unos 430 px de alto y 890 px de ancho. La primera letra tiene degradado de rosa a naranja de arriba abajo; las demás son blanco papel. Tarjeta final: pelota centrada; la marca en degradado hacia y 1225, de unos 620 px de ancho. </composition> <techniques> Gancho: - Cada palabra aterriza en cuatro fotogramas con un ease-out fuerte (power3.out). Las entradas rotan por turnos: un interletraje que se cierra desde medio em, una caída con zoom desde 125% y 320 px más abajo, un estiramiento vertical desde 260% anclado en la línea base y un deslizamiento desde 835 px fuera por la izquierda. - Los cambios de fondo son cortes secos. - En cada corte la pelota se hincha al 125% en el sitio durante un fotograma y está en lo alto de su salto en el siguiente. A lo largo de cinco fotogramas se desliza al otro punto de reposo (x 287 o 788) mientras vuelve a encogerse. Péndulo: - Oscila ±23,6° con power3.inOut en 0,34 s, cada oscilación centrada en un pulso de cada dos (3,6, 4,4, 5,2, 6,0, 6,8, 7,6 s), y se detiene en los extremos. - Tres copias atenuadas con un fotograma de diferencia siguen a la lenteja. - La varilla es claramente visible y su sombra se nota. - Cada oscilación barre el título hacia el siguiente. El título nuevo se muestra en el lado que la lenteja ya ha pasado y el viejo en el otro, con máscaras rectangulares inset y el mismo easing. - A los 7,2 s todo lo que queda más allá de la línea de la varilla se oscurece, y la última oscilación arrastra la oscuridad por el encuadre. Lámpara: - La pelota se desliza al centro en un tercio de segundo y empieza a brillar, con un suave halo naranja rosado de unos 220 px alrededor. - Un cono de luz se abre desde la pelota como una rendija de 7° que apunta recta hacia arriba. Barre hacia abajo a izquierda y derecha mientras se ensancha al moverse la pelota: hasta aproximadamente x 800, y 1090, luego x 900, y 975, luego arriba hasta x 760, y 560. - El cono se asienta sobre las palabras, de 120° de ancho y apuntando hacia abajo. - El cono es una máscara en forma de cuña con el vértice en la pelota, que revela la página de papel bajo la oscuridad. Una copia de la página al 28% de opacidad, 4,5° más ancha a cada lado, crea una penumbra gris dura. - Desde 12,27 s el cono se abre a 360° en 0,33 s con un easing in-out. Montaje: cortes secos cada 0,2 s detrás del nombre inmóvil. Cada mundo se mueve dentro de su hueco: los anillos se acercan y giran, la etiqueta se balancea, las teclas se pulsan, las formas dan volteretas y las columnas suben. Final de vóxeles: - Unos 800 cubos pequeños, de tres de profundidad, en una cuadrícula de 11x18 por letra. - Los cubos empiezan dispersos en profundidad y vuelan a su sitio con un quartic in-out durante medio segundo, escalonados hasta 0,18 s, mientras motas pasan veloces junto a la cámara. - La palabra respira: cada letra gira un poco alrededor de su centro y una onda recorre sus filas. - Desde 17,72 s cada cubo estalla hacia fuera y hacia el objetivo, con estelas de desenfoque de movimiento. - Un disco oscuro se abre desde un punto en el centro (power3.in, 0,37 s desde 17,8 s) y llena el encuadre a los 18,17 s, con los cubos volando por encima. Tarjeta final: la pelota crece desde la nada en unos 0,12 s y la marca se desvanece a los 18,85 s. </techniques> <music> Crea una pista instrumental electrónica original, oscura y contundente, a 150 BPM en re menor con sensación de half-time (bombo en el uno, caja en el tres). Tiene un bajo distorsionado y pulsante a corcheas, batería precisa y pads tensos, además de un corte vocal procesado sin palabras usado como textura, sin cantar. Suena desde el primer fotograma. Sus bombos y cajas caen en los cortes de palabra y las oscilaciones del péndulo, y hace el drop a los 12,8 s. Termina con un golpe pesado con un acorde oscuro justo en el agujero negro a los 18,0 s, que resuena bajo la tarjeta final. Recórtala a 19,2 s en el compás. </music> <sound> Superpón esto a la música: - un clic suave en cada destello de palabra - un whoosh en cada oscilación - un riser hacia el péndulo - un barrido descendente cuando se apaga la luz - una campana cuando la pelota se enciende - un riser hacia un boom en el montaje a los 12,8 s - un tic suave en cada mundo nuevo - un whoosh cuando los cubos se precipitan - un pequeño boom cuando aterriza la palabra - un riser hacia un boom profundo bajo el agujero negro Sin voz. </sound>
Usado 2 veces
Simple MotionCódigo del prompt: SYP<direction> Haz un reel de marca vertical de 15,5 segundos (1080x1920, 30 fps). Un recorrido 3D por un móvil sobre el perfil de mi marca se convierte en un momento de logo, y después una tipografía cinética cortada sílaba a sílaba con un beat trap duro en half-time termina en mi logo. Todo está dibujado, sin imágenes filmadas. Usa mi logo y, en lugar de los ejemplos de abajo, los colores y las palabras de mi marca. El aspecto tiene tres mundos: degradados de azul marino profundo a casi negro para la parte 3D, un estudio gris claro en el medio y negro puro con brillo neón al final. Evita una placa cuadrada o un cubo detrás del logo, letras en espejo cuando una palabra pasa por detrás de algo, texto que toque los bordes del encuadre, un encuadre boca abajo tras un latigazo de cámara y un logo holograma plano o aplastado. La pantalla del móvil debe encajar exactamente dentro de su marco. </direction> <structure> 1. 0–4,3 s, recorrido por el móvil. Un móvil 3D (una cara de pantalla y una parte trasera plateada brillante con el bulto de la cámara) entra dando vueltas, pequeño e inclinado, con la parte trasera por delante. Gira unos 200 grados y se asienta en vertical sobre su pantalla a 1,05 s (power2.out). La pantalla queda centrada en el encuadre con un borde uniforme por todos los lados. Muestra la marca como un perfil social: usuario, un avatar redondo con mi logo, nombre y un eslogan de una línea, una bio de dos líneas con la web, un botón principal rosa y cuatro destacados redondos cuyas etiquetas no se solapan. Debajo hay una cuadrícula de 3x3 con baldosas coloridas algo pequeñas y de esquinas redondeadas que caben en la pantalla, con etiquetas cortas que caben dentro de cada baldosa ("IDEAS IN MOTION", "3D", "LOGO REVEAL"; sustitúyelas por las tuyas). Desde 1,05 s el móvil se inclina hacia atrás unos 48 grados y crece, mientras las baldosas se separan de la pantalla hacia la cámara a distintas alturas. Un whip pan a 1,95 s aterriza cerca de la cabecera del perfil. La cámara recorre despacio la bio hacia abajo, ladeándose, hasta que un segundo latigazo a 3,0 s la lleva a mirar hacia abajo al avatar. Aterriza en vertical, así que el perfil se sigue leyendo. Tres anillos rosas brillantes se apilan saliendo del avatar (back.out, con 80 ms de diferencia). Una copia redonda de mi logo con contorno rosa y brillo sube desde ellos, inclinándose hacia el espectador como un holograma. 2. 4,3–6,5 s, logo 3D. Corte seco al símbolo de mi logo extruido en 3D: una pila de capas finas en un tono profundo (por ejemplo, rosa oscuro) detrás de la cara frontal iluminada, sin cuadrado detrás. Brilla sobre un degradado radial azul marino. Entra girando desde una pose inclinada (power3.out, 1 s), se bambolea y luego se aleja girando, pequeño (power3.in), hacia el corte. Una palabra contundente como "AHHHH" (sustitúyela por la tuya) se sitúa sobre un anillo justo debajo del logo, nunca encima. Está compuesta en la grotesca extrabold con degradado de naranja a rosa y un suave brillo rosa, con las letras separadas y nunca en espejo. La palabra barre por delante y luego sale volando con el logo. Desde 4,75 s una palabra gigante de fondo en contorno ("OMG") aparece en fundido y va subiendo. 3. 6,5–9,2 s, palabras tecleadas en una sala clara. Corte seco a una sala gris claro con viñeta. Las palabras se teclean letra a letra en las sílabas del beat, en un grupo 3D por el que la cámara se desplaza. Primero "yeah". Luego "she" en blanco sobre una caja negra que primero se ve como una línea fina y se abre de golpe. Después "typed" en rosa, "one" y un "single prompt" más grande. A 8,1 s la viñeta se cierra en una elipse horizontal en 0,22 s y se vuelve a abrir en 0,25 s, mientras las palabras viejas salen volando hacia la izquierda. Palabras nuevas caen desde arriba saliendo de un desenfoque: "Now" / "it moves like". Un "magic" rosa sube desenfocado desde abajo justo antes del corte. 4. 9,2–15,5 s, pila de neón y logo. Corte a negro con el "magic" rosa brillando arriba. Cada línea siguiente tiene su propio color, brillo y entrada, y se apilan: "And I'm" en naranja, "unstoppable" en violeta, "might do" en blanco, "MOTION" en rosa. La pila gira despacio en 3D y luego sale volando hacia arriba en 0,25 s a 11,95 s. Una línea de cierre aparece palabra a palabra saliendo de un desenfoque en rosa: "no" / "more" / "timelines". A 12,7 s cinco barras metálicas caen sobre ella desde arriba. A 13,25 s todo se desenfoca y desaparece, y mi logo en blanco con un eslogan muy espaciado ("YOUR TAGLINE HERE") aparece desde el desenfoque y se mantiene hasta el final. Todas las palabras entrecomilladas son ejemplos que debes sustituir por las tuyas. </structure> <composition> Paleta de ejemplo: azul marino #1C0B5D, casi negro #04020C, rosa intenso #FB2D89, naranja #FE9117, violeta #8F7BFF, gris claro #D2D4D9, gris de texto #4A4E56 y blanco. Usa una única grotesca pesada, extrabold con interletraje ajustado (-0,045em), por ejemplo Manrope ExtraBold, para todas las palabras. La palabra de fondo de la escena 2 es un contorno gigante (text-stroke a un 20 % de alfa aproximadamente). La parte 3D va sobre degradados de azul marino profundo a casi negro, y la escena del logo sobre un degradado radial azul marino. El medio es una sala gris claro con viñeta y el final es negro puro con brillos de neón. Mantén cada línea de texto dentro del encuadre con márgenes de seguridad, sobre todo las líneas largas "And I'm" y "unstoppable". La tarjeta final es el logo centrado en blanco con un eslogan pequeño y muy espaciado debajo. </composition> <techniques> Whip pans: 0,08 s de desenfoque de 14 px, un salto al nuevo encuadre y 0,12 s de vuelta a nítido. Los anillos se apilan con back.out, con 80 ms de diferencia. El holograma del logo sube con contorno rosa y brillo y una ligera inclinación hacia la cámara. El logo 3D entra girando con power3.out (1 s) y sale con power3.in. Cada letra tecleada se voltea hacia arriba desde abajo (rotationX -70, back.out, 0,18 s, con 30–70 ms de diferencia). La caja de "she" se abre desde una línea fina con un chasquido. La transición de iris cierra la viñeta en una elipse horizontal (0,22 s) y la reabre (0,25 s). Entradas de las líneas de neón: las letras de "And I'm" entran de golpe desde grandes, "unstoppable" se desliza desde la derecha saliendo de un desenfoque, las letras de "might do" suben y las letras de "MOTION" entran como un latigazo desde la izquierda con inclinación y estela de movimiento. La pila sale hacia arriba en 0,25 s. Las palabras de cierre aparecen una a una saliendo de un desenfoque. Cinco barras metálicas caen desde arriba (power3.in, con 30 ms de diferencia). Al final todo se desenfoca y desaparece, y luego el logo aparece desde un desenfoque de 24 px (0,45 s) y crece despacio un 4 % mientras se mantiene. Las palabras cambian cada 0,1–0,3 s en las sílabas del beat; solo el logo se mantiene. </techniques> <music> Trap en half-time a unos 147 BPM en sol menor, instrumental, sin voces. Bajo la parte del móvil suena un oscuro motivo de campanas con tensión creciente. El beat completo (bombo 808 duro, sub distorsionado, palmada, hi-hats rodantes con redobles de tresillo) cae exactamente en el corte al logo 3D a 4,33 s. Recorta la pista para que el drop caiga ahí. Fundido de salida al final. </music> <sound> Solo diseño de sonido sobre la música: un boom cuando aterriza el móvil, whooshes en los dos whip pans y un destello brillante para el logo holograma. Añade un golpe en el corte al logo 3D, un impacto en el corte a la sala clara y un whoosh en el iris. Luego un boom en el corte a negro, whooshes cuando las líneas entran deslizándose y salen volando, un golpe metálico cuando caen las barras y un boom profundo en el logo final, y después un fundido de salida. Sin voz en off. </sound>
Usado 7 vecesBoletín
Te enviamos los mejores prompts nuevos de la comunidad con sus videos. Sin spam, y cada correo trae un enlace para darte de baja.
Usamos tu correo solo para este boletín. Política de privacidad