votre motion designer IA

FR

Ouvrir l’app bêta

Simple Motion

Showreel mathématique vivant avec coupes glitch sur le rythme

Un showreel mathématique lumineux de 20 secondes : sinusoïde, π de Fourier, nœud 3D, surface ondulée, fractale, spirale de tournesol et identité d'Euler, coupes glitch sur le rythme.

Publié 10 novembre 2026

Utiliser le prompt

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

Signaler ce prompt

Intention

Réalise un showreel de motion design de 20 secondes entièrement construit à partir des mathématiques : chaque image est générée à partir du temps t qui s'écoule, sans photos, séquences filmées ni images. Paysage 1920x1080 à 60 ips. Il doit donner l'impression d'un instrument de laboratoire précis qui devient soudain beau : sombre, lumineux, exact, avec une coupe glitch toutes les deux secondes sur le rythme. Huit scènes mathématiques se jouent dans un cadre fixe façon instrument (crochets d'angle, logotype, compteur et libellé de scène, point de rythme, horloge, ligne de progression, équation en direct), puis une carte finale avec la marque. Évite le grain, les images de stock et toute décoration qui ne vient pas des mathématiques.

Structure

Coupes à 2, 4, 8, 10, 12, 14, 16 et 18 s, toutes sur le rythme. 1) 0-2 s, origine : un anneau turquoise pâle grandit depuis le centre jusqu'à r 238 px (0-0,45 s, ease out) ; des axes graduées tous les 60 px sortent d'un point central lumineux ; un anneau d'onde quitte le point à chaque temps. Une ligne très espacée comme "YOUR AI MOTION DESIGNER" se résout à partir de caractères aléatoires (0,3-0,78 s) ; une courte ligne à empattements comme "Ideas in motion" s'écrit lettre par lettre à côté de l'origine (0,5-1,12 s). De 1,35 à 1,95 s, un arc turquoise de r 220 s'enroule une fois autour de l'origine avec un point blanc à son extrémité, et les mots s'effacent. 2) 2-4 s, cercle unité : un cercle turquoise (r 220) à gauche, l'angle croissant à 4,52 rad/s. Rayon blanc, côté du cosinus turquoise, côté du sinus rose, un arc d'angle orange avec l'étiquette θ, une ligne rose en pointillés vers un point rose à x 820 où le sinus s'écrit ; l'historique de l'angle s'étire vers la droite en sinusoïde rose lumineuse (104 px par radian) avec une cosinusoïde turquoise pâle à côté et des repères pointillés +1/-1. Valeurs en direct "θ = 4.524 rad" et "sin θ = -0.982". Équation : y = sin θ. 3) 4-8 s, épicycles de Fourier : une chaîne de 180 cercles en rotation (triés par taille, anneaux lavande pâles, rayons blancs) dessine le contour d'un grand π en orange lumineux de 4,3 à 7,2 s (progression sine in-out), puis la forme se remplit d'un doux dégradé du rose au violet tandis que la chaîne s'efface. À gauche, un spectre de |cₙ| pour n = -24...24 (hauteur des barres selon la racine carrée de l'amplitude) s'allume du centre vers l'extérieur au fil du dessin ; valeurs "K = 180 terms" et "t/2π = 0.527". Équation : f(t) = Σ cₙ e^{int}. 4) 8-10 s, un nœud de Lissajous 3D (sin 3t, sin 2t, sin 5t) tracé en 0,6 s, puis tournant en perspective : un ruban dont la couleur va du turquoise au violet puis au rose le long de la courbe et dont la largeur et la luminosité suivent la profondeur. À droite, une grille 3x3 de petites figures de Lissajous planes aux libellés 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 se dessine une à une avec une phase qui dérive ; la dernière devient turquoise dans un cadre fin. 5) 10-12 s, une surface d'ondulations en fil de fer z = cos(kr - ωt)/(1 + r) sur une grille 48x48 vue à 67° au-dessus, révélée du centre vers l'extérieur en 0,55 s et tournant lentement, lignes colorées selon la hauteur du turquoise au violet puis au rose. Un point sonde orange chevauche la surface à r = 3.2 avec une ligne de repère et des valeurs en direct "r = 3.200", "z = 0.276". 6) 12-14 s, un ensemble de Julia z² + c remplissant le cadre, ouvert par un portail circulaire qui s'étend depuis le centre avec un bord blanc. c = 0.7885·e^{iα} glisse le long de son cercle (sine in-out), si bien que la fractale se transforme de spirales séparées en une forme connexe à l'intérieur noir ; zoom lent et rotation. Couleurs selon le temps d'échappement : indigo, violet, rose, orange, crème pâle jusqu'au blanc. Un encart montre c se déplaçant sur son cercle avec les valeurs "Re c" et "Im c". 7) 14-16 s, phyllotaxie : 1500 graines à θₙ = n·137.508°, rₙ = c√n apparaissent du centre vers l'extérieur et tournent, blanches d'abord, puis roses, violettes et turquoise. À gauche, φ = 1.6180339887... s'écrit chiffre par chiffre, une rangée de Fibonacci grandit (21 et 34 en turquoise), avec "seeds n = 1500" et "spirals 21 ⟲ 34 ⟳". 8) 16-18 s, identité d'Euler : les graines tourbillonnent en un anneau qui devient un cercle unité turquoise à gauche ; un point balaie de 1 à -1 en laissant un arc orange au-dessus ; e^{iπ} apparaît en grand, puis "+", "1", "=" un à un sur les temps, un anneau pulse en -1, et "0" atterrit à 18 s dans un anneau rose. 9) 18-20 s, carte finale : l'identité rétrécit vers le haut ; un grand logotype très espacé comme "YOUR BRAND" (à remplacer par le vôtre) monte lettre par lettre depuis le bas à l'intérieur d'un masque (décalage de 0,06 s), un soulignement turquoise-violet-rose se dessine en dessous, une ligne espacée comme "IDEAS IN MOTION × [your web address]" se résout à partir de caractères aléatoires, et une ligne italique à empattements "From idea to video in one chat" apparaît en fondu. Tout s'efface au noir de 19,35 à 19,95 s.

Composition

Arrière-plan : une lueur radiale indigo-noir profond, centre #10063A s'estompant vers #03030A sur les bords, sans grain. Accents : rose #FB2D89 (principal), orange #FE9117, violet #7C6CF2, turquoise #2DD4B0 et blanc. Lignes et libellés dans des gris lavande : #9A98A4 pour les libellés, #57516F pour les légendes pâles, #433E53 pour les axes. Les traits brillent doucement avec un flou de 12-16 px de leur propre couleur. Typographie : équations dans un empattement de type Computer Modern (Old Standard TT, variables en italique, fonctions en romain) ; toute valeur, tout compteur et toute légende en monospace (Liberation Mono ou similaire), petit et très espacé ; le nom de la marque dans une grotesque grasse à l'espacement très large. Un cadre fixe reste pendant toute la durée, apparaissant en 0,15-0,9 s : fins crochets d'angle de 27 px de long, à 47 px de chaque coin. En haut à gauche : un logotype comme "YOUR BRAND" (gras, 22 px, espacement d'environ 0,35 em) avec une minuscule ligne espacée dessous comme "IDEAS IN MOTION · [your web address]". En haut à droite : un compteur de scènes "01 / 08" et dessous un court libellé par scène, par exemple "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (à remplacer par vos slogans), avec un petit point rose à sa gauche. En bas à droite : une horloge "t = 03.35 s" (deux décimales) et une minuscule ligne avec le numéro d'image. En bas : une ligne de progression de 1 px de x 80 à 1840 qui se remplit d'un dégradé turquoise-violet-rose au fil du temps, avec de petites graduations à chaque limite de scène. En bas à gauche : l'équation de la scène en cours.

Techniques

Chaque coupe est un glitch de 0,2 s : l'image sortante est découpée en bandes horizontales décalées latéralement, 3 à 6 fines lignes pleine largeur en turquoise, rose, orange et blanc scintillent, tout le cadre flashe en blanc à environ 14 % et décroît en 0,25 s, et les libellés du cadre se brouillent en caractères aléatoires pendant quelques images. Le point de rythme rose flashe fort à chaque temps et décroît en un demi-temps. L'équation de la scène apparaît en fondu 0,1-0,35 s après chaque coupe. Les valeurs, l'horloge et les compteurs se mettent à jour en direct avec l'animation. Les lignes espacées se résolvent à partir de caractères aléatoires ; les lignes à empattements s'écrivent lettre par lettre ; le logotype final monte depuis le bas à l'intérieur d'un masque avec un décalage de 0,06 s. Les tracés et transformations utilisent ease-out ou sine in-out comme indiqué par scène.

Musique

Un morceau électronique entraînant à 120 BPM (accords de piano, nappes chaudes, basse synthé, grosse caisse four-on-the-floor), d'exactement 20 s, chaque coupe tombant sur un temps. Doux et filtré pendant les deux premières secondes avec un riser vers un boom à 2 s, plein régime jusqu'à 16 s, un breakdown filtré avec un riser vers un boom final à 18 s, puis fondu de sortie jusqu'à 20 s. Mixage à environ -14 LUFS avec un true peak inférieur à -1 dBTP.

Son

Un whoosh doux et trois ticks glitch à chaque coupe, et un whoosh plus grave et un boom quand le portail de la fractale s'ouvre à 12 s, le tout par-dessus la musique et sur la grille rythmique. Pas de voix off.

Références

Animations mathématiques explicatives croisées avec de l'art génératif de creative coding et une interface d'oscilloscope ou d'instrument de laboratoire de science-fiction : fines lignes lumineuses sur presque noir, valeurs en monospace, équations à empattements de manuel scolaire.

À préparer

Le nom de votre marque, un court slogan pour chacun des huit libellés de scène et pour la carte finale, et votre adresse web.

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 « Coupe glitch : bandes tranchées, lignes de couleur et flash blanc » — À 0:02 dans la vidéo

Transition

Coupe glitch : bandes tranchées, lignes de couleur et flash blanc

La scène sortante et la scène entrante sont dessinées sur un canvas hors écran ; pendant 0,13 s autour de la coupe, il est recopié en bandes horizontales de 18 à 128 px de haut, environ la moitié décalée latéralement jusqu'à 70 px (graine selon le numéro d'image, réduite à zéro). 3 à 6 lignes pleine largeur de 1 à 2 px en turquoise, rose, orange et blanc scintillent pendant 0,15 s, et un calque blanc à 14 % s'estompe linéairement en 0,25 s.

Quand l’utiliser Une coupe franche à l'allure numérique et énergique, toutes les deux secondes 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>Coupe glitch : bandes tranchées, lignes de couleur et flash blanc</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%;background:#03030a;overflow:hidden}#c{position:absolute;inset:0;width:100%;height:100%;display:block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const L=document.createElement('canvas');L.width=W;L.height=H;const S=L.getContext('2d');
const CUT=2.0, SLICE=0.13, LINES=0.15, FLASH=0.25, FLASH_ALPHA=0.137; // cut time and glitch phases (s)
const COLORS=['#2DD4B0','#FB2D89','#FE9117','#FFFFFF'];
function rng(a){return()=>{a=(a+0x6d2b79f5)|0;let t=Math.imul(a^(a>>>15),1|a);t=(t+Math.imul(t^(t>>>7),61|t))^t;return((t^(t>>>14))>>>0)/4294967296;};}
function sceneA(g,t){g.strokeStyle='#2DD4B0';g.lineWidth=4;g.shadowColor='#2DD4B0';g.shadowBlur=16;g.beginPath();g.arc(960,540,220,0,-Math.min(1,t/1.8)*TAU,true);g.stroke();}
function sceneB(g,t){g.strokeStyle='#FB2D89';g.lineWidth=5;g.shadowColor='#FB2D89';g.shadowBlur=16;g.beginPath();for(let x=200;x<=1720;x+=4){const y=540-220*Math.sin((x-200)/104-(t-CUT)*4.5);x===200?g.moveTo(x,y):g.lineTo(x,y);}g.stroke();}
function draw(t){const fr=Math.round(t*60),u=t-CUT;X.fillStyle='#03030a';X.fillRect(0,0,W,H);S.clearRect(0,0,W,H);S.save();(t<CUT?sceneA:sceneB)(S,t);S.restore();
 if(u>-0.04&&u<SLICE){const amp=u<0?0.6:1-u/SLICE,r=rng(fr*13+1);let y=0;while(y<H){const h=18+(r()*110|0),dx=r()<0.55?(r()*2-1)*70*amp:0;X.drawImage(L,0,y,W,h,dx,y,W,h);y+=h;}}else X.drawImage(L,0,0);
 if(u>=0&&u<FLASH){X.fillStyle=`rgba(255,255,255,${FLASH_ALPHA*(1-u/FLASH)})`;X.fillRect(0,0,W,H);}
 if(u>-0.04&&u<LINES){const r=rng(fr*7+3),n=3+(r()*4|0);for(let i=0;i<n;i++){X.globalAlpha=0.35+0.5*r();X.fillStyle=COLORS[r()*4|0];X.fillRect(0,r()*H|0,W,r()<0.7?1:2);}X.globalAlpha=1;}}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
tl.eventCallback('onUpdate',()=>draw(tl.time()));draw(0);
window.__timelines=window.__timelines||{};window.__timelines["main"]=tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Épicycles de Fourier dessinant un contour fermé » — À 0:05 dans la vidéo

Formes

Épicycles de Fourier dessinant un contour fermé

Un contour fermé est rééchantillonné à 180 points et converti en 180 termes de Fourier ; les cercles sont chaînés depuis le centroïde, le plus grand en premier, chacun tournant n fois par tour, et la pointe laisse une traînée lumineuse. La progression suit sine in-out sur environ 3 s, des anneaux discrets et des rayons blancs montrent la machine, et le contour se remplit d'un dégradé doux une fois fermé pendant que la chaîne s'efface.

Quand l’utiliser Pour dessiner n'importe quel logo, glyphe ou tracé comme si une machine de cercles le traçait.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Épicycles de Fourier dessinant un contour fermé</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%;background:#03030a;overflow:hidden}#c{position:absolute;inset:0;width:100%;height:100%;display:block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const POLY=[[700,300],[1500,300],[1500,400],[1320,400],[1320,820],[1440,780],[1460,860],[1300,920],[1220,880],[1220,400],[960,400],[900,820],[780,920],[700,880],[800,760],[860,400],[700,400]]; // any closed outline
const N=180, DRAW=[0.3,3.2]; // terms, drawing window (s)
function resample(p,n){const seg=[];let L=0;for(let i=0;i<p.length;i++){const a=p[i],b=p[(i+1)%p.length],l=Math.hypot(b[0]-a[0],b[1]-a[1]);seg.push([a,b,l]);L+=l;}const out=[];for(let k=0;k<n;k++){let d=k*L/n;for(const[a,b,l]of seg){if(d<=l){out.push([a[0]+(b[0]-a[0])*d/l,a[1]+(b[1]-a[1])*d/l]);break;}d-=l;}}return out;}
const S=resample(POLY,N),CO=[];for(let n=-N/2;n<N/2;n++){let re=0,im=0;S.forEach(([x,y],k)=>{const a=-TAU*n*k/N;re+=x*Math.cos(a)-y*Math.sin(a);im+=x*Math.sin(a)+y*Math.cos(a);});CO.push({n,re:re/N,im:im/N,a:Math.hypot(re,im)/N});}
const C0=CO.find(c=>c.n===0),CH=CO.filter(c=>c.n!==0).sort((a,b)=>b.a-a.a);
const at=u=>{let x=C0.re,y=C0.im;for(const c of CH){const a=TAU*c.n*u;x+=c.re*Math.cos(a)-c.im*Math.sin(a);y+=c.re*Math.sin(a)+c.im*Math.cos(a);}return[x,y];};
const PATH=[];for(let i=0;i<=600;i++)PATH.push(at(i/600));
function draw(t){const u=sio(seg(t,DRAW[0],DRAW[1])),fill=seg(t,3.2,3.6),chain=1-seg(t,3.25,3.8);X.fillStyle='#03030a';X.fillRect(0,0,W,H);
 if(fill>0){X.beginPath();PATH.forEach(([x,y],i)=>i?X.lineTo(x,y):X.moveTo(x,y));const g=X.createLinearGradient(700,300,1460,920);g.addColorStop(0,'rgba(251,45,137,.3)');g.addColorStop(1,'rgba(124,108,242,.3)');X.globalAlpha=fill;X.fillStyle=g;X.fill();X.globalAlpha=1;}
 if(chain>0){let x=C0.re,y=C0.im;X.lineWidth=1;for(const c of CH.slice(0,48)){const a=TAU*c.n*u,nx=x+c.re*Math.cos(a)-c.im*Math.sin(a),ny=y+c.re*Math.sin(a)+c.im*Math.cos(a);X.strokeStyle=`rgba(150,140,210,${0.22*chain})`;X.beginPath();X.arc(x,y,c.a,0,TAU);X.stroke();X.strokeStyle=`rgba(255,255,255,${0.75*chain})`;X.beginPath();X.moveTo(x,y);X.lineTo(nx,ny);X.stroke();x=nx;y=ny;}}
 const n=Math.floor(u*600);if(n>0){X.beginPath();for(let i=0;i<=n;i++){const[x,y]=PATH[i];i?X.lineTo(x,y):X.moveTo(x,y);}X.strokeStyle='#FE9117';X.lineWidth=4.5;X.lineJoin='round';X.shadowColor='#FE9117';X.shadowBlur=16;X.stroke();X.shadowBlur=0;}}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
tl.eventCallback('onUpdate',()=>draw(tl.time()));draw(0);
window.__timelines=window.__timelines||{};window.__timelines["main"]=tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Cercle unité alimentant une courbe sinusoïdale défilante » — À 0:03 dans la vidéo

Données

Cercle unité alimentant une courbe sinusoïdale défilante

Un point tourne sur un cercle lumineux à vitesse angulaire constante ; ses côtés cosinus et sinus sont tracés en segments colorés et une ligne pointillée reporte sa hauteur vers un point au début d'un graphique. Tout l'historique de l'angle défile vers la droite à environ 104 px par radian, de sorte que le sinus naît du cercle en temps réel, avec un cosinus discret à côté et des valeurs en direct.

Quand l’utiliser Pour expliquer un signal périodique, un rythme ou toute valeur cyclique.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cercle unité alimentant une courbe sinusoïdale défilante</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%;background:#03030a;overflow:hidden}#c{position:absolute;inset:0;width:100%;height:100%;display:block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const CX=500,CY=540,R=220,X0=820,K=103.8,OMEGA=4.524; // circle, graph start, px per radian, rad/s
function draw(t){const th=OMEGA*t,px=CX+R*Math.cos(th),py=CY-R*Math.sin(th);X.fillStyle='#03030a';X.fillRect(0,0,W,H);X.lineCap='round';
 X.fillStyle='#433E53';X.fillRect(180,539,1640,2);X.fillRect(499,230,2,620);
 const glow=(col,w,b)=>{X.strokeStyle=col;X.lineWidth=w;X.shadowColor=col;X.shadowBlur=b;X.stroke();X.shadowBlur=0;};
 X.beginPath();X.arc(CX,CY,R,0,TAU);glow('#2DD4B0',3,16);
 X.beginPath();X.arc(CX,CY,52,0,-Math.min(th,TAU),true);glow('#FE9117',2.2,6);
 X.beginPath();X.moveTo(CX,CY);X.lineTo(px,CY);glow('#2DD4B0',4,8);X.beginPath();X.moveTo(px,CY);X.lineTo(px,py);glow('#FB2D89',4,8);
 X.beginPath();X.moveTo(CX,CY);X.lineTo(px,py);glow('#FFFFFF',2,0);
 X.setLineDash([5,6]);X.beginPath();X.moveTo(px,py);X.lineTo(X0,py);glow('rgba(251,45,137,.7)',1.5,0);X.setLineDash([]);
 const span=Math.min(th,(1820-X0)/K);
 for(const[fn,col,w,b]of[[Math.cos,'rgba(45,212,176,.45)',1.6,0],[Math.sin,'#FB2D89',4,14]]){X.beginPath();for(let d=0;d<=span;d+=0.02){const x=X0+K*d,y=CY-R*fn(th-d);d===0?X.moveTo(x,y):X.lineTo(x,y);}glow(col,w,b);}
 X.fillStyle='#FFFFFF';X.beginPath();X.arc(px,py,7,0,TAU);X.fill();X.fillStyle='#FB2D89';X.beginPath();X.arc(X0,py,7,0,TAU);X.fill();
 X.font='18px monospace';X.fillStyle='#ABA6BB';X.fillText('θ = '+th.toFixed(3)+' rad',281,839);X.fillText('sin θ = '+Math.sin(th).toFixed(3),281,869);}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
tl.eventCallback('onUpdate',()=>draw(tl.time()));draw(0);
window.__timelines=window.__timelines||{};window.__timelines["main"]=tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Champ de graines de phyllotaxie qui tourbillonne en anneau » — À 0:16 dans la vidéo

Particules

Champ de graines de phyllotaxie qui tourbillonne en anneau

1500 graines se placent à l'angle n·137,508° et au rayon c·√n ; elles apparaissent du centre vers l'extérieur avec un compte en ease-out, tournent et passent du blanc à un cycle rose-violet-turquoise. Au signal, chaque graine se déplace en coordonnées polaires (centre, rayon et angle interpolés par un cubique in-out avec un léger décalage selon n) vers un cercle plus petit ailleurs, puis les points cèdent la place à un trait plein.

Quand l’utiliser Une croissance organique qui se résout en une forme nette : une révélation, un anneau de logo ou un état de chargement.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Champ de graines de phyllotaxie qui tourbillonne en anneau</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%;background:#03030a;overflow:hidden}#c{position:absolute;inset:0;width:100%;height:100%;display:block}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080"><canvas id="c" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas></div>
<script>
const W=1920,H=1080,TAU=Math.PI*2,c=document.getElementById('c'),X=c.getContext('2d');
const clamp=(v,a=0,b=1)=>Math.min(b,Math.max(a,v)),seg=(t,a,b)=>clamp((t-a)/(b-a)),sio=u=>(1-Math.cos(Math.PI*u))/2;
const GA=137.508*Math.PI/180,N=1500,C=10.6,COLS=['#FB2D89','#7C6CF2','#5A4CE0','#2DD4B0','#7C6CF2']; // golden angle, count, spacing
const io=u=>u<.5?4*u*u*u:1-Math.pow(-2*u+2,3)/2;
function draw(t){X.fillStyle='#03030a';X.fillRect(0,0,W,H);const count=Math.floor(N*(1-Math.pow(1-seg(t,0,1.4),2))),spin=0.9*t,col=seg(t,1.3,1.6);
 for(let n=1;n<=count;n++){const r=C*Math.sqrt(n),a0=n*GA+spin;let x=960+r*Math.cos(a0),y=540+r*Math.sin(a0);
  const u=io(seg(t,2.1+n/N*0.2,2.5+n/N*0.2));if(u>0){const a1=n/N*TAU*3+Math.PI,cx=960-400*u,cy=540-60*u,rr=r+(191-r)*u,aa=a0+(a1-a0)*u+1.2*u;x=cx+rr*Math.cos(aa);y=cy+rr*Math.sin(aa);}
  const al=1-seg(t,2.75,2.9);if(al<=0)continue;X.globalAlpha=al;X.fillStyle=col>0.5?COLS[n%5]:'#E1DEEB';X.beginPath();X.arc(x,y,2+2*Math.sqrt(n/N),0,TAU);X.fill();}
 X.globalAlpha=seg(t,2.7,2.9);X.strokeStyle='#2DD4B0';X.lineWidth=2.6;X.shadowColor='#2DD4B0';X.shadowBlur=12;X.beginPath();X.arc(560,480,191,0,TAU);X.stroke();X.shadowBlur=0;X.globalAlpha=1;}
const tl=gsap.timeline({paused:true});const st={t:0};tl.to(st,{t:4,duration:4,ease:'none'},0);
tl.eventCallback('onUpdate',()=>draw(tl.time()));draw(0);
window.__timelines=window.__timelines||{};window.__timelines["main"]=tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Aperçu de la technique « Lettres de logotype qui montent à travers un masque, avec un filet dégradé tracé » — À 0:18 dans la vidéo

Typographie

Lettres de logotype qui montent à travers un masque, avec un filet dégradé tracé

Chaque lettre d'un logotype gras à fort interlettrage se trouve dans sa propre boîte de masque et monte d'une hauteur de capitale depuis le bas (0,36 s, power3.out, décalage de 0,06 s) ; un filet de 3 px turquoise-violet-rose se trace en dessous (0,4 s, power3.inOut), un slogan monospace espacé se résout à partir de caractères aléatoires et une ligne serif en italique apparaît en dernier.

Quand l’utiliser Une carte de fin ou un titre qui doit s'imposer lettre par lettre avec assurance.

Afficher le code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lettres de logotype qui montent à travers un masque, avec un filet dégradé tracé</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=Inter:wght@700&family=JetBrains+Mono&family=Old+Standard+TT:ital@1&display=swap");#root{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#10063a 0,#03030a 800px);overflow:hidden}#card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#eae7f9}#word{font:700 170px/1 Inter,sans-serif;letter-spacing:.16em;margin:0 0 30px .16em;display:flex}#word span{display:inline-block;clip-path:inset(0 -0.2em 0 -0.2em)}#word i{display:inline-block;font-style:normal}#rule{width:1200px;height:3px;background:linear-gradient(90deg,#2DD4B0,#7C6CF2,#FB2D89);transform-origin:0 50%}#tag{font:400 17px "JetBrains Mono",monospace;letter-spacing:.55em;white-space:pre;margin:40px 0 0}#motto{font:italic 400 34px "Old Standard TT",serif;color:#bdb6d6;margin:26px 0 0}
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080"><div id="card" class="clip" data-start="0" data-duration="3"><h1 id="word"></h1><div id="rule"></div><p id="tag">IDEAS IN MOTION   ×   STUDIO.APP</p><p id="motto">From idea to video in one chat</p></div></div>
<script>
const WORD='STUDIO NAME', TAG=document.getElementById('tag').textContent, G='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=';
const word=document.getElementById('word');[...WORD].forEach(ch=>{const s=document.createElement('span');const i=document.createElement('i');i.textContent=ch===' '?'\u00a0':ch;s.appendChild(i);word.appendChild(s);});
const tl=gsap.timeline({paused:true});
tl.fromTo('#word i',{yPercent:110},{yPercent:0,duration:0.36,ease:'power3.out',stagger:0.06},0.05); // rise per letter
tl.fromTo('#rule',{scaleX:0},{scaleX:1,duration:0.4,ease:'power3.inOut'},0.55);
const sc={p:0};tl.fromTo(sc,{p:0},{p:1,duration:0.4,ease:'power2.out',onUpdate:()=>{const k=Math.floor(sc.p*TAG.length);let o='';for(let i=0;i<TAG.length;i++){const c=TAG[i];o+=i<k||c===' '?c:G[(i*7+Math.round(tl.time()*60)*13)%G.length];}document.getElementById('tag').textContent=o;}},0.5);
tl.fromTo('#tag',{opacity:0},{opacity:1,duration:0.1},0.45);
tl.fromTo('#motto',{opacity:0},{opacity:1,duration:0.28,ease:'none'},0.72);
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

Assemblage de logo low-poly avec nom tapé en lockup

<direction> Réalise un logo reveal paysage de 21 secondes, 1920x1080 à 60 ips. Il assemble lentement mon logo à partir de facettes low-poly et se termine sur un lockup horizontal avec le nom de ma marque tapé et un slogan en dessous. L'idée : une longue construction calme sans coupe pendant quatorze secondes, un relâchement sur le drop de la musique en moins de deux secondes, puis une fin calme avec le texte tapé. Le look : un fond presque noir avec une douce vignette circulaire, des couleurs de marque en aplat et une typographie grotesque nette. Évite les dégradés sur le logo, les coutures visibles entre les triangles, les coupes pendant la construction et tout ce qui surcharge l'arrière-plan du logo. </direction> <structure> 1. 0–2,6 s, le fil de fer : un maillage filaire low-poly du contour de mon logo se dessine tout seul depuis le bas du logo vers l'extérieur. Il compte environ 35–45 sommets et 90 lignes fines. 2. 1,9–13,3 s, l'assemblage : le logo est découpé en environ 55 triangles le long de ce maillage, et ils arrivent en volant morceau par morceau depuis l'extérieur du cadre. Les atterrissages commencent lentement en bas du logo et deviennent plus denses vers le haut. Le dernier morceau se pose à 13,3 s, et le logo est alors complet et exact. Garde le logo terminé pendant environ une seconde. 3. 14,38 s, le flash, exactement sur le drop de la musique. Une explosion de lumière, un anneau orange qui s'étend et un flash lumineux sur le logo se déclenchent ensemble. 0,1 s après le coup, une plaque d'encre profonde grandit derrière le logo et se carre en icône d'application. Garde l'icône centrée pendant une seconde. 4. 15,74–16,15 s, le glissement : l'icône rétrécit à environ 42 % et se place dans le tiers gauche, laissant de la place pour le nom. 5. 16,1–21 s, le nom : un curseur rose apparaît à droite de l'icône et le nom se tape, par exemple "Brand Name" (remplace par ta marque). À 18,15 s le slogan balaie l'écran en dessous, par exemple "Your tagline here" (remplace par le tien). Le curseur clignote trois fois en rythme et disparaît à 19,9 s. Garde le lockup jusqu'à la fin. </structure> <composition> Arrière-plan : une vignette radiale presque noire, #0D0B1E au centre s'assombrissant jusqu'à #040308 dans les coins. Palette : - Encre profonde #1C0B5D pour la plaque de l'icône. - Rose #FB2D89 comme accent principal. - Orange #FE9117. - Blanc #FFFFFF. - Lavande clair #E9E4F2 et #F0EDFF pour les lignes et le texte doux. - Violet #7C6CF2 uniquement dans la lueur d'arrière-plan. Le logo reste en couleurs plates sans dégradés. Maillage filaire : lignes en lavande #E9E4F2 à 60 % d'opacité, 1,3 px d'épaisseur ; points de sommet en #F0EDFF avec un rayon de 2,6 px. Plaque de l'icône : un cercle de 676 px qui devient un carré arrondi avec un rayon de coin de 24 % et une douce ombre portée. Typographie : le nom dans une grotesque grasse (Golos Text 700, environ 155 px, blanc). Le slogan se place dessous dans une grotesque légère (Onest 400, environ 49 px, lavande à 74 % d'opacité). Curseur : une barre rose #FB2D89, de 10 x 128 px, avec une douce lueur rose. Le lockup final (icône à gauche, nom et slogan à droite) est centré dans son ensemble dans le cadre. </composition> <techniques> Push-in : le début suit un très lent push-in vers le centre du cadre, de l'échelle 0,886 à 0 s à 0,998 à 11 s, puis reste immobile. Tracé du maillage : chaque ligne grandit linéairement de son sommet antérieur à son sommet postérieur en 0,08–0,45 s. Un petit point apparaît en fondu sur chaque sommet quand une ligne l'atteint. Vol d'entrée : chaque morceau compte un à trois triangles. Il arrive vite sur une trajectoire courbe et décélère jusqu'à sa place en environ 0,5 s, en culbutant en 3D. La rotation, le retournement et l'inclinaison s'adoucissent jusqu'à zéro à l'arrivée. En vol, il est assombri à environ 60 % et légèrement flou ; à l'atterrissage, il est net et pleinement éclairé. Chaque triangle montre exactement sa partie du logo en aplat, si bien que l'assemblage terminé est sans couture. Lueur : une faible lueur rose #FB2D89, sous 10 % d'opacité et se fondant en violet #7C6CF2, grandit derrière le logo à mesure qu'il se remplit. Flash à 14,38 s : - Une explosion de lumière rose-mauve en mode screen éclate autour du logo et s'estompe en 0,8 s. - Un fin anneau orange chaud, 7 px, part d'un rayon de 300 px et sort du cadre à vitesse constante en 0,38 s. - Le logo flashe vivement et se stabilise en 0,3 s. Plaque : 0,1 s après le coup, la plaque #1C0B5D grandit d'un point jusqu'au cercle de 676 px en 0,21 s (sine ease-out). Elle est d'abord éclairée, puis ses coins se carrent jusqu'au rayon de 24 %. Glissement : l'icône passe à environ 42 % et se place dans le tiers gauche en 0,415 s (power3 ease-in-out). Elle se floute jusqu'à 7 px à sa vitesse maximale et se pose nette. Ensuite elle continue de grandir très lentement, d'environ 3 % en cinq secondes. Frappe : une lettre par double croche de la musique (0,156 s à 96 BPM). Chaque lettre apparaît en fondu en 0,05 s tandis que le curseur saute derrière elle. Slogan : il balaie de gauche à droite en environ 0,2 s, caractère par caractère. </techniques> <music> Un instrumental à 96 BPM, plein d'espoir et moderne, d'exactement 21 secondes. - Début : un doux glockenspiel de boîte à musique sur des nappes chaudes. - Vers 4,4 s : un arrangement complet et entraînant arrive (batterie, basse, cordes, une ligne de glockenspiel brillante). Un filtre s'ouvre sur deux mesures et monte vers le flash. - 14,38 s : un coup de cymbale et un grand accord tombent exactement sur le flash. - Après le drop : la boîte à musique revient sur des nappes tenues sous le lockup et s'éteint dans le silence à 21 s. Garde tout sur la grille rythmique pour que la frappe et les clignotements du curseur tombent sur les doubles croches et les temps. </music> <sound> Effets sonores par-dessus la musique : - Un riser doux vers le premier atterrissage de triangle. - Un riser vers le flash, puis un boom profond et un léger impact de verre dessus. - Un court whoosh quand l'anneau file, et un autre quand l'icône glisse. - Un doux clic de touche pour chaque lettre tapée, et un léger quand le slogan apparaît. Pas de voix off. Volume global d'environ -14 LUFS, true peak sous -1 dBTP. </sound> <references> Un sting de logo premium tech ou lancement d'app : un assemblage du filaire low-poly au solide dans le style d'une construction de facettes 3D, relâché sur le drop en une révélation d'icône d'app, avec un lockup de nom tapé façon terminal. </references>

Aperçu du prompt « Showreel de motion design synchronisé sur le rythme »

Showreel de motion design synchronisé sur le rythme

<direction> Réalise un showreel de motion design de 15 secondes pour [your brand], 1920x1080 en paysage à 60 fps, entièrement dessiné : texte animé, formes, particules, un nuage de points 3D et un tableau de bord, sans images filmées. L'idée : un reel produit rapide où chaque changement de scène tombe sur un beat house à 128,57 BPM. Un beat dure exactement 28 images (0,4667 s), chaque coupe repose sur cette grille, et le premier gros coup tombe à 1,867 s (beat 4). Le style alterne scènes presque noires et scènes claires blanc lavande, avec le rose vif comme accent principal ainsi que du violet et de l'orange. Les titres utilisent une grotesque épaisse, les légendes une mono, et la déclaration une serif italique. Un cadre de style télévisé recouvre tout le reel jusqu'à un glitch final. Utilise ma marque de logo sur la carte finale et remplace chaque texte entre guillemets par mes propres mots, en gardant chacun à peu près la même longueur pour que la mise en page tienne. Évite les photos, les images de stock, les fondus enchaînés doux et génériques et tout ce qui s'écarte de la grille de beats. </direction> <structure> 1. 0–1,85 s, intro sur presque noir. Une fine ligne de règle (1440 px de large, claire à 22 % d'opacité) grandit depuis son centre à 0,34 s (expo.out, 0,65 s), puis 13 graduations apparaissent de gauche à droite, une image d'écart. Une balle rose de 80 px tombe du haut à gauche et dérive vers le centre (power2.out, 1,25 s). Elle rebondit trois fois sur la règle, s'écrasant à chaque impact et s'étirant à chaque chute, avec un peu de flou de mouvement à vitesse élevée. Une ligne mono se tape sous la règle, un caractère toutes les 1,56 images, suivie d'un curseur bloc clignotant (exemple "no keyframes.", remplace-le par le tien). À 1,28 s la balle se comprime à 0,8x, puis gonfle sur une courbe expo-in jusqu'à remplir le cadre de rose à 1,82 s. 2. 1,82–3,70 s, quatre mots, un par beat. Chaque mot épais de 300 px repose sur son propre fond avec une ligne de commentaire mono dessous (exemples "// describe your idea", "// live preview", "// refine in words", "// mp4 export"). Derrière, deux rangées de copies en contour de 205 px des quatre mots défilent en haut et en bas à 760 px/s en sens opposés. Les contours sont tracés avec la couleur de texte de la scène à 7–14 % d'opacité. - Mot 1 (exemple "DESCRIBE"), indigo profond sur rose : le mot atterrit depuis une échelle de 1,39x en expo.out (0,33 s) tandis que ses lettres apparaissent à 0,03 s d'intervalle avec un rapide retour à la netteté. - Mot 2 (exemple "PREVIEW"), clair sur presque noir à 2,333 s : l'espacement se resserre de 150 px à serré en expo.out (0,45 s), avec un fondu en 3 images. - Mot 3 (exemple "REFINE"), violet sur la page claire à 2,8 s : les lettres montent de 340 px depuis derrière une ligne de masque 40 px sous la ligne de base en back.out(2.2), 0,3 s chacune, à 0,035 s d'intervalle. - Mot 4 (exemple "EXPORT"), clair sur violet à 3,267 s : les lettres surgissent sur des triples croches (3,5 images d'écart), chacune de 0,6x à un saut de 1,13x haut de 50 px, puis se pose. 3. 3,46–4,02 s, volet de bandes. Huit bandes verticales de 240 px, alternant rose et page claire, montent depuis le bas (power2.inOut, 0,18 s, 0,7 image d'écart, la gauche d'abord). Elles tiennent, puis continuent vers le haut et sortent, révélant la scène suivante par le bas. 4. 3,70–5,60 s, formes sur presque noir. Une grille de 120 px de petits carrés arrondis atténués (un cinquième en contour) avec de minuscules croix entre eux. Une onde part du centre à chaque beat (3,73, 4,2, 4,67 et 5,13 s) à 2000 px/s. Là où son front passe, chaque cellule passe de 42 à 74 px, s'arrondit vers un cercle, tourne de 38 degrés et devient rose. La première onde révèle la grille, et la grille tourne lentement dans le sens antihoraire, de plus en plus vite. Après la dernière onde, les cellules se vident et s'estompent à 5,47 s. 5. 5,55–7,42 s, particules. Un point de flash blanc avec un fin anneau de choc apparaît à 5,62 s, puis 7000 minuscules carrés explosent depuis le centre. Ils se rassemblent en un énorme mot de 590 px (exemple "IDEA") coloré sur sa largeur de l'orange au lavande puis au violet, scintillant d'un pixel. À partir de 7,0 s ils partent vers la droite avec des traînées, la gauche du mot d'abord. Une douce lueur radiale rose se trouve derrière. 6. 7,42–9,45 s, 3D sur un fond radial indigo profond. Une sphère de Fibonacci de 1700 points (rayon 362 px) tourne lentement au-dessus d'un sol en perspective de fines lignes violettes dont les rangées avancent vers le spectateur. Les points sont roses ou violets, plus gros et plus lumineux à l'avant. À partir de 8,12 s chaque point rejoint sa place sur un nœud torique (2,3) (cubic in-out, délais aléatoires jusqu'à 0,16 s), et le nœud continue de tourner. 7. 9,08–9,65 s, un second volet de bandes comme à la scène 3, en violet, rose et page claire. 8. 9,27–11,1 s, tableau de bord sur la page claire avec de faibles guides verticaux. - Étapes : trois rangées de numéros d'étape épais de 180 px comptent en expo.out ("01", "02", "03", le troisième en rose) avec des légendes mono (exemple "PICK A TEMPLATE"). Chaque rangée monte dans sa propre boîte rognée, à 0,08 s d'intervalle. - Carte : une carte blanche (880x740, coins de 26 px, douce ombre indigo) s'élève de 90 px (power3.out, 0,45 s). Elle contient un titre gras en minuscules, une petite pastille "LIVE" et un anneau qui se remplit en power3.out avec une courte étiquette à l'intérieur. - Graphique : quatorze barres orange poussent depuis la base à 0,031 s d'intervalle, la dernière pleine et rose. Une ligne violette se dessine par-dessus en sine.inOut (0,72 s), avec un point, un halo et une étiquette sombre en tête (exemple "No keyframes"). 9. 10,96–11,45 s, volet de barres. Huit bandes horizontales, alternant presque noir et rose, entrent depuis la gauche (power3.inOut, 0,2 s, une image d'écart, celle du haut d'abord) et poursuivent jusqu'à sortir à droite. 10. 11,07–13,07 s, déclaration sur presque noir. Quatre faisceaux de 28 lignes fines comme des cheveux traversent le cadre en rubans, mélangés de façon additive : rose vers orange en haut, puis rose vers violet, violet, et violet vers rose en bas. Une déclaration de deux lignes en serif italique de 290 px arrive lettre par lettre. Chaque lettre monte de 36 px et retrouve sa netteté en 0,16 s, à 0,02 s d'intervalle sur la ligne un et 0,035 s sur la ligne deux. La ligne un est claire et commence à x 334 (exemple "Ideas in") ; la ligne deux est rose et finit à x 1438 (exemple "motion."). 11. 12,73–13,07 s, glitch. Des tranches du texte sautent latéralement, le cadre s'inverse deux fois, de petits blocs violets, jaunes et roses scintillent, et le texte se sépare en rose et turquoise. Le cadre télévisé et ses compteurs disparaissent. 12. 13,07–15,0 s, carte finale sur presque noir. - Un flash pâle s'éteint (0,26 s). - Un logotype épais de 260 px ("[your brand]") monte lettre par lettre de derrière sa ligne de base (back.out(1.6), 0,32 s, 0,05 s d'intervalle). - Ma marque de logo tombe d'en haut comme la balle de l'intro, s'écrase à l'atterrissage à 13,51 s et se pose comme le point final du logotype. - Un fin filet se dessine sous l'ensemble (power3.out, 0,3 s). - Une ligne mono très espacée se décode dessous, de caractères roses brouillés en lettres claires (13,76–14,6 s). - Un appel à l'action en serif italique rose apparaît en fondu à 14,33 s (exemple "try it free."). - Une rangée atténuée de quatre courtes fonctionnalités apparaît en fondu en bas. Maintiens la carte finale jusqu'à 15 s. </structure> <composition> - Palette : - Presque noir #0D0B1E pour les fonds sombres. - Indigo profond #1C0B5D pour le texte sombre et la scène 3D. - Page claire #FAF9FF pour les fonds clairs et le texte clair. - Lavande #F0EDFF pour les panneaux doux. - Atténué #6B6385 pour les légendes et #E9E4F2 pour les lignes. - Accents : rose principal #FB2D89, second violet #7C6CF2, orange chaud #FE9117, plus blanc. - Jaune #FFD23F et turquoise #2DD4B0 uniquement comme éclats de glitch. - Si je donne des couleurs de marque, remplace-les selon leur rôle. - Polices : Roboto Flex en graisse 900 avec un espacement serré (-0,035 em) pour tous les titres. JetBrains Mono pour le cadre, les légendes et les lignes de commentaire. Instrument Serif Italic pour la déclaration sur deux lignes et l'appel à l'action. - Une douce vignette latérale, plus sombre seulement sur les bords gauche et droit : environ -8 % au milieu du bord et -12 % dans les coins. - Un cadre de style télévisé par-dessus tout jusqu'au glitch : - Équerres de coin de 26 px. - Un titre en haut à gauche (exemple "[YOUR BRAND] / YOUR TAGLINE"). - Un timecode qui défile en haut à droite (00:00:SS:FF à 60 fps). - Le nom du chapitre en cours en bas à gauche. - Un compteur d'images "NNN / 900" avec une barre de progression de 300 px en bas à droite. - Chaque élément est clair à 0,9 d'opacité en mode de fusion exclusion, donc il devient sombre sur les scènes claires et teinté sur le rose ou le violet. Le cadre apparaît en fondu à 0,3 s. </composition> <techniques> - Chaque changement de scène repose sur la grille de beats de 28 images. Les scènes et les volets se chevauchent de quelques images, si bien qu'aucune image n'est jamais vide. - Varie les transitions : la balle qui gonfle jusqu'au fond suivant, des coupes de couleur nettes entre les quatre mots, des volets de bandes verticales, un volet de barres horizontal, un flash avec anneau de choc et un glitch à séparation RVB vers la carte finale. - Donne à la balle et à la marque de logo un mouvement physique : écrasement à l'impact, étirement dans la chute, léger flou de mouvement à vitesse élevée. - Utilise partout des entrées lettre par lettre, chaque mot avec sa propre courbe (atterrissages expo.out, montées back.out depuis un masque, surgissements sur triples croches), en retrouvant la netteté à l'arrivée des lettres. - Garde tout net et vectoriel : les particules, les points et les lignes sont minuscules et précis, et les lueurs restent douces et derrière le texte. </techniques> <music> Crée un lit house original à 128,57 BPM, d'exactement 15 s, posé sur la grille de beats. - Intro : un pad aérien avec des plucks bulleux. - À partir du coup à 1,867 s : le groove complet, avec grosse caisse four-on-the-floor, claps, charleys et basse en sidechain. - Fin : un riser et un glitch vers un grand coup final à 13,07 s, puis l'accord de clôture résonne jusqu'à 15 s. </music> <sound> Par-dessus le lit, ajoute des coups composés pour la coupe : - un riser vers un boom sur le fill de 1,867 s - de courts whooshes culminant à chaque coupe de mot et à chaque volet - de doux clics sur les ondes de formes - un petit boom et un tic de verre sur le flash de particules - un whoosh de traînée quand les particules s'en vont - une chute de sub vers la scène 3D - un riser et des tics de glitch numérique vers le boom final à 13,07 s - une cloche quand la marque de logo atterrit à 13,51 s Pas de voix off. Mixage à environ -14 LUFS, true peak sous -1 dBTP. </sound> <references> Un showreel de lancement de produit tech dans l'esprit d'élégants reels de marque animés : une surimpression HUD télévisée, une typographie cinétique, des particules génératives, un nuage de points 3D en rotation et un tableau de bord d'interface épuré. </references>

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

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

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

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é