Simple MotionCode du prompt: NPXReel produit « Spécimen vivant » avec morphing de logo
placeholder
Utilisé 1 foisFilm carré en boucle de 20 secondes en typographie cinétique où des mots lourds deviennent linteau, charge suspendue et supports, avant une phrase de marque.
Code du prompt UKEPublié Utilisé 1 fois
Utiliser le promptLe prompt s’ouvre dans l’app : ajoutez vos propres éléments, et l’agent construit la vidéo.
Signaler ce promptRéalise un 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.
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.
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.
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.
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.
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.
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.
Les procédés de motion design qui composent la vidéo, chacun avec un code autonome à ouvrir dans un navigateur ou à confier à votre agent.
Chaque phrase d'une proposition en empattement se tient au-dessus d'un filet d'accent de 4 px et est rognée à la zone au-dessus du bord supérieur du filet ; elle part 1,28 corps plus bas, entièrement cachée, et monte selon une courbe à amortissement critique normalisée pour arriver en 0,5 s (sans dépassement, départ rapide, longue arrivée douce). La phrase suivante de la même proposition démarre 0,6 à 0,7 s plus tard, si bien que le texte se lit par groupes parlés.
Quand l’utiliser Révéler une phrase groupe par groupe, comme si elle poussait de la ligne sur laquelle elle repose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Phrases qui jaillissent d'une ligne</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="above-line"><rect x="0" y="0" width="1080" height="558" /></clipPath></defs>
<g clip-path="url(#above-line)">
<text id="phrase-1" class="serif" x="64" y="541" font-size="58">No keyframes</text>
<text id="phrase-2" class="serif" x="430" y="541" font-size="58">to hunt for.</text>
</g>
<rect x="60" y="558" width="960" height="4" fill="#FB2D89" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const SIZE = 58; // font size of the phrases, px
const RISE = 1.28 * SIZE; // travel: the phrase starts fully hidden under the rule
const DUR = 0.5; // seconds to land
tl.fromTo("#phrase-1", { y: RISE }, { y: 0, duration: DUR, ease: arrive }, 0.35);
tl.fromTo("#phrase-2", { y: RISE }, { y: 0, duration: DUR, ease: arrive }, 1.05); // the next spoken group 0.7 s later
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
if (!root) return;
const scale = Math.min(innerWidth / width, innerHeight / height);
Object.assign(root.style, {
width: width + 'px',
height: height + 'px',
transform: 'scale(' + scale + ')',
marginLeft: (innerWidth - width * scale) / 2 + 'px',
marginTop: (innerHeight - height * scale) / 2 + 'px',
});
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>
Un énorme mot lourd pend comme un linteau au-dessus d'une phrase en empattement posée sur un filet d'accent ; la phrase est rognée à la bande comprise entre la ligne de base du mot (prolongée sur tout le cadre) et le filet. Le mot s'enfonce de 104 px en s'inclinant de -0,15 à -1,9 degré autour de sa ligne de base à gauche (power2.inOut sur 2,9 s), ce qui réduit la bande ; puis il tombe sur le filet avec un tassement à amortissement critique (omega 14,4 par seconde) qui l'aligne sur l'angle du filet et ferme la bande, et après 0,35 s de repos il se soulève et quitte le cadre (power2.inOut 0,7 s).
Quand l’utiliser Quand un mot doit physiquement presser, écraser ou fermer la ligne placée sous lui.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mot lourd qui referme une ouverture de texte</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4.2" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="4.2" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="opening"><path id="opening-shape" d="M0 0Z" /></clipPath></defs>
<g clip-path="url(#opening)"><text class="serif" x="64" y="683" font-size="58">No keyframes to hunt for.</text></g>
<rect x="60" y="700" width="960" height="4" fill="#FB2D89" />
<text id="lintel" class="heavy" x="0" y="0" font-size="320" letter-spacing="-5">HUNT</text>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const X0 = 43; // the lintel's left baseline, the pivot of its tilt
const FLOOR = 700; // top edge of the rule
const S = { y: 524, r: -0.15 }; // lintel baseline y and tilt, degrees
function draw() {
document.getElementById("lintel").setAttribute("transform", `translate(${X0} ${S.y}) rotate(${S.r})`);
// the opening: between the lintel's underside (its baseline, extended) and the rule
const k = Math.tan((S.r * Math.PI) / 180), top = (x) => Math.min(S.y + k * (x - X0), FLOOR);
document.getElementById("opening-shape").setAttribute("d", `M-40 ${top(-40)}L1120 ${top(1120)}L1120 ${FLOOR}L-40 ${FLOOR}Z`);
}
// a critically damped settle (omega 14.4/s) written as an ease over 0.45 s
const W = 14.4, D = 0.45, settle = (p) => 1 - (1 + W * D * p) * Math.exp(-W * D * p);
tl.fromTo(S, { y: 524, r: -0.15 }, { y: 628, r: -1.9, duration: 2.9, ease: "power2.inOut" }, 0); // the slow press
tl.fromTo(S, { y: 628, r: -1.9 }, { y: FLOOR, r: 0, duration: D, ease: settle }, 2.93); // the drop seals it
tl.to(S, { y: -420, duration: 0.7, ease: "power2.inOut" }, 3.4); // lift off
tl.eventCallback("onUpdate", draw);
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>
Deux filets fins tombent d'une ligne d'accent (power2.inOut 0,34 s), puis un mot lourd tombe de derrière la ligne, rogné à la zone en dessous, avec une chute à amortissement critique (191 px, omega 8,6 par seconde). À l'atterrissage, la ligne s'affaisse selon un profil demi-sinusoïdal piloté par un ressort sous-amorti (30 px, omega 11,9 par seconde, taux d'amortissement 0,30) : un dépassement, un petit rebond, puis le repos. Les filets deviennent alors des câbles d'accent de 2,5 px, le mot y est suspendu et s'enfonce avec l'affaissement, et les mots en empattement posés sur la ligne suivent la courbe, chacun tourné selon la pente locale.
Quand l’utiliser Donner un poids visible à un mot : la structure à laquelle il est suspendu cède, vacille et tient.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mot suspendu qui plie une ligne élastique</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="under-line"><path id="under-shape" d="M0 0Z" /></clipPath></defs>
<g id="words"></g>
<line id="cable-1" /><line id="cable-2" />
<g clip-path="url(#under-line)"><text id="hung" class="heavy" font-size="138" letter-spacing="1.8">TIMELINE</text></g>
<path id="line" fill="none" stroke="#FB2D89" stroke-width="4" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NS = "http://www.w3.org/2000/svg";
const L0 = 482, L1 = 467; // line ends at x 60 and 1020
const T_RULES = 0.2, T_DROP = 0.5, T_SAG = 1.15; // rules drop, word drops, line gives way
const WORDS = [["Chat", 0], ["instead", 137], ["of", 341], ["a", 406]]; // example words and their x offsets
const sagAt = (t) => { if (t < T_SAG) return 0; const z = 0.3, w = 11.9, u = t - T_SAG, wd = w * Math.sqrt(1 - z * z);
return 30 * (1 - Math.exp(-z * w * u) * (Math.cos(wd * u) + (z / Math.sqrt(1 - z * z)) * Math.sin(wd * u))); };
const lineY = (x, A) => { const u = Math.min(1, Math.max(0, (x - 60) / 960)); return L0 + (L1 - L0) * u + A * Math.sin(Math.PI * u); };
const words = WORDS.map(([w]) => { const t = document.createElementNS(NS, "text"); t.setAttribute("class", "serif"); t.setAttribute("font-size", 58); t.textContent = w; document.getElementById("words").appendChild(t); return t; });
const p2 = gsap.parseEase("power2.inOut");
function draw(t) {
const A = sagAt(t);
let d = ""; for (let x = 60; x <= 1020; x += 16) d += (d ? "L" : "M") + x + " " + lineY(x, A).toFixed(2);
document.getElementById("line").setAttribute("d", d);
document.getElementById("under-shape").setAttribute("d", "M-40 1200L1120 1200" + [1120, 560, -40].map((x) => "L" + x + " " + (lineY(x, A) + 2).toFixed(2)).join("") + "Z");
WORDS.forEach(([w, ox], i) => { const x = 64 + ox + 30, slope = (lineY(x + 1, A) - lineY(x - 1, A)) / 2;
words[i].setAttribute("transform", `translate(${x} ${(lineY(x, A) - 17).toFixed(2)}) rotate(${(Math.atan(slope) * 180 / Math.PI).toFixed(3)}) translate(-30 0)`); });
const u = t - T_DROP, fall = u <= 0 ? -191 : -191 * (1 + 8.6 * u) * Math.exp(-8.6 * u);
const hy = 662 + 0.89 * A + fall;
document.getElementById("hung").setAttribute("transform", `translate(179 ${hy.toFixed(2)}) rotate(-0.87)`);
const drop = p2(Math.min(1, Math.max(0, (t - T_RULES) / 0.34))), hot = Math.min(1, Math.max(0, (t - T_SAG) / 0.12));
[["cable-1", 468], ["cable-2", 627]].forEach(([id, x]) => { const el = document.getElementById(id), top = lineY(x, A), bottom = 662 + 0.89 * A - 4 - (x - 179) * 0.0152;
el.setAttribute("x1", x); el.setAttribute("x2", x); el.setAttribute("y1", top); el.setAttribute("y2", top + (bottom - top) * drop);
el.setAttribute("stroke", hot > 0 ? "#FB2D89" : "#FAF9FF"); el.setAttribute("stroke-opacity", drop > 0 ? 0.45 + 0.55 * hot : 0); el.setAttribute("stroke-width", 1 + 1.5 * hot); });
}
const clock = { t: 0 };
tl.to(clock, { t: 4, duration: 4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
if (!root) return;
const scale = Math.min(innerWidth / width, innerHeight / height);
Object.assign(root.style, {
width: width + 'px',
height: height + 'px',
transform: 'scale(' + scale + ')',
marginLeft: (innerWidth - width * scale) / 2 + 'px',
marginTop: (innerHeight - height * scale) / 2 + 'px',
});
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>
Un mot lourd monte depuis le bas du cadre jusqu'à sa place, près de l'extrémité libre d'une ligne d'accent affaissée (amortissement critique, 0,6 s), se repose, puis pivote de 90 degrés dans le sens antihoraire autour de son extrémité lointaine (power2.inOut 0,8 s) pour se tenir debout, lisible de bas en haut, comme un poteau sous la ligne. En se redressant, il soulève l'extrémité de la ligne sur lui (power4.out 0,53 s) et la ligne garde son affaissement.
Quand l’utiliser Transformer un mot en architecture : un support, une colonne ou un levier qui soulève quelque chose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mot qui se redresse en support</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3.4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<path id="line" fill="none" stroke="#FB2D89" stroke-width="4" />
<text id="support" class="heavy" x="0" y="0" font-size="141.5" letter-spacing="4">VIDEO</text>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const LEN = 514; // advance of the word, px
const PX = 466, PY = 440; // its far end: the pivot of the swing, at the line's free end
const L = { yL: 482, yR: 470, A: 30 }; // line ends (x 466 and 1080) and sag
function draw() {
let d = ""; for (let x = PX; x <= 1080; x += 16) { const u = (x - PX) / (1080 - PX); d += (d ? "L" : "M") + x + " " + (L.yL + (L.yR - L.yL) * u + L.A * Math.sin(Math.PI * u)).toFixed(2); }
document.getElementById("line").setAttribute("d", d);
}
gsap.set("#support", { x: PX - LEN, y: PY });
tl.fromTo("#support", { y: PY + 700 }, { y: PY, duration: 0.6, ease: arrive }, 0.1); // rises into place
tl.to("#support", { rotation: -90, svgOrigin: `${PX} ${PY}`, duration: 0.8, ease: "power2.inOut" }, 1.2); // swings upright
tl.fromTo(L, { yL: 482 }, { yL: PY - 18, duration: 0.53, ease: "power4.out" }, 1.5); // lifts the line's end
tl.eventCallback("onUpdate", draw);
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>
La scène suivante est déjà dessinée dans l'œil d'un grand O en empattement, rognée à la forme de l'œil à environ 5 % de sa taille. La caméra zoome ensuite vers l'œil : le logarithme naturel de l'échelle croît avec le carré du temps (environ x18 en 0,53 s) tandis que le centre de l'œil glisse vers le centre du cadre (power2.inOut) ; la petite scène suit le zoom et, dans les 0,13 dernières secondes, le dépasse pour arriver exactement en plein cadre, pendant que l'anneau de la lettre balaie les bords.
Quand l’utiliser Une transition qui entre dans l'idée suivante par une lettre au lieu de couper vers elle.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zoom à travers l'œil d'une lettre vers la scène suivante</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="2.4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="counter"><ellipse id="counter-shape" /></clipPath></defs>
<g id="outer">
<text class="serif" x="497" y="620" font-size="48.6">Ideas in</text>
<text class="serif" x="492" y="752" font-size="137">M</text>
<text id="ring" class="serif" x="613" y="752" font-size="137">O</text>
<text class="serif" x="717" y="752" font-size="137">TION</text>
</g>
<g clip-path="url(#counter)"><g id="inner">
<path d="M60 455Q540 515 1020 503" fill="none" stroke="#FB2D89" stroke-width="4" />
<text class="heavy" transform="translate(178 669) rotate(2.7)" font-size="138" letter-spacing="1.8">TIMELINE</text>
<text class="heavy" transform="translate(161 973) rotate(-90)" font-size="141.5" letter-spacing="4">VIDEO</text>
</g></g>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const T0 = 0.6, T1 = T0 + 0.53; // zoom start and end, s
let C0 = [0, 0], R = [1, 1];
function measure() { // the counter: the middle of the O's box, about 0.36 x 0.43 of its size
const b = document.getElementById("ring").getBBox();
C0 = [b.x + b.width / 2, b.y + b.height * 0.55]; R = [b.width * 0.36, b.height * 0.43];
}
const p2 = gsap.parseEase("power2.inOut");
function draw(t) {
const u = Math.max(0, (t - T0) / (T1 - T0)), zs = Math.exp(2.9 * Math.min(u, 1.2) ** 2);
const zp = p2(Math.min(1, Math.max(0, (t - T0 + 0.04) / 0.6)));
const c = [C0[0] + (540 - C0[0]) * zp, C0[1] + (548 - C0[1]) * zp];
const cam = `translate(${c[0]} ${c[1]}) scale(${zs}) translate(${-C0[0]} ${-C0[1]})`;
document.getElementById("outer").setAttribute("transform", cam);
const ce = document.getElementById("counter-shape");
ce.setAttribute("cx", C0[0]); ce.setAttribute("cy", C0[1]); ce.setAttribute("rx", R[0]); ce.setAttribute("ry", R[1]); ce.setAttribute("transform", cam);
// the small scene: 5.4 % of the zoom, then it outgrows it and lands at full size
const grow = Math.min(1, Math.max(0, (t - (T1 - 0.2)) / 0.13)), g = Math.exp(Math.log(2) * grow * grow * (3 - 2 * grow));
const s = t >= T1 - 0.07 ? 1 : Math.min(1, 0.054 * zs * g);
const f = s >= 1 ? [540, 540] : [c[0] + (540 - c[0]) * s, c[1] + (540 - c[1]) * s];
document.getElementById("inner").setAttribute("transform", `translate(${f[0]} ${f[1]}) scale(${s}) translate(-540 -540)`);
document.getElementById("outer").style.display = t < T1 + 0.02 ? "inline" : "none";
}
const clock = { t: 0 };
document.fonts.ready.then(() => {
measure();
tl.to(clock, { t: 2.4, duration: 2.4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
if (!root) return;
const scale = Math.min(innerWidth / width, innerHeight / height);
Object.assign(root.style, {
width: width + 'px',
height: height + 'px',
transform: 'scale(' + scale + ')',
marginLeft: (innerWidth - width * scale) / 2 + 'px',
marginTop: (innerHeight - height * scale) / 2 + 'px',
});
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>
Une phrase de conclusion s'assemble sur une seule ligne d'accent : des mots lourds jaillissent de la ligne (rognés au-dessus, amortissement critique, environ 95 px en 0,56-0,58 s), tandis que chaque groupe en empattement monte d'abord d'une ligne invisible juste sous une position d'attente au-dessus de la rangée (0,5 s), se maintient, puis, une fois le rognage levé, se pose sur la rangée ou la ligne en 0,5 s d'atterrissage à amortissement critique. Le dernier mot lourd arrive en dernier, de sorte que l'accent vient de l'alignement et de l'échelle partagés.
Quand l’utiliser Construire une déclaration finale comme une structure, un mot porteur à la fois.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Phrases qui se posent sur une plateforme</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.6" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3.6" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="over-line"><rect x="-40" y="-400" width="1160" height="852.5" /></clipPath>
<clipPath id="wait-a"><rect x="-40" y="-400" width="1160" height="716" /></clipPath>
<clipPath id="wait-b"><rect x="-40" y="-400" width="1160" height="809" /></clipPath>
</defs>
<g id="g-a" clip-path="url(#wait-a)"><text id="phrase-a" class="serif" x="60" y="300" font-size="54">Your idea is ready to</text></g>
<g id="g-b" clip-path="url(#wait-b)"><text id="phrase-b" class="serif" x="509" y="396" font-size="54">Motion</text></g>
<g clip-path="url(#over-line)">
<text id="heavy-a" class="heavy" x="57" y="452" font-size="117" letter-spacing="4.1">MOVE.</text>
<text id="heavy-b" class="heavy" x="706" y="453" font-size="119" letter-spacing="4.1">FAB.</text>
</g>
<rect x="60" y="452.5" width="960" height="4" fill="#FB2D89" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const RISE = 70; // serif phrases start this far under their waiting place, hidden by the clip
tl.fromTo("#phrase-a", { y: RISE }, { y: 0, duration: 0.5, ease: arrive }, 0.1); // rises to wait above the row
tl.fromTo("#heavy-a", { y: 90 }, { y: 0, duration: 0.56, ease: arrive }, 0.5); // rises out of the line
tl.set("#g-a", { attr: { "clip-path": "none" } }, 1.0); // release, then settle onto it
tl.fromTo("#phrase-a", { y: 0 }, { y: 58, duration: 0.5, ease: arrive, immediateRender: false }, 1.0);
tl.fromTo("#phrase-b", { y: RISE }, { y: 0, duration: 0.5, ease: arrive }, 1.34);
tl.set("#g-b", { attr: { "clip-path": "none" } }, 1.76);
tl.fromTo("#phrase-b", { y: 0 }, { y: 55.9, duration: 0.5, ease: arrive, immediateRender: false }, 1.76);
tl.fromTo("#heavy-b", { y: 95 }, { y: 0, duration: 0.58, ease: arrive }, 2.04); // the last word lands last
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
if (!root) return;
const scale = Math.min(innerWidth / width, innerHeight / height);
Object.assign(root.style, {
width: width + 'px',
height: height + 'px',
transform: 'scale(' + scale + ')',
marginLeft: (innerWidth - width * scale) / 2 + 'px',
marginTop: (innerHeight - height * scale) / 2 + 'px',
});
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>
La caméra plonge au pied du fût d'une lettre lourde : le logarithme naturel de l'échelle s'accélère (environ x40 en 1 s) tandis que le pied du fût est emporté vers le bas hors du cadre, jusqu'à ce que la couleur papier du fût remplisse le cadre. Sous cette occultation totale, la scène bascule sur l'image d'ouverture vue de l'intérieur d'un fût de son premier mot, et la caméra recule avec une échelle logarithmique décélérée (environ x22 à x1 en 0,95 s), atterrissant exactement sur la composition d'ouverture pour que le film boucle sans couture.
Quand l’utiliser Une boucle sans couture, ou un raccord entre deux scènes qui partagent une forme de lettre.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plongée dans le fût d'une lettre et sortie en boucle par une autre</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="2.2" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<g id="scene-a">
<path d="M60 455H1020" stroke="#FB2D89" stroke-width="4" />
<text id="word-a" class="heavy" x="178" y="568" font-size="138" letter-spacing="1.8">TIMELINE</text>
</g>
<g id="scene-b">
<path d="M60 712L1020 697" stroke="#FB2D89" stroke-width="4" />
<text id="word-b" class="heavy" x="43" y="524" font-size="320" letter-spacing="-5">HUNT</text>
</g>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const CUT = 1.05; // the switch, under full occlusion
let A = [0, 0], B = [0, 0];
function measure() { // stem feet: the I of the first word and the T of the second, on their baselines
const a = document.getElementById("word-a").getExtentOfChar(1), b = document.getElementById("word-b").getExtentOfChar(3);
A = [a.x + a.width / 2, 568]; B = [b.x + b.width / 2, 524];
}
function draw(t) {
const sa = document.getElementById("scene-a"), sb = document.getElementById("scene-b");
if (t < CUT) { // dive: ln(scale) accelerates, the foot is carried down past the frame
const u = t / CUT, s = Math.exp(4.6 * u * u * u), ax = A[0] + (540 - A[0]) * u, ay = A[1] + 3000 * Math.pow(u, 6);
sa.setAttribute("transform", `translate(${ax} ${ay}) scale(${s}) translate(${-A[0]} ${-A[1]})`);
sa.style.display = "inline"; sb.style.display = "none";
} else { // pull out of the other stem, decelerating, to rest
const u = Math.min(1, (t - CUT) / 0.95), w = 1 - u, s = Math.exp(3.1 * w * w * w), ax = B[0] + (520 - B[0]) * w * w, ay = B[1] + 2800 * Math.pow(w, 4);
sb.setAttribute("transform", `translate(${ax} ${ay}) scale(${s}) translate(${-B[0]} ${-B[1]})`);
sa.style.display = "none"; sb.style.display = "inline";
}
}
const clock = { t: 0 };
document.fonts.ready.then(() => {
measure();
tl.to(clock, { t: 2.2, duration: 2.2, ease: "none", onUpdate: () => draw(clock.t) }, 0);
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
if (!root) return;
const scale = Math.min(innerWidth / width, innerHeight / height);
Object.assign(root.style, {
width: width + 'px',
height: height + 'px',
transform: 'scale(' + scale + ')',
marginLeft: (innerWidth - width * scale) / 2 + 'px',
marginTop: (innerHeight - height * scale) / 2 + 'px',
});
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>
Simple MotionCode du prompt: NPXplaceholder
Utilisé 1 fois
Simple MotionCode du prompt: MOV<direction> Réalise un reel de marque vertical de 19,2 secondes (1080x1920, 30 fps) qui boucle sans raccord. C'est entièrement du motion design, monté sur un beat à 150 BPM (0,4 s par temps, 12 mesures). L'idée : une balle brillante est le héros de tout le film. Elle rebondit sur un manifeste d'accroche à raison d'un mot par temps, devient le balancier d'un pendule, se transforme en lampe qui éclaire une page, attend un montage rapide derrière le nom de ta marque et finit seule sur la carte de fin, exactement là où commence la première image. Le style : une typographie éditoriale audacieuse sur des fonds plats nuit profonde et papier, avec un accent en dégradé rose-orange et un second accent violet. Rythme : frénétique pendant les 3,2 premières secondes, puis deux longues scènes qui respirent sur une pulsation à deux temps, une rafale de 3,2 s de coupes en croches, un climax de 2 s et un point de boucle calme. Évite les images filmées, la voix off, les fondus enchaînés doux et toute coupe qui rate le beat : chaque coupe tombe sur un temps ou un demi-temps. Les mots de couleur d'accent doivent avoir la même graisse ExtraBold que le reste, jamais plus fine. </direction> <structure> 1. Accroche, 0–3,2 s. Une image sombre. La balle (140 px) part du centre et tombe vers une ligne de sol à environ y 1516, en rétrécissant à 88 px, et atterrit à 0,37 s. À partir de 0,4 s, un mot apparaît par temps, puis par demi-temps : « on » (0,4), « ne » (0,8), « fait » (1,2), « pas que prompter. » (1,6), « on » (2,0), « réalise. » (2,2, dans le dégradé d'accent), « tape » (2,6), « lumière » (2,8), « profondeur » (3,0). Remplace-les par tes propres lignes de manifeste. Le fond alterne entre sombre et papier à chaque coupe. Sur « lumière » et « profondeur », la balle s'envole vers le haut et sort en haut à gauche. 2. Pendule, 3,2–8,0 s. Fond papier. La balle devient le balancier (112 px) d'une fine tige sombre suspendue à un pivot situé 380 px au-dessus du centre haut (longueur de bras 1317 px). Une ombre floue de la tige et du balancier est décalée vers la droite. Un titre en capitales sur deux lignes est au milieu et change à chaque oscillation : « FAIT / À LA MAIN ? » → « FAIT / PAR CODE. » (seconde ligne en accent) → « PAS DE / TIMELINE. » → « PAS D' / IMAGES CLÉS. » → « JUSTE / DES MOTS. » (accent) → « ET / LA LUMIÈRE. ». Ce sont des exemples à remplacer. À 7,2 s, la lumière s'éteint au-delà de la tige, et la dernière oscillation traîne l'obscurité à travers le cadre. 3. Lampe, 8,0–12,8 s. Sombre #14112E. La balle devient une lampe lumineuse dont le cône de lumière révèle une page de papier. La page contient « LA LUMIÈRE / N'EST QUE / DES MATHS. » en capitales (exemple ; la dernière ligne en violet) et un petit bloc-logo près de y 1430 : un point en dégradé et ton logotype en encre. À partir de 12,27 s, toute la page est éclairée. 4. Montage, 12,8–16,0 s. Sur le drop, « [ta marque] » en Anton (environ 260 px de haut, centré) reste immobile tandis que le monde derrière change à chaque croche (0,2 s). Les mondes, dans l'ordre : - un blob 3D brillant et marbré rose et orange avec un bord bien visible, sur gris - le même blob de plus près - des blocs plats : carrés violets, sombres et papier, et le dégradé d'accent - des anneaux hypnotiques encre et papier qui zooment et tournent - une étiquette de papier vierge qui se balance au bout d'une ficelle sur du violet - un champ de touches de clavier sombres vu du dessus, avec quelques touches roses et orange qui s'enfoncent - un tore dessiné en points de trame bien distincts sur fond sombre - violet plat avec une grille discrète - des formes 3D de jouet qui culbutent sur un prune sombre (cubes, balles, anneaux, cônes et capsules aux couleurs de la palette plus jaune #FFD23F) - les mêmes formes floutées sur rose pastel - un téléphone en verre sur gris - le blob sur violet - un sol de cubes blancs d'où montent des colonnes roses et orange - le tore de trame en points d'encre sur blanc - corail plat avec une grille 5. Final en voxels, 16,0–18,2 s. Fond violet. Un mot court (ton produit, ou la seconde moitié du nom de ta marque) est construit avec de petits cubes. Il est entièrement formé à 16,6 s, respire, puis éclate à partir de 17,72 s pendant qu'un trou noir s'ouvre depuis le centre et remplit le cadre à 18,17 s. 6. Carte de fin, 18,2–19,2 s. Sombre. La balle grandit à partir de rien au centre (142 px à x 539, y 959). Ton logotype en dégradé rose-orange apparaît dessous à 18,1 s, reste, puis disparaît en fondu à 18,85 s. Il ne reste que la balle, exactement là où commence la première image du film, donc la boucle est parfaite. </structure> <composition> Palette : - nuit profonde #0C0A1E et un #14112E un peu plus clair pour les scènes sombres - papier #F2EFFA pour les claires - encre #1C0B5D pour le texte sur papier - un dégradé d'accent rose-orange #FB2D89 → #FE9117 - un second accent violet #7C4DFF - jaune #FFD23F uniquement pour les formes de jouet Les mots de l'accroche sont couleur papier sur les coupes sombres et couleur encre sur les coupes papier. Typographie : - mots et titres en Manrope ExtraBold, avec un crénage serré (-0,035em sur les titres en capitales) - le nom de la marque dans le montage en Anton - un petit pseudo « @yourbrand » (à remplacer) en JetBrains Mono en haut à gauche, à 56 px du bord gauche et 246 px du haut, pendant tout le film Titre du pendule : la ligne un d'environ 145 px de hauteur de capitale, la ligne deux d'environ 128 px, centré. La balle est une sphère brillante : un doux reflet blanc en haut à gauche sur un corps en dégradé orange → rose → magenta profond. Nom de marque du montage : trois couches (une ombre dure décalée de 9 px, un contour de 16 px et le remplissage). Il est blanc avec un contour sombre sur les mondes sombres ou chargés, et sombre avec un contour blanc sur les clairs. Mot en voxels : une rangée, d'environ 430 px de haut et 890 px de large. La première lettre est en dégradé rose vers orange de haut en bas ; les autres sont blanc papier. Carte de fin : balle centrée ; le logotype en dégradé vers y 1225, d'environ 620 px de large. </composition> <techniques> Accroche : - Chaque mot atterrit en quatre images avec un fort ease-out (power3.out). Les entrées alternent : un crénage qui se resserre depuis un demi-em, une chute avec zoom depuis 125 % et 320 px plus bas, un étirement vertical depuis 260 % ancré sur la ligne de base et un glissement depuis 835 px hors champ à gauche. - Les changements de fond sont des coupes franches. - À chaque coupe, la balle gonfle à 125 % sur place pendant une image puis est au sommet de son bond à la suivante. Sur cinq images, elle glisse vers l'autre position de repos (x 287 ou 788) en rétrécissant à nouveau. Pendule : - Il oscille de ±23,6° avec power3.inOut en 0,34 s, chaque oscillation centrée sur un temps sur deux (3,6, 4,4, 5,2, 6,0, 6,8, 7,6 s), et reste immobile aux extrémités. - Trois copies estompées espacées d'une image traînent derrière le balancier. - La tige est bien visible et son ombre se remarque. - Chaque oscillation balaie le titre vers le suivant. Le nouveau titre apparaît du côté que le balancier a déjà dépassé et l'ancien de l'autre, avec des masques inset rectangulaires sur le même easing. - À 7,2 s, tout ce qui est au-delà de la ligne de la tige devient sombre, et la dernière oscillation traîne l'obscurité à travers le cadre. Lampe : - La balle glisse au centre en un tiers de seconde et commence à briller, avec un doux halo orange-rose d'environ 220 px autour d'elle. - Un cône de lumière s'ouvre depuis la balle comme une fente de 7° pointant droit vers le haut. Il balaie vers le bas à gauche et à droite en s'élargissant à mesure que la balle bouge : jusqu'à environ x 800, y 1090, puis x 900, y 975, puis vers le haut jusqu'à x 760, y 560. - Le cône se stabilise au-dessus des mots, large de 120° et pointant vers le bas. - Le cône est un masque en forme de coin dont le sommet est à la balle, révélant la page de papier sous l'obscurité. Une copie de la page à 28 % d'opacité, plus large de 4,5° de chaque côté, crée une pénombre grise nette. - À partir de 12,27 s, le cône s'ouvre à 360° en 0,33 s avec un easing in-out. Montage : coupes franches toutes les 0,2 s derrière le nom immobile. Chaque monde bouge dans son créneau : les anneaux zooment et tournent, l'étiquette se balance, les touches s'enfoncent, les formes culbutent et les colonnes montent. Final en voxels : - Environ 800 petits cubes, sur trois de profondeur, sur une grille de 11x18 par lettre. - Les cubes partent dispersés en profondeur et volent à leur place avec un quartic in-out en une demi-seconde, décalés jusqu'à 0,18 s, tandis que des particules filent devant la caméra. - Le mot respire : chaque lettre tourne un peu autour de son centre et une ondulation parcourt ses rangées. - À partir de 17,72 s, chaque cube éclate vers l'extérieur et vers l'objectif, strié de flou de mouvement. - Un disque sombre s'ouvre depuis un point au centre (power3.in, 0,37 s à partir de 17,8 s) et remplit le cadre à 18,17 s, les cubes volant par-dessus. Carte de fin : la balle grandit à partir de rien en environ 0,12 s, et le logotype disparaît en fondu à 18,85 s. </techniques> <music> Crée un morceau instrumental électronique original, sombre et percutant, à 150 BPM en ré mineur avec un feeling half-time (grosse caisse sur le un, caisse claire sur le trois). Il comporte une basse distordue pulsante en croches, une batterie serrée et des nappes tendues, ainsi qu'un chop vocal traité sans paroles utilisé comme texture, sans chant. Il joue dès la première image. Ses grosses caisses et ses caisses claires tombent sur les coupes de mots et les oscillations du pendule, et il drope à 12,8 s. Il se termine sur un coup lourd avec un accord sombre exactement sur le trou noir à 18,0 s, qui résonne sous la carte de fin. Coupe-le à 19,2 s sur la mesure. </music> <sound> Superpose ceci à la musique : - un clic doux à chaque flash de mot - un whoosh à chaque oscillation - un riser vers le pendule - un balayage descendant quand la lumière s'éteint - une cloche quand la balle s'allume - un riser vers un boom sur le montage à 12,8 s - un léger tic à chaque nouveau monde - un whoosh quand les cubes arrivent en trombe - un petit boom quand le mot se pose - un riser vers un boom profond sous le trou noir Pas de voix. </sound>
Utilisé 2 fois
Simple MotionCode du prompt: SYP<direction> Réalise un reel de marque vertical de 15,5 secondes (1080x1920, 30 i/s). Un survol 3D d'un téléphone au-dessus du profil de ma marque se transforme en moment logo, puis une typographie cinétique découpée syllabe par syllabe sur un beat trap dur en half-time se termine sur mon logo. Tout est dessiné, sans images filmées. Utilise mon logo et, à la place des exemples ci-dessous, les couleurs et les mots de ma marque. Le rendu comporte trois univers : des dégradés du bleu marine profond au presque noir pour la partie 3D, un studio gris clair au milieu et du noir pur avec une lueur néon à la fin. Évite une plaque carrée ou un cube derrière le logo, des lettres en miroir quand un mot passe derrière quelque chose, du texte qui touche les bords du cadre, un cadre à l'envers après un panoramique éclair et un logo hologramme plat ou écrasé. L'écran du téléphone doit tenir exactement dans son cadre. </direction> <structure> 1. 0–4,3 s, survol du téléphone. Un téléphone 3D (une face écran et un dos argenté lumineux avec la bosse de l'appareil photo) entre en culbutant, petit et incliné, dos en avant. Il tourne d'environ 200 degrés et se pose debout sur son écran à 1,05 s (power2.out). L'écran est centré dans le cadre avec une bordure régulière de tous les côtés. Il montre la marque comme un profil social : pseudo, un avatar rond avec mon logo, nom et slogan d'une ligne, une bio de deux lignes avec le site web, un bouton principal rose et quatre stories à la une rondes dont les libellés ne se chevauchent pas. En dessous, une grille de 3x3 de tuiles colorées un peu petites, aux coins arrondis, qui tiennent sur l'écran, avec de courts libellés qui tiennent dans chaque tuile ("IDEAS IN MOTION", "3D", "LOGO REVEAL" ; remplace-les par les tiens). À partir de 1,05 s, le téléphone bascule en arrière d'environ 48 degrés et grandit, tandis que les tuiles se détachent de l'écran vers la caméra à différentes hauteurs. Un panoramique éclair à 1,95 s se pose tout près de l'en-tête du profil. La caméra descend lentement le long de la bio, en s'inclinant, jusqu'à ce qu'un second panoramique éclair à 3,0 s la fasse regarder vers le bas sur l'avatar. Elle se pose à l'endroit, si bien que le profil reste lisible. Trois anneaux roses lumineux s'empilent en sortant de l'avatar (back.out, à 80 ms d'écart). Une copie ronde de mon logo avec un contour rose et une lueur s'élève d'eux, penchée vers le spectateur comme un hologramme. 2. 4,3–6,5 s, logo 3D. Coupe franche sur le symbole de mon logo lui-même, extrudé en 3D : une pile de fines couches d'un ton profond (par exemple rose foncé) derrière la face avant éclairée, sans carré derrière. Il brille sur un dégradé radial bleu marine. Il entre en tournant depuis une pose inclinée (power3.out, 1 s), oscille, puis s'éloigne en tournant, petit (power3.in), vers la coupe. Un mot percutant comme "AHHHH" (remplace-le par le tien) se tient sur un anneau juste sous le logo, jamais par-dessus. Il est composé dans la grotesque extra-grasse avec un dégradé de l'orange au rose et une douce lueur rose, les lettres espacées et jamais en miroir. Le mot balaie l'avant, puis s'envole avec le logo. À partir de 4,75 s, un mot géant en contour à l'arrière-plan ("OMG") apparaît en fondu et dérive vers le haut. 3. 6,5–9,2 s, mots tapés dans une pièce claire. Coupe franche sur une pièce gris clair avec vignettage. Les mots sont tapés lettre par lettre sur les syllabes du beat, dans un groupe 3D que la caméra traverse en dérivant. D'abord "yeah". Puis "she" en blanc sur une boîte noire qui apparaît d'abord comme une fine ligne et s'ouvre d'un coup. Ensuite "typed" en rose, "one" et un "single prompt" plus grand. À 8,1 s, le vignettage se ferme en une ellipse horizontale en 0,22 s et se rouvre en 0,25 s, tandis que les anciens mots s'envolent vers la gauche. De nouveaux mots tombent d'en haut en sortant d'un flou : "Now" / "it moves like". Un "magic" rose monte flou depuis le bas juste avant la coupe. 4. 9,2–15,5 s, pile néon et logo. Coupe sur noir avec le "magic" rose lumineux en haut. Chaque ligne suivante a sa propre couleur, sa propre lueur et sa propre entrée, et elles s'empilent : "And I'm" en orange, "unstoppable" en violet, "might do" en blanc, "MOTION" en rose. La pile tourne lentement en 3D, puis s'envoie vers le haut et hors champ en 0,25 s à 11,95 s. Une ligne de fin apparaît mot par mot en sortant d'un flou, en rose : "no" / "more" / "timelines". À 12,7 s, cinq barres métalliques tombent dessus depuis le haut. À 13,25 s, tout se floute et disparaît, et mon logo en blanc avec un slogan très espacé ("YOUR TAGLINE HERE") apparaît en sortant du flou et tient jusqu'à la fin. Tous les mots entre guillemets sont des exemples à remplacer par les tiens. </structure> <composition> Palette d'exemple : bleu marine #1C0B5D, presque noir #04020C, rose vif #FB2D89, orange #FE9117, violet #8F7BFF, gris clair #D2D4D9, gris de texte #4A4E56 et blanc. Utilise une seule grotesque épaisse, extra-grasse avec un crénage serré (-0,045em), par exemple Manrope ExtraBold, pour chaque mot. Le mot d'arrière-plan de la scène 2 est un contour géant (text-stroke à environ 20 % d'alpha). La partie 3D repose sur des dégradés du bleu marine profond au presque noir, et la scène du logo sur un dégradé radial bleu marine. Le milieu est une pièce gris clair avec vignettage, et la fin est du noir pur avec des lueurs néon. Garde chaque ligne de texte dans le cadre avec des marges de sécurité, surtout les longues lignes "And I'm" et "unstoppable". La carte finale est le logo centré en blanc avec un petit slogan très espacé en dessous. </composition> <techniques> Panoramiques éclair : 0,08 s de flou de 14 px, un saut vers le nouveau cadrage, puis 0,12 s de retour à la netteté. Les anneaux s'empilent avec back.out, à 80 ms d'écart. L'hologramme du logo s'élève avec un contour rose et une lueur et une légère inclinaison vers la caméra. Le logo 3D entre en tournant avec power3.out (1 s) et sort avec power3.in. Chaque lettre tapée se retourne vers le haut depuis le bas (rotationX -70, back.out, 0,18 s, à 30–70 ms d'écart). La boîte de "she" s'ouvre depuis une fine ligne avec un claquement. La transition en iris ferme le vignettage en une ellipse horizontale (0,22 s) et le rouvre (0,25 s). Entrées des lignes néon : les lettres de "And I'm" arrivent d'un coup en grand, "unstoppable" glisse depuis la droite en sortant d'un flou, les lettres de "might do" montent et les lettres de "MOTION" fouettent depuis la gauche avec inclinaison et traînée de mouvement. La pile sort vers le haut en 0,25 s. Les mots de fin apparaissent un par un en sortant d'un flou. Cinq barres métalliques tombent du haut (power3.in, à 30 ms d'écart). À la fin, tout se floute et disparaît, puis le logo apparaît depuis un flou de 24 px (0,45 s) et grossit lentement de 4 % en tenant. Les mots changent toutes les 0,1–0,3 s sur les syllabes du beat ; seul le logo tient. </techniques> <music> Trap en half-time à environ 147 BPM en sol mineur, instrumental, sans voix. Sous la partie téléphone, un sombre motif de cloches avec une tension montante. Le beat complet (grosse caisse 808 dure, sub saturé, clap, charleys roulants avec des rolls en triolets) tombe exactement sur la coupe vers le logo 3D à 4,33 s. Coupe le morceau pour que le drop tombe là. Fondu en sortie à la fin. </music> <sound> Uniquement du sound design par-dessus la musique : un boom quand le téléphone se pose, des whooshes sur les deux panoramiques éclair et un scintillement pour le logo hologramme. Ajoute un coup sur la coupe vers le logo 3D, un impact sur la coupe vers la pièce claire et un whoosh sur l'iris. Puis un boom sur la coupe vers le noir, des whooshes quand les lignes glissent et s'envolent, un coup métallique quand les barres atterrissent et un boom profond sur le logo final, puis un fondu en sortie. Pas de voix off. </sound>
Utilisé 7 foisNewsletter
Nous envoyons les meilleurs nouveaux prompts de la communauté avec leurs vidéos. Pas de spam, et chaque e-mail contient un lien de désabonnement.
Votre e-mail ne sert qu’à cette newsletter. Politique de confidentialité