votre motion designer IA

FR

Ouvrir l’app bêta

Simple Motion

Showreel de typographie cinétique en deux parties sur le rythme

Un showreel dessiné de 32 secondes : balle rebondissante, mots cinétiques, grilles de formes, barres 3D et particules, puis diapositives éditoriales sur le rythme avec objets 3D rotatifs.

Publié 10 novembre 2026Utilisé 1 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 showreel de motion design horizontal de 32 secondes (1920x1080, 60 fps) pour [your brand], en deux moitiés aux styles différents, monté serré sur la musique. Tout est dessiné : pas d'images filmées, pas de clips d'archives. La première partie (0–15,9 s, 128 BPM) est une suite sombre, granuleuse et très énergique de typographie cinétique, de formes, de 3D et de particules dans un fin cadre HUD. La seconde partie (15,9–31,8 s, 144 BPM) est une série de diapositives éditoriales épurées, chacune avec un objet 3D qui tourne lentement. Pas de voix off. Évite les images filmées, les fondus enchaînés lents et doux entre les scènes, les coupes en dehors du rythme et toute police autre que les deux familles nommées ci-dessous.

Structure

Première partie (0–15,9 s, 128 BPM), dans le cadre HUD :

0–0,9 s : carton de titre "[Your brand]" avec "01 / 02" dessous, qui apparaît en 0,17 s et disparaît en 0,18 s.
0,9–2,7 s : une balle rose tombe sur une ligne de sol réglée et rebondit trois fois en rythme (1,40 ; 1,88 ; 2,36 s). Chaque atterrissage reçoit une trajectoire en pointillés, un anneau qui s'étend et une petite annotation mono ("BIGGER", "SLOWER", "ANOTHER COLOUR"). La balle repart ensuite vers le centre et grossit jusqu'à remplir l'image de rose.
2,7–3,25 s : sur le rose, "YOUR" en noir, en chasse large, monte lettre par lettre depuis derrière la ligne de base, un soulignement se dessine dessous et une petite étiquette "(01)" se tient au-dessus.
3,25–3,7 s : "IDEA" en rose passe d'un trait ultrafin à la graisse noire en 0,11 s dans un cadre de sélection violet d'outil de design avec huit poignées et une pastille de taille qui compte à la hausse.
3,7–4,1 s : un "is" italique léger en violet sur le fond lavande grandit avec du flou. Son point devient une tache qui inonde l'image de violet.
4,1–4,65 s : "READY" en blanc condensé se décode à partir de glyphes aléatoires avec une séparation magenta/cyan et des décalages en tranches, sur de pâles lignes mono de commandes de chat (par exemple 'chat.say("Bigger")', 'export("mp4")') et un bloc curseur rose clignotant. L'image s'effondre ensuite en une ligne lumineuse comme un écran cathodique qui s'éteint, suivie d'un flash gris.
4,65–6,5 s : une grille de 19 x 11 points grandit depuis le centre. Un anneau violet fait onduler les points en signes plus. Un balayage de gauche à droite transforme les plus en croix, cercles et losanges, avec des cellules roses et violettes aléatoires. Un second balayage rapide les rend tous carrés.
6,5–8,4 s : la grille carrée se renverse en un champ 3D de barres arrondies qui montent par vagues. Une balle rose brillante saute sur leurs sommets en rythme, avec une faible profondeur de champ, et finit dans un flou de zoom.
8,4–10,25 s : un mur typographique de sept bandes horizontales s'abat depuis la droite avec du flou de mouvement, la bande centrale d'abord. Les bandes violettes et claires répètent "[YOUR BRAND]" dans quatre graisses de la police variable (italique heavy étendu, italique light condensé, droit heavy, droit light), avec des points roses entre eux, défilant dans des directions alternées. La bande du milieu est rose, avec le nom immobile et grand. Les bandes glissent sur les côtés et laissent le mot seul en blanc.
10,25–12,1 s : le mot se dissout de gauche à droite en environ 3 000 particules. Elles forment une sphère rotative, puis deux anneaux croisés avec un cœur rose, puis une galaxie à deux bras (un bras rose), puis filent radialement.
12,1–14,2 s : un récapitulatif des scènes précédentes en écran partagé (deux panneaux, puis quatre, puis neuf), avec des flashs glitch d'une seule image et un flash gris à la fin.
14,2–15,9 s : carton de fin. "[YOUR BRAND]" monte lettre par lettre et un trait se dessine dessous. "YOUR AI MOTION DESIGNER" et "[YOURSITE.COM]" se décodent en mono espacé. La balle rose tombe et atterrit comme point final. Puis "● TRY IT FREE" et un italique "describe the video. the agent animates it." glissent en place.
Seconde partie (15,9–31,8 s, 144 BPM), diapositives éditoriales :

15,9 s : carton de titre "Your AI motion designer" avec "02 / 02".
16,8 s, presque noir : "EDIT" / "IN WORDS." (seconde ligne orange), texte "TELL THE CHAT WHAT TO SHOW. / THE AGENT BUILDS THE ANIMATION.", étiquettes "LIVE PREVIEW / MP4 EXPORT", un nœud torique chromé aux reflets orange et mon logo en haut à droite.
19,2 s, orange : "IDEAS" / "IN MOTION." en presque noir, une pastille "NO KEYFRAMES", "FONTS FOR EVERY SCRIPT.", "BIGGER / SLOWER / ANOTHER COLOUR" et un anneau de ruban sombre et torsadé imprimé de "IDEAS IN MOTION •".
21,7 s, presque noir : "IDEA." / "TO VIDEO." / "ONE CHAT.", "SHAPES / 3D EFFECTS / SOUND", un tube chromé sinueux, des crochets d'angle et un compteur de pourcentage avec une barre de progression.
24,2 s, page claire : "MUSIC" / "TO RHYTHM.", "MUSIC AND / SOUND EFFECTS.", une étoile gonflée orange brillante et une balle noire qui rebondit en rythme sur une forme d'onde animée.
26,7 s, 27,6 s, 28,5 s : un mot centré par diapositive. "BIGGER." sur presque noir, "SLOWER." sur page claire avec un petit gribouillis chromé dans le coin, "COLOUR." sur orange. Légendes : "SAY WHAT SHOULD CHANGE.", "NO KEYFRAMES TO HUNT FOR.", "THE PREVIEW UPDATES AS YOU TALK.".
29,2 s, presque noir : "OPEN" / "[YOUR BRAND].", "[YOURSITE.COM]", "IDEA → CHAT → VIDEO", un bouton orange "TRY IT FREE" et une étoile gonflée chromée à quatre branches. La vidéo se termine sur le dernier coup de musique à 31,5 s, pour 31,8 s au total.
Tout le texte entre guillemets est un exemple. Remplace-le par tes propres mots de longueur similaire pour que la mise en page tienne.

Composition

Palette de la première partie : presque noir #0D0B1E avec grain de pellicule et vignettage doux ; page claire #FAF9FF pour la typographie ; rose #FB2D89 comme accent principal ; violet #7C6CF2 comme second ; lavande #F0EDFF uniquement comme fond du plan "is". Palette de la seconde partie : diapositives plates presque noires, orange #FE9117 et page claire #FAF9FF avec une grille discrète de 96 px. Le texte est presque noir sur les diapositives orange et claires, et clair sur les presque noires.
Typographie : une famille display néo-grotesque variable avec des axes de chasse et de graisse pour chaque titre (Mona Sans). Une police monospace pour chaque petite étiquette, ligne de HUD, légende et compteur (JetBrains Mono).
HUD de la première partie : fins crochets d'angle. En haut à gauche "[YOUR BRAND] [YOURSITE.COM]". En haut à droite "LIVE PREVIEW MP4 EXPORT NO KEYFRAMES". En bas à gauche un timecode qui défile, quatre petits carrés et une ligne de progression. En bas à droite le nom de la section en cours, qui change avec les scènes : "IDEAS IN MOTION", "KINETIC TYPE", "SHAPES", "3D EFFECTS", "EDIT IN WORDS", "LIVE PREVIEW", "MP4 EXPORT", "TRY IT FREE".
Les diapositives de la seconde partie partagent un en-tête et un pied de page. En-tête : "● [YOUR BRAND] / IDEAS IN MOTION" à gauche, "MP4 [YOURSITE.COM]" à droite, un filet fin dessous. Pied de page : "[YOUR BRAND]", six petits tirets marquant la diapositive en cours, un timecode qui défile et une ligne de progression orange qui grandit sur toute la moitié. Les titres sont grands et à gauche. Chaque diapositive a un objet 3D à droite, tournant lentement dans une fine ellipse d'orbite. Mon logo apparaît en petit badge sur les diapositives.

Techniques

Balle : écrasement à 1,9 x 0,45 pendant 60 ms à chaque impact et étirement le long de sa vitesse en vol.
Montée des lettres : chaque lettre prend 0,2 s avec cubic out et 35 ms de décalage, en montant depuis derrière la ligne de base. Les soulignements et les traits se dessinent avec expo out.
Les coupes de mots de la première partie sont nettes et sur le rythme. Chaque mot reçoit son propre traitement : montée, rampe de graisse, inondation par une tache, décodage glitch.
Décodage glitch : des glyphes aléatoires se résolvent avec une séparation RVB et des décalages en tranches, et finissent par une extinction d'écran cathodique.
Les étiquettes mono se décodent à partir de glyphes aléatoires.
Mur typographique : les bandes s'abattent avec du flou de mouvement, défilent à 260 px/s et glissent sur les côtés pour sortir.
Les titres de la seconde partie glissent depuis 90 px à gauche, opacité de 0,35 à 1 en 0,3 s, cubic out. La seconde ligne suit 30 ms plus tard.
Transitions de la seconde partie : un panneau de la couleur de la diapositive suivante balaie depuis la gauche en 83 ms. Il démarre juste avant la mesure pour que la nouvelle diapositive tombe exactement sur le temps fort.
Diapositives à un mot : coupes nettes entre elles. Chaque mot se tient entre deux copies pâles en contour de lui-même qui s'écartent.
Objets 3D : matériaux chromés et brillants avec une rotation lente et continue.
Forme d'onde : ses barres s'allument en orange au passage de la tête de lecture.
Grain et vignettage uniquement sur la première partie. La seconde partie reste plate.

Musique

Un morceau instrumental original, exactement aussi long que la vidéo et calé sur sa grille rythmique. La première partie s'ouvre sur un riser tendu au-dessus de hi-hats qui tictaquent. Un lourd drop électronique frappe vers 2,8 s (basse saturée, zaps glitch, 128 BPM) et porte tout jusqu'au carton de fin. Une respiration d'une seconde suit à 15,6 s. La seconde partie est un groove électro-pop plus lumineux et rebondissant à 144 BPM de 16,8 s jusqu'à un coup final à 31,5 s. Les rebonds de la balle, les coupes de mots, les balayages et les atterrissages de diapositives tombent tous sur des temps ou des temps forts.

Son

Pas de voix off. Effets sonores par-dessus la musique :

un clic à chaque rebond de la balle
un riser vers le drop et un boom sur le premier mot
de courts whooshes sur les coupes de mots
un downer quand l'écran s'éteint
des whooshes vers la plongée 3D et vers le mur typographique
un sub drop vers le récapitulatif
un boom quand le nom atterrit sur le carton de fin
un riser et un boom vers la seconde partie
un whoosh à chaque balayage de diapositive et un clic à chaque coupe nette
Mastering à environ -14 LUFS avec un true peak sous -1 dBTP.

Références

Un reel de studio de motion design ou un sizzle de lancement d'application. La première moitié est de la typographie cinétique brutaliste avec des surimpressions d'outils de design et de HUD. La seconde moitié est faite de diapositives éditoriales de style suisse avec des objets 3D chromés.

À préparer

Ton logo ou l'icône de ton app, carré avec un fond transparent, affiché en petit badge sur les diapositives de la seconde partie.

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 « Les lettres montent derrière la ligne de base, le soulignement se dessine » — À 0:02 dans la vidéo

Typographie

Les lettres montent derrière la ligne de base, le soulignement se dessine

Un mot épais et étendu sur un aplat de couleur d'accent : chaque lettre monte de 360 px depuis sous une ligne de découpe invisible placée sur la ligne de base (0,2 s, cubic out, décalage de 35 ms), puis un soulignement de 8 px se dessine de gauche à droite en expo out à partir de 0,12 s. Une petite étiquette mono entre crochets se place au-dessus de la première lettre.

Quand l’utiliser Un coup de poing d'un seul mot sur un temps fort, comme premier grand mot après une monté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>Les lettres montent derrière la ligne de base, le soulignement se dessine</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#field { position: absolute; inset: 0; background: #FB2D89; }
.word { position: absolute; left: 0; right: 0; top: 330px; height: 390px; overflow: hidden; display: flex; justify-content: center; clip-path: inset(0 0 0 0); }
.word span { display: inline-block; font: 900 440px/0.88 'Mona Sans'; font-stretch: 125%; color: #0D0B1E; }
.rule { position: absolute; left: 190px; top: 731px; width: 1540px; height: 8px; background: #0D0B1E; transform-origin: 0 50%; }
.tag { position: absolute; left: 196px; top: 330px; font: 500 19px 'JetBrains Mono'; color: rgba(13,11,30,.7); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="field" class="clip" data-start="0" data-duration="3"><div class="tag">(01)</div><div class="word"><div class="mask"></div></div><div class="rule"></div></div></div>
<script>
const word = "YOUR"; // the word
const box = document.querySelector('.word');
box.innerHTML = '';
for (const ch of word) { const s = document.createElement('span'); s.textContent = ch; box.appendChild(s); }
const tl = gsap.timeline({ paused: true });
tl.fromTo('.word span', { y: 360 }, { y: 0, duration: 0.2, ease: 'power3.out', stagger: 0.035 }, 0.1); // rise from below the clip
tl.fromTo('.rule', { scaleX: 0 }, { scaleX: 1, duration: 0.3, ease: 'expo.out' }, 0.22);            // underline
tl.fromTo('.tag', { opacity: 0 }, { opacity: 1, duration: 0.1 }, 0.15);
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 « Rampe de graisse dans une boîte de sélection d'outil de design » — À 0:03 dans la vidéo

Typographie

Rampe de graisse dans une boîte de sélection d'outil de design

Un mot entre en graisse hairline et monte à la graisse black en 0,11 s (cubic out) avec une police variable ; une boîte de sélection de 3 px avec huit poignées carrées l'entoure en dépassant sa cible (back out, 0,14 s) et une pastille dessous compte sa taille jusqu'aux dimensions finales en pixels.

Quand l’utiliser Pour montrer que le texte est dessiné en direct, comme dans un éditeur.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rampe de graisse dans une boîte de sélection d'outil de design</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#s { position: absolute; inset: 0; }
.w { position: absolute; left: 0; right: 0; top: 345px; text-align: center; font: 150 360px/1 'Mona Sans'; color: #FB2D89; font-variation-settings: 'wght' 150; }
.sel { position: absolute; left: 520px; top: 368px; width: 880px; height: 343px; border: 3px solid #7C6CF2; }
.sel i { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #7C6CF2; }
.sel i:nth-child(1){left:-8px;top:-8px}.sel i:nth-child(2){left:calc(50% - 6px);top:-8px}.sel i:nth-child(3){right:-8px;top:-8px}.sel i:nth-child(4){left:-8px;top:calc(50% - 6px)}.sel i:nth-child(5){right:-8px;top:calc(50% - 6px)}.sel i:nth-child(6){left:-8px;bottom:-8px}.sel i:nth-child(7){left:calc(50% - 6px);bottom:-8px}.sel i:nth-child(8){right:-8px;bottom:-8px}
.pill { position: absolute; left: 898px; top: 731px; width: 124px; height: 30px; border-radius: 4px; background: #7C6CF2; color: #fff; font: 500 16px/30px 'JetBrains Mono'; text-align: center; }
.tag { position: absolute; left: 528px; top: 330px; font: 500 19px 'JetBrains Mono'; color: #FAF9FF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="s" class="clip" data-start="0" data-duration="3"><div class="w">IDEA</div><div class="sel"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="pill">0 × 0</div><div class="tag">(02)</div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
const wv = { w: 150 }, size = { n: 0 };
tl.to(wv, { w: 900, duration: 0.11, ease: 'power3.out', onUpdate: () => (document.querySelector('.w').style.fontVariationSettings = `'wght' ${wv.w}`) }, 0.2); // hairline to black
tl.fromTo('.sel', { scale: 0.92, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.14, ease: 'back.out(2)' }, 0.26);
tl.to(size, { n: 1, duration: 0.24, ease: 'power3.out', onUpdate: () => (document.querySelector('.pill').textContent = `${Math.round(880 * size.n)} × ${Math.round(343 * size.n)}`) }, 0.26);
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 « Grille de morphing de formes : ondulation et balayage » — À 0:05 dans la vidéo

Formes

Grille de morphing de formes : ondulation et balayage

Une grille de 19 x 11 cellules au pas de 100 px, chacune dessinée comme deux rectangles arrondis croisés ; l'interpolation de la longueur du bras, de sa largeur et du rayon d'angle transforme une forme en une autre (cercle, plus, carré), et une rotation de 45 degrés donne le x et le losange. Un anneau s'étend depuis le centre à 15 cellules par seconde en transformant les cercles en plus avec un front coloré, puis un balayage de gauche à droite à 26 cellules par seconde traverse plus, x, cercle et losange pendant que les cellules prennent des couleurs d'accent aléatoires, et un second balayage rapide les rend carrées.

Quand l’utiliser Un interlude génératif entre des scènes typographiques, ou un fond piloté par le rythme.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grille de morphing de formes : ondulation et balayage</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const COLS = 19, ROWS = 11, PITCH = 100;                       // the grid
const INK = '#FAF9FF', A = '#FB2D89', B = '#7C6CF2';          // colours
// a shape is two crossed rounded rects: [arm length, arm width, corner radius] in cell units
const SH = { circle: [1, 1, .5], plus: [1.25, .36, .18], diamond: [.84, .84, .16], square: [1.08, 1.08, .15] };
const mix = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
const cl = (v) => Math.max(0, Math.min(1, v));
const hash = (i, j) => { const s = Math.sin(i * 127.1 + j * 311.7) * 43758.5453; return s - Math.floor(s); };
function cell(cx, cy, D, s, rot) {
  const L = s[0] * D, W = s[1] * D, r = Math.min(s[2] * D, W / 2);
  x.save(); x.translate(cx, cy); x.rotate(rot); x.beginPath(); x.roundRect(-L / 2, -W / 2, L, W, r); x.roundRect(-W / 2, -L / 2, W, L, r); x.fill(); x.restore();
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  for (let j = 0; j < ROWS; j++) for (let i = 0; i < COLS; i++) {
    const d = Math.hypot(i - 9, (j - 5) * 1.1);
    let s = SH.circle, rot = 0, col = INK, D = 52 * cl((t - d * 0.03) / 0.25);
    const R = (t - 0.6) * 15;                                  // ripple: circles become pluses
    if (R > 0) { const k = cl((R - d) / 2); s = mix(SH.circle, SH.plus, k); D = 52 + 4 * k; if (R - d > -0.5 && R - d < 3) col = B; }
    if (t > 1.2) {                                             // sweep: plus -> x -> circle -> diamond
      const p = cl((4 + (t - 1.2) * 26 - i) / 5);
      s = p < .33 ? SH.plus : p < .66 ? mix(SH.plus, SH.circle, (p - .33) / .33) : mix(SH.circle, SH.diamond, (p - .66) / .34);
      rot = p < .33 ? p / .33 * Math.PI / 4 : Math.PI / 4; D = 58;
      const h = hash(i, j); col = p > .4 ? (h < .2 ? A : h < .3 ? B : INK) : INK;
    }
    if (t > 1.7) { const q = cl(((t - 1.7) * 90 - i) / 5); s = mix(SH.diamond, SH.square, q); rot = Math.PI / 4 * (1 - q); }
    if (D < 1) continue; x.fillStyle = col; cell(60 + i * PITCH, 40 + j * PITCH, D, s, rot);
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
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 « Décodage glitch avec séparation RGB, puis extinction CRT » — À 0:04 dans la vidéo

Transition

Décodage glitch avec séparation RGB, puis extinction CRT

Un mot condensé en graisse black se résout lettre par lettre à partir de glyphes aléatoires qui changent à chaque image à 30 fps pendant 0,34 s, dessiné trois fois (copies magenta et cyan décalées de 12 px en mode screen sous le blanc) avec trois tranches horizontales aléatoires décalées jusqu'à 60 px. La scène s'effondre ensuite en une ligne blanche lumineuse de 3 px en expo out en 0,08 s.

Quand l’utiliser Un temps tech ou code, et une sortie nette vers la scène suivante.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Décodage glitch avec séparation RGB, puis extinction CRT</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.6" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="1.6" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const WORD = "READY";                       // the word that decodes
const GLY = "}#!/$1<>%&@";                  // scramble glyphs
const hash = (a, b) => { const s = Math.sin(a * 91.7 + b * 47.3) * 43758.5; return s - Math.floor(s); };
function word(s, dx, col) { x.font = "900 420px 'Mona Sans'"; x.fontStretch = 'condensed'; x.textAlign = 'center'; x.fillStyle = col; x.fillText(s, 945 + dx, 691); }
function draw(t) {
  x.fillStyle = '#7C6CF2'; x.fillRect(0, 0, 1920, 1080);
  const k = Math.min(1, t / 0.34), f = Math.floor(t * 30);
  let s = ''; for (let i = 0; i < WORD.length; i++) s += k > (i + 1) / (WORD.length + 1) ? WORD[i] : GLY[Math.floor(hash(i, f) * GLY.length)];
  const g = t < 0.36 ? 1 - k * 0.7 : 0;
  if (g > 0) { x.globalCompositeOperation = 'screen'; word(s, -12 * g, '#ff2a6a'); word(s, 12 * g, '#2affe0'); x.globalCompositeOperation = 'source-over'; }
  word(s, 0, '#FAF9FF');
  if (g > 0) for (let n = 0; n < 3; n++) { const y = 389 + hash(n, f) * 300, h = 10 + hash(f, n) * 30; x.drawImage(c, 400, y, 1100, h, 400 + (hash(n + 3, f) - .5) * 120 * g, y, 1100, h); }
  if (t > 1.2) {                                     // CRT switch-off
    const e = Math.min(1, (t - 1.2) / 0.08), ex = 1 - Math.pow(2, -10 * e), h = 1080 + (3 - 1080) * ex;
    x.fillStyle = '#000'; x.fillRect(0, 0, 1920, 1080);
    x.shadowColor = '#fff'; x.shadowBlur = 30; x.fillStyle = e > 0.9 ? '#FAF9FF' : '#7C6CF2';
    x.fillRect(290 * ex, 540 - h / 2, 1920 - 580 * ex, h); x.shadowBlur = 0;
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 1.6 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
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 « Mur typographique cinétique en bandes » — À 0:09 dans la vidéo

Typographie

Mur typographique cinétique en bandes

Sept bandes pleine largeur alternent deux couleurs ; chacune répète un mot en quatre styles d'une police variable (italique gras étendu, italique léger condensé, droit gras, droit léger) séparés par des points d'accent, et défile à 260 px/s, les rangées impaires dans l'autre sens ; le style change à chaque temps. La bande centrale est de la couleur d'accent avec le mot grand et immobile. Les bandes claquent depuis la droite, en commençant par le centre (décalage de 25 ms, expo out, flou de mouvement) et repartent sur le côté avec du flou.

Quand l’utiliser Un break typographique percutant qui met en valeur une police variable.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mur typographique cinétique en bandes</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="3" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const WORD = "MOTION FAB";                                   // the repeated word
const ROWS = 7, H = 1080 / ROWS;
const STYLES = [[900, 'expanded', 'italic '], [300, 'condensed', 'italic '], [800, 'expanded', ''], [400, 'condensed', '']];
function row(r, t, x0) {
  const y = r * H, blue = r % 2 === 0;
  if (r === 3) { x.fillStyle = '#FB2D89'; x.fillRect(x0, y, 1920, H); x.font = "800 140px 'Mona Sans'"; x.fontStretch = 'expanded'; x.textAlign = 'center'; x.fillStyle = '#0D0B1E'; x.fillText(WORD, 960 + x0, y + H / 2 + 50); x.textAlign = 'left'; return; }
  x.fillStyle = blue ? '#7C6CF2' : '#FAF9FF'; x.fillRect(x0, y, 1920, H);
  const dir = r % 2 ? -1 : 1; let px = -((t * 260 * dir + r * 333) % 900 + 900) % 900 - 900 + x0, k = r;
  while (px < 1920 + x0) {
    const [w, st, it] = STYLES[(k + Math.floor(t / 0.47)) % 4];
    x.font = `${it}${w} 140px 'Mona Sans'`; x.fontStretch = st; x.fillStyle = blue ? '#FAF9FF' : '#7C6CF2';
    x.fillText(WORD, px, y + H / 2 + 50); px += x.measureText(WORD).width + 28;
    x.fillStyle = '#FB2D89'; x.beginPath(); x.arc(px + 4, y + H / 2, 9, 0, 7); x.fill(); px += 36; k++;
  }
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  for (let r = 0; r < ROWS; r++) {
    const o = Math.abs(r - 3), a = Math.min(1, Math.max(0, (t - o * 0.025) / 0.16)), inK = 1 - Math.pow(2, -10 * a);
    const b = Math.min(1, Math.max(0, (t - 2.6 - o * 0.02) / 0.12)), outK = b * b * b;
    x.save(); x.filter = `blur(${(1 - inK) * 18 + outK * 26}px)`; row(r, t, (1 - inK) * 1920 + outK * (r % 2 ? -2100 : 2100)); x.restore();
  }
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 3 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
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 « Du mot aux particules : sphère, galaxie, warp » — À 0:10 dans la vidéo

Particules

Du mot aux particules : sphère, galaxie, warp

Environ 3000 points échantillonnés dans les pixels d'un mot se dissolvent de gauche à droite (un front balaie en 0,2 s tandis que le reste du mot reste plein), se dispersent en nuage (cubic out), puis s'adoucissent en une sphère de Fibonacci en rotation, puis en une galaxie spirale inclinée à deux bras, le tout avec une perspective simple de 1400 px ; chaque point est dessiné comme une courte ligne depuis sa position 30 ms plus tôt, de sorte que les mouvements rapides laissent des traînées. Cela se termine par un warp : chaque point file radialement en accélérant.

Quand l’utiliser Pour transformer un titre en interlude abstrait et passer à la suite avec un warp.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Du mot aux particules : sphère, galaxie, warp</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2.2" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const N = 3000, WORD = "MOTION FAB";                       // particle count, the word
let P = null;
const rnd = (() => { let s = 7; return () => (s = (s * 16807) % 2147483647) / 2147483647; })();
function build() {
  const o = document.createElement('canvas'); o.width = 1920; o.height = 1080; const g = o.getContext('2d');
  g.font = "900 170px 'Mona Sans'"; g.textAlign = 'center'; g.fillStyle = '#fff'; g.fillText(WORD, 960, 600);
  const d = g.getImageData(0, 0, 1920, 1080).data, pts = [];
  for (let y = 430; y < 640; y += 2) for (let X = 0; X < 1920; X += 2) if (d[(y * 1920 + X) * 4 + 3] > 128) pts.push([X - 960, y - 540]);
  P = []; for (let i = 0; i < N; i++) {
    const p = pts[Math.floor(rnd() * pts.length)], ph = Math.acos(1 - 2 * (i + .5) / N), th = Math.PI * (1 + Math.sqrt(5)) * i;
    const arm = i % 2, rad = 30 + rnd() * 430, an = rad * .0085 + arm * Math.PI + (rnd() - .5) * .7;
    P.push({ t: p, s: (p[0] + 500) / 1000, sph: [Math.sin(ph) * Math.cos(th) * 300, Math.cos(ph) * 300, Math.sin(ph) * Math.sin(th) * 300],
      cl: [(rnd() - .5) * 760, (rnd() - .5) * 640, (rnd() - .5) * 500], gal: [Math.cos(an) * rad, (rnd() - .5) * 40, Math.sin(an) * rad], col: arm === 0 && rad > 180 ? '#FB2D89' : '#FAF9FF' });
  }
}
const cl = (v) => Math.max(0, Math.min(1, v)), io = (k) => (k < .5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2);
const ry = (v, a) => [v[0] * Math.cos(a) + v[2] * Math.sin(a), v[1], -v[0] * Math.sin(a) + v[2] * Math.cos(a)];
const rx = (v, a) => [v[0], v[1] * Math.cos(a) - v[2] * Math.sin(a), v[1] * Math.sin(a) + v[2] * Math.cos(a)];
const lerp3 = (a, b, k) => a.map((v, i) => v + (b[i] - v) * k);
function pos(p, t) {
  const ds = .2 + p.s * .2; if (t < ds) return null;                 // the word dissolves left to right
  let v = lerp3([p.t[0], p.t[1], 0], p.cl, 1 - Math.pow(1 - cl((t - ds) / .3), 3));
  v = lerp3(v, ry(p.sph, (t - .4) * 1.3), io(cl((t - .4) / .2)));     // -> sphere
  v = lerp3(v, rx(ry(p.gal, -(t - 1.2) * 1.6), -1.2), io(cl((t - 1.2) / .2))); // -> galaxy
  return v;
}
function draw(t) {
  if (!P) build();
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  if (t < .45) { x.save(); x.beginPath(); x.rect(460 + 1000 * cl((t - .2) / .2), 0, 1920, 1080); x.clip(); x.font = "900 170px 'Mona Sans'"; x.textAlign = 'center'; x.fillStyle = '#FAF9FF'; x.fillText(WORD, 960, 600); x.restore(); }
  const warp = cl((t - 1.8) / .2);
  for (const p of P) {
    const v = pos(p, t); if (!v) continue; const v0 = pos(p, t - .03) || v;
    const f = 1400 / (1400 + v[2]), f0 = 1400 / (1400 + v0[2]);
    let a = [960 + v[0] * f, 540 + v[1] * f], b = [960 + v0[0] * f0, 540 + v0[1] * f0];
    if (warp > 0) { const s = 1 + warp * warp * 3; b = [960 + (a[0] - 960) * (1 + warp * .2), 540 + (a[1] - 540) * (1 + warp * .2)]; a = [960 + (a[0] - 960) * s * 1.4, 540 + (a[1] - 540) * s * 1.4]; }
    x.strokeStyle = t > 1.2 ? p.col : '#FAF9FF'; x.lineWidth = 2.2 * f; x.globalAlpha = .85;
    x.beginPath(); x.moveTo(b[0], b[1]); x.lineTo(a[0] + .5, a[1] + .5); x.stroke();
  }
  x.globalAlpha = 1;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
document.fonts.load("900 170px 'Mona Sans'").then(() => draw(tl.time()));
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 de panneau coloré vers une diapositive éditoriale » — À 0:19 dans la vidéo

Transition

Volet de panneau coloré vers une diapositive éditoriale

Un panneau de la couleur de fond de la diapositive suivante couvre le cadre depuis la gauche en 83 ms (sine out) ; la nouvelle diapositive apparaît dessous et ses deux lignes de titre glissent depuis 90 px à gauche avec une opacité de 0,35 à 1 en 0,3 s (cubic out), la seconde ligne 30 ms plus tard. L'en-tête, les filets, les compteurs et l'objet 3D sont déjà en place.

Quand l’utiliser Des coupes rapides et propres entre les diapositives d'un portfolio ou d'une présentation produit.

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 de panneau coloré vers une diapositive éditoriale</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#a, #b, #w { position: absolute; inset: 0; }
#a { background: #0D0B1E; } #b { background: #FE9117; }
h1 { position: absolute; left: 78px; font: 900 205px/0.95 'Mona Sans'; color: #FAF9FF; }
#a h1 { top: 240px; } #a b { color: #FE9117; }
#b h1 { color: #0D0B1E; } .l1 { top: 220px; font-size: 300px !important; } .l2 { top: 500px; font-size: 145px !important; }
.p { position: absolute; inset: 0; background: #FE9117; transform-origin: 0 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080"><div id="a" class="clip" data-start="0" data-duration="0.583"><h1>EDIT<br><b>IN WORDS.</b></h1></div><div id="b" class="clip" data-start="0.583" data-duration="1.417"><h1 class="l1">IDEAS</h1><h1 class="l2">IN MOTION.</h1></div><div id="w" class="clip" data-start="0.5" data-duration="0.083"><div class="p"></div></div></div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo('.p', { scaleX: 0 }, { scaleX: 1, duration: 0.083, ease: 'sine.out' }, 0.5);   // the panel
tl.fromTo('.l1', { x: -90, opacity: 0.35 }, { x: 0, opacity: 1, duration: 0.3, ease: 'power3.out' }, 0.583);
tl.fromTo('.l2', { x: -90, opacity: 0.35 }, { x: 0, opacity: 1, duration: 0.3, ease: 'power3.out' }, 0.613);
tl.to({}, { duration: 0.1 }, 1.9);
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 « Rebond squash and stretch sur une règle » — À 0:01 dans la vidéo

Personnage

Rebond squash and stretch sur une règle

Une balle tombe sur une ligne de sol graduée et rebondit sur le rythme (impacts espacés de 0,48 s, arcs culminant à 310 px) le long d'une trajectoire en pointillés ; dans les 60 ms suivant chaque impact, elle s'écrase à 1,9 x 0,45 avec le bas fixé au sol, en vol elle s'étire selon sa vitesse (jusqu'à +32 %), et chaque impact laisse au sol un anneau elliptique en expansion.

Quand l’utiliser Une ouverture qui démontre les principes d'animation en deux secondes.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rebond squash and stretch sur une règle</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=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&family=JetBrains+Mono:wght@400;500&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#c { position: absolute; inset: 0; width: 1920px; height: 1080px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="2.2" width="1920" height="1080"></canvas></div>
<script>
const c = document.getElementById('c'), x = c.getContext('2d');
const IMP = [0.5, 0.98, 1.46], R = 45;          // impact times, ball radius
function state(t) {
  if (t < IMP[0]) { const u = Math.max(0, (t - 0.05) / 0.45); return [608 + 92 * u, -80 + (655 - R + 80) * u * u, 92, 1500 * u]; }
  for (let k = 0; k < 2; k++) if (t < IMP[k + 1]) { const u = (t - IMP[k]) / 0.48; return [[700, 965][k] + 265 * u, 655 - R - 1240 * u * (1 - u), 550, -2600 * (1 - 2 * u)]; }
  const u = Math.min(1, (t - IMP[2]) / 0.5); return [1220 + 200 * u, 655 - R - 1240 * u * (1 - u) * 0.5, 400, -1300 * (1 - 2 * u)];
}
function draw(t) {
  x.fillStyle = '#0D0B1E'; x.fillRect(0, 0, 1920, 1080);
  x.strokeStyle = '#FAF9FF'; x.lineWidth = 3; x.beginPath(); x.moveTo(360, 700); x.lineTo(1560, 700); x.stroke();
  x.lineWidth = 1.5; for (let X = 360; X <= 1560; X += 40) { x.beginPath(); x.moveTo(X, 707); x.lineTo(X, X % 200 === 160 ? 721 : 714); x.stroke(); }
  x.save(); x.setLineDash([3, 7]); x.globalAlpha = .5; x.beginPath(); for (let tt = .05; tt < 1.9; tt += .01) { const s = state(tt); tt === .05 ? x.moveTo(s[0], s[1] + R) : x.lineTo(s[0], s[1] + R); } x.stroke(); x.restore();
  IMP.forEach((ti) => { if (t < ti) return; const k = Math.min(1, (t - ti) / .3), e = 1 - Math.pow(1 - k, 3), X = state(ti)[0];
    x.save(); x.globalAlpha = (1 - k) * .8; x.beginPath(); x.ellipse(X, 700, 40 + 40 * e, 10 + 10 * e, 0, 0, 7); x.stroke(); x.restore(); });
  const [bx, by, vx, vy] = state(t); let sx = 1, sy = 1, rot = 0, y = by;
  for (const ti of IMP) { const d = Math.abs(t - ti); if (d < .06) { const k = 1 - d / .06; sx = 1 + .9 * k; sy = 1 - .55 * k; } }
  if (sx === 1) { const st = Math.min(.32, Math.hypot(vx, vy) / 6000); rot = Math.atan2(vy, vx); sx = 1 + st; sy = 1 - st * .55; } else y = 655 - R * sy;
  x.save(); x.translate(bx, y); x.rotate(rot); x.fillStyle = '#FB2D89'; x.beginPath(); x.ellipse(0, 0, R * sx, R * sy, 0, 0, 7); x.fill(); x.restore();
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 });
tl.eventCallback('onUpdate', () => draw(tl.time()));
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>

Autres prompts

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>

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

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é