votre motion designer IA

FR

Ouvrir l’app bêta

Simple Motion

Explication de produit façon recette de boisson dessinée à la main

Une vidéo explicative carrée dessinée à la main qui montre les étapes d'un produit comme une boisson dans un verre : glaçons, trois bouteilles, une cuillère et un zeste.

Publié 10 novembre 2026

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 motion graphic carré de 30 secondes (1080x1080, 30 ips) avec un fond musical lounge léger, des effets sonores ludiques sur chaque action et sans voix. C'est une vidéo explicative « recette » dessinée à la main pour mon produit : ses étapes sont montrées comme une boisson préparée pas à pas dans un verre. C'est une seule scène illustrée continue, sans coupes, et tout change sur place. Le style est une illustration 2D plate sur une page lavande-blanc pâle, avec des contours d'encre profonde qui « bouillonnent » comme dans l'animation dessinée à la main et des capitales de dessin animé épaisses façon sticker. Remplace chaque mot entre guillemets ci-dessous par les propres mots de mon produit, en gardant à peu près la même longueur pour que la mise en page tienne. Évite les coupes, les mouvements de caméra, les ombrages ou dégradés au-delà des aplats, et la voix off.

Structure

Le rythme est calme et régulier. L'intro est rapide et rebondissante, chaque versement dure un régulier 5 s, le mélange et le zeste vont un peu plus vite, et la finale tient 3 s. Chaque changement de carte tombe sur un temps de la musique à 120 BPM : 6,0, 11,0, 16,0, 21,0, 24,5 et 27,0 s.

0–2,5 s, titre : « YOUR BRAND » (à remplacer par ta marque) est disposé en grand au centre, sur environ 920 px de large. À partir de 0,15 s, ses lettres s'estampillent une à une à leur place pendant 0,83 s. Chacune commence à 10 % de taille, 22 px plus bas et inclinée de ±8–14°, et atterrit en 0,36 s avec un léger dépassement (back.out 1.7). À 1,4 s, une petite ligne, « what your product is », apparaît en fondu dessous, et disparaît à 2,45 s.
2,5–3,6 s, passage : le titre monte de 365 px et se réduit à 58 % en 0,8 s (power3.inOut) pour devenir l'en-tête. Pendant ce temps, à partir de 2,87 s, le verre se dessine tout seul comme un croquis à la plume : paroi gauche, paroi droite, ellipse du bord, puis courbe du fond, environ 0,4 s en tout. Son remplissage apparaît ensuite en fondu (0,28 s), et le sous-titre de l'en-tête apparaît sous le titre.
3,6–6,0 s, étape 1 : la carte entre avec une inclinaison de 4° et un fondu rapide (0,15 s), et sa grande valeur s'estampille toute seule. La carte indique « STEP 01 », « PICK », « TEMPLATE » et « vertical, horizontal or square ». Le suivi apparaît en fondu avec le premier cercle actif. Trois glaçons tombent d'au-dessus du cadre à 0,35 s d'intervalle. Chacun tombe avec gravité (power2.in, environ 0,3 s), rebondit d'environ 140 px, fait un petit saut de 20 px et se stabilise : deux au fond et un dessus. Trois petits traits d'étincelles jaillissent au-dessus de chaque glaçon quand il passe le bord. Chaque atterrissage remplit un tiers de la barre de progression de la carte et ajoute un mot du statut « three short words ».
6,0–21,0 s, étapes 2–4 : trois versements de 5 s chacun, tous sur le même modèle. Les cartes indiquent « STEP 02 / SAY / KINETIC TYPE / tell the chat what to show », puis « STEP 02 / SAY / SHAPES / the agent builds the animation », puis « STEP 02 / SAY / SOUND / music and sound effects to the rhythm ». Une bouteille glisse depuis la gauche (0,23 s) et se tient debout. Elle s'incline ensuite à 115° sur un petit arc, un peu vers le haut puis vers le bas jusqu'au point de versement (0,37 s), et verse un filet courbe dans le verre. Les bouteilles sont lavande, puis roses, puis encre profonde. Chacune a une étiquette blanche avec mon logo en petite icône de carré arrondi, un mot (« TYPE », « SHAPES », « SOUND ») et une petite ligne (« kinetic », « 3D effects », « music »). Un repère cible gris (« 01 », puis « 02 », puis « 03 ») apparaît à côté du verre avec une ligne en pointillés qui le traverse. La boisson monte jusqu'à ce repère en 2 s (sine.inOut), les glaçons flottent avec elle, et des gouttelettes d'éclaboussure sautent là où le filet tombe. La boisson commence blanche et claire, devient rose au deuxième versement, puis magenta profond (rose mélangé à l'encre profonde) au troisième, chaque couleur se fondant sur environ 1,3 s. La barre de progression se remplit et « live preview » se tape tout seul en dix étapes. Ensuite le repère devient rose, le haut du filet se détache et tombe, et la bouteille se rebascule et glisse hors champ.
21,0–24,5 s, étape 5 : la carte indique « STEP 03 / REFINE / IN WORDS / “bigger”, “slower”, “another colour” ». Une cuillère de bar légère à boule tombe avec un ease-out rapide. Elle se balance de 8° d'avant en arrière sur un cycle de 0,8 s pendant que les glaçons se bousculent et s'assombrissent, puis elle ressort. La barre se remplit par pas de 4 images pendant que « live preview » se tape.
24,5–27,0 s, étape 6 : la carte indique « STEP 03 / MP4 / EXPORT / download the MP4 ». Une boucle de zeste d'orange surgit au-dessus du verre, se tord et s'écrase pendant environ 0,8 s tandis que des gouttelettes orange tombent. Elle glisse ensuite sur le bord (0,5 s, power2.inOut) pendant que « try it free » finit de se taper.
27,0–30 s, finale : la carte se remonte comme « YOUR TAGLINE / OPEN APP / YOURSITE.COM / pick · describe · refine ». Sept courts traits roses et orange jaillissent autour du verre (0,16 s) et continuent de « respirer » doucement. Le verre grandit de 4 % en 0,6 s et tient jusqu'à la fin.

Composition

Couleurs :

Page : lavande-blanc pâle (#FAF9FF).
Contours : encre profonde (#1C0B5D), environ 3 px avec des extrémités rondes.
Verre : lavande (#F0EDFF) avec une base teintée de violet.
Glaçons : carrés arrondis, blancs à 40 % sur ce qui est derrière, avec une ligne de coin intérieure.
Cartes : blanches avec une douce ombre décalée lavande.
Orange (#FE9117) : la garniture et la moitié des traits de la finale.
Typographie :
Police d'affichage : capitales de dessin animé épaisses (quelque chose comme Lalezar) posées comme des stickers. La face est rose (#FB2D89), avec un contour d'encre profonde derrière et une extrusion violette (#7C6CF2) décalée vers le bas à gauche.
Petit texte : une écriture manuscrite d'imprimerie amicale (quelque chose comme Playpen Sans), gris-violet atténué (#6B6385) pour le texte courant et rose pour les étiquettes.
Mise en page après l'intro :
En-tête : en haut au centre, environ 540 px de large, avec une petite ligne dessous : « first benefit · second benefit · third benefit ».
Verre : un verre court conique à gauche du centre, environ 290 px de large, bord à y 457 et base à y 797.
Carte d'info : à droite, 390x248 px avec des coins de 14 px et une bordure d'encre profonde. De haut en bas elle contient un petit chapeau rose, la grande valeur en lettres sticker, un titre en capitales sombres, une ligne manuscrite et une barre de progression en pilule avec un court mot de statut à sa droite.
Suivi : six étapes le long du bas. Les cercles font 43 px de large et sont espacés de 156 px sur un rail fin, avec de petites étiquettes en petites capitales dessous : « TEMPLATE », « TYPE », « SHAPES », « SOUND », « REFINE », « EXPORT ».

Techniques

Lignes qui bouillonnent : chaque ligne dessinée reçoit un léger tremblement de 1–2 px qui change toutes les 4 images, sur toute la pièce, comme un déplacement de turbulence sur les lignes.
Remontage de la carte : à la première image de chaque étape, seule la nouvelle grande valeur s'affiche pendant une image, puis la carte revient. La grande valeur s'estampille toute seule à partir de 72 % de taille avec un dépassement back.out.
Frappe : les mots de statut se tapent tout seuls par étapes.
Suivi, étape en cours : son cercle a un anneau d'encre profonde, un point rose et une étiquette rose, et il « respire » entre 100 % et 112 % chaque seconde.
Suivi, étape terminée : environ 0,1 s avant la carte suivante, son cercle se remplit de rose et une coche blanche se dessine en 0,17 s. Son étiquette devient encre profonde, et le rail vers le cercle suivant se remplit de rose en 0,37 s.
Suivi, étapes à venir : elles restent atténuées avec un petit point gris.

Musique

Un instrumental lounge-pop chaleureux et détendu à 120 BPM en mode majeur : batterie aux balais, contrebasse ronde, vibraphone, cordes en pizzicato, claquements de doigts et un peu de shaker. Garde-le épuré, sans mélodie principale, pour qu'il reste sous les effets. Il s'ouvre avec quelques notes pincées de vibraphone et de pizzicato sans batterie, et une basse douce entre à 2 s. Le groove complet aux balais avec basse « walking » tombe exactement sur la première carte de versement à 6,0 s. Il reste stable pendant les versements, le mélange et le zeste, place un accord de clôture à 28,0 s quand le verre terminé se pose, et résonne jusqu'à la fin. Fais-le d'exactement 30 s, mixé à environ -14 LUFS avec un true peak sous -1 dBTP.

Son

Pas de voix. Chaque effet tombe sur son image, nettement au-dessus de la musique ; la musique n'a jamais besoin de monter pour lui faire de la place.

Titre : un pop doux pour chaque lettre, montant un peu en hauteur et panoramiqué de gauche à droite à mesure que le mot se construit.
Passage : un whoosh doux sous la montée du titre et un léger grattement de crayon pour chaque trait pendant que le verre se dessine.
Cartes : un claquement de papier et un bruit sourd doux chaque fois qu'une carte est distribuée et que son grand mot s'estampille.
Atterrissages des glaçons : un choc dur et bref du glaçon contre le verre pour chaque cube, avec deux ou trois contacts à quelques millisecondes d'écart et un bruit sourd grave sous la chute. Plus doux pour le rebond et plus petit pour le dernier saut, chaque coup bien distinct de la musique.
Bouteilles : un whoosh doux quand chaque bouteille glisse et à nouveau quand elle s'incline.
Versements : chacun nettement audible et différent. D'abord un filet clair pétillant et éclaboussant qui cogne les glaçons, puis un versement plus plein en glou-glous rapides, puis un sombre et sirupeux en glou-glous lents et profonds. Donne à chaque versement du corps dans la plage 1–4 kHz, où se trouvent le filet et la poche d'air résonnante du verre, de sorte qu'il ressorte d'environ 8 dB par rapport aux secondes alentour. Garde-les propres : surtout le verre qui résonne et les bulles, peu de souffle.
Autour de chaque versement : la hauteur de la poche d'air monte d'un versement à l'autre à mesure que le verre se remplit, et quelques dernières gouttes tombent après chacun. La musique baisse d'environ 5 dB sous chaque versement et revient doucement, et un whoosh suit la bouteille à sa sortie.
Suivi : un doux carillon de confirmation à deux notes chaque fois qu'une étape est cochée, un peu plus fort pour la dernière.
Cuillère : un tintement métallique quand elle tombe, des glaçons qui cognent le verre à chaque bout de son balancement et un whoosh quand elle ressort.
Zeste : un pincement quand il surgit, trois fines brumisations pendant qu'il se tord et un léger tapotement quand il se pose sur le bord.
Finale : un carillon brillant avec l'éclat des traits, sur un léger scintillement cristallin jusqu'à la fin.
Mixage final : environ -14 LUFS, true peak sous -1 dBTP.

Références

Animation cel dessinée à la main aux lignes qui bouillonnent, vidéos explicatives d'apps plates façon sticker et illustrations de recettes de cocktails où chaque ingrédient représente une fonctionnalité.

À préparer

Ton logo ou l'icône de ton app, une marque carrée simple qui reste lisible en petit ; elle apparaît sur les étiquettes blanches des trois bouteilles.

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 « Tremblement des traits dessinés à la main » — À 0:16 dans la vidéo

Texture

Tremblement des traits dessinés à la main

Chaque trait dessiné vacille d'un ou deux pixels et se fixe sur un nouveau tremblement toutes les 4 images, comme dans l'animation dessinée à la main où chaque dessin est repassé. Un filtre SVG (feTurbulence avec baseFrequency 0.016, une octave, puis feDisplacementMap avec scale 3.6) s'applique aux contours, et la timeline en pause fait avancer la graine de turbulence toutes les 4/30 s, de sorte que le tremblement est navigable et tombe sur des images entières.

Quand l’utiliser Pour donner aux dessins vectoriels plats, aux contours et aux titres d'affichage un côté carnet de croquis fait main.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tremblement des traits dessinés à la main</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg width="0" height="0" style="position:absolute"><filter id="boil" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence id="boilNoise" type="fractalNoise" baseFrequency="0.016" numOctaves="1" seed="1" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="3.6" xChannelSelector="R" yChannelSelector="G"/></filter></svg>
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 40)" filter="url(#boil)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
const DURATION = 4;
const tl = gsap.timeline({ paused: true });
// Boil: a new noise seed every 4 frames at 30 fps (7.5 drawings a second, whole frames each).
for (let k = 0; k * 4 / 30 < DURATION; k++) tl.set("#boilNoise", { attr: { seed: 1 + (k % 9) } }, k * 4 / 30);
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 « Lettres autocollants qui surgissent une à une » — À 0:00 dans la vidéo

Typographie

Lettres autocollants qui surgissent une à une

Un titre épais est composé en entier, puis chaque lettre se tamponne à sa place : à partir de scale 0.1, 22 px plus bas et inclinée (en alternance de -14 à +12 degrés) jusqu'au repos en 0.36 s avec back.out(1.7), une lettre toutes les 0.14 s. Chaque lettre est un autocollant : remplissage rose, un contour d'encre sombre derrière avec text-stroke sur ::before, et une extrusion violette décalée vers le bas à gauche sur ::after.

Quand l’utiliser Pour une révélation de titre ludique qui se lit lettre par lettre sans déplacer la mise en page du mot.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lettres autocollants qui surgissent une à une</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#word { position: absolute; left: 0; right: 0; top: 440px; text-align: center; font: 176px/1 "Lalezar", sans-serif; letter-spacing: -4px; white-space: nowrap; --sw: 7px; --sd: 7px; --ssw: 2.6px; }
.pop { position: relative; display: inline-block; color: #FB2D89; isolation: isolate; }
.pop::before, .pop::after { content: attr(data-ch); position: absolute; left: 0; top: 0; }
.pop::before { z-index: -1; color: #1C0B5D; -webkit-text-stroke: var(--sw) #1C0B5D; }   /* outline, behind the fill */
.pop::after { z-index: -2; transform: translate(calc(-1 * var(--sd)), var(--sd)); color: #7C6CF2; -webkit-text-stroke: var(--ssw) #1C0B5D; } /* extruded depth */
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <div id="word" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
const TEXT = "HELLO";            // the word
const START = 0.15, STAGGER = 0.14;   // first letter, gap between letters (s)
const word = document.getElementById("word");
for (const ch of TEXT) { const s = document.createElement("span"); s.className = "pop"; s.dataset.ch = ch; s.textContent = ch; word.appendChild(s); }
const tl = gsap.timeline({ paused: true });
gsap.utils.toArray("#word .pop").forEach((el, i) => {
  const t0 = START + i * STAGGER, tilt = [-14, 10, -8, 12, -10, 8, -12][i % 7];
  gsap.set(el, { opacity: 0 });
  tl.set(el, { opacity: 1 }, t0);
  tl.fromTo(el, { scale: 0.1, y: 22, rotation: tilt }, { scale: 1, y: 0, rotation: 0, duration: 0.36, ease: "back.out(1.7)", immediateRender: true }, t0);
});
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 « Titre qui monte pour devenir l'en-tête » — À 0:02 dans la vidéo

Mise en page

Titre qui monte pour devenir l'en-tête

Le titre d'ouverture reste au centre du cadre avec une petite ligne dessous ; la ligne s'efface en 0.16 s, puis le titre monte de 365 px et rétrécit à 0.576 en 0.8 s avec power3.inOut, symétrique autour de son milieu, et devient l'en-tête. Un nouveau sous-titre en trois parties apparaît dessous en 0.4 s à l'arrivée, si bien que l'intro passe dans la mise en page sans coupure.

Quand l’utiliser Quand une carte d'intro doit devenir l'en-tête permanent d'un contenu explicatif.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titre qui monte pour devenir l'en-tête</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#titleBox { position: absolute; left: 40px; top: 378px; width: 1000px; height: 220px; }
#title { position: absolute; left: 0; width: 1000px; top: 36px; text-align: center; font: 176px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 3px #1C0B5D; }
#intro, #sub { position: absolute; left: 0; width: 1080px; text-align: center; font-family: "Playpen Sans", sans-serif; color: #6B6385; }
#intro { top: 586px; font-size: 28.5px; }
#sub { top: 181px; font-size: 24px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="titleBox" class="clip" data-start="0" data-duration="4"><div id="title">BIG IDEA</div></div>
  <div id="intro" class="clip" data-start="0" data-duration="4">a short line</div>
  <div id="sub" class="clip" data-start="0" data-duration="4">first part · second part · third part</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo("#intro", { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.24, ease: "power1.out" }, 0.3);
tl.to("#intro", { opacity: 0, duration: 0.16, ease: "power1.in" }, 1.35);
// The move: 0.8 s, power3.inOut, to the header place and size.
tl.fromTo("#titleBox", { y: 0, scale: 1 }, { y: -365, scale: 0.576, duration: 0.8, ease: "power3.inOut" }, 1.4);
tl.fromTo("#sub", { opacity: 0 }, { opacity: 1, duration: 0.4, ease: "power1.out" }, 2.1);
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 « Contour qui se dessine, puis se remplit » — À 0:03 dans la vidéo

Formes

Contour qui se dessine, puis se remplit

Un objet apparaît comme un dessin : ses tracés de contour se dessinent avec stroke-dashoffset en séquence (paroi gauche 0.17 s, paroi droite 0.14 s à partir de +0.10 s, bord 0.20 s à partir de +0.20 s, fond 0.17 s à partir de +0.23 s, power1.inOut), et seulement ensuite le remplissage apparaît en 0.28 s. Le dash array vaut la longueur du tracé plus 24 et l'offset commence 12 au-delà de la fin, pour que les extrémités arrondies ne laissent pas de point avant le début du trait.

Quand l’utiliser Pour introduire un objet dessiné comme si un stylo l'esquissait, avant qu'il reçoive couleur et contenu.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contour qui se dessine, puis se remplit</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <g id="fills"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/></g>
    <path id="l" class="ink" d="M209,461 L234,786"/><path id="r" class="ink" d="M495,461 L470,786"/>
    <path id="rim" class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path id="b" class="ink" d="M234,786 Q352,808 470,786"/>
  </g></svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const START = 0.4;
const drawOn = (id, t0, dur) => {
  const el = document.getElementById(id), L = el.getTotalLength();
  tl.fromTo(el, { strokeDasharray: L + " " + (L + 24), strokeDashoffset: L + 12 }, { strokeDashoffset: 0, duration: dur, ease: "power1.inOut", immediateRender: true }, t0);
};
drawOn("l", START, 0.17);
drawOn("r", START + 0.1, 0.14);
drawOn("rim", START + 0.2, 0.2);
drawOn("b", START + 0.23, 0.17);
tl.fromTo("#fills", { opacity: 0 }, { opacity: 1, duration: 0.28, ease: "power1.out", immediateRender: true }, START + 0.4);
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 « Carte d'étape remontée avec valeur tamponnée » — À 0:06 dans la vidéo

Transition

Carte d'étape remontée avec valeur tamponnée

Chaque nouvelle étape remonte la carte d'information au lieu de l'enchaîner en fondu : à l'image de l'étape, la carte a disparu et seule la nouvelle grande valeur s'affiche, à scale 0.72 ; la valeur rebondit à pleine taille en 0.3 s (back.out(2.6)) tandis que la carte revient d'une inclinaison de 4 degrés, scale 0.965 et opacité nulle en 0.15 s (power2.out). L'ancien contenu disparaît à cette même image, rien ne traîne.

Quand l’utiliser Pour les explications pas à pas où chaque nouvelle étape doit donner l'impression d'une carte fraîchement posée sur la table.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carte d'étape remontée avec valeur tamponnée</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#card, #bigs { position: absolute; left: 345px; top: 416px; width: 390px; height: 248px; }
#card .frame { position: absolute; inset: 0; border: 3px solid #1C0B5D; border-radius: 14px; background: #FFFFFF; box-shadow: 7px 8px 0 #F0EDFF; }
.pane { position: absolute; inset: 0; opacity: 0; }
.kicker { position: absolute; left: 27px; top: 32px; font: 17.5px/1 "Playpen Sans", sans-serif; color: #FB2D89; }
.name { position: absolute; left: 29px; top: 135px; font: 47px/1 "Lalezar", sans-serif; color: #1C0B5D; }
.note { position: absolute; left: 29px; top: 183px; font: 17.5px/1.2 "Playpen Sans", sans-serif; color: #6B6385; }
.big { position: absolute; left: 27px; top: 58px; font: 76px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 2.5px #1C0B5D; opacity: 0; transform-origin: 30% 55%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="card" class="clip" data-start="0" data-duration="4"><div class="frame"></div>
    <div class="pane" id="p0"><div class="kicker">"STEP 01"</div><div class="name">"FIRST THING"</div><div class="note">"a short note about it"</div></div>
    <div class="pane" id="p1"><div class="kicker">"STEP 02"</div><div class="name">"NEXT THING"</div><div class="note">"another short note"</div></div>
  </div>
  <div id="bigs" class="clip" data-start="0" data-duration="4"><div class="big" id="b0">GO</div><div class="big" id="b1">NOW</div></div>
</div>
<script>
const STEPS = [0.6, 2.2];           // when each step arrives (s)
const tl = gsap.timeline({ paused: true });
gsap.set("#card", { opacity: 0 });
STEPS.forEach((s, i) => {
  tl.fromTo("#card", { opacity: 0, rotation: 4, scale: 0.965 }, { opacity: 1, rotation: 0, scale: 1, duration: 0.15, ease: "power2.out", immediateRender: false }, s);
  tl.set("#p" + i, { opacity: 1 }, s);
  tl.set("#b" + i, { opacity: 1 }, s);
  tl.fromTo("#b" + i, { scale: 0.72 }, { scale: 1, duration: 0.3, ease: "back.out(2.6)", immediateRender: false }, s);
  if (i > 0) { tl.set("#p" + (i - 1), { opacity: 0 }, s); tl.set("#b" + (i - 1), { opacity: 0 }, s); }
});
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 « Suivi d'étapes : pulsation, coche et remplissage du rail » — À 0:05 dans la vidéo

Données

Suivi d'étapes : pulsation, coche et remplissage du rail

Une rangée de cercles d'étapes sur un rail. Le cercle de l'étape en cours respire de 1 à 1.12 et retour toutes les 1.03 s (moitiés sine.inOut de 0.515 s), avec son point et son libellé dans la couleur d'accent. Quand l'étape est terminée, le cercle se remplit de rose, une coche blanche se dessine en 0.17 s, le libellé fonce, et 0.03 s plus tard le rail vers le cercle suivant se remplit en 0.37 s (power1.inOut) pendant que le cercle suivant commence à respirer.

Quand l’utiliser Pour montrer la progression dans une séquence d'étapes, dans toute explication ou tutoriel.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Suivi d'étapes : pulsation, coche et remplissage du rail</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.rail { stroke: rgba(107, 99, 133, 0.3); stroke-width: 3; stroke-linecap: round; }
.railOn { stroke: #FB2D89; stroke-width: 3.4; stroke-linecap: round; }
.ring { fill: #FFFFFF; stroke: rgba(107, 99, 133, 0.3); stroke-width: 2.6; }
.dot { fill: rgba(107, 99, 133, 0.62); }
.done { fill: #FB2D89; stroke: #1C0B5D; stroke-width: 2.8; opacity: 0; }
.check { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#labels { position: absolute; inset: 0; }
.lbl { position: absolute; top: 580px; width: 200px; margin-left: -100px; text-align: center; font: 18px/1.2 "Playpen Sans", sans-serif; color: rgba(107, 99, 133, 0.62); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080" id="tracker"></svg>
  <div id="labels" class="clip" data-start="0" data-duration="5"></div>
</div>
<script>
const LABELS = ["FIRST", "SECOND", "THIRD", "FOURTH"];
const X = LABELS.map((_, i) => 306 + i * 156), Y = 540, R = 21.5;
const STARTS = [0.4, 1.6, 2.8, 4.0], DONE = [1.5, 2.7, 3.9];   // each step starts, and ends (s)
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("tracker");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
for (let i = 0; i < X.length - 1; i++) {
  el("line", { class: "rail", x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const on = el("line", { class: "railOn", id: "on" + i, x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const len = X[i + 1] - X[i] - 2 * R - 7; on.style.strokeDasharray = len + " " + len; on.style.strokeDashoffset = len; on.dataset.len = len;
}
X.forEach((x, i) => {
  const n = el("g", { transform: "translate(" + x + " " + Y + ")" }, svg), g = el("g", { id: "n" + i }, n);
  el("circle", { class: "ring", r: R, id: "ring" + i }, g);
  el("circle", { class: "done", r: R, id: "done" + i }, g);
  el("circle", { class: "dot", r: 5.5, id: "dot" + i }, g);
  const ck = el("path", { class: "check", id: "ck" + i, d: "M-8.5,0.5 L-2.5,6.5 L8.5,-6" }, g); ck.style.strokeDasharray = "28 28"; ck.style.strokeDashoffset = 28;
  const l = document.createElement("div"); l.className = "lbl"; l.id = "l" + i; l.style.left = x + "px"; l.textContent = LABELS[i]; document.getElementById("labels").appendChild(l);
});
const tl = gsap.timeline({ paused: true });
STARTS.forEach((s, i) => {
  tl.set("#ring" + i, { stroke: "#1C0B5D" }, s);
  tl.set("#dot" + i, { fill: "#FB2D89" }, s);
  tl.set("#l" + i, { color: "#FB2D89" }, s);
  const end = DONE[i] ?? 5, cycles = Math.max(1, Math.floor((end - s) / 1.03));
  tl.fromTo("#n" + i, { scale: 1, svgOrigin: "0 0" }, { scale: 1.12, svgOrigin: "0 0", duration: 0.515, ease: "sine.inOut", yoyo: true, repeat: cycles * 2 - 1, immediateRender: false }, s);
  if (DONE[i] === undefined) return;
  tl.set("#n" + i, { scale: 1 }, end);
  tl.set("#done" + i, { opacity: 1 }, end);
  tl.set("#dot" + i, { opacity: 0 }, end);
  tl.fromTo("#ck" + i, { strokeDashoffset: 28 }, { strokeDashoffset: 0, duration: 0.17, ease: "power1.out", immediateRender: false }, end);
  tl.set("#l" + i, { color: "#1C0B5D" }, end);
  const on = document.getElementById("on" + i);
  tl.fromTo(on, { strokeDashoffset: on.dataset.len }, { strokeDashoffset: 0, duration: 0.37, ease: "power1.inOut", immediateRender: false }, end + 0.03);
});
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 « Versement qui remplit un verre » — À 0:13 dans la vidéo

Formes

Versement qui remplit un verre

Une bouteille glisse dans le cadre, s'incline à 115 degrés sur un petit arc (monte de 18 px, puis descend au point de versement, 0.37 s), et un filet se dessine depuis le goulot le long d'une courbe quadratique jusqu'à la boisson en 0.17 s. Le niveau monte avec sine.inOut sur 2 s tandis que la couleur se fond dans la nouvelle en environ 1.3 s ; des gouttelettes d'éclaboussure sautent au-dessus de la surface là où le filet tombe. À la fin, le haut du filet se détache et tombe en 0.2 s (power2.in) pendant que la bouteille se redresse. Tout est calculé à partir du temps dans un seul setter, donc n'importe quelle image peut être rendue seule.

Quand l’utiliser Pour les recettes, les mélanges ou les métaphores de remplissage : tout ce qui se verse dans un récipient é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>Versement qui remplit un verre</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/>
    <path id="liq" stroke-width="2"/><ellipse id="top" stroke-width="2"/>
    <g id="drops"><circle r="3"/><circle r="4.6"/><circle r="3"/><circle r="4.6"/></g>
    <path id="sOut" fill="none" stroke="#1C0B5D" stroke-width="10.5" stroke-linecap="round"/><path id="sIn" fill="none" stroke="#FB2D89" stroke-width="6.4" stroke-linecap="round"/>
    <path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/>
    <g id="bottle"><path d="M-44,-12 Q-44,-27 -32,-34 Q-12,-46 -12,-62 L-12,-121 L12,-121 L12,-62 Q12,-46 32,-34 Q44,-27 44,-12 L44,123 Q44,135 32,135 L-32,135 Q-44,135 -44,123 Z" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3" stroke-linejoin="round"/><rect x="-17.5" y="-135" width="35" height="15" rx="3" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3"/><rect x="-36" y="20" width="73" height="75" rx="6" fill="#FFFFFF" stroke="#1C0B5D" stroke-width="2.6"/></g>
  </g></svg>
</div>
<script>
const FROM = "#FFFFFF", TO = "#FB2D89";   // drink before and after this pour
const LEVEL0 = 750, LEVEL1 = 621;            // surface y before and after
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v)), lerp = (a, b, p) => a + (b - a) * p;
function kf(track, t) { if (t <= track[0][0]) return track[0][1]; for (let i = 1; i < track.length; i++) { const [t1, v1, e] = track[i]; if (t <= t1) { const [t0, v0] = track[i - 1], p = (t - t0) / (t1 - t0); return v0 + (v1 - v0) * (e ? ease(e)(p) : p); } } return track[track.length - 1][1]; }
const BX = [[0.2, -60], [0.45, 107, "power2.out"], [0.8, 107], [0.97, 112, "power1.inOut"], [1.17, 130, "power2.out"], [3.6, 130], [3.82, 120, "power1.in"], [4.04, 107, "power2.out"]];
const BY = [[0.8, 300], [0.97, 282, "power1.out"], [1.17, 337, "power2.inOut"], [3.6, 337], [3.82, 300, "power1.in"], [4.04, 300, "power2.out"]];
const BR = [[0.8, 0], [0.97, 70, "power1.in"], [1.17, 115.3, "power2.out"], [3.6, 115.3], [3.82, 62, "power1.in"], [4.04, 0, "power2.out"]];
const hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
const mix = (a, b, p) => "rgb(" + hex(a).map((v, i) => Math.round(lerp(v, hex(b)[i], p))).join(",") + ")";
const inL = (y) => 217 + 25 * (y - 460) / 326, inR = (y) => 487 - 25 * (y - 460) / 326;
const $ = (id) => document.getElementById(id);
function render(t) {
  const level = lerp(LEVEL0, LEVEL1, ease("sine.inOut")(c01((t - 1.37) / 2))), q = ease("sine.inOut")(c01((t - 1.6) / 1.33));
  const col = mix(FROM, TO, q), edge = mix("#9E9E9E", "#1C0B5D", q * 0.6);
  const xl = inL(level), xr = inR(level), on = level < LEVEL0 - 1;
  $("liq").setAttribute("d", on ? "M" + xl + "," + level + " L" + inL(746) + ",746 Q352,764 " + inR(746) + ",746 L" + xr + "," + level + " Z" : "");
  $("liq").setAttribute("fill", col); $("liq").setAttribute("stroke", edge);
  Object.entries({ cx: (xl + xr) / 2, cy: level, rx: on ? (xr - xl) / 2 : 0, ry: Math.min(12.5, (LEVEL0 - level) * 0.5 + 2) }).forEach(([k, v]) => $("top").setAttribute(k, v));
  const c = hex(FROM).map((v, i) => lerp(v, hex(TO)[i], q)), surf = c.map((v) => Math.round(v + (255 - v) * 0.22));   // the surface: the drink, a touch lighter
  $("top").setAttribute("fill", "rgb(" + surf.join(",") + ")"); $("top").setAttribute("stroke", edge);
  const bx = kf(BX, t), by = kf(BY, t), br = kf(BR, t), a = br * Math.PI / 180;
  $("bottle").setAttribute("transform", "translate(" + bx + " " + by + ") rotate(" + br + ")");
  const pouring = t >= 1.17 && t < 3.77, mx = bx + 128.5 * Math.sin(a), my = by - 128.5 * Math.cos(a) + 6, ey = Math.min(level, 752);
  const s1 = c01((t - 1.17) / 0.17), s0 = t > 3.57 ? ease("power2.in")(c01((t - 3.57) / 0.2)) : 0;
  ["sOut", "sIn"].forEach((id) => { const p = $(id); p.setAttribute("d", "M" + mx + "," + my + " Q" + (mx + 47) + "," + (my + 102) + " " + (mx + 66) + "," + ey); const L = p.getTotalLength(); p.style.strokeDasharray = Math.max(0, (s1 - s0) * L) + " " + (L + 10); p.style.strokeDashoffset = -s0 * L; p.style.opacity = pouring ? 1 : 0; });
  [...$("drops").children].forEach((d, i) => { const ph = (t * 2.4 + i * 0.27) % 1; d.setAttribute("cx", mx + 36 + i * 9); d.setAttribute("cy", level - 8 - Math.sin(ph * Math.PI) * 14 - (i % 2) * 5); d.setAttribute("fill", TO); d.setAttribute("stroke", "#1C0B5D"); d.setAttribute("stroke-width", 1.6); d.style.opacity = pouring && on ? 1 : 0; });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 5, duration: 5, ease: "none", immediateRender: true }, 0);
render(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 « Chute avec rebond et étincelles d'impact » — À 0:04 dans la vidéo

Autre

Chute avec rebond et étincelles d'impact

Les objets tombent depuis le haut du cadre sous l'effet de la gravité (power2.in, environ 0.32 s pour 760 px), touchent le sol, rebondissent d'environ 140 px (power2.out, 0.13 s), retombent, font un petit saut de 20 px et se posent, le tout avec une légère rotation qui se résorbe jusqu'à l'angle de repos. Trois courts traits d'étincelle jaillissent au-dessus de chacun pendant 0.3 s quand il passe le bord. Chaque objet démarre 0.35 s après le précédent et atterrit à un endroit différent, le dernier par-dessus les autres.

Quand l’utiliser Pour des éléments qui tombent dans un récipient ou sur une surface : glaçons, pièces, blocs, articles dans un panier.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chute avec rebond et étincelles d'impact</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
.cube { fill: rgba(255, 255, 255, 0.6); stroke: #1C0B5D; stroke-width: 2.6; }
.spark { fill: none; stroke: #1C0B5D; stroke-width: 2; stroke-linecap: round; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><g id="items"></g><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
// Each item: x, rest y, rest angle, start time.
const ITEMS = [[296, 711, 14, 0.2], [402, 704, -15, 0.55], [351, 645, 31, 0.92]];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("items");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
const tl = gsap.timeline({ paused: true });
ITEMS.forEach(([x, rest, ang, t0], i) => {
  const pos = el("g", { id: "pos" + i }, host), rot = el("g", {}, pos);
  el("rect", { class: "cube", x: -35, y: -35, width: 70, height: 70, rx: 13 }, rot);
  const sp = el("g", { opacity: 0 }, pos);
  ["M-44,-34 L-56,-44", "M-12,-52 L-15,-66", "M18,-50 L25,-63"].forEach((d) => el("path", { class: "spark", d }, sp));
  const fall = Math.sqrt((rest + 50) / 760) * 0.32;          // time to fall from y = -50
  gsap.set(pos, { x, y: -50 });
  tl.to(pos, { y: rest, duration: fall, ease: "power2.in" }, t0)
    .to(pos, { y: rest - 140, duration: 0.13, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.13, ease: "power2.in" })
    .to(pos, { y: rest - 20, duration: 0.06, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.06, ease: "power2.in" });
  tl.fromTo(rot, { rotation: ang - 40, svgOrigin: "0 0" }, { rotation: ang, svgOrigin: "0 0", duration: fall + 0.38, ease: "power1.out", immediateRender: true }, t0);
  const enter = t0 + fall * Math.sqrt((470 + 50) / (rest + 50));   // when it passes the rim (y 470)
  tl.set(sp, { opacity: 1 }, enter).to(sp, { opacity: 0, duration: 0.1 }, enter + 0.2);
});
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 « Éclat final de tirets qui respirent » — À 0:27 dans la vidéo

Particules

Éclat final de tirets qui respirent

Quand la pièce est terminée, sept courts tirets en deux couleurs d'accent jaillissent sur des rayons autour de l'objet principal (rayon intérieur d'environ 180-200 px, 26 px de long) en 0.16 s avec power2.out, certains décalés jusqu'à 0.1 s, puis continuent de respirer de 7 px vers l'intérieur et l'extérieur sur des cycles sine de 1.3 s avec des phases différentes. En même temps, l'objet grandit de 4.2% en 0.6 s (sine.inOut) et reste ainsi.

Quand l’utiliser Pour un moment discret de « terminé » ou de « tada » à la fin d'une montée en puissance, sans confettis.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Éclat final de tirets qui respirent</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 -70)"><g id="hero"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g><g id="bursts"></g></g></svg>
</div>
<script>
const CX = 352, CY = 610, START = 0.5;
// angle (deg), radius, colour, delay
const RAYS = [[-104.8, 212, "#FE9117", 0], [-142.4, 228, "#FB2D89", 0.1], [181, 230, "#FE9117", 0], [164, 212, "#FB2D89", 0.03], [-65, 209, "#FB2D89", 0.06], [-27, 215, "#FE9117", 0], [8.3, 222, "#FB2D89", 0.04]];
const PHASE = [0, 2.2, 4.1, 1.3, 3.3, 5.2, 0.7];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("bursts");
const lines = RAYS.map(([, , c]) => { const l = document.createElementNS(NS, "line"); l.setAttribute("stroke", c); l.setAttribute("stroke-width", 4); l.setAttribute("stroke-linecap", "round"); host.appendChild(l); return l; });
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v));
function render(t) {
  RAYS.forEach(([a, r, , d], i) => {
    const t0 = START + d, l = lines[i];
    if (t < t0) { l.style.opacity = 0; return; }
    const p = ease("power2.out")(c01((t - t0) / 0.16));
    const wob = 7 * Math.sin(2 * Math.PI * Math.max(0, t - t0 - 0.16) / 1.3 + PHASE[i]) * c01((t - t0 - 0.16) / 0.3);
    const rad = a * Math.PI / 180, r0 = r - 34 + 18 * p + wob, r1 = r0 + 26 * p;
    l.setAttribute("x1", CX + r0 * Math.cos(rad)); l.setAttribute("y1", CY + r0 * Math.sin(rad));
    l.setAttribute("x2", CX + r1 * Math.cos(rad)); l.setAttribute("y2", CY + r1 * Math.sin(rad));
    l.style.opacity = 1;
  });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 4, duration: 4, ease: "none", immediateRender: true }, 0);
tl.fromTo("#hero", { scale: 1, svgOrigin: "352 623" }, { scale: 1.042, svgOrigin: "352 623", duration: 0.6, ease: "sine.inOut", immediateRender: false }, START + 0.36);
render(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>

Autres prompts

Aperçu du prompt « Plongée dans un mur d'apps 3D : démo produit en trois étapes »

Plongée dans un mur d'apps 3D : démo produit en trois étapes

<direction> Réalise une démo produit horizontale de 31 secondes en 1280x720, entièrement construite en animation, avec du son. Elle se joue comme un seul mouvement de caméra continu, sans coupes, et boucle sans rupture : la dernière image tombe sur la première. L'idée : un mur d'écrans d'app incliné vers l'arrière en 3D, la caméra plonge dans un écran, cet écran devient la fenêtre de l'app, et trois étapes numérotées montrent ce que fait le produit avant une carte de fin avec mon logo. Le style est net et moderne : interface vectorielle à plat dessinée par toi, profondeur douce, beaucoup d'espace, mouvement calme et précis. Évite les coupes brusques, les images réelles, les images de banque, les fonds chargés, les easings rebondissants ou de dessin animé et tout ce qui casse la boucle. </direction> <structure> Ouverture, environ 0 à 4 s : un mur d'écrans d'app incliné vers l'arrière en 3D dérive lentement. Un titre centré comme "Your ideas, in motion" (remplace-le par le tien) se tient dessus, puis s'efface dans un flou. Plongée, environ 4 à 6 s : la caméra avance vers un écran, qui grandit pour devenir la fenêtre de l'app et se pose d'un côté du cadre. Étape 01, environ 6 à 13 s : un petit numéro d'étape "01" et un titre comme "Sketch your idea" (remplace-le par le tien) glissent vers le haut ligne par ligne à côté de la fenêtre. Dans la fenêtre, un coup de pinceau se dessine sur le canevas. Étape 02, environ 13 à 20 s : le texte précédent glisse vers le haut et sort, puis "02" et un titre comme "Chat to shape it" glissent de la même façon. Le contenu de la fenêtre change en conséquence. Étape 03, environ 20 à 26 s : "03" et un titre comme "Export in one click" entrent de la même manière, et la fenêtre montre un terminal qui tape des lignes de texte avec un curseur clignotant. Carte de fin, environ 26 à 31 s : mon logo et "[your brand]" avec un court slogan comme "Make it move" (remplace-le par le tien). La caméra recule ensuite vers le mur incliné d'écrans pour que l'image finale corresponde à la première et que la vidéo boucle. </structure> <composition> Garde la fenêtre grande, environ 60 % de la largeur du cadre, d'un côté. Place la colonne de texte de l'autre côté, alignée à gauche. Mets le numéro d'étape petit, dans la couleur d'accent, au-dessus du titre. Compose les titres dans une sans-serif nette et grasse, au plus deux lignes courtes, avec une graisse plus légère pour toute ligne de soutien. Utilise mon logo comme icône d'app dans la barre de la fenêtre et centré sur la carte de fin. Utilise des couleurs par rôle issues de ma marque, par exemple un fond presque noir (#0E0F13), un texte blanc cassé (#F4F4F6), un accent vif pour les numéros d'étape, les surbrillances et le coup de pinceau, et un gris sourd pour la barre de la fenêtre et l'interface secondaire. Garde le mur d'écrans dans la même palette avec moins de contraste pour que le titre reste lisible dessus. </composition> <techniques> Tout se passe dans un seul mouvement de caméra continu : une lente dérive au-dessus du mur 3D, incliné vers l'arrière d'environ 25 degrés, avec une douce parallaxe entre les écrans. Le titre s'en va avec un flou croissant et un fondu d'environ 0,6 s. La plongée est une poussée ease-in-out fluide vers un écran qui grandit et s'aplatit en fenêtre d'app. Les lignes de titre glissent d'environ 30 px vers le haut avec un fondu, décalées d'environ 0,1 s, avec un ease-out doux. Le texte sortant glisse vers le haut et s'efface avant l'entrée de l'étape suivante. Le contenu de la fenêtre change sur place avec de courts fondus enchaînés et glissements. Le coup de pinceau se dessine progressivement. Le terminal tape caractère par caractère avec un curseur clignotant. Sur la carte de fin, le logo grandit doucement, puis la caméra recule en douceur vers le mur d'ouverture pour une boucle sans rupture. </techniques> <music> Utilise un morceau instrumental de synthwave calme à environ 100 BPM, d'une durée exacte de 31 secondes, avec les coupes et les accents sur la grille rythmique. Un pad chaleureux joue sous le titre. Le beat entre avec un doux boom quand la caméra plonge dans la fenêtre. Le morceau monte un peu pour l'étape 02 et s'allège sous le terminal. Un riser mène à la carte de fin, et le morceau se résout pour que la boucle vers le début soit sans rupture. Vise environ -14 LUFS avec un true peak sous -1 dBTP. </music> <sound> Ajoute un whoosh à la plongée dans la fenêtre, un doux tic d'interface quand chaque ligne de titre se pose, un léger frottement de pinceau sur le coup de pinceau de l'étape 01 et de discrets tapotements de clavier sous la frappe du terminal. Ajoute un impact doux ou un carillon quand le logo se pose sur la carte de fin. Garde les effets sous la musique, sans voix off. </sound> <references> Cela ressemble à une animation soignée de lancement ou de présentation d'app : une caméra qui survole une grille 3D d'écrans d'interface jusqu'à une fenêtre produit épurée, avec des étapes de fonctionnalités numérotées, comme dans les démos de landing pages de logiciels modernes. </references>

Aperçu du prompt « Showreel d'app fluide de 15 secondes en motion design pur »

Showreel d'app fluide de 15 secondes en motion design pur

<direction> Réalise un showreel horizontal de motion design de 15 secondes pour mon app, en 1920x1080 à 60 fps. Tout est du graphisme dessiné, sans images filmées. La seule chose que j'apporte est le logo de mon app (une icône d'app en carré arrondi). L'idée est un mouvement continu où chaque section passe son dernier objet à la suivante. Un point devient le logo, le logo devient le nom, les lettres deviennent des points, les points deviennent des balles de course, une balle inonde l'écran, une forme se brise en carreaux, les carreaux deviennent un nuage de points 3D, puis viennent des mots cinétiques et une carte de fin. Chaque section montre une compétence de motion. Utilise des couleurs plates, des formes vectorielles nettes et un HUD de viseur de caméra par-dessus tout, avec des coupes calées sur un morceau à 128 BPM. Évite les images filmées, les dégradés et les textures, la voix off, et toute section qui part de rien au lieu de naître de la précédente. </direction> <structure> 1. 0–1,9 s, presque noir : un point rose repose dans un fin anneau gris, et l'anneau s'ouvre avec expo.out. Un second anneau se déroule jusqu'à un grand cercle pâle (0,45 s, expo.out). À 0,5 s mon logo sort du point, ses couches apparaissant l'une après l'autre avec back.out. Il se stabilise plus grand à 0,92 s en tournant doucement. Un fin anneau rose de texte mono circulaire ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·", remplace par le tien) apparaît autour et tourne lentement. À 1,7 s le logo rétrécit avec un léger flou pour redevenir un petit point clair. 2. 1,9–3,5 s : sur le drop à 1,93 s deux disques jaillissent du point, le clair d'abord et le rose 30 ms derrière (expo.out, 0,3 s), si bien qu'un fin anneau clair chevauche le bord rose. Le nom de mon app dans la grotesque large monte lettre par lettre depuis la ligne de base : chaque lettre est découpée dans sa propre boîte, avec 30 ms de décalage et 0,26 s expo.out. Le nom remplit toujours la même largeur de 1640 px. Un fin trait sombre se dessine depuis le centre au-dessus, avec "01" qui se tape à gauche et mon adresse web à droite. À partir de 2,55 s une vague de largeur traverse les lettres : chacune se comprime de 150 % à environ 55 % de largeur puis revient en 0,6 s, 0,1 s après la précédente. Le mot est réajusté à 1640 px à chaque image, donc les lettres étroites grandissent en hauteur. À 2,84 s un slogan clair en serif italique ("ideas in motion") monte mot par mot en dessous. À 3,3 s les lettres s'effondrent en points sombres et le slogan tombe. 3. 3,5–5,6 s : un balayage diagonal clair arrive du bas à droite (0,16 s). Six points sombres plongent en courbe vers le début de six lignes (power2.inOut, décalés) et prennent les couleurs des lignes. Un titre en serif italique se tape depuis la gauche ("Chat instead of a timeline."), avec une note mono à droite ("NO KEYFRAMES · LIVE PREVIEW") et des étiquettes de piste "IDEA" et "MP4" aux deux extrémités. - Chaque ligne a un numéro rose, un nom mono ("animated type", "shapes", "transitions", "3D effects", "sound", "live preview"), une minuscule icône de courbe qui se dessine toute seule et une ligne de piste qui se dessine de gauche à droite. - À 4,215 s six balles (sombre, violette, rose, en répétition) courent 1040 px en exactement 0,94 s, chacune avec sa propre courbe : linear, power2.inOut, expo.out, back.out(1.7), elastic.out(1, 0.3) et bounce.out. - Des graduations au-dessus de chaque piste marquent où se trouvait la balle à chaque 1/16 de la course. Trois anneaux fantômes qui s'estompent suivent chaque balle, les balles s'étirent selon leur vitesse, un point suit chaque icône de courbe en synchro, et chaque balle reçoit un halo de contour à son arrivée. - À 5,3 s les lignes s'estompent, les balles volent vers le centre et fusionnent, et la violette gonfle jusqu'à remplir l'écran. 4. 5,6–7,5 s, violet : un cercle clair jaillit d'un point (elastic.out, 0,45 s). Douze points satellites sont propulsés sur une orbite (expo.out, espacés de 12 ms). - Derrière se trouvent de fines lignes de repère en croix, un cercle d'orbite en pointillés avec des graduations et les étiquettes "270°" et "90°". - Des lectures mono sont placées sur les côtés : "SHAPES NO KEYFRAMES" à gauche, et des demandes de modification entre guillemets à droite ("“BIGGER” “SLOWER”", "“ANOTHER COLOUR”"). - Des anneaux d'onde roses pulsent autour du cercle. - La forme se transforme alors : cercle → triangle → étoile → carré. Chaque transformation dure 0,26–0,3 s sur back.out(2,2) avec une rotation de 120°, et des contours écho roses suivent la forme seulement pendant qu'elle tourne. - Les satellites se transforment un temps après, l'un après l'autre, et disparaissent à 7,22 s. Elle se fixe en carré droit de 360 px. 5. 7,5–9,75 s, presque noir : le carré se divise en neuf carreaux de 120 px. Un labyrinthe de Truchet grandit anneau par anneau jusqu'à remplir l'écran (back.out, environ 30 ms par anneau) ; chaque carreau porte deux arcs de quart de cercle dans des coins opposés, dessinés en lignes claires de 20 px. Des vagues roses le traversent : d'abord deux bandes de gauche à droite, puis un anneau qui se resserre vers le centre. Les carreaux dans une vague tournent de 90 ou 180 degrés, rétrécissent à 80 % et deviennent roses, si bien que les lignes se brisent en tirets, puis reviennent une fois la bande passée. Une petite étiquette mono se tape en bas ("SHAPES · TRANSITIONS · NO KEYFRAMES"). À partir de 9,45 s les carreaux s'effondrent du centre vers l'extérieur. 6. 9,5–11,25 s : une grille de 24 x 24 points apparaît là où étaient les carreaux, vue de dessus. Elle s'incline en un plan en perspective et se replie en sphère, vase, blob écrasé et tore tout en tournant autour de son axe vertical. Entre les formes elle se déplace en power2.inOut, avec de faibles lignes entre voisins, environ un point sur neuf rose, et des points plus ternes avec la profondeur. Une étiquette mono se trouve dessous ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). Elle zoome à travers la caméra et s'efface à 11 s. 7. 11,25–13,0 s, mots cinétiques : un mot toutes les 0,23 s, chacun sur son propre fond plat et remplissant la largeur dans une largeur différente de la même police. Remplace les six mots par ta propre phrase. - "IDEA" : sombre sur rose, glisse depuis la gauche, échelle de 1,3 à 1, flou qui se dissipe en 0,14 s. - "IN." : clair sur presque noir avec un point final rose, arrive de la droite avec du flou, et une petite note mono en haut à gauche ("EDIT IN WORDS ↗"). - "VIDEO" : ultra-condensé violet sur la page claire, lettres montant du bas espacées de 25 ms. - "OUT." : clair sur violet, arrive de la gauche avec du flou, avec une note en haut à droite ("↘ MP4 EXPORT"). - "NO" : sombre sur jaune. Les lettres tombent en angle avec back.out, puis des copies contourées du mot remplissent des rangées au-dessus et en dessous et défilent en sens alternés pendant que la rangée principale dérive vers la gauche. - "KEYFRAMES." : clair sur presque noir, glissant vers la gauche à vitesse constante avec un fin trait diagonal, puis partant vite avec du flou. 8. 13,0–15 s, carte de fin : le rose inonde depuis la droite et un anneau clair se déroule depuis le centre (0,42 s). Mon logo arrive en tournant au centre (back.out) avec une petite explosion de confettis de points, d'anneaux et de triangles en sombre, clair et violet, puis se déplace à gauche du lockup. Le nom de mon app tombe lettre par lettre à côté, du flou à la netteté, 0,22 s chacune. Un slogan en serif italique monte en dessous ("your AI motion designer"). Un trait se dessine, et une ligne mono se tape en dessous : "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT", un petit point d'enregistrement, puis mon adresse web à droite. Tiens la dernière seconde. </structure> <composition> Palette, tout en aplat : - noir profond presque noir #0d0b1e - rose vif #fb2d89 (l'accent principal) - page claire #faf9ff - violet doux #7c6cf2 - jaune chaud #ffd23f, pour une seule coupe cinétique Polices : - Une grotesque large variable avec axe de largeur (Anybody, graisse 900, largeur 50–150 %) pour le nom et les mots cinétiques. - Un serif italique éditorial condensé (Instrument Serif Italic) pour les titres et slogans. - Une mono (JetBrains Mono) pour les étiquettes d'interface, 14 px, espacement des lettres 0,16em. Un HUD de viseur de caméra recouvre toute la vidéo : - De fins crochets d'angle de 2 px, à 44 px de chaque coin. - En haut à gauche : le nom de mon app en capitales mono grasses suivi d'un slogan plus pâle ("APP NAME IDEAS IN MOTION"). - En haut à droite : l'étiquette de la section en cours ("01 — APP NAME", "02 — NO KEYFRAMES", "03 — SHAPES", "04 — EDIT IN WORDS", "05 — 3D EFFECTS", "06 — KINETIC TYPE", "07 — TRY IT FREE"). - En bas à gauche : un timecode défilant avec images ("00:00:03:09") et un court slogan ("LIVE PREVIEW"). - En bas à droite : un autre slogan ("NO KEYFRAMES"), quatre petits carrés qui s'allument un par temps, et "MP4". - Le long du bord inférieur : une ligne de progression de 2 px qui grandit avec le temps. Le HUD alterne entre encre sombre et claire à chaque coupe pour rester lisible sur tout fond. Tous les mots à l'écran sont des exemples à remplacer par les tiens. </composition> <techniques> - Chaque section se termine sur un objet dont naît la suivante : point vers logo, logo retour vers point, disques vers nom, lettres vers points, points vers balles, balle vers inondation violette, carré vers carreaux, carreaux vers grille de points, nuage de points zoomant à travers la caméra vers les mots cinétiques. - Chaque nouvelle étiquette de section du HUD se tape en 0,3 s, avec des glyphes aléatoires courant devant le curseur. Les autres lignes mono se tapent aussi. - Typographie à largeur variable : anime l'axe de largeur de chaque lettre et réajuste tout le mot à une largeur fixe à chaque image. - Les révélations de lettres sont découpées dans la boîte de chaque lettre. - Utilise un léger flou de mouvement uniquement sur les mouvements rapides, et une faible frange de couleur violette sur le grand balayage en iris. - Les contours écho, anneaux fantômes et halos sont de fins traits roses ou de la couleur correspondante qui s'estompent vite. </techniques> <music> Synth-pop électronique énergique à 128 BPM, premier temps à 0,06 s, exactement 15 s : - Accords de pad doux façon cloche dans la première mesure. - Après le drop à 1,93 s, une grosse caisse four-on-the-floor avec des claps sur 2 et 4, des hi-hats à contretemps, une basse synthé percutante et de courts accords staccato sous les sections. - Un break à partir d'environ 10 s qui monte vers la section cinétique. - Un accord de pad final résonnant sur la carte de fin. Les sections changent sur les barres de mesure, le nom tombe sur le drop à 1,93 s, et les coupes des mots cinétiques tombent sur les croches. </music> <sound> Pas de voix. Des impacts par-dessus la musique : - un riser durant la première mesure - un boom sur le drop à 1,93 s - un riser d'environ 10 s jusqu'à un punch à 11,25 s - une grosse caisse et un court whoosh à chaque coupe de mot cinétique - un crash de cymbale à 12,71 s - un boom avec l'accord de pad résonnant quand la carte de fin atterrit - un petit blip à 14,1 s La musique porte le morceau et les impacts ressortent clairement par-dessus. </sound> <references> Un showreel de motion designer croisé avec un sizzle de lancement de produit tech. Il combine un overlay de viseur de caméra, une typographie cinétique audacieuse de style suisse, des démonstrations de courbes d'easing, des motifs génératifs de carreaux de Truchet et un nuage de points 3D en rotation. </references>

Aperçu du prompt « Promo de landing page avec transitions par objets »

Promo de landing page avec transitions par objets

<direction> Réalise une promo motion design horizontale de 15 secondes en 1920x1080 pour [your brand], construite comme une landing page qui prend vie. Monte-la sur un morceau électronique à 128 BPM sans voix off. L'idée : il n'y a jamais de simple coupe, chaque scène passe à la suivante à travers un objet (un point, un choix de la roulette, un téléphone, une tuile gagnante). Garde un look UI produit propre et lumineux : fonds clairs, pastilles arrondies, cartes, un téléphone, un tableau de bord et un mur de vidéos, avec tous les libellés en texte sombre sur des plaques blanches et mes couleurs de marque utilisées par rôle. Évite les coupes sèches, les fondus enchaînés, la voix, le texte blanc sur fond clair ou rayé et les libellés qui chevauchent des anneaux ou des formes voisines. </direction> <structure> Cinq temps de durée à peu près égale, environ 3 secondes chacun, chaque passage tombant sur le temps. 1. Ouverture : un seul point apparaît au centre et grandit en une pastille horizontale contenant une rangée de cercles : petits portraits et icônes comme "Aa", formes simples et un cube. Chaque icône est entièrement visible, non masquée par le cercle voisin. La caméra recule pour révéler un titre sur deux lignes, les deux centrées. La première ligne ressemble à "No … keyframes." (remplace par la tienne). Le dernier mot du titre continue de défiler parmi des alternatives comme un rouleau de machine à sous. 2. Un zoom plonge dans une roulette de portraits de créateurs et de cartes. La roulette ralentit et s'arrête sur un choix, qui est mis en valeur. 3. Le choix devient un téléphone, et un éventail de cartes de fonctionnalités s'ouvre autour de lui. Une carte indique "Edit in words" avec le grand chiffre "03" et une petite étiquette "Live preview" placée juste à côté du chiffre (remplace par tes fonctionnalités). Les légendes des cartes sont sur des plaques blanches. 4. Un panoramique fouetté mène à un tableau de bord de tuiles vidéo avec légendes sur plaques blanches. Il les note et choisit une vidéo gagnante, qui est mise en valeur. 5. La tuile gagnante s'ouvre en un mur de vidéos incliné avec légendes sur plaques blanches. Le mur se replie ensuite en mon logo pour la carte de fin, avec "[your website]" à côté du logo sur une plaque blanche. </structure> <composition> Cadrage centré et symétrique pour le titre et la carte de fin avec le logo. Les éléments d'UI sont disposés comme sur une vraie landing page : une rangée de pastilles, des cartes avec de grands chiffres et de petites étiquettes, une maquette de téléphone, une grille de tableau de bord et un mur incliné en perspective. Utilise mes couleurs de marque par rôle : tons de fond (clairs, avec quelques aplats rayés), un accent pour les mises en valeur, sélections et anneaux, et une couleur de texte sombre. Chaque légende sur les cartes, tuiles et le mur est en texte sombre sur une plaque blanche arrondie pour rester lisible sur tout fond. Utilise une seule famille sans empattement propre : titre en gras, libellés en graisse normale et libellés de boutons en gras. Garde de généreuses marges pour qu'aucun texte ne touche les anneaux ou les bords. </composition> <techniques> Chaque transition est un objet qui se transforme en la scène suivante, jamais une coupe. Le point grandit en pastille avec un ease-out doux, et les cercles apparaissent avec un léger décalage. Le recul de caméra est une réduction d'échelle fluide qui révèle le titre. Le mot qui défile est un roulement vertical de machine à sous qui boucle sur plusieurs mots. Le zoom traverse la pastille jusqu'à la roulette. La roulette tourne vite et décélère avec un long ease-out pour s'arrêter précisément sur le choix. Le choix change d'échelle et se remodèle en téléphone, et les cartes s'ouvrent en éventail autour de lui avec une rotation et un glissement décalés. Le panoramique fouetté est un mouvement horizontal rapide avec flou de mouvement et un ease in-out net. La sélection du tableau de bord est un anneau de mise en valeur et un agrandissement du gagnant. Le gagnant se déploie en mur 3D incliné, qui se replie et s'effondre dans le logo avec une dernière stabilisation. Tous les mouvements et arrivées clés tombent sur la grille du tempo. </techniques> <music> Compose un morceau électronique original et entraînant à 128 BPM, d'exactement 15 secondes, avec un arc clair : début léger, montée à travers les scènes de la roulette et du téléphone, un drop autour du panoramique fouetté et une fin nette sur le logo. Pose-le sur la grille de tempo du montage, avec des accents composés par-dessus pour chaque passage, un riser vers le drop et un dernier impact quand le mur se replie dans le logo. Masterise à environ -14 LUFS avec un true peak sous -1 dBTP. </music> <sound> Pas de voix off. Ajoute des whooshes sur le zoom et le panoramique fouetté, un court tic-et-arrêt quand la roulette s'arrête, et un impact doux sur le logo. Garde-les tous sous la musique et sur le temps. </sound> <references> Une landing page SaaS animée en promo produit : cartes UI, maquette de téléphone, tableau de bord analytique et mur de vidéos, dans le style des vidéos modernes de lancement d'app avec des transitions fluides d'objet à objet. </references>

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é