votre motion designer IA

FR

Ouvrir l’app bêta

Simple Motion

Reel de marque « Manifeste de la balle rebondissante »

Reel de marque vertical de 19 secondes : une balle brillante rebondit sur un manifeste au rythme, un pendule et une lampe, puis un montage rapide et un final en voxels.

Code du prompt MOVPublié 11 novembre 2026Utilisé 2 fois

Utiliser le prompt

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

Signaler ce prompt

Utiliser avec votre agentVotre agent

Intention

Réalise un reel de marque vertical de 19,2 secondes (1080x1920, 30 fps) qui boucle sans raccord. C'est entièrement du motion design, monté sur un beat à 150 BPM (0,4 s par temps, 12 mesures). L'idée : une balle brillante est le héros de tout le film. Elle rebondit sur un manifeste d'accroche à raison d'un mot par temps, devient le balancier d'un pendule, se transforme en lampe qui éclaire une page, attend un montage rapide derrière le nom de ta marque et finit seule sur la carte de fin, exactement là où commence la première image. Le style : une typographie éditoriale audacieuse sur des fonds plats nuit profonde et papier, avec un accent en dégradé rose-orange et un second accent violet. Rythme : frénétique pendant les 3,2 premières secondes, puis deux longues scènes qui respirent sur une pulsation à deux temps, une rafale de 3,2 s de coupes en croches, un climax de 2 s et un point de boucle calme. Évite les images filmées, la voix off, les fondus enchaînés doux et toute coupe qui rate le beat : chaque coupe tombe sur un temps ou un demi-temps. Les mots de couleur d'accent doivent avoir la même graisse ExtraBold que le reste, jamais plus fine.

Structure

Accroche, 0–3,2 s. Une image sombre. La balle (140 px) part du centre et tombe vers une ligne de sol à environ y 1516, en rétrécissant à 88 px, et atterrit à 0,37 s. À partir de 0,4 s, un mot apparaît par temps, puis par demi-temps : « on » (0,4), « ne » (0,8), « fait » (1,2), « pas que prompter. » (1,6), « on » (2,0), « réalise. » (2,2, dans le dégradé d'accent), « tape » (2,6), « lumière » (2,8), « profondeur » (3,0). Remplace-les par tes propres lignes de manifeste. Le fond alterne entre sombre et papier à chaque coupe. Sur « lumière » et « profondeur », la balle s'envole vers le haut et sort en haut à gauche.
Pendule, 3,2–8,0 s. Fond papier. La balle devient le balancier (112 px) d'une fine tige sombre suspendue à un pivot situé 380 px au-dessus du centre haut (longueur de bras 1317 px). Une ombre floue de la tige et du balancier est décalée vers la droite. Un titre en capitales sur deux lignes est au milieu et change à chaque oscillation : « FAIT / À LA MAIN ? » → « FAIT / PAR CODE. » (seconde ligne en accent) → « PAS DE / TIMELINE. » → « PAS D' / IMAGES CLÉS. » → « JUSTE / DES MOTS. » (accent) → « ET / LA LUMIÈRE. ». Ce sont des exemples à remplacer. À 7,2 s, la lumière s'éteint au-delà de la tige, et la dernière oscillation traîne l'obscurité à travers le cadre.
Lampe, 8,0–12,8 s. Sombre #14112E. La balle devient une lampe lumineuse dont le cône de lumière révèle une page de papier. La page contient « LA LUMIÈRE / N'EST QUE / DES MATHS. » en capitales (exemple ; la dernière ligne en violet) et un petit bloc-logo près de y 1430 : un point en dégradé et ton logotype en encre. À partir de 12,27 s, toute la page est éclairée.
Montage, 12,8–16,0 s. Sur le drop, « [ta marque] » en Anton (environ 260 px de haut, centré) reste immobile tandis que le monde derrière change à chaque croche (0,2 s). Les mondes, dans l'ordre :

un blob 3D brillant et marbré rose et orange avec un bord bien visible, sur gris
le même blob de plus près
des blocs plats : carrés violets, sombres et papier, et le dégradé d'accent
des anneaux hypnotiques encre et papier qui zooment et tournent
une étiquette de papier vierge qui se balance au bout d'une ficelle sur du violet
un champ de touches de clavier sombres vu du dessus, avec quelques touches roses et orange qui s'enfoncent
un tore dessiné en points de trame bien distincts sur fond sombre
violet plat avec une grille discrète
des formes 3D de jouet qui culbutent sur un prune sombre (cubes, balles, anneaux, cônes et capsules aux couleurs de la palette plus jaune #FFD23F)
les mêmes formes floutées sur rose pastel
un téléphone en verre sur gris
le blob sur violet
un sol de cubes blancs d'où montent des colonnes roses et orange
le tore de trame en points d'encre sur blanc
corail plat avec une grille

Final en voxels, 16,0–18,2 s. Fond violet. Un mot court (ton produit, ou la seconde moitié du nom de ta marque) est construit avec de petits cubes. Il est entièrement formé à 16,6 s, respire, puis éclate à partir de 17,72 s pendant qu'un trou noir s'ouvre depuis le centre et remplit le cadre à 18,17 s.
Carte de fin, 18,2–19,2 s. Sombre. La balle grandit à partir de rien au centre (142 px à x 539, y 959). Ton logotype en dégradé rose-orange apparaît dessous à 18,1 s, reste, puis disparaît en fondu à 18,85 s. Il ne reste que la balle, exactement là où commence la première image du film, donc la boucle est parfaite.

Composition

Palette :

nuit profonde #0C0A1E et un #14112E un peu plus clair pour les scènes sombres
papier #F2EFFA pour les claires
encre #1C0B5D pour le texte sur papier
un dégradé d'accent rose-orange #FB2D89 → #FE9117
un second accent violet #7C4DFF
jaune #FFD23F uniquement pour les formes de jouet
Les mots de l'accroche sont couleur papier sur les coupes sombres et couleur encre sur les coupes papier.
Typographie :
mots et titres en Manrope ExtraBold, avec un crénage serré (-0,035em sur les titres en capitales)
le nom de la marque dans le montage en Anton
un petit pseudo « @yourbrand » (à remplacer) en JetBrains Mono en haut à gauche, à 56 px du bord gauche et 246 px du haut, pendant tout le film
Titre du pendule : la ligne un d'environ 145 px de hauteur de capitale, la ligne deux d'environ 128 px, centré.
La balle est une sphère brillante : un doux reflet blanc en haut à gauche sur un corps en dégradé orange → rose → magenta profond.
Nom de marque du montage : trois couches (une ombre dure décalée de 9 px, un contour de 16 px et le remplissage). Il est blanc avec un contour sombre sur les mondes sombres ou chargés, et sombre avec un contour blanc sur les clairs.
Mot en voxels : une rangée, d'environ 430 px de haut et 890 px de large. La première lettre est en dégradé rose vers orange de haut en bas ; les autres sont blanc papier.
Carte de fin : balle centrée ; le logotype en dégradé vers y 1225, d'environ 620 px de large.

Techniques

Accroche :

Chaque mot atterrit en quatre images avec un fort ease-out (power3.out). Les entrées alternent : un crénage qui se resserre depuis un demi-em, une chute avec zoom depuis 125 % et 320 px plus bas, un étirement vertical depuis 260 % ancré sur la ligne de base et un glissement depuis 835 px hors champ à gauche.
Les changements de fond sont des coupes franches.
À chaque coupe, la balle gonfle à 125 % sur place pendant une image puis est au sommet de son bond à la suivante. Sur cinq images, elle glisse vers l'autre position de repos (x 287 ou 788) en rétrécissant à nouveau.
Pendule :
Il oscille de ±23,6° avec power3.inOut en 0,34 s, chaque oscillation centrée sur un temps sur deux (3,6, 4,4, 5,2, 6,0, 6,8, 7,6 s), et reste immobile aux extrémités.
Trois copies estompées espacées d'une image traînent derrière le balancier.
La tige est bien visible et son ombre se remarque.
Chaque oscillation balaie le titre vers le suivant. Le nouveau titre apparaît du côté que le balancier a déjà dépassé et l'ancien de l'autre, avec des masques inset rectangulaires sur le même easing.
À 7,2 s, tout ce qui est au-delà de la ligne de la tige devient sombre, et la dernière oscillation traîne l'obscurité à travers le cadre.
Lampe :
La balle glisse au centre en un tiers de seconde et commence à briller, avec un doux halo orange-rose d'environ 220 px autour d'elle.
Un cône de lumière s'ouvre depuis la balle comme une fente de 7° pointant droit vers le haut. Il balaie vers le bas à gauche et à droite en s'élargissant à mesure que la balle bouge : jusqu'à environ x 800, y 1090, puis x 900, y 975, puis vers le haut jusqu'à x 760, y 560.
Le cône se stabilise au-dessus des mots, large de 120° et pointant vers le bas.
Le cône est un masque en forme de coin dont le sommet est à la balle, révélant la page de papier sous l'obscurité. Une copie de la page à 28 % d'opacité, plus large de 4,5° de chaque côté, crée une pénombre grise nette.
À partir de 12,27 s, le cône s'ouvre à 360° en 0,33 s avec un easing in-out.
Montage : coupes franches toutes les 0,2 s derrière le nom immobile. Chaque monde bouge dans son créneau : les anneaux zooment et tournent, l'étiquette se balance, les touches s'enfoncent, les formes culbutent et les colonnes montent.
Final en voxels :
Environ 800 petits cubes, sur trois de profondeur, sur une grille de 11x18 par lettre.
Les cubes partent dispersés en profondeur et volent à leur place avec un quartic in-out en une demi-seconde, décalés jusqu'à 0,18 s, tandis que des particules filent devant la caméra.
Le mot respire : chaque lettre tourne un peu autour de son centre et une ondulation parcourt ses rangées.
À partir de 17,72 s, chaque cube éclate vers l'extérieur et vers l'objectif, strié de flou de mouvement.
Un disque sombre s'ouvre depuis un point au centre (power3.in, 0,37 s à partir de 17,8 s) et remplit le cadre à 18,17 s, les cubes volant par-dessus.
Carte de fin : la balle grandit à partir de rien en environ 0,12 s, et le logotype disparaît en fondu à 18,85 s.

Musique

Crée un morceau instrumental électronique original, sombre et percutant, à 150 BPM en ré mineur avec un feeling half-time (grosse caisse sur le un, caisse claire sur le trois). Il comporte une basse distordue pulsante en croches, une batterie serrée et des nappes tendues, ainsi qu'un chop vocal traité sans paroles utilisé comme texture, sans chant. Il joue dès la première image. Ses grosses caisses et ses caisses claires tombent sur les coupes de mots et les oscillations du pendule, et il drope à 12,8 s. Il se termine sur un coup lourd avec un accord sombre exactement sur le trou noir à 18,0 s, qui résonne sous la carte de fin. Coupe-le à 19,2 s sur la mesure.

Son

Superpose ceci à la musique :

un clic doux à chaque flash de mot
un whoosh à chaque oscillation
un riser vers le pendule
un balayage descendant quand la lumière s'éteint
une cloche quand la balle s'allume
un riser vers un boom sur le montage à 12,8 s
un léger tic à chaque nouveau monde
un whoosh quand les cubes arrivent en trombe
un petit boom quand le mot se pose
un riser vers un boom profond sous le trou noir
Pas de voix.

À préparer

Facultatif : ton logotype, idéalement sur fond transparent, pour le bloc-logo de la page de la lampe et la carte de fin ; sans lui, le nom de ta marque est composé en texte dans le dégradé.

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 « Flashs de mots sur les coupes avec quatre entrées » — À 0:01 dans la vidéo

Typographie

Flashs de mots sur les coupes avec quatre entrées

Un mot par temps (0,4 s à 150 BPM, demi-temps à la fin), le fond basculant entre presque noir et papier à chaque coupe. Chaque mot atterrit en quatre images avec power3.out, en utilisant à tour de rôle l'une de quatre entrées : un tracking qui se resserre depuis un demi-em, une chute en zoom depuis 125% et 320 px plus bas, un étirement vertical depuis 260% ancré sur la ligne de base et un glissement depuis 835 px hors champ à gauche.

Quand l’utiliser Un manifeste rapide ou une phrase d'accroche dite mot par mot sur 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>Flashs de mots sur les coupes avec quatre entrées</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#bg { position: absolute; inset: 0; background: #0c0a1e; }
.w { position: absolute; left: 0; top: 840px; width: 1080px; text-align: center; white-space: nowrap; font: 800 230px/1.1 "Manrope", sans-serif; letter-spacing: -0.03em; opacity: 0; }
.w span { display: inline-block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920">
  <div id="bg" class="clip" data-start="0" data-duration="2.8"></div>
  <div id="words" class="clip" data-start="0" data-duration="2.8"></div>
</div>
<script>
const BEAT = 0.4;                         // seconds per beat (150 BPM)
const E = 4 / 30;                          // every entrance lands in four frames
const DARK = "#0c0a1e", PAPER = "#f2effa", INK = "#1c0b5d";
const WORDS = [                            // [word, entrance, beats on screen]
  ["we", "track", 1], ["don't", "zoom", 1], ["just", "stretch", 1], ["prompt.", "slide", 1],
  ["we", "track", 0.5], ["direct.", "zoom", 1], ["type", "stretch", 0.5], ["light", "slide", 0.5], ["depth", "track", 0.5],
];
const tl = gsap.timeline({ paused: true });
const host = document.getElementById("words"), bg = document.getElementById("bg");
let t = 0;
WORDS.forEach(([text, kind, beats], i) => {
  const dark = i % 2 === 0;
  const el = document.createElement("div");
  el.className = "w";
  el.style.color = text === "direct." ? "#fb2d89" : dark ? PAPER : INK;
  el.innerHTML = [...text].map((c) => "<span>" + c + "</span>").join("");
  host.appendChild(el);
  tl.set(bg, { backgroundColor: dark ? DARK : PAPER }, t);
  tl.set(el, { opacity: 1 }, t);
  tl.set(el, { opacity: 0 }, t + beats * BEAT);
  if (kind === "track") el.querySelectorAll("span").forEach((g, k, all) =>
    tl.fromTo(g, { x: 115 * (k - all.length / 2) }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t));
  if (kind === "zoom") tl.fromTo(el, { scale: 1.25, y: 320 }, { scale: 1, y: 0, duration: E, ease: "power3.out", immediateRender: false }, t);
  if (kind === "stretch") tl.fromTo(el, { scaleY: 2.6, transformOrigin: "50% 100%" }, { scaleY: 1, duration: E, ease: "power3.out", immediateRender: false }, t);
  if (kind === "slide") tl.fromTo(el, { x: -835 }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t);
  t += beats * BEAT;
});
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 « Balle qui claque sur la coupe et rebondit de l'autre côté » — À 0:00 dans la vidéo

Personnage

Balle qui claque sur la coupe et rebondit de l'autre côté

Une sphère CSS brillante (deux radial-gradients : un doux reflet blanc sur un corps d'orange à magenta) repose à l'un de deux points de la ligne du sol. Sur l'image de chaque coupe, elle gonfle à 125% sur place, à l'image suivante elle est déjà au sommet de son saut, et en cinq images elle glisse vers l'autre point en redescendant à 100%, ce qui se lit comme un rebond 3D vers la caméra. Animée en keyframes image par image.

Quand l’utiliser Une mascotte ou un point qui marque chaque temps d'une accroche à un mot par temps.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balle qui claque sur la coupe et rebondit de l'autre côté</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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0c0a1e; }
#floor { position: absolute; inset: 0; }
#ball { position: absolute; left: 0; top: 0; width: 88px; height: 88px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920">
  <div id="floor" class="clip" data-start="0" data-duration="2.8"><div id="ball"></div></div>
</div>
<script>
const F = 1 / 30;
const L = { x: 287, y: 1516 }, R = { x: 788, y: 1516 };   // the two resting spots
const P = [0, 0.42, 0.7, 0.876, 0.963, 0.995, 1];         // share of the way across, frame by frame
const H = [0, 165, 136, 65, 19, 2, 0];                    // height above the floor, px
const S = [1.25, 1.14, 1.07, 1.045, 1.02, 1, 1];          // the pop on the cut, then back to size
const tl = gsap.timeline({ paused: true });
const ball = document.getElementById("ball");
gsap.set(ball, { xPercent: -50, yPercent: -50, x: L.x, y: L.y });
for (let k = 0; k < 6; k++) {
  const from = k % 2 ? R : L, to = k % 2 ? L : R, t0 = 0.4 + k * 0.4;   // a hop on every beat
  P.forEach((p, f) => tl.to(ball, { x: from.x + (to.x - from.x) * p, y: to.y - H[f], scale: S[f], duration: F, ease: "none" }, t0 + (f - 1) * F));
}
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 « Pendule qui balaie les titres et traîne la lumière » — À 0:03 dans la vidéo

Transition

Pendule qui balaie les titres et traîne la lumière

Une tige est suspendue à un pivot au-dessus du cadre et oscille de ±23,6° avec power3.inOut en 0,34 s, centrée tous les deux temps, puis se fige. Quand la masse passe, des insets de clip-path pilotés par la même courbe révèlent le titre suivant sur deux lignes du côté déjà franchi et coupent l'ancien ; trois copies atténuées de la masse, espacées d'une image, laissent une traînée, et une copie floue de la tige et de la masse sert d'ombre. Au dernier balancement, un polygone sombre délimité par la ligne de la tige recouvre tout ce qui est au-delà et est tiré à travers le cadre.

Quand l’utiliser Enchaîner une série de phrases courtes avec un rythme physique de métronome, finissant en noir total.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendule qui balaie les titres et traîne la lumière</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f2effa; }
#stage { position: absolute; inset: 0; }
.title { position: absolute; left: 0; top: 600px; width: 1080px; text-align: center; font: 800 150px/0.95 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; opacity: 0; }
.title .hot { color: #fb2d89; }
.arm { position: absolute; left: 536px; top: -380px; width: 8px; height: 1317px; transform-origin: 4px 0; }
.rod { position: absolute; inset: 0; background: #120a33; border-radius: 4px; }
.bob { position: absolute; left: -52px; top: 1261px; width: 112px; height: 112px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#shadow { left: 558px; top: -374px; filter: blur(9px); opacity: .22; }
#shadow .rod, #shadow .bob { background: #1c0b5d; }
#curtain { position: absolute; inset: 0; background: #0c0a1e; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div class="title" id="t0"><div>MADE</div><div>BY HAND?</div></div>
    <div class="title" id="t1"><div>MADE</div><div class="hot">BY CODE.</div></div>
    <div class="title" id="t2"><div>NO</div><div>KEYFRAMES.</div></div>
    <div class="title" id="t3"><div>AND</div><div>LIGHT.</div></div>
    <div class="arm" id="shadow"><div class="rod"></div><div class="bob"></div></div>
    <div class="arm ghost" id="g2" style="opacity:.15"><div class="bob"></div></div>
    <div class="arm ghost" id="g1" style="opacity:.3"><div class="bob"></div></div>
    <div id="curtain"></div>
    <div class="arm" id="arm"><div class="rod"></div><div class="bob"></div></div>
  </div>
</div>
<script>
const AMP = 23.6, SWING = 0.34, PX = 540, PY = -380, L = 1317;   // swing angle, its length, pivot, arm
const CENTRES = [0.4, 1.2, 2.0, 2.8];                          // a swing on every second beat
const tl = gsap.timeline({ paused: true });
const titles = [...document.querySelectorAll(".title")];
gsap.set(titles[0], { opacity: 1 });
const x = (deg) => PX + L * Math.sin(deg * Math.PI / 180);       // where the bob is, left or right
for (const [sel, lag] of [["#arm", 0], ["#shadow", 0], ["#g1", 1 / 30], ["#g2", 2 / 30]]) {
  gsap.set(sel, { rotation: AMP });
  gsap.set(sel + " .bob", { rotation: -AMP });                     // keep the highlight up and left
  CENTRES.forEach((c, k) => {
    const to = k % 2 ? AMP : -AMP;
    tl.to(sel, { rotation: to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag);
    tl.to(sel + " .bob", { rotation: -to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag);
  });
}
CENTRES.slice(0, 3).forEach((c, k) => {                           // the wipe follows the bob
  const inc = titles[k + 1], out = titles[k], t0 = c - SWING / 2, a = x(-AMP), b = x(AMP), ltr = k % 2 === 0;
  tl.set(inc, { opacity: 1 }, t0);
  tl.fromTo(inc, { clipPath: ltr ? "inset(0px " + (1080 - a) + "px 0px 0px)" : "inset(0px 0px 0px " + b + "px)" },
    { clipPath: ltr ? "inset(0px " + (1080 - b) + "px 0px 0px)" : "inset(0px 0px 0px " + a + "px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0);
  tl.fromTo(out, { clipPath: ltr ? "inset(0px 0px 0px " + a + "px)" : "inset(0px " + (1080 - b) + "px 0px 0px)" },
    { clipPath: ltr ? "inset(0px 0px 0px " + b + "px)" : "inset(0px " + (1080 - a) + "px 0px 0px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0);
  tl.set(out, { opacity: 0 }, t0 + SWING);
});
// the light goes out beyond the rod, and the last swing drags the dark across
const poly = (deg) => { const r = deg * Math.PI / 180, qx = PX + 3 * L * Math.sin(r), qy = PY + 3 * L * Math.cos(r);
  return "polygon(" + PX + "px " + PY + "px, " + qx + "px " + qy + "px, 6000px " + qy + "px, 6000px -3000px, " + PX + "px -3000px)"; };
const cur = document.getElementById("curtain"), ease = gsap.parseEase("power3.inOut"), last = CENTRES[3] - SWING / 2;
gsap.set(cur, { clipPath: poly(AMP) });
tl.set(cur, { opacity: 1 }, 2.2);
for (let f = 1; f <= 11; f++) tl.to(cur, { clipPath: poly(AMP - 2 * AMP * ease(Math.min(1, f / 30 / SWING))), duration: 1 / 30, ease: "none" }, last + (f - 1) / 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 « Cône de projecteur en quête qui révèle une page éclairée » — À 0:10 dans la vidéo

Formes

Cône de projecteur en quête qui révèle une page éclairée

Sur fond sombre, une boule lumineuse traverse quelques positions pendant qu'un clip-path en forme de coin (sommet sur la boule, une direction et une demi-largeur, dessiné en polygone qui dépasse largement le cadre) montre un calque papier portant les mots. Une seconde copie de la page à 28% d'opacité, découpée par un coin plus large de 4,5°, crée la pénombre à bord net. Le faisceau commence comme une fine lame de 7° pointant vers le haut, balaie vers la gauche et le bas en s'élargissant jusqu'à environ 120°, puis s'ouvre à 360° en un tiers de seconde pour éclairer toute la page.

Quand l’utiliser Révéler une ligne ou un produit comme si une lampe le trouvait dans le noir.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cône de projecteur en quête qui révèle une page éclairé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=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #14112e; }
#scene { position: absolute; inset: 0; }
.page { position: absolute; inset: 0; background: #f2effa; }
#soft { opacity: .28; }
.line { position: absolute; left: 0; top: 660px; width: 1080px; text-align: center; font: 800 190px/0.93 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; }
.line span { color: #7c4dff; }
#lamp { position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#glow { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,128,72,.6) 0%, rgba(252,80,110,.12) 36%, rgba(252,60,120,0) 50%); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4.5" data-width="1080" data-height="1920">
  <div id="scene" class="clip" data-start="0" data-duration="4.5">
    <div class="page" id="soft"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div>
    <div class="page" id="lit"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div>
    <div id="glow"></div><div id="lamp"></div>
  </div>
</div>
<script>
const PEN = 4.5;                                          // the soft edge, degrees
const s = { x: 536, y: 696, dir: 271, half: 0 };           // ball and beam (0 deg = right, 90 = down)
const wedge = (h) => { if (h <= 0) return "polygon(" + Array(8).fill(s.x + "px " + s.y + "px").join(",") + ")";
  h = Math.min(h, 180); const pts = [s.x + "px " + s.y + "px"];
  for (let i = 0; i <= 6; i++) { const a = (s.dir - h + i * h / 3) * Math.PI / 180; pts.push((s.x + 5000 * Math.cos(a)) + "px " + (s.y + 5000 * Math.sin(a)) + "px"); }
  return "polygon(" + pts.join(",") + ")"; };
const draw = () => {
  gsap.set("#lamp, #glow", { x: s.x, y: s.y });
  gsap.set("#soft", { clipPath: wedge(s.half) });
  gsap.set("#lit", { clipPath: wedge(s.half >= 180 ? 180 : s.half - PEN) });
};
const tl = gsap.timeline({ paused: true, onUpdate: draw });
tl.to(s, { half: 19, duration: 0.25, ease: "power2.out" }, 0.2)                                   // a sliver opens upward
  .to(s, { x: 797, y: 1094, dir: 154, half: 22, duration: 0.6, ease: "power2.inOut" }, 0.5)       // sweeps down-left
  .to(s, { x: 897, y: 976, dir: 179, half: 27, duration: 0.5, ease: "power2.out" }, 1.2)
  .to(s, { x: 757, y: 558, dir: 124, half: 35, duration: 0.5, ease: "power2.inOut" }, 1.8)
  .to(s, { x: 537, y: 326, dir: 90, half: 66, duration: 0.45, ease: "power2.inOut" }, 2.4)        // settles above the words
  .to(s, { half: 180, duration: 0.35, ease: "power2.inOut" }, 3.8);                               // and lights everything
draw();
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Nom contouré sur des mondes qui changent à chaque demi-temps » — À 0:14 dans la vidéo

Mise en page

Nom contouré sur des mondes qui changent à chaque demi-temps

Un mot en police display condensée reste fixe au centre tandis que le monde derrière change toutes les 0,2 s (une croche à 150 BPM) : dégradés, rayures, anneaux concentriques, grille, aplat de couleur. Le mot est formé de trois calques empilés : une ombre dure décalée de 9 px, un contour de 16 px et le remplissage ; sur les mondes clairs, remplissage et contour s'échangent, si bien qu'il reste toujours lisible.

Quand l’utiliser Un nom de marque ou de produit qui doit survivre à un crépitement rapide de looks.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nom contouré sur des mondes qui changent à chaque demi-temps</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#world { position: absolute; inset: 0; }
#name { position: absolute; inset: 0; }
.wl { position: absolute; left: 0; top: 760px; width: 1080px; text-align: center; font: 330px/1.2 "Anton", sans-serif; }
.sh { transform: translate(9px, 9px); }
.sh, .ol { -webkit-text-stroke: 16px currentColor; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.2" data-width="1080" data-height="1920">
  <div id="world" class="clip" data-start="0" data-duration="3.2"></div>
  <div id="name" class="clip" data-start="0" data-duration="3.2"><div class="wl sh">motion</div><div class="wl ol">motion</div><div class="wl fi">motion</div></div>
</div>
<script>
const WORLDS = [   // [background, light world?]
  ["radial-gradient(80% 60% at 40% 40%, #fe9117, #fb2d89 60%, #8e89a3)", true], ["linear-gradient(160deg, #fb2d89, #fe9117)", false],
  ["linear-gradient(#7c4dff 0 59%, #0c0a1e 59% 74%, #fb2d89 74%)", false], ["repeating-radial-gradient(circle, #1c0b5d 0 60px, #f2effa 60px 120px)", false],
  ["repeating-radial-gradient(circle, #f2effa 0 70px, #1c0b5d 70px 140px)", true], ["radial-gradient(#8f63ff, #5a2fe0)", true],
  ["repeating-linear-gradient(90deg, #17122b 0 110px, #f2effa 110px 118px)", false], ["#0c0a1e", false],
  ["#7c4dff", false], ["radial-gradient(#4a1440, #22061f)", false], ["#ffd9e6", true], ["linear-gradient(#b9b5c6, #7f7a90)", false],
  ["linear-gradient(#fb2d89, #7c4dff)", false], ["repeating-linear-gradient(45deg, #fe9117 0 60px, #f2effa 60px 120px)", true],
  ["#f7f5fc", true], ["#fb4f6a", true],
];
const tl = gsap.timeline({ paused: true });
const world = document.getElementById("world");
const [sh, ol, fi] = document.querySelectorAll(".wl");
WORLDS.forEach(([bg, light], k) => {                 // a cut every eighth note
  const t = k * 0.2;
  tl.set(world, { background: bg }, t);
  tl.set([sh, ol], { color: light ? "#ffffff" : "#0c0a1e" }, t);
  tl.set(fi, { color: light ? "#0c0a1e" : "#ffffff" }, t);
});
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 « Mot en voxels qui s'assemble en vol, respire et éclate » — À 0:16 dans la vidéo

3D

Mot en voxels qui s'assemble en vol, respire et éclate

Un mot dessiné sur un bitmap 11x18 par lettre devient environ 800 cubes instanciés sur trois de profondeur. Chaque cube part d'un endroit et d'une rotation aléatoires et vole vers sa cellule avec un quartic in-out en une demi-seconde, décalé de 0,18 s au plus, tandis que quelques centaines de particules filent devant la caméra. Une fois posée, chaque lettre tourne doucement autour de son centre et une ondulation parcourt ses rangées ; à la fin, chaque cube accélère vers l'extérieur et vers l'objectif (quadratic in), chacun avec six copies plus pâles à quelques millisecondes de retard comme flou de mouvement. La première lettre est dégradée du rose à l'orange de haut en bas, les autres sont blanc papier, sur du violet.

Quand l’utiliser Un logo ou un mot court qui s'assemble à partir de particules au climax.

Bibliothèquesthree

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mot en voxels qui s'assemble en vol, respire et éclate</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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; }
#gl { position: absolute; inset: 0; width: 1080px; height: 1920px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.6" data-width="1080" data-height="1920">
  <canvas id="gl" class="clip" data-start="0" data-duration="2.6" width="1080" height="1920"></canvas>
</div>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true, alpha: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(1); renderer.setSize(1080, 1920, false);
const scene = new THREE.Scene(), cam = new THREE.PerspectiveCamera(30, 1080 / 1920, 10, 20000);
cam.position.set(0, 420, 3583); cam.lookAt(0, 0, 0);            // about 1 px per unit on the word's plane
scene.add(new THREE.HemisphereLight(0xffffff, 0x4a2fa0, 1.6));
const sun = new THREE.DirectionalLight(0xffffff, 2.7); sun.position.set(-600, 1400, 1800); scene.add(sun);
const G = {                                                       // 11 x 18 cells per letter ("#" = cube)
  F: ["###########", "###########", "##", "##", "##", "##", "##", "##", "#########", "#########", "##", "##", "##", "##", "##", "##", "##", "##"],
  A: [" ######### ", "###########", ...Array(6).fill("##       ##"), "###########", "###########", ...Array(8).fill("##       ##")],
  B: ["#########  ", "########## ", ...Array(5).fill("##      ## "), "########## ", "#########  ", "########## ", ...Array(6).fill("##       ##"), "###########", "########## "],
};
const P = 24, LEFT = [96, 408, 720], TOP = 744;                  // cell pitch, letter positions in the frame
let seed = 23; const rnd = () => ((seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0) / 4294967296);
const cubes = [];
["F", "A", "B"].forEach((ch, li) => G[ch].forEach((row, ry) => [...row].forEach((cell, cx) => {
  if (cell !== "#") return;
  for (let dz = 0; dz < 3; dz++) cubes.push({ li, ry, color: li ? new THREE.Color(0xf2effa) : new THREE.Color(0xfb2d89).lerp(new THREE.Color(0xfe9117), ry / 17),
    tx: LEFT[li] + cx * P + P / 2 - 540, ty: 960 - (TOP + ry * P + P / 2), tz: -dz * P,
    sx: (rnd() - 0.5) * 3600, sy: (rnd() - 0.5) * 5200, sz: -3000 + rnd() * 5400, r: [rnd() * 6, rnd() * 6, rnd() * 6], delay: rnd() * 0.18, dur: 0.5 + rnd() * 0.12 });
})));
const mesh = new THREE.InstancedMesh(new THREE.BoxGeometry(21, 21, 21), new THREE.MeshStandardMaterial({ roughness: 0.55 }), cubes.length);
cubes.forEach((k, i) => mesh.setColorAt(i, k.color)); scene.add(mesh);
const centres = LEFT.map((x) => new THREE.Vector3(x + 132 - 540, 0, -P)), o = new THREE.Object3D(), v = new THREE.Vector3(), e = new THREE.Euler();
const inOut4 = (p) => (p < 0.5 ? 8 * p ** 4 : 1 - 8 * (1 - p) ** 4), c01 = (x) => Math.min(1, Math.max(0, x));
function draw(t) {
  const hold = Math.max(0, t - 0.55);
  cubes.forEach((k, i) => {
    const p = inOut4(c01((t - k.delay) / k.dur)), c = centres[k.li];
    v.set(k.tx - c.x, k.ty, k.tz - c.z + 10 * Math.sin(k.ry * 0.6 + hold * 6));                 // a ripple through the rows
    e.set(0.07 * Math.sin(hold * 3.1 + k.li * 1.7), 0.2 * Math.sin(hold * 4.2 + k.li * 0.9), 0);  // each letter turns a little
    v.applyEuler(e).add(c);
    const q = c01((t - 1.8) / 0.55), b = q * q * q;                                               // the burst
    o.position.set((k.sx + (v.x - k.sx) * p) * (1 + 3.5 * b), (k.sy + (v.y - k.sy) * p) * (1 + 3.5 * b), k.sz + (v.z - k.sz) * p + 3000 * b);
    o.rotation.set(k.r[0] * (1 - p) + 4 * b, k.r[1] * (1 - p) + 3 * b, k.r[2] * (1 - p));
    o.updateMatrix(); mesh.setMatrixAt(i, o.matrix);
  });
  mesh.instanceMatrix.needsUpdate = true;
  renderer.render(scene, cam);
}
const clock = { t: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(clock, { t: 2.6, duration: 2.6, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => draw(clock.t));
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 « Iris en trou noir vers une carte de fin prête pour la boucle » — À 0:18 dans la vidéo

Transition

Iris en trou noir vers une carte de fin prête pour la boucle

Un disque sombre du double de la diagonale du cadre grandit depuis 0 au centre avec power3.in en 0,37 s : il commence comme un point alors que les lettres éclatent déjà, et engloutit le cadre sur le dernier coup. À l'intérieur, la balle héroïne grandit à partir de rien en 0,12 s, le logotype apparaît en deux images, tient, puis disparaît 0,75 s plus tard, ne laissant que la balle centrée là où commence la première image de la vidéo, si bien que le reel boucle sans couture.

Quand l’utiliser Terminer une pièce bruyante par une pause calme sur le logo qui reboucle sur l'ouverture.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iris en trou noir vers une carte de fin prête pour la boucle</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; }
#end { position: absolute; inset: 0; }
#hole { position: absolute; left: 540px; top: 960px; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; border-radius: 50%; background: #0c0a1e; }
#ball { position: absolute; left: 0; top: 0; width: 142px; height: 142px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#mark { position: absolute; left: 0; top: 1160px; width: 1080px; text-align: center; font: 800 110px/1 "Manrope", sans-serif; letter-spacing: -0.03em; background: linear-gradient(90deg, #fb2d89, #fe9117); -webkit-background-clip: text; background-clip: text; color: transparent; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.5" data-width="1080" data-height="1920">
  <div id="end" class="clip" data-start="0" data-duration="1.5"><div id="hole"></div><div id="ball"></div><div id="mark">your brand</div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
gsap.set("#ball", { xPercent: -50, yPercent: -50, x: 539, y: 959, scale: 0 });
tl.fromTo("#hole", { scale: 0 }, { scale: 1, duration: 0.37, ease: "power3.in" }, 0.1)                          // the hole opens
  .fromTo("#ball", { scale: 0 }, { scale: 1, duration: 0.12, ease: "power2.in", immediateRender: false }, 0.35)   // the ball grows in it
  .fromTo("#mark", { opacity: 0 }, { opacity: 1, duration: 0.067, ease: "none" }, 0.4)
  .to("#mark", { opacity: 0, duration: 0.15, ease: "none" }, 1.15);                                             // only the ball remains
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

Simple MotionNPX

Reel produit « Spécimen vivant » avec morphing de logo

placeholder

Utilisé 1 fois

Aperçu du prompt « Reel de marque avec survol 3D du téléphone et typographie cinétique néon »

Simple MotionSYP

Reel de marque avec survol 3D du téléphone et typographie cinétique néon

<direction> Réalise un reel de marque vertical de 15,5 secondes (1080x1920, 30 i/s). Un survol 3D d'un téléphone au-dessus du profil de ma marque se transforme en moment logo, puis une typographie cinétique découpée syllabe par syllabe sur un beat trap dur en half-time se termine sur mon logo. Tout est dessiné, sans images filmées. Utilise mon logo et, à la place des exemples ci-dessous, les couleurs et les mots de ma marque. Le rendu comporte trois univers : des dégradés du bleu marine profond au presque noir pour la partie 3D, un studio gris clair au milieu et du noir pur avec une lueur néon à la fin. Évite une plaque carrée ou un cube derrière le logo, des lettres en miroir quand un mot passe derrière quelque chose, du texte qui touche les bords du cadre, un cadre à l'envers après un panoramique éclair et un logo hologramme plat ou écrasé. L'écran du téléphone doit tenir exactement dans son cadre. </direction> <structure> 1. 0–4,3 s, survol du téléphone. Un téléphone 3D (une face écran et un dos argenté lumineux avec la bosse de l'appareil photo) entre en culbutant, petit et incliné, dos en avant. Il tourne d'environ 200 degrés et se pose debout sur son écran à 1,05 s (power2.out). L'écran est centré dans le cadre avec une bordure régulière de tous les côtés. Il montre la marque comme un profil social : pseudo, un avatar rond avec mon logo, nom et slogan d'une ligne, une bio de deux lignes avec le site web, un bouton principal rose et quatre stories à la une rondes dont les libellés ne se chevauchent pas. En dessous, une grille de 3x3 de tuiles colorées un peu petites, aux coins arrondis, qui tiennent sur l'écran, avec de courts libellés qui tiennent dans chaque tuile ("IDEAS IN MOTION", "3D", "LOGO REVEAL" ; remplace-les par les tiens). À partir de 1,05 s, le téléphone bascule en arrière d'environ 48 degrés et grandit, tandis que les tuiles se détachent de l'écran vers la caméra à différentes hauteurs. Un panoramique éclair à 1,95 s se pose tout près de l'en-tête du profil. La caméra descend lentement le long de la bio, en s'inclinant, jusqu'à ce qu'un second panoramique éclair à 3,0 s la fasse regarder vers le bas sur l'avatar. Elle se pose à l'endroit, si bien que le profil reste lisible. Trois anneaux roses lumineux s'empilent en sortant de l'avatar (back.out, à 80 ms d'écart). Une copie ronde de mon logo avec un contour rose et une lueur s'élève d'eux, penchée vers le spectateur comme un hologramme. 2. 4,3–6,5 s, logo 3D. Coupe franche sur le symbole de mon logo lui-même, extrudé en 3D : une pile de fines couches d'un ton profond (par exemple rose foncé) derrière la face avant éclairée, sans carré derrière. Il brille sur un dégradé radial bleu marine. Il entre en tournant depuis une pose inclinée (power3.out, 1 s), oscille, puis s'éloigne en tournant, petit (power3.in), vers la coupe. Un mot percutant comme "AHHHH" (remplace-le par le tien) se tient sur un anneau juste sous le logo, jamais par-dessus. Il est composé dans la grotesque extra-grasse avec un dégradé de l'orange au rose et une douce lueur rose, les lettres espacées et jamais en miroir. Le mot balaie l'avant, puis s'envole avec le logo. À partir de 4,75 s, un mot géant en contour à l'arrière-plan ("OMG") apparaît en fondu et dérive vers le haut. 3. 6,5–9,2 s, mots tapés dans une pièce claire. Coupe franche sur une pièce gris clair avec vignettage. Les mots sont tapés lettre par lettre sur les syllabes du beat, dans un groupe 3D que la caméra traverse en dérivant. D'abord "yeah". Puis "she" en blanc sur une boîte noire qui apparaît d'abord comme une fine ligne et s'ouvre d'un coup. Ensuite "typed" en rose, "one" et un "single prompt" plus grand. À 8,1 s, le vignettage se ferme en une ellipse horizontale en 0,22 s et se rouvre en 0,25 s, tandis que les anciens mots s'envolent vers la gauche. De nouveaux mots tombent d'en haut en sortant d'un flou : "Now" / "it moves like". Un "magic" rose monte flou depuis le bas juste avant la coupe. 4. 9,2–15,5 s, pile néon et logo. Coupe sur noir avec le "magic" rose lumineux en haut. Chaque ligne suivante a sa propre couleur, sa propre lueur et sa propre entrée, et elles s'empilent : "And I'm" en orange, "unstoppable" en violet, "might do" en blanc, "MOTION" en rose. La pile tourne lentement en 3D, puis s'envoie vers le haut et hors champ en 0,25 s à 11,95 s. Une ligne de fin apparaît mot par mot en sortant d'un flou, en rose : "no" / "more" / "timelines". À 12,7 s, cinq barres métalliques tombent dessus depuis le haut. À 13,25 s, tout se floute et disparaît, et mon logo en blanc avec un slogan très espacé ("YOUR TAGLINE HERE") apparaît en sortant du flou et tient jusqu'à la fin. Tous les mots entre guillemets sont des exemples à remplacer par les tiens. </structure> <composition> Palette d'exemple : bleu marine #1C0B5D, presque noir #04020C, rose vif #FB2D89, orange #FE9117, violet #8F7BFF, gris clair #D2D4D9, gris de texte #4A4E56 et blanc. Utilise une seule grotesque épaisse, extra-grasse avec un crénage serré (-0,045em), par exemple Manrope ExtraBold, pour chaque mot. Le mot d'arrière-plan de la scène 2 est un contour géant (text-stroke à environ 20 % d'alpha). La partie 3D repose sur des dégradés du bleu marine profond au presque noir, et la scène du logo sur un dégradé radial bleu marine. Le milieu est une pièce gris clair avec vignettage, et la fin est du noir pur avec des lueurs néon. Garde chaque ligne de texte dans le cadre avec des marges de sécurité, surtout les longues lignes "And I'm" et "unstoppable". La carte finale est le logo centré en blanc avec un petit slogan très espacé en dessous. </composition> <techniques> Panoramiques éclair : 0,08 s de flou de 14 px, un saut vers le nouveau cadrage, puis 0,12 s de retour à la netteté. Les anneaux s'empilent avec back.out, à 80 ms d'écart. L'hologramme du logo s'élève avec un contour rose et une lueur et une légère inclinaison vers la caméra. Le logo 3D entre en tournant avec power3.out (1 s) et sort avec power3.in. Chaque lettre tapée se retourne vers le haut depuis le bas (rotationX -70, back.out, 0,18 s, à 30–70 ms d'écart). La boîte de "she" s'ouvre depuis une fine ligne avec un claquement. La transition en iris ferme le vignettage en une ellipse horizontale (0,22 s) et le rouvre (0,25 s). Entrées des lignes néon : les lettres de "And I'm" arrivent d'un coup en grand, "unstoppable" glisse depuis la droite en sortant d'un flou, les lettres de "might do" montent et les lettres de "MOTION" fouettent depuis la gauche avec inclinaison et traînée de mouvement. La pile sort vers le haut en 0,25 s. Les mots de fin apparaissent un par un en sortant d'un flou. Cinq barres métalliques tombent du haut (power3.in, à 30 ms d'écart). À la fin, tout se floute et disparaît, puis le logo apparaît depuis un flou de 24 px (0,45 s) et grossit lentement de 4 % en tenant. Les mots changent toutes les 0,1–0,3 s sur les syllabes du beat ; seul le logo tient. </techniques> <music> Trap en half-time à environ 147 BPM en sol mineur, instrumental, sans voix. Sous la partie téléphone, un sombre motif de cloches avec une tension montante. Le beat complet (grosse caisse 808 dure, sub saturé, clap, charleys roulants avec des rolls en triolets) tombe exactement sur la coupe vers le logo 3D à 4,33 s. Coupe le morceau pour que le drop tombe là. Fondu en sortie à la fin. </music> <sound> Uniquement du sound design par-dessus la musique : un boom quand le téléphone se pose, des whooshes sur les deux panoramiques éclair et un scintillement pour le logo hologramme. Ajoute un coup sur la coupe vers le logo 3D, un impact sur la coupe vers la pièce claire et un whoosh sur l'iris. Puis un boom sur la coupe vers le noir, des whooshes quand les lignes glissent et s'envolent, un coup métallique quand les barres atterrissent et un boom profond sur le logo final, puis un fondu en sortie. Pas de voix off. </sound>

Utilisé 9 fois

Aperçu du prompt « Des mots qui bâtissent une structure : typographie cinétique en boucle »

Simple MotionUKE

Des mots qui bâtissent une structure : typographie cinétique en boucle

<direction> Réalise un film carré de typographie cinétique de 20 secondes, 1080x1080 à 60 i/s, avec musique et sound design. Un court message produit bâtit une structure avec ses propres mots : un mot lourd appuie vers le bas comme un linteau, un autre pend à des câbles et courbe la ligne à laquelle il est suspendu, deux mots pivotent à la verticale pour devenir des supports, la caméra plonge à travers l'œil d'une lettre, et la déclaration finale s'assemble sur une plateforme. Il doit boucler sans couture : la dernière image est exactement la première. Tout est dessiné : caractères plats, lignes et filets sur un fond d'encre profonde et plat. Évite les rushes, photos, textures, grain, étalonnages et dégradés. Les charges lourdes ne rebondissent jamais ; seule la ligne est élastique. Le mouvement suit le phrasé du message, pas un rythme de danse. Tous les mots à l'écran sont des exemples à remplacer par ton propre message, choisis selon le rôle et la longueur de chaque emplacement pour que la mise en page tienne. </direction> <structure> - Plan 1, 0–3,3 s, le linteau : un énorme mot lourd, 320 px, traverse le cadre près du haut (exemple « TRAQUER »), sa ligne de base à y 524. En dessous se trouve la ligne, très légèrement inclinée (y 712 à gauche, y 697 à droite). La phrase s'élève de la ligne en deux groupes à 0,33 s et 1,03 s, Playfair 58 px, ligne de base 17 px au-dessus de la ligne (exemple « Pas d'images clés » / « à traquer. »). Elle vit dans l'ouverture entre la ligne de base du grand mot, prolongée à travers le cadre, et la ligne. De 0 à 2,9 s le grand mot s'enfonce de 104 px et s'incline de -0,15 à -1,9 degré autour de sa ligne de base gauche (power2.inOut), si bien que l'ouverture se rétrécit. À 2,93 s il tombe sur la ligne avec un amortissement critique (oméga d'environ 14 par seconde) et se met à l'angle de la ligne. La phrase est coupée par le haut par sa ligne de base et disparaît. - Plan 1 à 2, 3,28–4,03 s : la ligne plie de 5 px sous l'impact. Puis le grand mot s'envole tout droit hors du cadre (power2.inOut, 0,7 s, environ 700 px) tandis que la ligne et tout ce qui est dessus glisse de 230 px vers le haut (power2.inOut, 0,75 s). - Plan 2, 3,5–6,5 s, la charge suspendue : une deuxième phrase s'élève de la ligne à 3,58 s et 4,18 s (exemple « Un chat à la place » / « d'une »). À 4,49 s deux filets fins (1 px, blanc de page clair à 45 %) tombent de la ligne en x 468 et x 627 (power2.inOut, 0,34 s). À 4,79 s un mot lourd de 138 px (exemple « TIMELINE ») tombe de derrière la ligne, découpé à la zone située en dessous. Il tombe d'un mouvement à amortissement critique depuis 191 px au-dessus de sa position de repos (oméga 8,6 par seconde) et pend environ 90 px sous la ligne. À 5,43 s la ligne cède : un affaissement en demi-sinusoïde entre ses extrémités, mû par un ressort sous-amorti (30 px, oméga 11,9 par seconde, taux d'amortissement 0,30). Elle dépasse une fois jusqu'à 41 px, rebondit un peu et se fixe à 30 px. Les filets deviennent des câbles roses de 2,5 px en 0,12 s et le mot s'enfonce avec l'affaissement. Chaque mot de la phrase chevauche la courbe, tourné selon la pente locale. - Plan 3, 6,43–9,47 s, le premier support : la caméra recule à 76 % autour d'un point très à droite du cadre (power2.inOut, 0,65 s), de sorte que la ligne et le mot suspendu se décalent vers la droite et que la phrase s'enfonce dans la ligne. À 6,96 s une expression s'élève en haut à gauche, 49 px à l'écran (exemple « Décris la »). À 7,09 s un mot lourd monte depuis le bas du cadre pour se coucher à côté de l'extrémité gauche libre de la ligne (amortissement critique, 0,6 s). Sa longueur est à peu près la hauteur de l'extrémité libre de la ligne (exemple « VIDÉO »). À 7,95 s il pivote de 90 degrés dans le sens antihoraire autour de son extrémité lointaine (environ 0,8 s) et se dresse sous la ligne, se lisant de bas en haut. En se relevant il soulève l'extrémité gauche de la ligne de 61 px (power4.out, 0,53 s) et le mot suspendu s'incline à +2,7 degrés. À 8,83 s une petite expression s'élève sous le mot suspendu (exemple « Des idées en »). À 9,02 s un grand mot en Playfair s'élève (152 px à l'écran, 0,56 s) dont la deuxième lettre est un O (exemple « MOUVEMENT »). Dans l'œil du O la scène suivante est déjà dessinée à environ 5 % de sa taille : la ligne, le support et le mot suspendu dans leur prochaine disposition. - Plan 3 à 4, 9,47–10,02 s, à travers le O : la caméra zoome dans l'œil du O. Le logarithme naturel de l'échelle croît avec le carré du temps (environ x18 à 10,0 s) tandis que le centre de l'œil glisse vers le centre du cadre (power2.inOut). La petite scène suit le zoom, puis le dépasse et atterrit exactement en plein cadre à 9,93 s alors que l'anneau du O balaie au-delà des bords. - Plan 4, 10–12,5 s, le niveau : une expression s'élève en haut à gauche à 10,22 s et 10,52 s, 64 px (exemple « Monte avec » / « des mots. »). À 10,49 s un deuxième support dressé (le même mot) monte depuis le bas au bord droit pour se placer sous l'extrémité droite basse de la ligne (amortissement critique, 0,89 s). De 11,08 à 11,43 s la ligne se met parfaitement à l'horizontale et perd son affaissement (power1.out), et le mot suspendu se met à niveau avec elle. C'est le premier moment parfaitement horizontal du film. De 11,4 à 11,6 s un filet de sol de 1 px (#E9E4F2 à 18 %) se trace depuis le centre en y 965 (power2.in). Puis immobilité. - Plan 5, 12,5–16 s, la plateforme : l'expression du plan 4 s'enfonce. À 12,53 s le mot suspendu monte pour se placer juste sous la ligne (amortissement critique, 0,7 s) et les câbles raccourcissent avec lui. À 12,93 s une expression à empattements (54 px, exemple « Ton idée est prête à ») monte pour attendre environ 58 px au-dessus de la rangée, puis à 13,83 s se pose dessus (amortissement critique, 0,5 s). À 13,33 s le premier mot lourd de la plateforme sort de la ligne (117 px, 0,56 s, exemple « BOUGER. »). À 14,17 s un court mot à empattements monte pour attendre au-dessus de la ligne, puis à 14,59 s se pose sur la ligne (le premier mot de [your brand]). À 14,87 s le dernier mot lourd sort de la ligne et se pose en dernier (119 px, 0,58 s ; le dernier mot de [your brand], avec un point final). - Plan 6, 16–18 s : tiens la déclaration complète ; rien ne bouge. - Plan 7, 18–20 s, la boucle : à 18,0 s la caméra plonge sous la plateforme au pied de la haste d'une lettre du mot suspendu (un E ou un I). Le logarithme de l'échelle accélère (environ x40 à 19 s) tandis que le pied de la haste est emporté vers le bas hors du cadre, jusqu'à ce que la couleur claire de la haste remplisse le cadre. À 19,05 s, sous cette occlusion totale, passe à l'image d'ouverture du plan 1, vue de l'intérieur d'une haste du grand mot : le grand mot à sa position de départ, la ligne, pas de phrase. Les repères de temps indiquent de nouveau le premier plan. Recule avec une échelle logarithmique décélérée (d'environ x22 à x1 à 20,0 s) pour que la dernière image soit exactement la première. - Rythme : environ un nouvel élément toutes les 0,5–0,7 s au sein d'un plan, une longue pression lente au plan 1, une brève immobilité après la mise à niveau de la ligne et deux secondes de maintien avant la boucle. </structure> <composition> - Fond : encre profonde #1C0B5D, plat. Tous les caractères en blanc de page clair #FAF9FF. Un seul accent structurel, rose #FB2D89, utilisé uniquement pour la ligne principale, les câbles et le repère de plan. - Mots lourds : Pliant 900 à largeur 105 (une grotesque large et très grasse), approche serrée. Expressions : Playfair Display 400. Repères de temps : JetBrains Mono 13 px en lavande #F0EDFF à 47 % d'opacité. - Marges de 60 px. La ligne principale est un trait rose de 4 px de x 60 à x 1020. - Repères de temps sur chaque image, en haut : - en haut à gauche : ton adresse web en capitales (exemple « YOURSITE.COM ») ; - en haut à droite : l'étendue du plan courant, écrite comme « 06.50 — 10.00 » ; - dessous : un filet de 1 px (#E9E4F2 à 18 %) de x 60 à x 1020, avec une graduation de 3 px chaque seconde et de 6 px toutes les cinq secondes ; - sur ce filet : une barre rose de 3 px couvrant exactement l'étendue du plan courant. - La barre et les temps sautent au plan suivant sur sa première image. Il y a sept plans : 0–3, 3–6,5, 6,5–10, 10–12,5, 12,5–16, 16–18 et 18–20 s. </composition> <techniques> - Chaque expression se révèle en s'élevant d'une ligne. Elle est découpée à la zone au-dessus de la ligne (ou au-dessus d'une ligne invisible environ 17 px sous sa ligne de base) et part 1,28 corps plus bas, entièrement cachée. Elle se pose sur une courbe à amortissement critique, 1 - (1 + 6p)e^(-6p), normalisée pour atteindre 1 en 0,5 s : départ rapide, longue pose douce, sans dépassement. - Les expressions d'une même phrase arrivent en groupes parlés espacés de 0,6–0,7 s. - Les charges lourdes se posent avec un vrai mouvement à amortissement critique, sans rebond. Seule la ligne est élastique : un ressort sous-amorti quand elle cède. - Les mots chevauchant la ligne courbée tournent selon sa pente locale. - Quand un plan se termine, sa phrase s'enfonce de nouveau dans sa ligne (power2.in, environ 0,26 s). - La caméra est échelle et position sur toute la scène : - un recul à 76 % autour d'un point très à droite du cadre ; - un zoom à travers l'œil d'une lettre, où le logarithme naturel de l'échelle croît avec le carré du temps et où la mise en page suivante est pré-dessinée dans l'œil ; - une plongée dans la haste d'une lettre qui s'achève en occlusion totale et cache la coupe vers l'image d'ouverture. </techniques> <music> Un lit électronique cinématographique minimaliste à 120 BPM, exactement 10 mesures, de sorte que chaque limite de plan tombe sur un temps (3, 6,5, 10, 12,5, 16 et 18 s). Il comporte une basse synthétique profonde et pulsée, des nappes douces, un motif pincé clairsemé et une percussion légère en tic-tac. L'arc : - 0–3 s : grave et lourd, avec un accent à 3 s ; - à partir de 3 s : un élan ; - jusqu'à 10 s : une montée de filtre vers un fort premier temps exactement à 10 s, le moment où le zoom se pose ; - à partir de 11,5 s : ouvert et presque immobile ; - jusqu'à 15,5 s : une montée assurée vers une déclaration pleine ; - 16–18 s : un accord tenu ; - 18–20 s : une houle culminant à 19 s qui retombe sur la texture d'ouverture à 20 s, de sorte que la boucle soit inaudible. Pas de voix. </music> <sound> Effets sonores uniquement par-dessus le lit, sans batterie ni basse propres : - un doux tic de bois sur la première image visible de chaque expression ; - un boom grave avec un lourd coup de bois quand le linteau se pose (3,1 s), et un whoosh d'air quand il s'envole ; - deux minuscules tics quand les filets fins tombent ; - un whoosh descendant, puis un craquement de planche avec une courte chute de sub quand la ligne cède ; - un doux swoosh sous le recul de caméra ; - des whooshes quand le support monte et pivote, avec un coup quand il soulève la ligne ; - un riser vers un coup de cloche quand le zoom à travers le O se pose à 10 s ; - un léger clic métallique quand la ligne se verrouille à plat, et un doux chuintement quand le filet de sol se trace ; - des coups de bois quand les mots de la plateforme se posent, et de doux tapotements quand les expressions se posent ; - un boom plus profond avec un coup de bois et une cloche discrète sous le dernier mot ; - un riser vers le fondu au blanc de la plongée, un swoosh inversé à la coupe cachée et un whoosh au recul. Pas de voix off. Mixe à environ -14 LUFS avec un pic réel inférieur à -1 dBTP. </sound> <references> Typographie cinétique éditoriale de style suisse où les mots ont du poids et agissent comme de l'architecture (linteaux, câbles, colonnes, une plateforme). Typographie à simulation physique, avec des poses à amortissement critique et une ligne élastique. Boucles typographiques à zoom infini qui voyagent à travers les yeux et les hastes des lettres. </references>

Utilisé 1 fois

Newsletter

Nous envoyons les meilleurs nouveaux prompts de la communauté avec leurs vidéos. Pas de spam, et chaque e-mail contient un lien de désabonnement.

Votre e-mail ne sert qu’à cette newsletter. Politique de confidentialité

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é