votre motion designer IA

FR

Ouvrir l’app bêta

Simple Motion

Promo avec billet, valise et formats, et révélation du logo

Un promo de motion design à plat de 15 secondes : billet incliné, rideaux circulaires roses, cartes d'étape sortant d'une valise, trois panneaux de format et révélation du logo.

Publié 10 novembre 2026Utilisé 2 fois

Utiliser le prompt

Le prompt s’ouvre dans l’app : ajoutez vos propres éléments, et l’agent construit la vidéo.

Signaler ce prompt

Intention

Réalise un promo de motion design horizontal de 15 secondes (1920x1080, 60 i/s) pour [your brand], un produit qui transforme une description en vidéo terminée (adapte les mots aux tiens). L'idée : une demande devient un billet, le billet s'ouvre sur une promesse, une valise livre les étapes une par une, trois formats défilent et tout atterrit sur mon logo. Il n'y a pas de voix off : les mots sont à l'écran et la musique porte le tout. Tout est dessiné : graphismes 2D à plat avec une carte inclinée en 3D, sans images filmées. Le style est clair, net et énergique : un seul accent rose sur une page claire, avec un champ sombre encre profonde. Évite les images filmées, la voix, le flou dans les masques de texte, ainsi que toute dérive ou déformation du logo. Le logo se forme entier, exactement tel qu'il est dessiné, et reste parfaitement immobile d'environ 13,3 s jusqu'à la fin.

Structure

0–1,9 s, la demande. À gauche, une petite accroche rose à espacement large « YOUR AI MOTION DESIGNER » se place au-dessus d'un titre de trois lignes d'environ 180 px, « Describe » / « the » / « video. » (remplace-le par le tien ; la dernière ligne est rose). Les lignes montent de leurs lignes de base l'une après l'autre. La première bouge déjà à l'image 0 et les autres suivent à 0,13 s d'écart, linéaire, 0,17 s chacune. À droite, une carte-billet blanche est inclinée en perspective, son côté gauche plus proche. Elle porte un bandeau rose « FROM IDEA TO VIDEO » et mon petit logo avec « [your brand] » à côté. Deux champs, « FROM IDEA · Your idea » et « TO MP4 · Video », sont reliés par une ligne pointillée avec un triangle play rose. Elle porte aussi de petites étiquettes « EDIT WORDS », « STEP 03 », « EFFECTS 3D » et « PREVIEW LIVE », un code-barres et « 03 » sur le talon. La carte arrive en volant de la droite à 0,23 s (power3.out, 0,35 s), dépasse d'environ 125 px vers la gauche et revient se poser (sine.inOut, 0,37 s). Pendant ce temps, le code « MP4 » fait défiler des lettres aléatoires 15 fois par seconde et se verrouille lettre par lettre à 0,67, 0,8 et 0,93 s. À 1,17 s, un tampon rose en contour « MP4 EXPORT », incliné de -14°, s'abat depuis 2,4x en 8 images avec un minuscule rebond. À 1,67 s, le triangle play rétrécit en un point rose qui grandit en un rideau circulaire centré sur lui, avec deux anneaux rose pâle juste à l'extérieur de son bord. Le rayon passe par 15, 36, 66, 120, 210, 330, 540, 900 et 1500 px, un pas toutes les deux images. Les lignes du titre sortent vers le haut dans l'ordre à mesure que le cercle grandit.
1,9–4,0 s, la promesse, sur un champ entièrement rose (radial, plus clair au centre). Un triangle play blanc, un peu plus long que large pour pointer là où il va, naît à l'intérieur du cercle. Il vole en une boucle autour des mots, tourné le long de sa trajectoire : vers le haut, vers la gauche en haut, vers le bas sur la gauche, le long du bas, vers le haut sur le côté droit et hors du haut à droite. Derrière lui, il trace une orbite pointillée blanche dont les points les plus anciens s'estompent en une ligne fine et pâle. Deux grands cercles pâles sont en arrière-plan. « No keyframes. » (environ 220 px, blanc) entre en tournoyant lettre par lettre, à 0,03 s d'écart, sur un arc venant d'en bas à droite, en partant de 38° et en se redressant. À 2,8 s, il s'envole vers le haut lettre par lettre. En même temps, « The agent animates it. » (environ 157 px) monte de sa ligne de base lettre par lettre, à 16 ms d'écart. À 3,03 s, une pastille blanche arrondie balaie depuis la gauche derrière « animates it. » en 0,18 s, et ces mots deviennent roses à l'intérieur. À 3,77 s, les mots se floutent et disparaissent. Une valise encre profonde avec une sangle rose et une étiquette « MP4 » tombe du haut et atterrit à 4,02 s avec un petit écrasement.
4,0–8,95 s, les étapes. Un cercle clair s'ouvre depuis la valise avec deux anneaux rose pâle, et deux ellipses d'ondulation roses s'étendent depuis sa base. En haut, « Edit in words. » (atténué, environ 56 px) monte. Puis « Your idea is ready to move. » (environ 93 px) monte mot par mot, avec « move. » en rose et un soulignement rose dessiné à la main qui se trace dessous. Au-dessus de la valise, six cartes d'étape blanches arrivent, une toutes les 0,58 s. Chaque carte fait 900x165 px et est arrondie, avec une tuile d'icône à gauche et une puce d'état à droite. Chacune monte de derrière la valise (de 100 px plus bas et à 72 % de la taille, 0,3 s, power2.inOut) avec une puce lavande « Animating » et un indicateur de chargement. Elle s'allume ensuite en deux temps : d'abord une bordure rose et un halo extérieur doux, puis 0,07 s plus tard la tuile d'icône devient rose et la puce devient un « ✓ Ready » rose. Quand la carte suivante arrive, l'ancienne monte de 40 px et disparaît en 0,15 s. Les cartes affichent : « Kinetic type », « Shapes », « 3D effects », « Sound », « Your own footage », « Fonts for every script » (remplace-les par les tiennes). Sous la valise, six points et un compteur avancent à chaque carte, de « 1 / 6 in motion » à « 6 / 6 in motion ». À 7,9 s, la dernière carte change sur place pour « Ready to move. » avec une tuile coche et une puce rose « 6 / 6 ». Le compteur est remplacé par « ✓ Live preview. MP4 export. » À 8,4 s, tout sauf la valise s'envole et se floute. À 8,7 s, la caméra plonge dans la valise jusqu'à ce que son corps encre profonde remplisse le cadre.
8,95–11,4 s, les formats. Un groupe de trois bandes obliques balaie de droite à gauche en 0,2 s et ouvre un panneau plein cadre derrière son bord de fuite. Les bandes sont inclinées d'environ 18° : une fine bande rose foncé, une large bande rose et une fine bande rose clair. Le même balayage revient à 9,76 s et 10,5 s. Les trois panneaux sont des blocs en dégradé doux avec un horizon :

de lavande à violet, avec une lumière chaude dans la moitié basse ;
un ciel violet au-dessus d'une « mer » encre profonde ;
un ciel orange au-dessus d'une encre profonde, avec une bande de brume turquoise.
Chaque panneau avance lentement de 1,07 à 1 et a un dégradé encre profonde en bas. Son nom monte lettre par lettre en bas à gauche, environ 226 px, en blanc : « Vertical », « Horizontal », « Square ». En haut à gauche se trouve un petit HUD à espacement large : « 01 / 03 » en rose clair, puis « 9:16 », puis « MP4 EXPORT » qui se tape, avec un soulignement rose qui grandit dessous. Il passe à « 02 / 03 · 16:9 · LIVE PREVIEW » puis à « 03 / 03 · 1:1 · NO KEYFRAMES ».

11,4–12,5 s, la grille. Le dernier panneau rétrécit dans la carte de droite tandis que les deux autres glissent depuis la gauche. Ensemble, ils forment trois cartes portrait (580x780 px, espacées de 30 px) sur un champ encre profonde. La grille avance doucement à 1,05 et se rétablit en une demi-seconde. « Vertical, horizontal or square. » monte au-dessus en blanc. Une fois la grille posée, de petits noms apparaissent en fondu sur les cartes (« Vertical », « Horizontal », « Square »), bien à l'intérieur du cadre.
12,2–15 s, le logo. Un point rose sort de la carte du milieu, avec des anneaux de halo pâles, tandis que la grille rétrécit à 0,9 sur une page blanche. Son rayon est animé toutes les deux images de 12 à 1150 px. Puis le point rétrécit vite et ralentit (260, 125, 90, 75 px) en se déplaçant à gauche du centre. Là, il s'ouvre directement en la forme de fond de mon logo, sans jamais chevaucher le logo, et les parties intérieures du logo se développent d'un seul bloc, exactement comme le logo est dessiné. À 13,03 s, « [your brand] » glisse de derrière le logo vers la droite (power3.out, 0,32 s), tandis qu'un fin anneau rose s'étend autour du logo et s'estompe. Le nom fait environ 150 px, encre profonde, ses lettres centrées sur la ligne médiane du logo et l'ensemble centré dans le cadre. Puis « Describe the video. The agent animates it. » monte mot par mot en dessous, avec la seconde phrase en rose. Trois puces lavande apparaissent : « • Vertical », « • Horizontal », « • Square ». « [your website] » monte en gris atténué. Le logo reste parfaitement immobile à partir d'environ 13,3 s, et tout tient jusqu'à la fin.

Composition

La base est une page claire #FAF9FF avec une discrète grille de points de 40 px #E9E4F2 et de doux halos radiaux roses. L'encre profonde #1C0B5D sert au texte sombre, aux objets sombres et au champ sombre. Il y a un seul accent, le rose #FB2D89, pour les mises en valeur, le champ d'accent et la progression. L'atténué #6B6385 sert aux lignes secondaires et la lavande #F0EDFF aux puces douces. L'orange #FE9117, le violet #7C6CF2 et le turquoise #2DD4B0 n'apparaissent que dans les trois panneaux de format (et dans mon logo s'il les utilise). Les titres sont en sans géométrique épaisse, Manrope ExtraBold, avec un crénage serré d'environ -0,05em. Les petits libellés, le texte du HUD et le site web sont en sans nette, Inter SemiBold. Mise en page par plan :

Plan 1 : titre à gauche, billet incliné à droite.
Plan 2 : mots centrés sur le champ rose.
Plan 3 : cartes d'étape empilées au-dessus de la valise, points et compteur en dessous, titre en haut.
Plan 4 : noms de format en bas à gauche, HUD en haut à gauche.
Plan 6 : bloc logo final centré, avec la signature, les puces et le site web empilés dessous.

Techniques

Les apparitions sont nettes. Le texte monte de sa propre ligne de base dans un cadre qui bouge avec lui, jamais un flou dans un masque. Les sorties accélèrent et disparaissent en environ 0,1 s.

Les rideaux circulaires grandissent par rayons échelonnés animés toutes les deux images, avec des anneaux rose pâle juste à l'extérieur du bord.
Le code du billet défile et se verrouille lettre par lettre.
Le tampon s'abat depuis 2,4x avec un minuscule rebond.
Les lettres entrent sur un arc rotatif, et la pastille de mise en valeur balaie derrière des mots qui changent de couleur à l'intérieur.
Les cartes d'étape s'allument en deux temps : bordure et halo d'abord, puis la tuile et la puce.
La caméra plonge dans la valise à l'échelle 1,5, 3,1, 6,2 et 7 en un quart de seconde.
Des balayages obliques à trois bandes portent les transitions entre les panneaux de format, et chaque panneau avance lentement.
Le panneau unique s'effondre en une grille de trois cartes.
Un point voyage et s'ouvre en logo, qui se construit d'un seul bloc et ne bouge ni ne se déforme jamais une fois formé.

Musique

Utilise un morceau original de house électronique entraînant et optimiste à 120 BPM, d'exactement 15 s. Le groove complet joue dès la première image, avec une grosse caisse sur chaque temps à environ x,05 et x,55 s. Il reste régulier sous les cartes et les formats. La batterie disparaît à 12,55 s quand le point avale la grille, laissant un pad chaleureux et un arpège ascendant qui s'estompent vers 15 s. Les coupes et les coups clés tombent sur la grille des temps.

Son

Le sound design se place par-dessus le morceau, sans batterie supplémentaire :

un whoosh quand le billet arrive en volant ;
de doux tics quand le code se verrouille ;
un impact doux sur le tampon ;
des whooshes sur chaque rideau circulaire et sur la pastille de mise en valeur ;
un bruit sourd quand la valise atterrit ;
un blip qui monte en hauteur quand chaque carte devient rose ;
un carillon quand la dernière carte atterrit ;
un riser vers la plongée et un impact quand le premier panneau s'ouvre ;
des whooshes à chaque balayage de bandes et quand les cartes se rejoignent ;
un riser vers le drop ;
une cloche quand le logo se forme ;
de doux clics sur les puces.
Mixe à environ -14 LUFS avec un pic réel inférieur à -1 dBTP.

Références

Une publicité moderne de lancement d'application en style vectoriel à plat, construite sur la typographie cinétique et une métaphore de voyage : une carte d'embarquement, une valise et des panneaux d'horizon. Elle se termine sur un bloc logo net et centré.

À préparer

Ton logo, idéalement vectoriel ou PNG transparent ; il apparaît en petit sur la carte du billet et se forme à partir d'un point rose dans le bloc final.

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.

Aperçu de la technique « Montée depuis la ligne de base avec clip assorti » — À 0:00 dans la vidéo

Typographie

Montée depuis la ligne de base avec clip assorti

Un surtitre et un titre de trois lignes montent depuis leurs propres lignes de base : chaque ligne s'élève de sa hauteur tandis que l'inset inférieur de son clip-path diminue au même rythme, si bien que la ligne de base reste un bord net et fixe et que rien n'est flouté dans le masque. La première ligne bouge déjà à l'image 0 (sine.in à partir de 88 %), les deux suivantes enchaînent à environ 0,13 s d'écart avec un easing linéaire sur 0,17 s, de sorte que l'ensemble se lit comme un seul geste ; la dernière ligne prend la couleur d'accent. Elles sortent de la même façon vers le haut, dans l'ordre de lecture, chacune disparaissant en 0,1 s.

Quand l’utiliser Ouvrir une promo avec un grand titre empilé qui doit se lire dès la première seconde.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Montée depuis la ligne de base avec clip assorti</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--line) 0 1.6px, transparent 2.2px); background-size: 40px 40px; }
#kicker { position: absolute; left: 110px; top: 650px; font: 800 30px/1 "Manrope"; letter-spacing: 0.16em; color: var(--accent); }
#head { position: absolute; left: 100px; top: 700px; font: 800 200px/192px "Manrope"; letter-spacing: -0.055em; }
.ln { white-space: nowrap; }
.ln span { display: inline-block; padding: 0.12em 0.06em 0.16em; margin: -0.12em -0.06em -0.16em; }
.acc { color: var(--accent); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div id="kicker" class="ln"><span></span></div>
    <div id="head"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const KICKER = "YOUR ONLY TASK";          // example text
const LINES = ["Write", "the", "brief."]; // example text; the last line takes the accent
document.querySelector("#kicker span").textContent = KICKER;
const head = document.getElementById("head");
LINES.forEach((w, i) => {
  const ln = document.createElement("div"); ln.className = "ln";
  const sp = document.createElement("span"); sp.textContent = w; if (i === LINES.length - 1) sp.className = "acc";
  ln.appendChild(sp); head.appendChild(ln);
});
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
const spans = [...head.querySelectorAll(".ln span")];
rise(document.querySelector("#kicker span"), 0.03, 0.12, "none");
rise(spans[0], 0, 0.24, "sine.in", 88); // already moving on frame 0
rise(spans[1], 0.18, 0.18, "none");     // about 0.13 s apart, linear
rise(spans[2], 0.32, 0.17, "none");
sink(document.querySelector("#kicker span"), 3.1, 0.1);
spans.forEach((el, i) => sink(el, 3.15 + i * 0.08, 0.1)); // out upwards in reading order
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Volet circulaire sorti d'une icône avec anneaux de halo » — À 0:01 dans la vidéo

Transition

Volet circulaire sorti d'une icône avec anneaux de halo

La scène suivante est révélée par un clip-path circle centré sur une petite icône de la scène actuelle, et l'icône rétrécit dès que le cercle démarre. Le rayon est animé toutes les deux images à 60 fps (15, 36, 66, 120, 210, 330, 540, 900, 1500 px) : une croissance accélérée qui couvre le cadre en environ 0,3 s. Deux cercles pâles pleins à 1,07 r + 6 et 1,17 r + 12, dans des teintes de l'accent, se trouvent dans la scène sortante juste au-delà du bord, ce qui donne au volet un effet d'onde ; l'icône de la nouvelle scène démarre 35 % plus grande et se stabilise.

Quand l’utiliser Passer d'un détail (une icône, un bouton) à une scène en pleine couleur qui prolonge son idée.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Volet circulaire sorti d'une icône avec anneaux de halo</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#a, #b { position: absolute; inset: 0; }
.card { position: absolute; left: 140px; top: 820px; width: 800px; height: 160px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px rgba(28, 11, 93, 0.14); display: flex; align-items: center; gap: 28px; padding-left: 360px; box-sizing: border-box; font: 800 52px/1 "Manrope"; }
.icon { position: absolute; left: 374px; top: 54px; width: 52px; height: 52px; fill: var(--accent); }
.ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
#r1 { background: color-mix(in srgb, var(--accent) 48%, white); }
#r2 { background: color-mix(in srgb, var(--accent) 22%, white); }
#b { background: radial-gradient(ellipse 80% 70% at 50% 45%, #fd4c9c 0%, #e2187a 100%); clip-path: circle(0px at 540px 900px); }
.icon2 { position: absolute; left: 510px; top: 870px; width: 60px; height: 60px; fill: #fff; }
#title { position: absolute; left: 0; width: 1080px; top: 1060px; text-align: center; font: 800 120px/1 "Manrope"; letter-spacing: -0.05em; color: #fff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="a" class="clip" data-start="0" data-duration="1.4">
    <div class="card"><svg class="icon" viewBox="0 0 24 24"><path d="M8.9 4.6 19.1 11.2a1 1 0 0 1 0 1.6L8.9 19.4A1 1 0 0 1 7.4 18.6V5.4a1 1 0 0 1 1.5-.8Z"/></svg><span id="label"></span></div>
    <div id="r2" class="ring"></div><div id="r1" class="ring"></div>
  </div>
  <div id="b" class="clip" data-start="0.95" data-duration="2.05">
    <svg class="icon2" viewBox="0 0 24 24"><path d="M8.9 4.6 19.1 11.2a1 1 0 0 1 0 1.6L8.9 19.4A1 1 0 0 1 7.4 18.6V5.4a1 1 0 0 1 1.5-.8Z"/></svg>
    <div id="title"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
document.getElementById("label").textContent = "Ticket";  // example text
document.getElementById("title").textContent = "Next.";   // example text
const C = { x: 540, y: 900 }; // the icon's centre: the circle grows from here
const iris = { r: 0 }, b = document.getElementById("b"), r1 = document.getElementById("r1"), r2 = document.getElementById("r2");
const ring = (el, r) => Object.assign(el.style, { width: 2 * r + "px", height: 2 * r + "px", transform: `translate(${C.x - r}px, ${C.y - r}px)` });
const draw = () => {
  b.style.clipPath = `circle(${iris.r}px at ${C.x}px ${C.y}px)`;
  ring(r1, iris.r ? iris.r * 1.07 + 6 : 0);  // two pale rings ride just outside the edge
  ring(r2, iris.r ? iris.r * 1.17 + 12 : 0);
};
draw();
const R = [15, 36, 66, 120, 210, 330, 540, 900, 1500]; // radius every 2 frames at 60 fps
tl.fromTo(iris, { r: 0 }, { keyframes: R.map((r) => ({ r, duration: 2 / 60, ease: "none" })), onUpdate: draw }, 1.0);
tl.fromTo(".icon", { scale: 1, opacity: 1 }, { scale: 0.3, opacity: 0, duration: 4 / 60, ease: "power2.in", transformOrigin: "50% 50%" }, 0.97);
tl.fromTo(".icon2", { scale: 1.35 }, { scale: 1, duration: 0.3, ease: "power2.out", transformOrigin: "50% 50%" }, 1.1);
tl.fromTo("#title", { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, ease: "power3.out" }, 1.45);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Code de destination qui s'embrouille et se fige lettre par lettre » — À 0:00 dans la vidéo

Typographie

Code de destination qui s'embrouille et se fige lettre par lettre

Une carte de billet arrive de la droite avec power3.out, dépasse d'environ 110 px vers la gauche et revient sur sine.inOut, tandis que son code de trois lettres fait défiler des lettres aléatoires quinze fois par seconde (toutes les quatre images à 60 fps). Les lettres se figent une à une, à 0,13 s d'écart, sur le vrai code. Le hasard est un hash à graine du numéro de pas, donc chaque rendu montre les mêmes lettres ; rien ne dépend d'une horloge.

Quand l’utiliser Révéler une destination, un code, un prix ou un nom avec un effet de tableau à palettes.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Code de destination qui s'embrouille et se fige lettre par lettre</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; }
#card { position: absolute; left: 120px; top: 760px; width: 840px; height: 400px; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 34px 70px rgba(28, 11, 93, 0.16); }
.bar { position: absolute; left: 0; top: 0; right: 0; height: 80px; background: var(--accent); }
.from, .to { position: absolute; top: 130px; font: 700 18px/1 "Manrope"; letter-spacing: 0.14em; color: var(--muted); }
.from { left: 50px; } .to { right: 50px; }
.a, .b { position: absolute; top: 160px; font: 800 96px/1 "Manrope"; letter-spacing: 0.06em; }
.a { left: 46px; } .b { right: 46px; text-align: right; }
.line { position: absolute; left: 330px; right: 330px; top: 210px; border-top: 3px dashed var(--line); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="card"><div class="bar"></div><div class="from">FROM</div><div class="to">TO</div><div class="a" id="codeA"></div><div class="b" id="code"></div><div class="line"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
document.getElementById("codeA").textContent = "NOW";  // example codes
const TARGET = "MP4";
const LOCKS = [0.67, 0.8, 0.93]; // each letter locks on its own frame
const RATE = 15;                  // random letters change 15 times a second
const LET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const hash = (n) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); }; // seeded
const el = document.getElementById("code"), p = { t: 0 };
const draw = () => {
  const step = Math.floor(p.t * RATE);
  el.textContent = [...TARGET].map((c, i) => (p.t >= LOCKS[i] ? c : LET[Math.floor(hash(step * 3 + i) * LET.length)])).join("");
};
tl.fromTo(p, { t: 0.2 }, { t: 3, duration: 2.8, ease: "none", onUpdate: draw }, 0.2);
// the card: in from the right, overshoot left, settle
tl.fromTo("#card", { x: 1000 }, { keyframes: [{ x: -110, duration: 0.35, ease: "power3.out" }, { x: 0, duration: 0.37, ease: "sine.inOut" }] }, 0.23);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Pastille de surlignage qui balaie derrière les derniers mots » — À 0:03 dans la vidéo

Typographie

Pastille de surlignage qui balaie derrière les derniers mots

Une ligne blanche sur fond d'accent monte lettre par lettre depuis sa ligne de base (16 ms d'écart, 0,22 s chacune, power3.out). Puis une pastille blanche aux coins arrondis balaie depuis la gauche derrière les derniers mots en 0,18 s (power2.inOut), et un jumeau des mêmes lettres dans la couleur d'accent n'apparaît qu'à l'intérieur de la pastille grâce au même clip : les mots passent de blanc sur couleur à couleur sur blanc exactement là où la pastille est arrivée. La pastille est dimensionnée d'après les lettres mesurées une fois la police chargée.

Quand l’utiliser Souligner la chute d'une phrase sans seconde ligne de texte.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pastille de surlignage qui balaie derrière les derniers mots</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 42%, #fd4c9c 0%, #e2187a 100%); }
.t { position: absolute; top: 880px; font: 800 112px/1 "Manrope"; letter-spacing: -0.045em; color: #fff; white-space: nowrap; }
.t .ch { display: inline-block; white-space: pre; }
#hl { position: absolute; inset: 0; clip-path: inset(0px 1080px 0px 0px); }
#pill { position: absolute; top: 868px; height: 132px; border-radius: 22px; background: #fff; }
#twin { color: var(--accent); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="line" class="t"></div>
    <div id="hl"><div id="pill"></div><div id="twin" class="t"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const TEXT = "We do the rest.", HIGHLIGHT = "the rest."; // example text
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
document.fonts.ready.then(() => {
  const split = (el) => { [...TEXT].forEach((c) => { const s = document.createElement("span"); s.className = "ch"; s.textContent = c; el.appendChild(s); }); return [...el.children]; };
  const line = document.getElementById("line"), twin = document.getElementById("twin");
  const A = split(line), B = split(twin);
  line.style.left = twin.style.left = (1080 - line.offsetWidth) / 2 + "px";
  const i0 = TEXT.indexOf(HIGHLIGHT), a = A[i0], z = A[i0 + HIGHLIGHT.length - 1];
  const x = line.offsetLeft + a.offsetLeft - 16, w = z.offsetLeft + z.offsetWidth - a.offsetLeft + 34;
  Object.assign(document.getElementById("pill").style, { left: x + "px", width: w + "px" });
  A.forEach((ch, i) => rise([ch, B[i]], 0.2 + i * 0.016, 0.22, "power3.out"));
  const hl = document.getElementById("hl"), p = { v: 0 };
  tl.fromTo(p, { v: 0 }, { v: 1, duration: 0.18, ease: "power2.inOut", onUpdate: () => { hl.style.clipPath = `inset(0px ${1080 - x - w * p.v}px 0px ${x}px)`; } }, 0.75);
  window.__timelines = window.__timelines || {};
  window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Cartes d'étapes qui surgissent derrière un objet et s'allument » — À 0:06 dans la vidéo

Données

Cartes d'étapes qui surgissent derrière un objet et s'allument

Chaque étape est une carte blanche qui monte de derrière un objet sombre placé sous elle (y +100 px et scale 0,72 jusqu'au repos en 0,3 s, power2.inOut), attend, puis s'allume en deux temps : d'abord la bordure et le halo extérieur, puis 0,07 s plus tard la pastille d'icône et la puce d'état. Quand la carte suivante démarre, l'ancienne monte de 40 px et s'efface en 0,15 s avec un easing linéaire, si bien que la pile garde une seule carte au premier plan. Une rangée de points et un compteur 'n / total' avancent à chaque allumage ; la période est de 0,58 s par carte.

Quand l’utiliser Montrer une checklist, un parcours d'onboarding ou un pipeline qui se termine étape par étape.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cartes d'étapes qui surgissent derrière un objet et s'allument</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; }
.pc { position: absolute; left: 90px; top: 700px; width: 900px; height: 165px; }
.halo { position: absolute; inset: -19px; border-radius: 46px; border: 2px solid color-mix(in srgb, var(--accent) 42%, white); opacity: 0; }
.body { position: absolute; inset: 0; border-radius: 28px; background: #fff; border: 2px solid var(--line); box-shadow: 0 26px 56px rgba(28, 11, 93, 0.13); }
.on { position: absolute; inset: -2px; border-radius: 28px; border: 3px solid var(--accent); opacity: 0; }
.tile, .tile-on { position: absolute; left: 30px; top: 27px; width: 108px; height: 108px; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.tile { background: color-mix(in srgb, var(--accent) 11%, white); } .tile-on { background: var(--accent); opacity: 0; }
.tile svg, .tile-on svg { width: 50px; height: 50px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile svg { stroke: var(--accent); } .tile-on svg { stroke: #fff; }
.label { position: absolute; left: 166px; top: 0; height: 100%; display: flex; align-items: center; font: 800 52px/1 "Manrope"; letter-spacing: -0.03em; }
.chip { position: absolute; right: 40px; top: 54px; height: 57px; padding: 0 24px; border-radius: 30px; display: flex; align-items: center; font: 700 28px/1 "Manrope"; }
.wait { background: var(--line); color: var(--muted); } .done { background: var(--accent); color: #fff; opacity: 0; }
#case { position: absolute; left: 425px; top: 930px; width: 230px; height: 290px; border-radius: 42px; background: var(--ink); overflow: hidden; }
.strap { position: absolute; left: 0; right: 0; top: 110px; height: 34px; background: var(--accent); }
#prog { position: absolute; left: 0; width: 1080px; top: 1300px; display: flex; justify-content: center; align-items: center; gap: 24px; font: 700 30px/1 "Manrope"; }
#dots { display: flex; gap: 13px; } .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3.5">
    <div id="cards"></div>
    <div id="case"><div class="strap"></div></div>
    <div id="prog"><div id="dots"></div><span id="count"></span></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const ICONS = {"type": "M4 7V4h16v3M9 20h6M12 4v16", "cube": "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16ZM3.3 7 12 12l8.7-5M12 22V12", "note": "M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0M21 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0"};
const STEPS = [["Type", "type"], ["3D", "cube"], ["Sound", "note"]]; // example labels and their icons
const START = [0.2, 0.78, 1.36], ON = [0.62, 1.2, 1.78];               // 0.58 s per card
const svg = (d) => `<svg viewBox="0 0 24 24"><path d="${d}"/></svg>`;
const cards = document.getElementById("cards");
STEPS.forEach(([label, icon], i) => {
  const c = document.createElement("div"); c.className = "pc";
  c.innerHTML = `<div class="halo"></div><div class="body"><div class="on"></div><div class="tile">${svg(ICONS[icon])}</div><div class="tile-on">${svg(ICONS[icon])}</div><div class="label"></div><div class="chip wait">Working</div><div class="chip done">Done</div></div>`;
  c.querySelector(".label").textContent = label;
  cards.appendChild(c);
  tl.fromTo(c, { y: 100, scale: 0.72, opacity: 0 }, { y: 0, scale: 1, opacity: 1, duration: 0.3, ease: "power2.inOut" }, START[i]);
  tl.fromTo(c.querySelectorAll(".on, .halo"), { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "power1.out" }, ON[i] - 0.07); // border first
  tl.fromTo(c.querySelectorAll(".tile-on, .done"), { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "power1.out" }, ON[i]); // then icon and chip
  tl.fromTo(c.querySelector(".wait"), { opacity: 1 }, { opacity: 0, duration: 0.06, ease: "power1.out" }, ON[i]);
  if (i < STEPS.length - 1) tl.fromTo(c, { y: 0, opacity: 1 }, { y: -40, opacity: 0, duration: 0.15, ease: "none", immediateRender: false }, START[i + 1] - 0.02);
});
const dots = document.getElementById("dots"), count = document.getElementById("count"), p = { t: 0 };
STEPS.forEach(() => { const d = document.createElement("div"); d.className = "dot"; dots.appendChild(d); });
const draw = () => {
  const n = ON.filter((a) => p.t >= a).length;
  count.textContent = `${n} / ${STEPS.length}`;
  [...dots.children].forEach((d, k) => { d.style.background = k < n ? "var(--accent)" : "var(--line)"; d.style.transform = `scale(${k === n - 1 ? 1.6 : 1})`; });
};
draw();
tl.fromTo(p, { t: 0 }, { t: 3.5, duration: 3.5, ease: "none", onUpdate: draw }, 0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Volet à bandes obliques entre panneaux plein cadre » — À 0:09 dans la vidéo

Transition

Volet à bandes obliques entre panneaux plein cadre

Un groupe de trois bandes obliques (skewX -18,4 deg : un liseré sombre, une large bande d'accent, un liseré clair) traverse le cadre de droite à gauche en environ 0,2 s sur sine.inOut. Le panneau plein cadre suivant est révélé par un polygon clip-path dont le bord gauche suit le bord arrière des bandes : l'ancien panneau reste visible devant les bandes et le nouveau s'ouvre derrière. Chaque panneau fait ensuite monter son grand nom lettre par lettre depuis la ligne de base (35 ms d'écart).

Quand l’utiliser Parcourir une liste de lieux, de produits ou de formats au rythme du beat.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Volet à bandes obliques entre panneaux plein cadre</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
.pan { position: absolute; inset: 0; overflow: hidden; }
#p0 { background: linear-gradient(180deg, #e9e4ff 0%, #7c6cf2 55%, #1c0b5d 100%); }
#p1 { background: linear-gradient(180deg, #fe9117 0%, #fb2d89 50%, #1c0b5d 100%); }
#p2 { background: linear-gradient(180deg, #2dd4b0 0%, #1c0b5d 70%); }
.name { position: absolute; left: 70px; top: 1500px; font: 800 190px/1.1 "Manrope"; letter-spacing: -0.05em; color: #fff; white-space: nowrap; }
.name span { display: inline-block; white-space: pre; }
#band { position: absolute; left: 0; top: -100px; width: 700px; height: 2120px; display: flex; transform: translateX(2200px) skewX(-18.4deg); }
#band .d { width: 60px; background: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
#band .m { width: 580px; background: var(--accent); }
#band .l { width: 60px; background: color-mix(in srgb, var(--accent) 55%, white); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="p0" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="p1" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="p2" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="band" class="clip" data-start="0" data-duration="3"><div class="d"></div><div class="m"></div><div class="l"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NAMES = ["Vertical", "Wide", "Square"]; // example names
const LEAN = 320; // horizontal shift of the slant over half the frame height (tan 18.4 deg x 960)
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
const band = document.getElementById("band");
const clipAt = (x) => `polygon(${x + LEAN}px 0px, 2600px 0px, 2600px 1920px, ${x - LEAN}px 1920px)`;
["#p0", "#p1", "#p2"].forEach((sel, k) => {
  const pan = document.querySelector(sel), name = pan.querySelector(".name");
  [...NAMES[k]].forEach((c) => { const s = document.createElement("span"); s.textContent = c; name.appendChild(s); });
  const t0 = k * 1.0;
  if (k > 0) {
    pan.style.clipPath = clipAt(2400);
    const w = { x: 2400 };
    tl.fromTo(w, { x: 2400 }, { x: -480, duration: 0.2, ease: "sine.inOut", immediateRender: false, onUpdate: () => {
      band.style.transform = `translateX(${w.x - 700}px) skewX(-18.4deg)`; // the trailing edge is at w.x
      pan.style.clipPath = clipAt(w.x);
    } }, t0 - 0.2);
  }
  [...name.children].forEach((ch, i) => rise(ch, t0 + 0.05 + i * 0.035, 0.26, "power3.out"));
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Point qui avale le cadre et devient la marque » — À 0:12 dans la vidéo

Transition

Point qui avale le cadre et devient la marque

Un point d'accent grandit à partir de la carte centrale (rayon animé toutes les deux images : de 12 à 1150 px en environ 0,3 s, avec deux anneaux de halo pâles) pendant que la mise en page en dessous se réduit à 0,9 sur une page blanche. Puis il rétrécit vite en décélérant (à 260, 125, 90 et 75 px en 0,4 s) en rejoignant la place de la marque, où le cercle devient le carré arrondi de la marque (rx de 50 à 24, de l'accent à l'encre profonde, 0,12 s) et les formes intérieures arrivent en scale. Le nom sort de derrière la marque (power3.out, 0,32 s) à travers un clip placé au centre de la marque, et un fin anneau s'étend et s'efface autour d'elle.

Quand l’utiliser Conclure une promo : tout réduire à un point qui devient le logo.

Afficher le code

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

Autres prompts

Aperçu du prompt « Vidéo de lancement d'app cinétique avec maquette d'interface animée »

Vidéo de lancement d'app cinétique avec maquette d'interface animée

<direction> Réalise une vidéo cinétique de lancement de produit horizontale de 42 secondes en 1920x1080 pour [your app]. Elle montre comment un fondateur crée une vidéo de lancement pour sa startup simplement en discutant dans l'app. Reconstruis l'interface de mon app à partir de mes captures d'écran sous forme de maquette animée propre, faite de formes et de texte, proche de la réalité. Dans cette vidéo, c'est une app sombre bleu marine-violet avec une Live preview à gauche, des onglets Chat / Files / Panels à droite et des boutons d'accent roses. Ne montre jamais les captures comme des images fixes : chaque élément doit bouger. Garde une interface continue sans coupes franches. La caméra avance, panote et recule entre les panneaux pendant qu'un curseur se déplace et clique. Reste sur une grille rythmique de 120 BPM (un temps = 0,5 s) et fais qu'il se passe quelque chose à chaque temps. D'énormes mots cinétiques claquent sur l'interface entre les étapes. La startup du fondateur est une app inventée, par exemple "Pulse — standups your team actually reads" (remplace par la tienne). Évite les coupes franches, les captures statiques, tout ce qui est coupé aux bords du cadre, et le texte ou les barres de surlignage qui débordent sur les colonnes voisines. </direction> <structure> 1) Accroche, 0–3 s : "YOUR LAUNCH VIDEO." puis "IN ONE CHAT." en énorme typographie, coupés mot par mot sur le rythme. "CHAT." se transforme en onglet Chat et la caméra recule sur toute la fenêtre de l'app. 2) Références, 3–8 s : un lien "pulse-demo.app" est collé dans le chat. Un pitch deck PDF et un logo arrivent en volant comme cartes de pièces jointes et se calent en place. Gros mot "DROP". 3) Prompt, 8–13 s : le fondateur tape "Make a 30-second launch video for Pulse, kinetic style, our colours" lettre par lettre, puis le curseur appuie sur envoyer. Gros mot "ASK". 4) Plan, 13–18 s : l'agent répond par un plan en cinq étapes sous forme de liste de contrôle. Les étapes apparaissent et se cochent une à une, et la caméra recule un peu à chaque nouvelle ligne pour que le cadre ne paraisse jamais vide. Gros mot "PLAN". 5) Esquisse et Go, environ 18–21 s : une esquisse grise filaire du promo remplit rapidement la Live preview, avec l'étiquette "Live preview" et la barre de lecture visibles. Le fondateur clique sur Go, et un fond rose grandit depuis le bouton pressé et inonde l'écran derrière un énorme "GO!". 6) Live, environ 21–31 s : des lignes d'état s'affichent dans le chat ("Picking fonts", "Animating the title", "Writing a soundtrack") pendant que l'esquisse devient le promo terminé. La caméra avance jusqu'à ce que le promo remplisse le cadre. Vers 27 s, le titre du promo "Standups your team actually reads." glisse en place, et une barre de surlignage vert citron se dessine sous "actually reads.". Une colonne de statistiques se tient à côté avec "92%" et "updates read". Gros mot "LIVE". 7) Export, environ 31–37 s : la caméra recule vers l'app. Le bouton Export et les onglets sont entièrement visibles pendant que l'export s'exécute et se termine. Gros mot "DONE". 8) Carte de fin, environ 37–42 s : le logo de [your app] et "Live on [launch site] today" (remplace par le tien), qui se posent sur le dernier temps et tiennent jusqu'à la fin. </structure> <composition> Palette : interface sombre bleu marine-violet, boutons d'accent rose magenta et l'inondation rose, un dégradé rose-orange sur le logo et le vert citron comme couleur de surlignage dans le promo de démonstration. Les mots cinétiques sont énormes, gras, en majuscules, sans empattement avec les polices de la marque et occupent la majeure partie de la largeur du cadre. Réduis légèrement un mot long plutôt que de le laisser se faire couper. Garde des marges de sécurité partout. Dans les plans larges, toute la fenêtre de l'app est dans le cadre. Dans le chat, le champ de saisie est entièrement visible. Dans la scène d'export, le bouton Export et les onglets sont dans le cadre. Dans le promo, le titre et la barre citron restent dans leur propre colonne avec de la marge. La barre correspond exactement à la largeur de ses mots et ne chevauche jamais la colonne "92%". </composition> <techniques> Une caméra virtuelle continue avec des avancées, panoramiques et reculs fluides en ease-in-out entre les panneaux, et sans coupes. Le curseur glisse vers ses cibles et clique avec une petite réduction d'échelle à l'appui. Les mots d'accroche entrent un par temps. Les cartes de pièces jointes arrivent en volant et se calent avec un léger dépassement. Le texte du chat se tape lettre par lettre. Les éléments de la liste apparaissent et se cochent sur des temps successifs. L'esquisse grise se remplit vite puis se transforme élément par élément en promo terminé. L'inondation rose sous "GO!" grandit radialement depuis le bouton cliqué. Les gros mots claquent avec un rapide impact de réduction d'échelle sur l'interface et repartent vite au temps suivant. Chaque temps a un événement visible : un mot, un clic, une carte, une coche, une ligne d'état ou un mouvement de caméra. </techniques> <music> Un morceau électronique énergique à 120 BPM, où chaque coupe, chaque claquement de mot et chaque événement de l'interface sont calés sur le rythme. Il monte pendant les étapes de préparation, s'élève vers "GO!", porte la construction en direct et se résout par un dernier coup sur la carte de fin. </music> <sound> Des clics de clavier qui tombent exactement sur chaque lettre tapée. Des clics de souris à chaque appui du curseur. Des whooshes sur les mouvements de caméra et l'arrivée des cartes de pièces jointes, et des claquements quand les cartes se posent. De doux tics pour les étapes de la liste et les lignes d'état. Un impact percutant sous chaque gros mot, un riser vers "GO!" et un dernier coup sur la carte de fin. Garde la musique sous les effets pour que les clics et les impacts se détachent clairement. </sound> <references> Bandes-annonces cinétiques de lancement d'apps qui reconstruisent une interface SaaS en maquette animée nette avec un seul mouvement de caméra continu, dans le style des promos de jour de lancement de produit. </references>

Utilisé 2 fois

Aperçu du prompt « Promo d'app soft-tech : mur d'icônes, téléphone et studio 3D »

Promo d'app soft-tech : mur d'icônes, téléphone et studio 3D

placeholder

Aperçu du prompt « Un point rose à travers un collage de gravures »

Un point rose à travers un collage de gravures

placeholder

Utilisé 2 fois

Les cookies essentiels mémorisent vos réglages du site. Avec votre accord, Google Analytics nous aide à comprendre comment Motion Fab est utilisé. Vous pouvez modifier votre choix en pied de page.

Vos choix de confidentialité au titre des lois des États américains applicables en la matière. Politique de confidentialité