Simple MotionCode du prompt: NPXReel produit « Spécimen vivant » avec morphing de logo
placeholder
Utilisé 1 foisReel d'appli horizontal de 15 secondes en typographie cinétique et graphismes d'interface : nuage de pastilles, titre curseur, plongée, schéma, éditeur et carte de fin.
Code du prompt MOCPublié Utilisé 3 fois
Utiliser le promptLe prompt s’ouvre dans l’app : ajoutez vos propres éléments, et l’agent construit la vidéo.
Signaler ce promptRéalise un reel produit horizontal de 15 secondes (1920x1080, 60 i/s) pour mon appli, entièrement construit à partir de typographie et de graphismes d'interface, et monté sur un beat house à 128 BPM. Il doit donner l'impression d'un showreel de motion design haut de gamme. Chaque scène passe à la suivante par un mouvement, jamais par une simple coupe : un flash, un curseur, une plongée à travers une lettre, une carte qui se plie, des volets en colonnes, une explosion, un écrasement en ligne. Quelque chose atterrit presque à chaque temps. Le reel passe d'un canevas sombre pointillé sous un HUD de style caméra à une page d'éditeur claire au milieu, puis une page rose vers la fin et une carte de fin sombre avec l'icône et le nom de mon appli. Utilise le nom de mon appli, mon icône carrée, mon adresse web et mes propres courtes lignes de texte à la place des exemples entre guillemets ci-dessous. Pas de photos ni de rushes. Dessine toutes les icônes (flèches, chevrons, étoiles, coches, croix, petits carrés, la boîte du curseur) en formes vectorielles, jamais en caractères tapés, pour qu'aucune police de secours ni case vide n'apparaisse. Aucun texte ne doit dépasser du cadre ni de sa pastille, et chaque animation de décodage ou de saisie doit se terminer sur le bon texte.
Grille rythmique : 128 BPM dès 0 s, donc un temps dure 0,469 s et une mesure 1,875 s. Le flash tombe sur la mesure 2 (1,875 s), la page rose éclate sur la mesure 7 (11,25 s) et la carte de fin frappe sur la mesure 8 (13,125 s). Les mises en avant des fonctionnalités tombent sur quatre temps consécutifs dans la scène 3, et les échanges d'édition sur quatre temps consécutifs dans la scène 4.
0–1,9 s, nuage de pastilles et changement de mot. Environ 24 petites pastilles arrondies flottent à des endroits fixes autour du centre du canevas sombre. Chacune est en mono 21 px avec un point à gauche et une fine bordure ; quelques-unes ont une bordure rose. Chaque pastille est inclinée de quelques degrés et légèrement basculée en 3D, et certaines sont floues comme si elles étaient hors du point. Elles passent au net l'une après l'autre de 0,08 s à 1,1 s (opacité, flou de 6 px à net, échelle de 0,94 à 1 en 0,22 s) et dérivent de quelques pixels. Leur texte énumère ce que fait l'appli, p. ex. "Kinetic type, shapes", "Describe your idea", "Live preview", "MP4 export". Un kicker mono "TELL THE CHAT WHAT TO SHOW" se décode à partir de glyphes aléatoires au-dessus du centre à 0,4 s. Un énorme titre de 155 px "No keyframes." monte lettre par lettre dès 0,11 s. À 0,92 s, le second mot quitte la ligne vers le haut en passant par le haut de la ligne, lettre par lettre, le tout en 0,1 s. "timeline." monte à sa place en orange en environ 0,13 s ; le premier mot ne bouge jamais. À 1,42 s, tout le titre part vers le haut, et un minuscule carré lumineux apparaît au centre et grandit jusqu'à environ 42 px. À partir de 1,58 s, chaque pastille s'incline fortement et vole vers la caméra et au-delà le long de sa ligne depuis le centre, en perspective 3D (0,22 s, ease-in accélérant de type power1).
1,9–3,7 s, flash, curseur et plongée. Un flash gris rosé remplit le cadre et décroît en 0,25 s tandis que 40 rayons fins jaillissent vers l'extérieur et que deux anneaux doux s'étendent. Le carré (orange, arrondi) arrive à environ 45 px, incliné, et gonfle jusqu'à environ 215 px en un quart de seconde en se redressant. Il fait ensuite office de curseur : un titre géant "OPEN APP" (311 px, presque la largeur du cadre) monte lettre par lettre pendant que le carré court devant les lettres en rétrécissant. Il atterrit comme le point final (environ 60 px) et devient rose. Vers 2,66 s, une pastille rose avec mon adresse web apparaît sous le titre (ease back-out) et se décode. Un lent travelling avant suit. À 3,2 s, la caméra plonge dans le contre-poinçon du premier O : le titre grandit sur une courbe accélérée (d'environ 1,07 à 3 en 0,3 s, puis à 22 à 0,5 s) tandis que le O glisse au centre. La scène suivante apparaît à travers le trou du O et remplit le cadre tandis que le bord de la lettre file.
3,25–5,8 s, le schéma. Une scène sombre avec une petite étiquette en haut à gauche : un petit carré dessiné, puis "02 —— DESCRIBE THE VIDEO". Une carte centrale a une bordure rose, mon logo et le nom de l'appli, un petit sous-titre mono comme "AI MOTION DESIGNER", un point turquoise avec mon adresse web et quatre boutons de fonctionnalités comme "Edit in words", "No keyframes", "Live preview", "MP4 export". À gauche, trois entrées glissent ("Footage", "Photos", "Logos", chacune avec une petite icône dessinée). À droite, six sorties glissent à 50 ms d'intervalle : "Kinetic type", "Shapes", "3D effects", "Music", "Sound effects", "Vertical", chacune avec une petite sous-ligne mono et une étiquette. Le titre "From idea to video in one chat." monte lettre par lettre en haut à droite, ses derniers mots en orange. Des fils courbes se dessinent des entrées vers la carte et de la carte vers les sorties, avec des points lumineux qui y circulent. Les quatre boutons de fonctionnalités se remplissent de rose, un par temps. À 5,6 s, la carte pulse et se plie en une barre claire étroite et unie.
5,7–9,75 s, la page claire. La page claire s'ouvre à partir de cette barre. Elle s'élargit d'environ 80 px au plein cadre en environ 0,23 s (lent, puis rapide, puis adouci en fin) avec un flou de mouvement qui se dissipe à l'atterrissage.
Côté gauche : une petite étiquette (carré dessiné, "03 —— LIVE PREVIEW"), un titre sur deux lignes "Chat instead / of a timeline." (deuxième ligne rose) montant lettre par lettre, deux lignes de texte courant atténué "Tell the chat what to show. / The agent builds the animation." montant mot par mot, et cinq petits points.
Côté droit : une fenêtre d'éditeur blanche avec les boutons feux tricolores, mon adresse dans la barre de titre et "Try it free" à droite. Huit lignes mono numérotées se tapent toutes seules à environ 100 caractères par seconde avec un curseur rose, p. ex. "Pick a template", "idea = describe(", say="Bigger", la phrase du corps entre guillemets, "Refine in words, then export". Une barre d'état en bas indique "MP4 export" avec une petite boîte de curseur contourée à sa droite.
En bas, une bande de mots ("bigger", "slower", "another colour", "vertical", "horizontal", "square", "kinetic type" ...) défile vers la gauche à environ 167 px/s. À partir de 7,5 s, sur quatre temps d'affilée, la valeur entre guillemets après say= devient "Slower", "Another colour", "Vertical", "Square" dans un cadre de surbrillance rose avec un décodage rapide. À chaque changement, la barre d'état indique "Live preview · Slower" et ainsi de suite, un point grossit dans une nouvelle couleur d'accent et le mot correspondant de la bande devient une pastille rose. Toute la page avance lentement de 2,5 %.
9,45–11,35 s, keyframes contre mots. Une petite étiquette (carré dessiné, "04 —— NO KEYFRAMES") se tient en haut à gauche. Neuf colonnes verticales balaient la scène sombre sur la claire, alternativement depuis le haut et depuis le bas. Chacune dure 0,15 s, avec un bord doux et une barre rose lumineuse sur son bord d'attaque. Un titre "Edit in words." monte. Une pastille rose avec une demande entre guillemets comme 'Bigger', 'slower' est reliée par une ligne à un losange arrondi étiqueté "AGENT". Un point lumineux court vers une carte supérieure "keyframes / to hunt for", qui devient orange avec un badge "NO" à croix dessinée et un chemin en pointillés. Puis le point court le long du chemin inférieur (petite étiquette "say what should change") vers une carte "chat/say-what-should-change / live preview". Cette carte devient turquoise avec un badge "LIVE" à coche dessinée et une lueur. Pendant ce temps, "Live preview." monte après le titre en orange, et trois petites statistiques montent en bas : "PREVIEW live", "EXPORT MP4", "KEYFRAMES none" en turquoise.
11,15–13,4 s, trois étapes. Une page rose jaillit du badge LIVE sous forme de cercle à bord doux avec un contour lumineux. Il fait environ 130 px, puis 190 px sur les deux premières images, puis file au-delà du coin opposé en 0,1 s de plus. Trois énormes nombres "01", "02", "03" (243 px) arrivent en roulant comme les rouleaux d'une machine à sous, flous pendant la rotation, et atterrissent de gauche à droite à 11,32, 11,5 et 11,77 s. Chacun s'accompagne d'un trait fin qui se dessine sous sa rangée, d'une petite étiquette mono qui se décode ("TEMPLATE", "IDEA", "EXPORT", chacune précédée d'une petite étoile jaune dessinée) et d'une phrase qui apparaît en fondu ("Pick a template", "Describe your idea", "Refine in words, then export"). À partir de 12,65 s, tout devient flou et s'écrase verticalement en une fine ligne au milieu du cadre, qui devient le rail de la carte de fin.
12,8–15 s, carte de fin. La fine ligne blanche s'étire jusqu'à la pleine largeur en deux images. L'icône de mon appli (environ 150 px, posée sur la ligne) arrive de la droite le long de celle-ci, très vite puis en freinant fort : l'essentiel du trajet dans les premiers 0,13 s, stabilisée à 13,2 s, avec quelques traînées de vitesse derrière elle. Elle tire une page sombre dont le nez arrondi en forme de balle la suit puis s'étale jusqu'à ce que le cadre soit sombre à 13,4 s. Le nom de mon appli (Geist 500, 176 px) apparaît derrière l'icône à son passage, et l'icône et le nom sont centrés ensemble comme un seul lockup. La ligne se réduit en un soulignement dépassant d'environ 30 px de chaque côté du lockup et s'atténue. Le slogan "Your AI motion designer." monte mot par mot à 13,75 s. Deux boutons en pastille apparaissent à 14,1 et 14,17 s, chacun aussi large que ses mots plus le même padding, centrés en paire avec 23 px d'écart : un contouré avec un petit chevron dessiné et "Try it free", et un rose avec mon adresse web et une flèche dessinée. Un reflet orange balaie le nom à 14,6 s. Tiens jusqu'à la fin, entièrement visible et lisible jusqu'à la dernière image.
Palette :
Scènes sombres : quasi noir #0D0B1E et encre profonde #1C0B5D, avec une douce lueur d'encre profonde au milieu et une discrète grille de points de 48 px sur le tout.
Page claire : #FAF9FF avec une teinte lavande #F0EDFF et une vignette horizontale assombrissant les bords gauche et droit jusqu'à environ #B6B1C6.
Accent principal : rose #FB2D89 pour les pastilles, boutons, surbrillances et le curseur.
Second accent : orange #FE9117 pour le mot mis en avant de chaque titre.
Neutres : blanc #FFFFFF, texte atténué #6B6385 sur clair et #8E87A6 sur sombre, lignes #E9E4F2.
Détails : turquoise #2DD4B0 pour le succès ; jaune #FFD23F et violet #7C6CF2 seulement pour de petits détails.
Typographie : Geist pour tout ce qui est grand. Titres en graisse 800 avec un crénage serré d'environ -0,023em ; le logotype de la carte de fin en graisse 500. Geist Mono pour les étiquettes, pastilles, code et le HUD, avec de petites étiquettes façon petites capitales à large espacement de 0,15–0,35em.
HUD sur les scènes 1–6 :
De fins crochets d'angle aux quatre coins.
En haut à gauche : un point rose avec le nom de l'appli ou un slogan.
En haut à droite : un timecode qui défile (HH:MM:SS:FF à 60 i/s).
En bas à gauche : la section en cours ("01 OPEN APP", "02 DESCRIBE THE VIDEO", "03 LIVE PREVIEW", "04 NO KEYFRAMES", "05 TRY IT FREE").
En bas à droite : "VERTICAL · HORIZONTAL · SQUARE".
Tout le texte du HUD est en mono 14 px dans une couleur atténuée qui devient sombre sur la page claire et blanche sur la page rose. Le HUD s'efface à l'arrivée de la carte de fin.
Les titres montent dans leur ligne lettre par lettre. Chaque lettre est masquée par la ligne et monte du dessous (0,15 s, ease-out de type power3), le décalage étant réparti pour que toute la ligne atterrisse en environ 0,4 s quelle que soit sa longueur. Les mots remplacés quittent la ligne vers le haut lettre par lettre tandis que le nouveau mot monte à sa place. Le texte courant et les slogans montent mot par mot. Les kickers mono, étiquettes et adresses se décodent à partir de glyphes aléatoires. Les pastilles et boutons apparaissent avec un léger dépassement (ease back-out). Le code se tape à environ 100 caractères par seconde avec un curseur rose. Utilise le flou de mouvement sur les mouvements les plus rapides : l'ouverture de la page, les nombres qui tournent, l'écrasement en ligne et l'arrivée de l'icône. Garde un lent travelling avant sur les scènes tenues, pour que le cadre ne soit jamais statique avant la tenue de la carte de fin.
Un morceau house instrumental original et énergique à exactement 128 BPM, de exactement 15 s, avec des kicks sur la grille rythmique. Il s'ouvre sur une première mesure étouffée, filtrée en passe-bas, et un riser de bruit blanc. Le beat complet tombe exactement sur le flash à 1,875 s avec un impact et un profond boom de sub. À partir de là, c'est un groove four-on-the-floor régulier avec des claps, des hats, une basse pulsante et des accords de synthé brillants, sans chute ni trou de niveau nulle part. Juste avant la carte de fin, le morceau se referme sur un son filtré en passe-bas pendant une demi-mesure (une montée de filtre) au lieu de s'arrêter. Un dernier boom et splash frappe à 13,125 s, suivi de la courte outro propre au morceau jusqu'à 15 s.
Les procédés de motion design qui composent la vidéo, chacun avec un code autonome à ouvrir dans un navigateur ou à confier à votre agent.
Chaque caractère d’un titre gras se trouve dans sa propre boîte de découpe à la hauteur de la ligne et y monte par le bas (0,15 s, power3.out). Le stagger est réparti sur une durée fixe (environ 0,26 s pour tout le titre), si bien qu’un mot long dure autant qu’un mot court. Pour remplacer le dernier mot, ses lettres sortent vers le haut par le bord supérieur de la ligne en 0,1 s (power2.in) tandis que le mot de remplacement, empilé au même endroit dans la couleur d’accent, monte en environ 0,13 s ; le premier mot ne bouge jamais.
Quand l’utiliser Une phrase percutante qui change un mot sur le temps, sans coupe.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Montée de caractères masqués avec changement de mot</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#kicker { position: absolute; left: 0; right: 0; top: 398px; text-align: center; font: 400 23px/1 "Geist Mono", monospace; letter-spacing: 0.15em; color: #8e87a6; white-space: pre; }
#title { position: absolute; left: 409px; top: 452px; white-space: pre; font: 800 155px/1.2 "Geist", sans-serif; letter-spacing: -0.023em; }
#w2 { position: relative; display: inline-block; }
#wb { position: absolute; left: 0; top: 0; color: #FE9117; }
.m { display: inline-block; clip-path: inset(-6% -12% 0 -12%); } /* the line is the mask */
.c { display: inline-block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
<div id="kicker" class="clip" data-start="0" data-duration="4">TELL THE CHAT WHAT TO SHOW</div>
<div id="title" class="clip" data-start="0" data-duration="4"><span id="w1">No </span><span id="w2"><span id="wa">keyframes.</span><span id="wb">timeline.</span></span></div>
</div>
<script>
// Split a word into masked characters: the outer span clips on the line, the inner one moves.
function split(el) {
const text = el.textContent; el.textContent = ""; const out = [];
for (const ch of text) {
const m = document.createElement("span"); m.className = "m";
const c = document.createElement("span"); c.className = "c"; c.textContent = ch;
m.appendChild(c); el.appendChild(m); if (ch !== " ") out.push(c);
}
return out;
}
const tl = gsap.timeline({ paused: true });
const w1 = split(document.getElementById("w1")), wa = split(document.getElementById("wa")), wb = split(document.getElementById("wb"));
const IN = 0.15, OUT = 0.11; // rise and exit durations of one letter
const spread = (n, total) => total / Math.max(1, n - 1); // stagger that fits n letters into `total` seconds
gsap.set(wb, { yPercent: 105 });
const first = w1.concat(wa), last = w1.concat(wb);
first.forEach((c, i) => tl.fromTo(c, { yPercent: 105 }, { yPercent: 0, duration: IN, ease: "power3.out", immediateRender: true }, 0.1 + i * spread(first.length, 0.264)));
wa.forEach((c, i) => tl.to(c, { yPercent: -105, duration: OUT, ease: "power2.in" }, 1.6 + i * spread(wa.length, 0.1))); // the old word leaves upward
wb.forEach((c, i) => tl.to(c, { yPercent: 0, duration: IN, ease: "power3.out" }, 1.68 + i * spread(wb.length, 0.132))); // the new word rises in its place
last.forEach((c, i) => tl.to(c, { yPercent: -105, duration: OUT, ease: "power2.in" }, 3.3 + i * spread(last.length, 0.144)));
tl.fromTo("#kicker", { opacity: 0 }, { opacity: 1, duration: 0.25 }, 0.4);
tl.to("#kicker", { opacity: 0, duration: 0.1 }, 3.25);
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>
Un petit carré incliné arrive du plan précédent à environ 45 px, gonfle jusqu’à environ 215 px en un quart de seconde, se redresse, puis court devant les lettres pendant qu’elles montent dans la ligne, en rétrécissant, et se pose comme le point final du titre, prenant la couleur d’accent avec une lueur. Sa taille, son angle et son trajet sont des keyframes lues à partir du temps de la timeline.
Quand l’utiliser Une apparition de titre qui transporte un objet du plan précédent dans le texte.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Curseur carré qui tape un titre et atterrit comme son point</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#title { position: absolute; left: 124px; top: 337px; white-space: pre; font: 800 311px/1.2 "Geist", sans-serif; letter-spacing: -0.022em; }
.m { display: inline-block; clip-path: inset(-6% -12% 0 -12%); }
.c { display: inline-block; }
#sq { position: absolute; left: 910px; top: 490px; width: 100px; height: 100px; border-radius: 22px;
background: linear-gradient(140deg, #ffc27a 0%, #FE9117 55%, #fb5a5f 100%); box-shadow: 0 0 40px rgba(254, 145, 23, 0.5); }
#sqd { position: absolute; inset: 0; border-radius: inherit; background: #FB2D89; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080">
<div id="title" class="clip" data-start="0" data-duration="3.5">OPEN APP</div>
<div id="sq" class="clip" data-start="0" data-duration="3.5"><div id="sqd"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const title = document.getElementById("title"), sq = document.getElementById("sq");
const text = title.textContent; title.textContent = ""; const chars = [];
for (const ch of text) { const m = document.createElement("span"); m.className = "m"; const c = document.createElement("span"); c.className = "c"; c.textContent = ch; m.appendChild(c); title.appendChild(m); if (ch !== " ") chars.push(c); }
// Letters rise one after another (a short pause on the space).
[0.37, 0.4, 0.43, 0.46, 0.53, 0.56, 0.59].forEach((t, i) => tl.fromTo(chars[i], { yPercent: 105 }, { yPercent: 0, duration: 0.16, ease: "power3.out", immediateRender: true }, t));
// The square (100 px box) by keyframes [seconds, value]: it arrives at 45 px and tilted, swells to about 215 px,
// straightens, then runs ahead of the letters shrinking until it rests as the full stop (centre x, y in px).
const K = { s: [[0.1, 0.45], [0.17, 1.1], [0.22, 1.75], [0.27, 2.15], [0.32, 2.15], [0.37, 2.1], [0.42, 1.73], [0.52, 1.1], [0.57, 0.77], [0.67, 0.61]],
r: [[0.1, 15], [0.17, 4], [0.22, -5], [0.27, -6], [0.32, -2], [0.37, 0]],
x: [[0.37, 960], [0.42, 1032], [0.47, 1240], [0.52, 1420], [0.57, 1588], [0.62, 1700], [0.67, 1755]],
y: [[0.37, 535], [0.42, 518], [0.52, 530], [0.57, 545], [0.62, 580], [0.67, 600]] };
const at = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) if (t <= keys[i][0]) { const [a, va] = keys[i - 1], [b, vb] = keys[i]; return va + (vb - va) * (t - a) / (b - a); } return keys[keys.length - 1][1]; };
const draw = (t) => gsap.set(sq, { scale: at(K.s, t), rotation: at(K.r, t), x: at(K.x, t) - 960, y: at(K.y, t) - 540 });
tl.to({}, { duration: 3.5, onUpdate: () => draw(tl.time()) }, 0);
draw(0);
// Landed: the cursor becomes the full stop in the accent colour.
tl.to("#sqd", { opacity: 1, duration: 0.25, ease: "power1.inOut" }, 0.52);
tl.to(sq, { boxShadow: "0 0 70px rgba(251, 45, 137, 0.6)", duration: 0.3 }, 0.52);
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 caméra met le titre à l’échelle autour de la contre-forme de son premier O sur des keyframes à espacement logarithmique (1,07 au début de la plongée, 3 après 0,3 s, 22 après 0,5 s) tandis qu’un mouvement power2.out amène cette contre-forme au centre du cadre ; l’arrière-plan du titre reçoit un trou de masque elliptique qui suit la contre-forme, de sorte que la scène suivante, dessous, se voit à travers la lettre et remplit le cadre pendant que le bord du O file.
Quand l’utiliser Passer d’un grand mot à un plan produit ou à une nouvelle section en un seul mouvement continu.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plongée à travers la contre-forme d’une lettre vers la scène suivante</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#next { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 58% at 50% 54%, #22124a 0%, #100c26 62%, #090714 100%); }
#card { position: absolute; left: 679px; top: 399px; width: 562px; height: 351px; border-radius: 22px; border: 2px solid #FB2D89; background: #1a1340;
display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; padding: 40px; }
#card b { width: 50px; height: 50px; border-radius: 12px; background: #1C0B5D; box-shadow: inset 0 0 0 3px #FB2D89; }
#card span { font: 700 45px/50px "Geist", sans-serif; }
#card i { width: 233px; height: 64px; border-radius: 10px; background: #FB2D89; }
#back { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#cam { position: absolute; inset: 0; }
#title { position: absolute; left: 124px; top: 337px; white-space: pre; font: 800 311px/1.2 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
<div id="next" class="clip" data-start="0" data-duration="3"><div id="card"><b></b><span>"Next scene"</span><i></i><i></i></div></div>
<div id="back" class="clip" data-start="0" data-duration="3"></div>
<div id="cam" class="clip" data-start="0" data-duration="3"><div id="title">OPEN APP</div></div>
</div>
<script>
// The camera dives into the counter of the first letter "O": the title scales up about the counter while the
// counter slides to the frame centre; the background gets an elliptical hole that follows the counter, so the
// next scene (underneath) shows through it.
const tl = gsap.timeline({ paused: true });
const F = 311; // font size of the title
const title = document.getElementById("title"), cam = document.getElementById("cam"), back = document.getElementById("back");
// Counter of Geist 800 "O" in its line box (line-height 1.2), as fractions of the font size.
const ocx = title.offsetLeft + 0.3935 * F, ocy = title.offsetTop + 0.5995 * F, RX = 0.1735 * F, RY = 0.2285 * F;
gsap.set(cam, { transformOrigin: `${ocx}px ${ocy}px` });
// Scale keyframes [seconds, scale], interpolated in log space: slow, then exploding past the camera.
const DIVE = [[0.6, 1.075], [0.683, 1.2], [0.733, 1.4], [0.783, 1.6], [0.833, 1.9], [0.867, 2.3], [0.917, 3], [0.967, 4.5], [1.017, 8], [1.05, 12.5], [1.083, 17], [1.1, 22]];
const scaleAt = (t) => {
if (t <= DIVE[0][0]) return 1 + 0.075 * Math.max(0, t) / DIVE[0][0]; // slow push-in before the dive
for (let i = 1; i < DIVE.length; i++) if (t <= DIVE[i][0]) {
const [a, sa] = DIVE[i - 1], [b, sb] = DIVE[i];
return Math.exp(Math.log(sa) + (Math.log(sb) - Math.log(sa)) * (t - a) / (b - a));
}
return 40;
};
const k = { v: 0 };
tl.to(k, { v: 1, duration: 0.32, ease: "power2.out" }, 0.6); // the counter travels to the centre
gsap.set("#card", { scale: 0.86 });
tl.to("#card", { scale: 1, duration: 0.5, ease: "power2.out" }, 1.02);
const draw = (t) => {
const s = scaleAt(t), cx = ocx + (960 - ocx) * k.v, cy = ocy + (540 - ocy) * k.v;
gsap.set(cam, { scale: s, x: cx - ocx, y: cy - ocy, opacity: t > 1.1 ? 0 : 1 });
const hole = t >= 0.68 ? `radial-gradient(ellipse ${RX * 1.1 * s}px ${RY * 1.07 * s}px at ${cx}px ${cy}px, transparent 99%, #000 100%)` : "none";
back.style.webkitMaskImage = back.style.maskImage = hole;
back.style.opacity = t > 1.1 ? 0 : 1;
};
tl.to({}, { duration: 3, onUpdate: () => draw(tl.time()) }, 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>
Neuf colonnes égales révèlent la scène suivante, alternativement depuis le haut et depuis le bas, démarrant à 20-70 ms d’écart et durant chacune 0,15 s (power2.inOut) ; chaque colonne est une couche de masque CSS avec un bord doux de 36 px, et une fine barre lumineuse de la couleur d’accent chevauche son bord d’attaque.
Quand l’utiliser Un changement d’ambiance brutal (clair vers sombre) qui reste mécanique et calé sur le rythme.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Volet en colonnes avec bords d’attaque lumineux</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#from { position: absolute; inset: 0; background: linear-gradient(90deg, #b6b1c6 0%, #e2ddef 20%, #FAF9FF 50%, #e0dbee 78%, #b6b1c6 100%); color: #0D0B1E; }
#to { position: absolute; inset: 0; background: radial-gradient(ellipse 48% 58% at 52% 56%, #22124a 0%, #100c26 64%, #090714 100%); color: #fff; }
.word { position: absolute; left: 0; right: 0; top: 470px; text-align: center; font: 800 120px/1 "Geist", sans-serif; letter-spacing: -0.025em; }
#bars { position: absolute; inset: 0; }
.bar { position: absolute; height: 7px; background: #FB2D89; box-shadow: 0 0 18px 4px rgba(251, 45, 137, 0.7); opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080">
<div id="from" class="clip" data-start="0" data-duration="2.5"><div class="word">"Light scene"</div></div>
<div id="to" class="clip" data-start="0" data-duration="2.5"><div class="word">"Dark scene"</div></div>
<div id="bars" class="clip" data-start="0" data-duration="2.5"></div>
</div>
<script>
// Nine columns reveal the next scene, each sliding in from the top or the bottom with a soft edge and a glowing bar
// at its leading edge. One CSS mask layer per column, sized and placed from the timeline's time.
const tl = gsap.timeline({ paused: true });
const COLS = [[0, 0.5, 1], [1, 0.53, -1], [2, 0.55, 1], [3, 0.575, -1], [4, 0.595, 1], [5, 0.665, -1], [6, 0.62, 1], [7, 0.64, -1], [8, 0.685, 1]]; // [column, start s, from top 1 / bottom -1]
const CW = 1920 / 9, CD = 0.15, FEATHER = 36;
const to = document.getElementById("to"), barsEl = document.getElementById("bars");
const bars = COLS.map(([i]) => { const b = document.createElement("div"); b.className = "bar"; b.style.left = i * CW + "px"; b.style.width = Math.ceil(CW) + "px"; barsEl.appendChild(b); return b; });
const ease = gsap.parseEase("power2.inOut");
const draw = (t) => {
const imgs = [], sizes = [], poss = [];
COLS.forEach(([i, t0, dir], k) => {
const p = ease(Math.min(1, Math.max(0, (t - t0) / CD))), h = Math.round(p * 1110);
imgs.push(`linear-gradient(${dir > 0 ? 180 : 0}deg, #000 calc(100% - ${FEATHER}px), transparent)`);
sizes.push(`${Math.ceil(CW) + 1}px ${h}px`);
poss.push(`${Math.floor(i * CW)}px ${dir > 0 ? 0 : 1080 - h}px`);
bars[k].style.opacity = p > 0 && p < 1 ? 1 : 0;
bars[k].style.top = (dir > 0 ? h - 26 : 1080 - h + 19) + "px";
});
const m = to.style;
m.webkitMaskImage = m.maskImage = imgs.join(",");
m.webkitMaskSize = m.maskSize = sizes.join(",");
m.webkitMaskPosition = m.maskPosition = poss.join(",");
m.webkitMaskRepeat = m.maskRepeat = "no-repeat";
};
tl.to({}, { duration: 2.5, onUpdate: () => draw(tl.time()) }, 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>
La scène suivante est masquée par un cercle centré sur un petit badge de la dernière scène, avec un bord doux de 26 px et un contour lumineux dessiné juste à l’extérieur ; le rayon suit des keyframes (environ 130 et 190 px sur les deux premières images, puis dépasse le coin opposé en 0,1 s de plus), si bien que la nouvelle couleur jaillit du badge et que le nouveau contenu monte à son arrivée.
Quand l’utiliser Transformer un petit moment de réussite en section suivante plein écran.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Explosion circulaire depuis un badge de statut</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#badge { position: absolute; left: 1636px; top: 732px; width: 137px; height: 42px; border-radius: 21px; background: #2DD4B0; color: #05302a;
display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 20px/1 "Geist Mono", monospace; }
#badge svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; }
#rim { position: absolute; left: 1705px; top: 753px; width: 0; height: 0; border-radius: 50%; box-shadow: 0 0 0 10px rgba(255, 140, 195, 0.35), 0 0 40px 18px rgba(255, 90, 160, 0.35); }
#next { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 33% 40%, #ff4f9c 0%, #FB2D89 30%, #e81f7b 55%, #cc176b 80%, #b0125d 100%); }
.word { position: absolute; left: 127px; top: 152px; font: 800 243px/1.08 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080">
<div id="badge" class="clip" data-start="0" data-duration="2.5"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7" /></svg>LIVE</div>
<div id="next" class="clip" data-start="0" data-duration="2.5"><div class="word">"01"</div></div>
<div id="rim" class="clip" data-start="0" data-duration="2.5"></div>
</div>
<script>
// The next scene bursts out of the status badge as a soft-edged circle with a glowing rim; its radius follows
// keyframes (slow for two frames, then racing past the corners), and the new content rises in as it lands.
const tl = gsap.timeline({ paused: true });
const next = document.getElementById("next"), rim = document.getElementById("rim");
const CX = 1705, CY = 753; // centre of the badge
const R = [[1.0, 0], [1.017, 127], [1.05, 191], [1.067, 545], [1.1, 737], [1.117, 1330], [1.15, 1580], [1.167, 2000]]; // [s, radius px]
const radius = (t) => { if (t <= R[0][0]) return 0; for (let i = 1; i < R.length; i++) if (t <= R[i][0]) { const [a, ra] = R[i - 1], [b, rb] = R[i]; return ra + (rb - ra) * (t - a) / (b - a); } return 2000; };
tl.fromTo("#badge", { scale: 0 }, { scale: 1, duration: 0.16, ease: "back.out(2.4)", immediateRender: true }, 0.2);
tl.fromTo(".word", { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, ease: "power3.out", immediateRender: true }, 1.17);
const draw = (t) => {
const r = radius(t);
const m = r >= 1999 ? "none" : `radial-gradient(circle at ${CX}px ${CY}px, #000 ${Math.max(0, r - 26)}px, transparent ${r}px)`;
next.style.webkitMaskImage = next.style.maskImage = m;
gsap.set(rim, { width: 2 * r, height: 2 * r, x: -r, y: -r, opacity: r > 0 && r < 1999 ? 1 : 0 });
};
tl.to({}, { duration: 2.5, onUpdate: () => draw(tl.time()) }, 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>
Chaque chiffre est un rouleau vertical de plus de 10 chiffres dans une colonne aussi large que le chiffre final ; le rouleau défile vers le haut jusqu’à sa valeur en environ 0,25 s avec power3.out et un flou qui se dissipe en ralentissant, les chiffres suivants tournant un peu plus longtemps pour que le nombre se fixe de gauche à droite ; un filet sous la rangée se trace en même temps.
Quand l’utiliser Grands nombres, étapes ou prix qui doivent arriver avec énergie.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rouleaux de chiffres façon machine à sous</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#root { background: radial-gradient(ellipse 60% 70% at 33% 40%, #ff4f9c 0%, #FB2D89 30%, #e81f7b 55%, #cc176b 80%, #b0125d 100%); }
.dv { position: absolute; left: 127px; width: 1666px; height: 2px; background: rgba(255, 255, 255, 0.34); transform-origin: 0 50%; }
.num { position: absolute; left: 127px; display: flex; font: 800 243px/1 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; }
.col { position: relative; display: inline-block; overflow: hidden; height: 1.08em; }
.reel { display: block; }
.reel span { display: block; height: 1.08em; line-height: 1.08em; text-align: center; margin: 0 -0.2em; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
<div class="dv clip" id="d0" data-start="0" data-duration="3" style="top: 147px;"></div>
<div class="dv clip" id="d1" data-start="0" data-duration="3" style="top: 421px;"></div>
<div class="dv clip" id="d2" data-start="0" data-duration="3" style="top: 695px;"></div>
<div class="num clip" id="n0" data-start="0" data-duration="3" style="top: 152px;"></div>
<div class="num clip" id="n1" data-start="0" data-duration="3" style="top: 426px;"></div>
<div class="num clip" id="n2" data-start="0" data-duration="3" style="top: 700px;"></div>
</div>
<script>
// Each digit is a reel of digits that scrolls up and lands on its value, blurred while fast; later digits spin
// longer, so the number settles left to right. The column is as wide as the landed digit.
const tl = gsap.timeline({ paused: true });
const NUMS = [["01", 0.3], ["02", 0.5], ["03", 0.77]]; // [value, starts at s]
NUMS.forEach(([str, t0], ni) => {
const el = document.getElementById("n" + ni);
[...str].forEach((ch, di) => {
const col = document.createElement("span"); col.className = "col";
const reel = document.createElement("span"); reel.className = "reel";
const spins = 10 + di * 3, target = +ch;
for (let k = 0; k <= spins; k++) { const s = document.createElement("span"); s.textContent = String((target - spins + k + 100) % 10); reel.appendChild(s); }
col.appendChild(reel); el.appendChild(col);
const probe = document.createElement("span"); probe.textContent = ch; probe.style.cssText = "display:inline-block;position:absolute;visibility:hidden"; el.appendChild(probe);
col.style.width = probe.getBoundingClientRect().width + "px"; probe.remove();
const h = 100 / (spins + 1), dur = 0.24 + di * 0.035;
tl.fromTo(reel, { yPercent: 0, filter: "blur(6px)" }, { yPercent: -h * spins, filter: "blur(0px)", duration: dur, ease: "power3.out", immediateRender: true }, t0 + di * 0.02);
tl.fromTo(col, { opacity: 0 }, { opacity: 1, duration: 0.05, immediateRender: true }, t0 + di * 0.02);
});
tl.fromTo("#d" + ni, { scaleX: 0 }, { scaleX: 1, duration: 0.3, ease: "power2.out", immediateRender: true }, t0 - 0.02);
});
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>
Une vingtaine de puces étiquetées sont placées à des positions fixes avec un léger roulis et une inclinaison 3D, certaines floues comme hors mise au point ; elles se mettent au point une à une (opacity, blur de 6 px à net, scale de 0,94 à 1, 0,22 s) et dérivent de quelques pixels ; pour sortir, chacune s’incline fortement (0,14 s) et file le long de sa ligne depuis le centre en passant devant la caméra avec translateZ dans une boîte en perspective (0,22 s, power1.in), en se floutant jusqu’à environ 10 px comme une traînée, tandis qu’un petit carré central grandit jusqu’à environ 42 px au centre.
Quand l’utiliser Montrer « tout en même temps » autour d’un titre, puis vider la scène avec vitesse.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nuage de puces en profondeur avec traversée warp</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#space { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 960px 540px; }
.chip { position: absolute; display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 18px 0 16px; border-radius: 10px; white-space: pre;
font: 500 21px/1 "Geist Mono", monospace; color: #E3DEF0; background: rgba(22, 18, 46, 0.86); border: 1.5px solid rgba(233, 228, 242, 0.14); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: #6B6385; }
.chip.hl { color: #fff; background: rgba(251, 45, 137, 0.13); border-color: #FB2D89; }
.chip.hl i { background: #FB2D89; }
#core { position: absolute; left: 955px; top: 535px; width: 10px; height: 10px; border-radius: 22%; background: linear-gradient(135deg, #FE9117, #FB2D89); box-shadow: 0 0 18px rgba(251, 45, 137, 0.9); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
<div id="space" class="clip" data-start="0" data-duration="3"></div>
<div id="core" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
// Labels float at different depths (roll, small 3D tilt, depth-of-field blur), focus in one by one and drift;
// then each tilts hard and flies past the camera along its line from the centre (translateZ in a perspective box).
const tl = gsap.timeline({ paused: true });
const CHIPS = [["\"Tell the chat what to show\"", 907, 340, 3, 1, 0], ["\"Kinetic type\"", 1349, 740, 2, 0, 0], ["\"Live preview\"", 225, 598, 2, 0, 0.4],
["\"Describe your idea\"", 1213, 931, 4, 1, 0], ["\"MP4 export\"", 1700, 590, -3, 0, 1.6], ["\"Shapes\"", 571, 853, 0, 0, 0], ["\"3D effects\"", 1677, 652, -3, 0, 1.4],
["\"Fonts for every script\"", 650, 940, 2, 0, 0], ["\"Music and sound effects\"", 1432, 167, -2, 0, 0], ["\"Pick a template\"", 1128, 828, 0, 0, 0],
["\"Edit in words\"", 286, 873, 4, 0, 0.6], ["\"Your own footage\"", 380, 757, 2, 0, 0.6]]; // [text, x, y, roll, highlighted, blur]
let seed = 11; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; // seeded
const space = document.getElementById("space");
CHIPS.forEach(([text, x, y, roll, hl, blur], i) => {
const el = document.createElement("div"); el.className = "chip" + (hl ? " hl" : ""); el.innerHTML = "<i></i>" + text.replace(/"/g, "");
el.style.left = x + "px"; el.style.top = y + "px"; space.appendChild(el);
const at = 0.08 + i * 0.07;
gsap.set(el, { xPercent: -50, yPercent: -50, rotation: roll, rotationY: (rnd() - 0.5) * 16, rotationX: (rnd() - 0.5) * 12, opacity: 0, filter: `blur(${blur + 6}px)`, scale: 0.94 });
tl.to(el, { opacity: 1, filter: `blur(${blur}px)`, scale: 1, duration: 0.22, ease: "power2.out" }, at); // focus pull in
tl.to(el, { x: (rnd() - 0.5) * 24, y: (rnd() - 0.5) * 22, duration: 2.0 - at, ease: "none" }, at); // drift
const w = 2.0 + rnd() * 0.04;
tl.to(el, { rotationX: (rnd() - 0.5) * 120, rotationY: (rnd() - 0.5) * 130, duration: 0.14, ease: "power2.out" }, w); // tilt
tl.to(el, { z: 860 + rnd() * 100, filter: `blur(${blur + 10}px)`, duration: 0.22, ease: "power1.in" }, w); // fly past, blurring like a streak
tl.to(el, { opacity: 0, duration: 0.06 }, w + 0.17);
});
gsap.set("#core", { scale: 0, rotation: 45 });
tl.to("#core", { scale: 1, duration: 0.1, ease: "power2.out" }, 1.85);
tl.to("#core", { scale: 2.6, rotation: 15, duration: 0.33, ease: "power1.out" }, 1.95);
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 MotionCode du prompt: NPXplaceholder
Utilisé 1 fois
Simple MotionCode du prompt: MOV<direction> Réalise un reel de marque vertical de 19,2 secondes (1080x1920, 30 fps) qui boucle sans raccord. C'est entièrement du motion design, monté sur un beat à 150 BPM (0,4 s par temps, 12 mesures). L'idée : une balle brillante est le héros de tout le film. Elle rebondit sur un manifeste d'accroche à raison d'un mot par temps, devient le balancier d'un pendule, se transforme en lampe qui éclaire une page, attend un montage rapide derrière le nom de ta marque et finit seule sur la carte de fin, exactement là où commence la première image. Le style : une typographie éditoriale audacieuse sur des fonds plats nuit profonde et papier, avec un accent en dégradé rose-orange et un second accent violet. Rythme : frénétique pendant les 3,2 premières secondes, puis deux longues scènes qui respirent sur une pulsation à deux temps, une rafale de 3,2 s de coupes en croches, un climax de 2 s et un point de boucle calme. Évite les images filmées, la voix off, les fondus enchaînés doux et toute coupe qui rate le beat : chaque coupe tombe sur un temps ou un demi-temps. Les mots de couleur d'accent doivent avoir la même graisse ExtraBold que le reste, jamais plus fine. </direction> <structure> 1. Accroche, 0–3,2 s. Une image sombre. La balle (140 px) part du centre et tombe vers une ligne de sol à environ y 1516, en rétrécissant à 88 px, et atterrit à 0,37 s. À partir de 0,4 s, un mot apparaît par temps, puis par demi-temps : « on » (0,4), « ne » (0,8), « fait » (1,2), « pas que prompter. » (1,6), « on » (2,0), « réalise. » (2,2, dans le dégradé d'accent), « tape » (2,6), « lumière » (2,8), « profondeur » (3,0). Remplace-les par tes propres lignes de manifeste. Le fond alterne entre sombre et papier à chaque coupe. Sur « lumière » et « profondeur », la balle s'envole vers le haut et sort en haut à gauche. 2. Pendule, 3,2–8,0 s. Fond papier. La balle devient le balancier (112 px) d'une fine tige sombre suspendue à un pivot situé 380 px au-dessus du centre haut (longueur de bras 1317 px). Une ombre floue de la tige et du balancier est décalée vers la droite. Un titre en capitales sur deux lignes est au milieu et change à chaque oscillation : « FAIT / À LA MAIN ? » → « FAIT / PAR CODE. » (seconde ligne en accent) → « PAS DE / TIMELINE. » → « PAS D' / IMAGES CLÉS. » → « JUSTE / DES MOTS. » (accent) → « ET / LA LUMIÈRE. ». Ce sont des exemples à remplacer. À 7,2 s, la lumière s'éteint au-delà de la tige, et la dernière oscillation traîne l'obscurité à travers le cadre. 3. Lampe, 8,0–12,8 s. Sombre #14112E. La balle devient une lampe lumineuse dont le cône de lumière révèle une page de papier. La page contient « LA LUMIÈRE / N'EST QUE / DES MATHS. » en capitales (exemple ; la dernière ligne en violet) et un petit bloc-logo près de y 1430 : un point en dégradé et ton logotype en encre. À partir de 12,27 s, toute la page est éclairée. 4. Montage, 12,8–16,0 s. Sur le drop, « [ta marque] » en Anton (environ 260 px de haut, centré) reste immobile tandis que le monde derrière change à chaque croche (0,2 s). Les mondes, dans l'ordre : - un blob 3D brillant et marbré rose et orange avec un bord bien visible, sur gris - le même blob de plus près - des blocs plats : carrés violets, sombres et papier, et le dégradé d'accent - des anneaux hypnotiques encre et papier qui zooment et tournent - une étiquette de papier vierge qui se balance au bout d'une ficelle sur du violet - un champ de touches de clavier sombres vu du dessus, avec quelques touches roses et orange qui s'enfoncent - un tore dessiné en points de trame bien distincts sur fond sombre - violet plat avec une grille discrète - des formes 3D de jouet qui culbutent sur un prune sombre (cubes, balles, anneaux, cônes et capsules aux couleurs de la palette plus jaune #FFD23F) - les mêmes formes floutées sur rose pastel - un téléphone en verre sur gris - le blob sur violet - un sol de cubes blancs d'où montent des colonnes roses et orange - le tore de trame en points d'encre sur blanc - corail plat avec une grille 5. Final en voxels, 16,0–18,2 s. Fond violet. Un mot court (ton produit, ou la seconde moitié du nom de ta marque) est construit avec de petits cubes. Il est entièrement formé à 16,6 s, respire, puis éclate à partir de 17,72 s pendant qu'un trou noir s'ouvre depuis le centre et remplit le cadre à 18,17 s. 6. Carte de fin, 18,2–19,2 s. Sombre. La balle grandit à partir de rien au centre (142 px à x 539, y 959). Ton logotype en dégradé rose-orange apparaît dessous à 18,1 s, reste, puis disparaît en fondu à 18,85 s. Il ne reste que la balle, exactement là où commence la première image du film, donc la boucle est parfaite. </structure> <composition> Palette : - nuit profonde #0C0A1E et un #14112E un peu plus clair pour les scènes sombres - papier #F2EFFA pour les claires - encre #1C0B5D pour le texte sur papier - un dégradé d'accent rose-orange #FB2D89 → #FE9117 - un second accent violet #7C4DFF - jaune #FFD23F uniquement pour les formes de jouet Les mots de l'accroche sont couleur papier sur les coupes sombres et couleur encre sur les coupes papier. Typographie : - mots et titres en Manrope ExtraBold, avec un crénage serré (-0,035em sur les titres en capitales) - le nom de la marque dans le montage en Anton - un petit pseudo « @yourbrand » (à remplacer) en JetBrains Mono en haut à gauche, à 56 px du bord gauche et 246 px du haut, pendant tout le film Titre du pendule : la ligne un d'environ 145 px de hauteur de capitale, la ligne deux d'environ 128 px, centré. La balle est une sphère brillante : un doux reflet blanc en haut à gauche sur un corps en dégradé orange → rose → magenta profond. Nom de marque du montage : trois couches (une ombre dure décalée de 9 px, un contour de 16 px et le remplissage). Il est blanc avec un contour sombre sur les mondes sombres ou chargés, et sombre avec un contour blanc sur les clairs. Mot en voxels : une rangée, d'environ 430 px de haut et 890 px de large. La première lettre est en dégradé rose vers orange de haut en bas ; les autres sont blanc papier. Carte de fin : balle centrée ; le logotype en dégradé vers y 1225, d'environ 620 px de large. </composition> <techniques> Accroche : - Chaque mot atterrit en quatre images avec un fort ease-out (power3.out). Les entrées alternent : un crénage qui se resserre depuis un demi-em, une chute avec zoom depuis 125 % et 320 px plus bas, un étirement vertical depuis 260 % ancré sur la ligne de base et un glissement depuis 835 px hors champ à gauche. - Les changements de fond sont des coupes franches. - À chaque coupe, la balle gonfle à 125 % sur place pendant une image puis est au sommet de son bond à la suivante. Sur cinq images, elle glisse vers l'autre position de repos (x 287 ou 788) en rétrécissant à nouveau. Pendule : - Il oscille de ±23,6° avec power3.inOut en 0,34 s, chaque oscillation centrée sur un temps sur deux (3,6, 4,4, 5,2, 6,0, 6,8, 7,6 s), et reste immobile aux extrémités. - Trois copies estompées espacées d'une image traînent derrière le balancier. - La tige est bien visible et son ombre se remarque. - Chaque oscillation balaie le titre vers le suivant. Le nouveau titre apparaît du côté que le balancier a déjà dépassé et l'ancien de l'autre, avec des masques inset rectangulaires sur le même easing. - À 7,2 s, tout ce qui est au-delà de la ligne de la tige devient sombre, et la dernière oscillation traîne l'obscurité à travers le cadre. Lampe : - La balle glisse au centre en un tiers de seconde et commence à briller, avec un doux halo orange-rose d'environ 220 px autour d'elle. - Un cône de lumière s'ouvre depuis la balle comme une fente de 7° pointant droit vers le haut. Il balaie vers le bas à gauche et à droite en s'élargissant à mesure que la balle bouge : jusqu'à environ x 800, y 1090, puis x 900, y 975, puis vers le haut jusqu'à x 760, y 560. - Le cône se stabilise au-dessus des mots, large de 120° et pointant vers le bas. - Le cône est un masque en forme de coin dont le sommet est à la balle, révélant la page de papier sous l'obscurité. Une copie de la page à 28 % d'opacité, plus large de 4,5° de chaque côté, crée une pénombre grise nette. - À partir de 12,27 s, le cône s'ouvre à 360° en 0,33 s avec un easing in-out. Montage : coupes franches toutes les 0,2 s derrière le nom immobile. Chaque monde bouge dans son créneau : les anneaux zooment et tournent, l'étiquette se balance, les touches s'enfoncent, les formes culbutent et les colonnes montent. Final en voxels : - Environ 800 petits cubes, sur trois de profondeur, sur une grille de 11x18 par lettre. - Les cubes partent dispersés en profondeur et volent à leur place avec un quartic in-out en une demi-seconde, décalés jusqu'à 0,18 s, tandis que des particules filent devant la caméra. - Le mot respire : chaque lettre tourne un peu autour de son centre et une ondulation parcourt ses rangées. - À partir de 17,72 s, chaque cube éclate vers l'extérieur et vers l'objectif, strié de flou de mouvement. - Un disque sombre s'ouvre depuis un point au centre (power3.in, 0,37 s à partir de 17,8 s) et remplit le cadre à 18,17 s, les cubes volant par-dessus. Carte de fin : la balle grandit à partir de rien en environ 0,12 s, et le logotype disparaît en fondu à 18,85 s. </techniques> <music> Crée un morceau instrumental électronique original, sombre et percutant, à 150 BPM en ré mineur avec un feeling half-time (grosse caisse sur le un, caisse claire sur le trois). Il comporte une basse distordue pulsante en croches, une batterie serrée et des nappes tendues, ainsi qu'un chop vocal traité sans paroles utilisé comme texture, sans chant. Il joue dès la première image. Ses grosses caisses et ses caisses claires tombent sur les coupes de mots et les oscillations du pendule, et il drope à 12,8 s. Il se termine sur un coup lourd avec un accord sombre exactement sur le trou noir à 18,0 s, qui résonne sous la carte de fin. Coupe-le à 19,2 s sur la mesure. </music> <sound> Superpose ceci à la musique : - un clic doux à chaque flash de mot - un whoosh à chaque oscillation - un riser vers le pendule - un balayage descendant quand la lumière s'éteint - une cloche quand la balle s'allume - un riser vers un boom sur le montage à 12,8 s - un léger tic à chaque nouveau monde - un whoosh quand les cubes arrivent en trombe - un petit boom quand le mot se pose - un riser vers un boom profond sous le trou noir Pas de voix. </sound>
Utilisé 3 fois
Simple MotionCode du prompt: SYP<direction> Réalise un reel de marque vertical de 15,5 secondes (1080x1920, 30 i/s). Un survol 3D d'un téléphone au-dessus du profil de ma marque se transforme en moment logo, puis une typographie cinétique découpée syllabe par syllabe sur un beat trap dur en half-time se termine sur mon logo. Tout est dessiné, sans images filmées. Utilise mon logo et, à la place des exemples ci-dessous, les couleurs et les mots de ma marque. Le rendu comporte trois univers : des dégradés du bleu marine profond au presque noir pour la partie 3D, un studio gris clair au milieu et du noir pur avec une lueur néon à la fin. Évite une plaque carrée ou un cube derrière le logo, des lettres en miroir quand un mot passe derrière quelque chose, du texte qui touche les bords du cadre, un cadre à l'envers après un panoramique éclair et un logo hologramme plat ou écrasé. L'écran du téléphone doit tenir exactement dans son cadre. </direction> <structure> 1. 0–4,3 s, survol du téléphone. Un téléphone 3D (une face écran et un dos argenté lumineux avec la bosse de l'appareil photo) entre en culbutant, petit et incliné, dos en avant. Il tourne d'environ 200 degrés et se pose debout sur son écran à 1,05 s (power2.out). L'écran est centré dans le cadre avec une bordure régulière de tous les côtés. Il montre la marque comme un profil social : pseudo, un avatar rond avec mon logo, nom et slogan d'une ligne, une bio de deux lignes avec le site web, un bouton principal rose et quatre stories à la une rondes dont les libellés ne se chevauchent pas. En dessous, une grille de 3x3 de tuiles colorées un peu petites, aux coins arrondis, qui tiennent sur l'écran, avec de courts libellés qui tiennent dans chaque tuile ("IDEAS IN MOTION", "3D", "LOGO REVEAL" ; remplace-les par les tiens). À partir de 1,05 s, le téléphone bascule en arrière d'environ 48 degrés et grandit, tandis que les tuiles se détachent de l'écran vers la caméra à différentes hauteurs. Un panoramique éclair à 1,95 s se pose tout près de l'en-tête du profil. La caméra descend lentement le long de la bio, en s'inclinant, jusqu'à ce qu'un second panoramique éclair à 3,0 s la fasse regarder vers le bas sur l'avatar. Elle se pose à l'endroit, si bien que le profil reste lisible. Trois anneaux roses lumineux s'empilent en sortant de l'avatar (back.out, à 80 ms d'écart). Une copie ronde de mon logo avec un contour rose et une lueur s'élève d'eux, penchée vers le spectateur comme un hologramme. 2. 4,3–6,5 s, logo 3D. Coupe franche sur le symbole de mon logo lui-même, extrudé en 3D : une pile de fines couches d'un ton profond (par exemple rose foncé) derrière la face avant éclairée, sans carré derrière. Il brille sur un dégradé radial bleu marine. Il entre en tournant depuis une pose inclinée (power3.out, 1 s), oscille, puis s'éloigne en tournant, petit (power3.in), vers la coupe. Un mot percutant comme "AHHHH" (remplace-le par le tien) se tient sur un anneau juste sous le logo, jamais par-dessus. Il est composé dans la grotesque extra-grasse avec un dégradé de l'orange au rose et une douce lueur rose, les lettres espacées et jamais en miroir. Le mot balaie l'avant, puis s'envole avec le logo. À partir de 4,75 s, un mot géant en contour à l'arrière-plan ("OMG") apparaît en fondu et dérive vers le haut. 3. 6,5–9,2 s, mots tapés dans une pièce claire. Coupe franche sur une pièce gris clair avec vignettage. Les mots sont tapés lettre par lettre sur les syllabes du beat, dans un groupe 3D que la caméra traverse en dérivant. D'abord "yeah". Puis "she" en blanc sur une boîte noire qui apparaît d'abord comme une fine ligne et s'ouvre d'un coup. Ensuite "typed" en rose, "one" et un "single prompt" plus grand. À 8,1 s, le vignettage se ferme en une ellipse horizontale en 0,22 s et se rouvre en 0,25 s, tandis que les anciens mots s'envolent vers la gauche. De nouveaux mots tombent d'en haut en sortant d'un flou : "Now" / "it moves like". Un "magic" rose monte flou depuis le bas juste avant la coupe. 4. 9,2–15,5 s, pile néon et logo. Coupe sur noir avec le "magic" rose lumineux en haut. Chaque ligne suivante a sa propre couleur, sa propre lueur et sa propre entrée, et elles s'empilent : "And I'm" en orange, "unstoppable" en violet, "might do" en blanc, "MOTION" en rose. La pile tourne lentement en 3D, puis s'envoie vers le haut et hors champ en 0,25 s à 11,95 s. Une ligne de fin apparaît mot par mot en sortant d'un flou, en rose : "no" / "more" / "timelines". À 12,7 s, cinq barres métalliques tombent dessus depuis le haut. À 13,25 s, tout se floute et disparaît, et mon logo en blanc avec un slogan très espacé ("YOUR TAGLINE HERE") apparaît en sortant du flou et tient jusqu'à la fin. Tous les mots entre guillemets sont des exemples à remplacer par les tiens. </structure> <composition> Palette d'exemple : bleu marine #1C0B5D, presque noir #04020C, rose vif #FB2D89, orange #FE9117, violet #8F7BFF, gris clair #D2D4D9, gris de texte #4A4E56 et blanc. Utilise une seule grotesque épaisse, extra-grasse avec un crénage serré (-0,045em), par exemple Manrope ExtraBold, pour chaque mot. Le mot d'arrière-plan de la scène 2 est un contour géant (text-stroke à environ 20 % d'alpha). La partie 3D repose sur des dégradés du bleu marine profond au presque noir, et la scène du logo sur un dégradé radial bleu marine. Le milieu est une pièce gris clair avec vignettage, et la fin est du noir pur avec des lueurs néon. Garde chaque ligne de texte dans le cadre avec des marges de sécurité, surtout les longues lignes "And I'm" et "unstoppable". La carte finale est le logo centré en blanc avec un petit slogan très espacé en dessous. </composition> <techniques> Panoramiques éclair : 0,08 s de flou de 14 px, un saut vers le nouveau cadrage, puis 0,12 s de retour à la netteté. Les anneaux s'empilent avec back.out, à 80 ms d'écart. L'hologramme du logo s'élève avec un contour rose et une lueur et une légère inclinaison vers la caméra. Le logo 3D entre en tournant avec power3.out (1 s) et sort avec power3.in. Chaque lettre tapée se retourne vers le haut depuis le bas (rotationX -70, back.out, 0,18 s, à 30–70 ms d'écart). La boîte de "she" s'ouvre depuis une fine ligne avec un claquement. La transition en iris ferme le vignettage en une ellipse horizontale (0,22 s) et le rouvre (0,25 s). Entrées des lignes néon : les lettres de "And I'm" arrivent d'un coup en grand, "unstoppable" glisse depuis la droite en sortant d'un flou, les lettres de "might do" montent et les lettres de "MOTION" fouettent depuis la gauche avec inclinaison et traînée de mouvement. La pile sort vers le haut en 0,25 s. Les mots de fin apparaissent un par un en sortant d'un flou. Cinq barres métalliques tombent du haut (power3.in, à 30 ms d'écart). À la fin, tout se floute et disparaît, puis le logo apparaît depuis un flou de 24 px (0,45 s) et grossit lentement de 4 % en tenant. Les mots changent toutes les 0,1–0,3 s sur les syllabes du beat ; seul le logo tient. </techniques> <music> Trap en half-time à environ 147 BPM en sol mineur, instrumental, sans voix. Sous la partie téléphone, un sombre motif de cloches avec une tension montante. Le beat complet (grosse caisse 808 dure, sub saturé, clap, charleys roulants avec des rolls en triolets) tombe exactement sur la coupe vers le logo 3D à 4,33 s. Coupe le morceau pour que le drop tombe là. Fondu en sortie à la fin. </music> <sound> Uniquement du sound design par-dessus la musique : un boom quand le téléphone se pose, des whooshes sur les deux panoramiques éclair et un scintillement pour le logo hologramme. Ajoute un coup sur la coupe vers le logo 3D, un impact sur la coupe vers la pièce claire et un whoosh sur l'iris. Puis un boom sur la coupe vers le noir, des whooshes quand les lignes glissent et s'envolent, un coup métallique quand les barres atterrissent et un boom profond sur le logo final, puis un fondu en sortie. Pas de voix off. </sound>
Utilisé 9 foisNewsletter
Nous envoyons les meilleurs nouveaux prompts de la communauté avec leurs vidéos. Pas de spam, et chaque e-mail contient un lien de désabonnement.
Votre e-mail ne sert qu’à cette newsletter. Politique de confidentialité