il tuo motion designer AI

IT

Apri l’app beta

Simple Motion

Showreel matematico vivo con tagli glitch a tempo

Uno showreel matematico luminoso di 20 secondi: sinusoide, π di Fourier, nodo 3D, superficie a onde, frattale, spirale del girasole e identità di Eulero, con tagli glitch a tempo.

Pubblicato 10 novembre 2026

Il prompt si apre nell’app: aggiungi i tuoi materiali e l’agente crea il video.

Segnala questo prompt

Concept

Realizza uno showreel di motion graphics di 20 secondi costruito interamente con la matematica: ogni fotogramma è generato dal tempo t in corso, senza foto, filmati o immagini. Orizzontale 1920x1080 a 60 fps. Deve dare la sensazione di uno strumento da laboratorio preciso che diventa all'improvviso bellissimo: scuro, luminoso, esatto, con un taglio glitch ogni due secondi a tempo. Otto scene matematiche si svolgono dentro una cornice fissa in stile strumento (parentesi d'angolo, wordmark, contatore ed etichetta della scena, punto del ritmo, orologio in corsa, linea di avanzamento, equazione dal vivo), poi una schermata finale con il marchio. Evita grana, immagini stock e qualsiasi decorazione che non derivi dalla matematica.

Struttura

Tagli a 2, 4, 8, 10, 12, 14, 16 e 18 s, tutti a tempo. 1) 0-2 s, origine: un debole anello turchese cresce dal centro fino a r 238 px (0-0,45 s, ease out); assi con tacche ogni 60 px crescono da un punto centrale luminoso; un anello d'onda lascia il punto a ogni battito. Una riga con ampia spaziatura come "YOUR AI MOTION DESIGNER" si risolve da caratteri casuali (0,3-0,78 s); una breve riga con grazie come "Ideas in motion" viene digitata lettera per lettera accanto all'origine (0,5-1,12 s). Da 1,35 a 1,95 s un arco turchese di r 220 si avvolge una volta attorno all'origine con un punto bianco sulla punta, e le parole sfumano. 2) 2-4 s, circonferenza unitaria: una circonferenza turchese (r 220) a sinistra, con l'angolo che cresce a 4,52 rad/s. Raggio bianco, cateto del coseno turchese, cateto del seno rosa, un arco d'angolo arancione con etichetta θ, una linea rosa tratteggiata fino a un punto rosa a x 820 dove è scritto il seno; la storia dell'angolo si distende a destra come una sinusoide rosa luminosa (104 px per radiante) con una cosinusoide turchese tenue accanto e guide puntinate +1/-1. Valori dal vivo "θ = 4.524 rad" e "sin θ = -0.982". Equazione: y = sin θ. 3) 4-8 s, epicicli di Fourier: una catena di 180 cerchi rotanti (ordinati per dimensione, anelli lavanda tenui, raggi bianchi) disegna il contorno di un grande π in arancione luminoso da 4,3 a 7,2 s (avanzamento sine in-out), poi la forma si riempie con un morbido gradiente da rosa a viola mentre la catena sfuma. A sinistra, uno spettro di |cₙ| per n = -24...24 (altezza delle barre secondo la radice quadrata dell'ampiezza) si accende dal centro verso l'esterno man mano che il disegno procede; valori "K = 180 terms" e "t/2π = 0.527". Equazione: f(t) = Σ cₙ e^{int}. 4) 8-10 s, un nodo di Lissajous 3D (sin 3t, sin 2t, sin 5t) tracciato in 0,6 s, poi ruotante in prospettiva: un nastro il cui colore va da turchese a viola a rosa lungo la curva e la cui larghezza e luminosità seguono la profondità. A destra, una griglia 3x3 di piccole figure di Lissajous piane con etichette 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 si disegna una alla volta con la fase che deriva; l'ultima diventa turchese dentro un riquadro sottile. 5) 10-12 s, una superficie a onde in wireframe z = cos(kr - ωt)/(1 + r) su una griglia 48x48 vista da 67° dall'alto, rivelata dal centro verso l'esterno in 0,55 s e in lenta rotazione, linee colorate in base all'altezza da turchese a viola a rosa. Un punto sonda arancione cavalca la superficie a r = 3.2 con una linea guida e valori dal vivo "r = 3.200", "z = 0.276". 6) 12-14 s, un insieme di Julia z² + c che riempie il fotogramma, aperto da un portale circolare che si espande dal centro con un bordo bianco. c = 0.7885·e^{iα} scorre lungo la sua circonferenza (sine in-out), così il frattale si trasforma da spirali separate in una forma connessa con interno nero; zoom lento e rotazione. Colori in base al tempo di fuga: indaco, viola, rosa, arancione, crema chiaro fino al bianco. Un riquadro mostra c che si muove sulla sua circonferenza con i valori "Re c" e "Im c". 7) 14-16 s, fillotassi: 1500 semi con θₙ = n·137.508°, rₙ = c√n appaiono dal centro verso l'esterno e ruotano, prima bianchi, poi rosa, viola e turchese. A sinistra φ = 1.6180339887... si scrive cifra per cifra, cresce una fila di Fibonacci (21 e 34 in turchese), con "seeds n = 1500" e "spirals 21 ⟲ 34 ⟳". 8) 16-18 s, identità di Eulero: i semi vorticano in un anello che diventa una circonferenza unitaria turchese a sinistra; un punto scorre da 1 a -1 lasciando un arco arancione sopra; e^{iπ} appare grande, poi "+", "1", "=" uno alla volta a tempo, un anello pulsa in -1 e "0" atterra a 18 s in un anello rosa. 9) 18-20 s, schermata finale: l'identità si rimpicciolisce in alto; un grande wordmark con ampia spaziatura come "YOUR BRAND" (sostituiscilo con il tuo) sale lettera per lettera dal basso dentro una maschera (sfasamento di 0,06 s), una sottolineatura turchese-viola-rosa si disegna sotto, una riga spaziata come "IDEAS IN MOTION × [your web address]" si risolve da caratteri casuali e una riga corsiva con grazie "From idea to video in one chat" appare in dissolvenza. Tutto sfuma al nero da 19,35 a 19,95 s.

Composizione

Sfondo: un profondo bagliore radiale indaco-nero, centro #10063A che sfuma in #03030A ai bordi, senza grana. Accenti: rosa #FB2D89 (principale), arancione #FE9117, viola #7C6CF2, turchese #2DD4B0 e bianco. Linee ed etichette in grigi lavanda: #9A98A4 per le etichette, #57516F per le didascalie tenui, #433E53 per gli assi. I tratti brillano dolcemente con una sfocatura di 12-16 px del loro stesso colore. Tipografia: equazioni in un serif in stile Computer Modern (Old Standard TT, variabili in corsivo, funzioni in tondo); ogni valore, contatore e didascalia in monospazio (Liberation Mono o simile), piccolo e con ampia spaziatura; il nome del marchio in un grottesco grassetto con spaziatura molto ampia. Una cornice fissa resta per tutto il tempo, comparendo in 0,15-0,9 s: sottili parentesi d'angolo lunghe 27 px, a 47 px da ogni angolo. In alto a sinistra: un wordmark come "YOUR BRAND" (grassetto, 22 px, spaziatura di circa 0,35 em) con una minuscola riga spaziata sotto come "IDEAS IN MOTION · [your web address]". In alto a destra: un contatore di scene "01 / 08" e sotto una breve etichetta per scena, per esempio "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (sostituiscile con i tuoi slogan), con un piccolo punto rosa alla sua sinistra. In basso a destra: un orologio in corsa "t = 03.35 s" (due decimali) e una minuscola riga con il numero del fotogramma. In basso: una linea di avanzamento di 1 px da x 80 a 1840 che si riempie con un gradiente turchese-viola-rosa col passare del tempo, con piccole tacche a ogni confine di scena. In basso a sinistra: l'equazione della scena corrente.

Tecniche

Ogni taglio è un glitch di 0,2 s: l'immagine in uscita viene tagliata in bande orizzontali spostate di lato, 3-6 sottili linee a tutta larghezza in turchese, rosa, arancione e bianco sfarfallano, l'intero fotogramma lampeggia di bianco intorno al 14% e decade in 0,25 s, e le etichette della cornice si rimescolano con caratteri casuali per qualche fotogramma. Il punto rosa del ritmo lampeggia forte a ogni battito e decade in mezzo battito. L'equazione della scena compare in dissolvenza 0,1-0,35 s dopo ogni taglio. Valori, orologio e contatori si aggiornano dal vivo con l'animazione. Le righe spaziate si risolvono da caratteri casuali; le righe con grazie vengono digitate lettera per lettera; il wordmark finale sale dal basso dentro una maschera con uno sfasamento di 0,06 s. Tracciati e trasformazioni usano ease-out o sine in-out come indicato per scena.

Musica

Un brano elettronico esaltante a 120 BPM (accordi di pianoforte, pad caldi, basso synth, cassa four-on-the-floor), esattamente 20 s, con ogni taglio che cade su un battito. Morbido e filtrato per i primi due secondi con un riser verso un boom a 2 s, piena energia fino a 16 s, un breakdown filtrato con un riser verso un boom finale a 18 s, poi dissolvenza in uscita entro 20 s. Mix a circa -14 LUFS con true peak sotto -1 dBTP.

Suono

Un whoosh morbido e tre tick glitch a ogni taglio, e un whoosh più profondo e un boom quando si apre il portale del frattale a 12 s, il tutto sopra la musica e sulla griglia del ritmo. Nessuna voce fuori campo.

Riferimenti

Animazioni matematiche esplicative incrociate con arte generativa di creative coding e un HUD da oscilloscopio o strumento da laboratorio fantascientifico: sottili linee luminose su quasi nero, valori in monospazio, equazioni con grazie da libro di testo.

Cosa preparare

Il nome del tuo marchio, un breve slogan per ciascuna delle otto etichette di scena e per la schermata finale, e il tuo indirizzo web.

Gli accorgimenti di motion design con cui è costruito il video, ognuno con codice autonomo da aprire nel browser o da passare al tuo agente.

Anteprima della tecnica “Taglio glitch: bande tagliate, linee colorate e flash bianco” — A 0:02 nel video

Transizione

Taglio glitch: bande tagliate, linee colorate e flash bianco

La scena in uscita e quella in entrata vengono disegnate su un canvas fuori schermo; per 0,13 s intorno al taglio viene ricopiato in bande orizzontali alte 18-128 px, circa la metà spostata lateralmente fino a 70 px (seme dato dal numero di fotogramma, ridotto a zero). Da 3 a 6 linee a tutta larghezza di 1-2 px in turchese, rosa, arancione e bianco lampeggiano per 0,15 s, e un livello bianco al 14 % decade linearmente in 0,25 s.

Quando usarla Un taglio netto dal carattere digitale ed energico, ogni due secondi a tempo.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Taglio glitch: bande tagliate, linee colorate e flash bianco</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>

Anteprima della tecnica “Epicicli di Fourier che disegnano un contorno chiuso” — A 0:05 nel video

Forme

Epicicli di Fourier che disegnano un contorno chiuso

Un contorno chiuso viene ricampionato a 180 punti e trasformato in 180 termini di Fourier; i cerchi sono concatenati dal centroide, il più grande per primo, ciascuno compie n giri per ciclo, e la punta lascia una scia luminosa. Il progresso procede con sine in-out per circa 3 s, anelli tenui e raggi bianchi mostrano la macchina, e il contorno si riempie con un gradiente morbido una volta chiuso mentre la catena svanisce.

Quando usarla Per disegnare qualsiasi logo, glifo o tracciato come se lo percorresse una macchina di cerchi.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Epicicli di Fourier che disegnano un contorno chiuso</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>

Anteprima della tecnica “Cerchio unitario che alimenta una traccia sinusoidale scorrevole” — A 0:03 nel video

Dati

Cerchio unitario che alimenta una traccia sinusoidale scorrevole

Un punto ruota su un cerchio luminoso a velocità angolare costante; i suoi cateti di coseno e seno sono disegnati come segmenti colorati e una linea tratteggiata porta la sua altezza a un punto all'inizio di un grafico. L'intera storia dell'angolo scorre verso destra a circa 104 px per radiante, così il seno cresce dal cerchio in tempo reale, con un coseno tenue accanto e letture in tempo reale.

Quando usarla Per spiegare un segnale periodico, un ritmo o qualsiasi valore ciclico.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cerchio unitario che alimenta una traccia sinusoidale scorrevole</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>

Anteprima della tecnica “Campo di semi di fillotassi che vortica in un anello” — A 0:16 nel video

Particelle

Campo di semi di fillotassi che vortica in un anello

1500 semi si trovano all'angolo n·137,508° e al raggio c·√n; compaiono dal centro verso l'esterno con un conteggio ease-out, ruotano e passano dal bianco a un ciclo rosa-viola-turchese. Al via ogni seme si muove in coordinate polari (centro, raggio e angolo interpolati con un cubico in-out e un piccolo sfasamento per n) verso un cerchio più piccolo altrove, poi i punti lasciano il posto a un tratto pieno.

Quando usarla Crescita organica che si risolve in una forma pulita: una rivelazione, un anello di logo o uno stato di caricamento.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Campo di semi di fillotassi che vortica in un anello</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>

Anteprima della tecnica “Lettere del logotipo che salgono attraverso un ritaglio, con una linea sfumata tracciata” — A 0:18 nel video

Tipografia

Lettere del logotipo che salgono attraverso un ritaglio, con una linea sfumata tracciata

Ogni lettera di un logotipo in grassetto con tracking ampio sta nella propria casella di ritaglio e sale da un'altezza di maiuscola più in basso (0,36 s, power3.out, sfasamento di 0,06 s); sotto viene tracciata una linea di 3 px turchese-viola-rosa (0,4 s, power3.inOut), uno slogan monospazio spaziato si risolve da caratteri casuali e una riga serif in corsivo appare per ultima.

Quando usarla Una schermata finale o un titolo che deve arrivare lettera per lettera con sicurezza.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lettere del logotipo che salgono attraverso un ritaglio, con una linea sfumata tracciata</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>

Altri prompt

Assemblaggio del logo low-poly con nome digitato nel lockup

<direction> Realizza un logo reveal orizzontale di 21 secondi, 1920x1080 a 60 fps. Assembla lentamente il mio logo da sfaccettature low-poly e termina su un lockup orizzontale con il nome del mio brand digitato e uno slogan sotto. L'idea: una lunga costruzione tranquilla senza stacchi per quattordici secondi, un rilascio sul drop della musica entro due secondi, poi un finale calmo con il testo digitato. L'aspetto: sfondo quasi nero con una morbida vignettatura circolare, colori del brand piatti e carattere grottesco pulito. Evita sfumature sul logo, giunture visibili tra i triangoli, stacchi durante la costruzione e qualsiasi cosa confusa dietro il logo. </direction> <structure> 1. 0–2,6 s, la struttura wireframe: un wireframe low-poly del contorno del mio logo si disegna da solo dalla base del logo verso l'esterno. Ha circa 35–45 vertici e 90 linee sottili. 2. 1,9–13,3 s, l'assemblaggio: il logo è tagliato in circa 55 triangoli lungo quel wireframe, e volano dentro pezzo per pezzo da fuori inquadratura. Gli atterraggi iniziano lenti alla base del logo e diventano più fitti verso l'alto. L'ultimo pezzo atterra a 13,3 s, e il logo è allora completo ed esatto. Mantieni il logo finito per circa un secondo. 3. 14,38 s, il flash, esattamente sul drop della musica. Un'esplosione di luce, un anello arancione in espansione e un flash luminoso sul logo scattano insieme. 0,1 s dopo il colpo, una piastra color inchiostro profondo cresce dietro il logo e si squadra diventando un'icona app. Mantieni l'icona centrata per un secondo. 4. 15,74–16,15 s, lo scivolamento: l'icona si riduce a circa il 42% e si sposta nel terzo sinistro, facendo spazio al nome. 5. 16,1–21 s, il nome: un cursore rosa appare a destra dell'icona e il nome viene digitato, ad esempio "Brand Name" (sostituiscilo con il tuo brand). A 18,15 s lo slogan scorre dentro sotto di esso, ad esempio "Your tagline here" (sostituiscilo con il tuo). Il cursore lampeggia tre volte a tempo e scompare a 19,9 s. Mantieni il lockup fino alla fine. </structure> <composition> Sfondo: una vignettatura radiale quasi nera, #0D0B1E al centro che scurisce fino a #040308 agli angoli. Palette: - Inchiostro profondo #1C0B5D per la piastra dell'icona. - Rosa #FB2D89 come accento principale. - Arancione #FE9117. - Bianco #FFFFFF. - Lavanda chiaro #E9E4F2 e #F0EDFF per linee e testo morbido. - Viola #7C6CF2 solo nel bagliore dello sfondo. Il logo resta in colori piatti senza sfumature. Wireframe: linee in lavanda #E9E4F2 al 60% di opacità, spessore 1,3 px; punti dei vertici in #F0EDFF con raggio di 2,6 px. Piastra dell'icona: un cerchio di 676 px che diventa un quadrato arrotondato con raggio degli angoli del 24% e una morbida ombra. Testo: il nome in un grottesco bold (Golos Text 700, circa 155 px, bianco). Lo slogan sta sotto in un grottesco leggero (Onest 400, circa 49 px, lavanda al 74% di opacità). Cursore: una barra rosa #FB2D89, 10 x 128 px, con un morbido bagliore rosa. Il lockup finale (icona a sinistra, nome e slogan a destra) è centrato nel suo insieme nell'inquadratura. </composition> <techniques> Push-in: l'apertura si trova su un push-in molto lento verso il centro dell'inquadratura, da scala 0,886 a 0 s a 0,998 a 11 s, poi fermo. Disegno del wireframe: ogni linea cresce linearmente dal vertice precedente a quello successivo in 0,08–0,45 s. Un piccolo punto appare in dissolvenza su ogni vertice quando una linea lo raggiunge. Volo d'ingresso: ogni pezzo è fatto di uno a tre triangoli. Arriva veloce su un percorso curvo e rallenta fino alla posizione in circa 0,5 s, ruotando in 3D. Rotazione, ribaltamento e inclinazione si attenuano fino a zero all'arrivo. In volo è oscurato a circa il 60% e leggermente morbido; all'atterraggio è nitido e completamente illuminato. Ogni triangolo mostra esattamente la sua parte del logo piatto, così l'assemblaggio finito è senza giunture. Bagliore: un debole bagliore rosa #FB2D89, sotto il 10% di opacità e che sfuma nel viola #7C6CF2, cresce dietro il logo mentre si riempie. Flash a 14,38 s: - Un'esplosione di luce rosa-malva in modalità screen divampa attorno al logo e svanisce in 0,8 s. - Un anello sottile arancione caldo, 7 px, parte da un raggio di 300 px e schizza fuori dall'inquadratura a velocità costante in 0,38 s. - Il logo lampeggia luminoso e si assesta in 0,3 s. Piastra: 0,1 s dopo il colpo, la piastra #1C0B5D cresce da un punto fino al cerchio di 676 px in 0,21 s (sine ease-out). All'inizio è illuminata, poi i suoi angoli si squadrano fino al raggio del 24%. Scivolamento: l'icona si scala a circa il 42% e si sposta nel terzo sinistro in 0,415 s (power3 ease-in-out). Si sfoca fino a 7 px alla massima velocità e atterra nitida. Poi continua a crescere molto lentamente, circa il 3% in cinque secondi. Digitazione: una lettera per ogni semicroma della musica (0,156 s a 96 BPM). Ogni lettera appare in dissolvenza in 0,05 s mentre il cursore salta dopo di essa. Slogan: scorre dentro da sinistra a destra in circa 0,2 s, carattere per carattere. </techniques> <music> Un brano strumentale a 96 BPM, speranzoso e moderno, di esattamente 21 secondi. - Inizio: un morbido glockenspiel da carillon su pad caldi. - Intorno a 4,4 s: entra un arrangiamento pieno e vivace (batteria, basso, archi, una linea luminosa di glockenspiel). Un filtro si apre in due battute e cresce verso il flash. - 14,38 s: un colpo di piatto e un grande accordo cadono esattamente sul flash. - Dopo il drop: il carillon ritorna su pad sostenuti sotto il lockup e svanisce nel silenzio a 21 s. Tieni tutto sulla griglia del ritmo così che la digitazione e i lampeggi del cursore cadano su semicrome e battiti. </music> <sound> Effetti sonori sopra la musica: - Un riser morbido verso il primo atterraggio di triangolo. - Un riser verso il flash, poi un boom profondo e un leggero impatto di vetro su di esso. - Un breve whoosh mentre l'anello schizza via, e un altro quando l'icona scivola. - Un morbido clic di tasto per ogni lettera digitata, e uno leggero quando appare lo slogan. Niente voce fuori campo. Volume complessivo circa -14 LUFS, true peak sotto -1 dBTP. </sound> <references> Uno sting di logo premium tech o di lancio app: un assemblaggio da wireframe low-poly a solido nello stile di una costruzione di sfaccettature 3D, rilasciato sul drop in una rivelazione di icona app, con un lockup del nome digitato in stile terminale. </references>

Anteprima del prompt “Showreel di motion design sincronizzato sul ritmo”

Showreel di motion design sincronizzato sul ritmo

<direction> Realizza uno showreel di motion design di 15 secondi per [your brand], 1920x1080 orizzontale a 60 fps, interamente disegnato: testo animato, forme, particelle, una nuvola di punti 3D e una dashboard, nessun filmato. L'idea: un reel di prodotto veloce in cui ogni cambio di scena cade su un beat house a 128,57 BPM. Un beat dura esattamente 28 fotogrammi (0,4667 s), ogni taglio si appoggia su questa griglia e il primo colpo grande cade a 1,867 s (beat 4). Lo stile alterna scene quasi nere e scene chiare bianco lavanda, con il rosa acceso come accento principale più viola e arancione. I titoli usano una grottesca pesante, le didascalie una mono e la dichiarazione una serif corsiva. Una cornice in stile broadcast copre l'intero reel fino a un glitch finale. Usa il mio marchio logo sulla scheda finale e sostituisci ogni testo tra virgolette con le mie parole, mantenendo ognuna di lunghezza simile perché l'impaginazione regga. Evita foto, filmati di repertorio, dissolvenze incrociate morbide e generiche e tutto ciò che esce dalla griglia dei beat. </direction> <structure> 1. 0–1,85 s, intro su quasi nero. Una sottile linea di righello (larga 1440 px, chiara al 22 % di opacità) cresce dal centro a 0,34 s (expo.out, 0,65 s), poi compaiono 13 tacche da sinistra a destra, un fotogramma di distanza. Una palla rosa da 80 px cade dall'alto a sinistra e scivola verso il centro (power2.out, 1,25 s). Rimbalza tre volte sul righello, schiacciandosi a ogni impatto e allungandosi a ogni caduta, con un po' di motion blur ad alta velocità. Una riga mono viene digitata sotto il righello, un carattere ogni 1,56 fotogrammi, seguita da un cursore a blocco lampeggiante (esempio "no keyframes.", sostituiscilo con il tuo). A 1,28 s la palla si comprime a 0,8x, poi si gonfia su una curva expo-in fino a riempire l'inquadratura di rosa a 1,82 s. 2. 1,82–3,70 s, quattro parole, una per beat. Ogni parola pesante da 300 px poggia su un proprio sfondo con una riga di commento mono sotto (esempi "// describe your idea", "// live preview", "// refine in words", "// mp4 export"). Dietro, due file di copie contornate da 205 px delle quattro parole scorrono in alto e in basso a 760 px/s in direzioni opposte. I contorni sono tracciati con il colore del testo della scena al 7–14 % di opacità. - Parola 1 (esempio "DESCRIBE"), indaco profondo su rosa: la parola atterra da una scala di 1,39x con expo.out (0,33 s) mentre le sue lettere compaiono a 0,03 s di distanza con un rapido ritorno alla nitidezza. - Parola 2 (esempio "PREVIEW"), chiara su quasi nero a 2,333 s: la spaziatura si chiude da 150 px a stretta con expo.out (0,45 s), con dissolvenza in 3 fotogrammi. - Parola 3 (esempio "REFINE"), viola sulla pagina chiara a 2,8 s: le lettere salgono di 340 px da dietro una linea di maschera 40 px sotto la linea di base con back.out(2.2), 0,3 s ciascuna, a 0,035 s di distanza. - Parola 4 (esempio "EXPORT"), chiara su viola a 3,267 s: le lettere scattano su note da 1/32 (3,5 fotogrammi di distanza), ognuna da 0,6x a un balzo di 1,13x alto 50 px, poi si assesta. 3. 3,46–4,02 s, tendina a strisce. Otto strisce verticali da 240 px, alternate rosa e pagina chiara, salgono dal basso (power2.inOut, 0,18 s, 0,7 fotogrammi di distanza, prima la sinistra). Restano ferme, poi continuano a salire e escono, rivelando dal basso la scena successiva. 4. 3,70–5,60 s, forme su quasi nero. Una griglia da 120 px di piccoli quadrati arrotondati attenuati (un quinto sono contorni) con minuscole crocette in mezzo. Un'onda parte dal centro a ogni beat (3,73, 4,2, 4,67 e 5,13 s) a 2000 px/s. Dove passa il suo fronte, ogni cella cresce da 42 a 74 px, si arrotonda verso un cerchio, ruota di 38 gradi e diventa rosa. La prima onda rivela la griglia, e la griglia ruota lentamente in senso antiorario, sempre più veloce. Dopo l'ultima onda le celle si svuotano e svaniscono entro 5,47 s. 5. 5,55–7,42 s, particelle. Un punto di flash bianco con un sottile anello d'urto compare a 5,62 s, poi 7000 minuscoli quadrati esplodono dal centro. Si raccolgono in un'enorme parola da 590 px (esempio "IDEA") colorata in larghezza dall'arancione al lavanda al viola, con uno sfarfallio di un pixel. Da 7,0 s fluiscono via verso destra con scie, prima la sinistra della parola. Dietro c'è un morbido bagliore radiale rosa. 6. 7,42–9,45 s, 3D su sfondo radiale indaco profondo. Una sfera di Fibonacci di 1700 punti (raggio 362 px) gira lentamente sopra un pavimento in prospettiva di sottili linee viola le cui file avanzano verso lo spettatore. I punti sono rosa o viola, più grandi e luminosi davanti. Da 8,12 s ogni punto viaggia verso il proprio posto su un nodo torico (2,3) (cubic in-out, ritardi casuali fino a 0,16 s), e il nodo continua a girare. 7. 9,08–9,65 s, una seconda tendina a strisce come nella scena 3, in viola, rosa e pagina chiara. 8. 9,27–11,1 s, dashboard sulla pagina chiara con deboli guide verticali. - Passi: tre file di numeri di passo pesanti da 180 px contano con expo.out ("01", "02", "03", il terzo in rosa) con didascalie mono (esempio "PICK A TEMPLATE"). Ogni riga sale nel proprio riquadro ritagliato, a 0,08 s di distanza. - Scheda: una scheda bianca (880x740, angoli da 26 px, morbida ombra indaco) si solleva di 90 px (power3.out, 0,45 s). Contiene un titolo in grassetto minuscolo, una piccola pillola "LIVE" e un anello che si riempie con power3.out con una breve etichetta all'interno. - Grafico: quattordici barre arancioni crescono dalla base a 0,031 s di distanza, l'ultima piena e rosa. Una linea viola si disegna sopra di esse con sine.inOut (0,72 s), con un punto, un alone e un'etichetta scura in testa (esempio "No keyframes"). 9. 10,96–11,45 s, tendina a barre. Otto bande orizzontali, alternate quasi nero e rosa, entrano da sinistra (power3.inOut, 0,2 s, un fotogramma di distanza, prima quella in alto) e proseguono fino a uscire a destra. 10. 11,07–13,07 s, dichiarazione su quasi nero. Quattro fasci di 28 linee sottilissime scorrono nell'inquadratura come nastri, miscelati in modo additivo: da rosa ad arancione in alto, poi da rosa a viola, viola, e da viola a rosa in basso. Una dichiarazione su due righe in serif corsiva da 290 px entra lettera per lettera. Ogni lettera sale di 36 px e torna nitida in 0,16 s, a 0,02 s di distanza sulla riga uno e 0,035 s sulla riga due. La riga uno è chiara e inizia a x 334 (esempio "Ideas in"); la riga due è rosa e finisce a x 1438 (esempio "motion."). 11. 12,73–13,07 s, glitch. Fette del testo saltano di lato, l'inquadratura si inverte due volte, piccoli blocchi viola, gialli e rosa sfarfallano e il testo si divide in rosa e turchese. La cornice broadcast e i suoi contatori scompaiono. 12. 13,07–15,0 s, scheda finale su quasi nero. - Un flash pallido si spegne (0,26 s). - Un logotipo pesante da 260 px ("[your brand]") sale lettera per lettera da dietro la sua linea di base (back.out(1.6), 0,32 s, 0,05 s di distanza). - Il mio marchio logo cade dall'alto come la palla dell'intro, si schiaccia all'atterraggio a 13,51 s e si assesta come il punto finale del logotipo. - Un sottile filetto si disegna sotto il lockup (power3.out, 0,3 s). - Una riga mono molto spaziata si decodifica sotto, da caratteri rosa confusi a lettere chiare (13,76–14,6 s). - Una call to action in serif corsiva rosa appare in dissolvenza a 14,33 s (esempio "try it free."). - Una fila attenuata di quattro brevi funzionalità appare in dissolvenza in basso. Mantieni la scheda finale fino a 15 s. </structure> <composition> - Palette: - Quasi nero #0D0B1E per gli sfondi scuri. - Indaco profondo #1C0B5D per il testo scuro e la scena 3D. - Pagina chiara #FAF9FF per gli sfondi chiari e il testo chiaro. - Lavanda #F0EDFF per i pannelli morbidi. - Attenuato #6B6385 per le didascalie e #E9E4F2 per le linee. - Accenti: rosa principale #FB2D89, secondo viola #7C6CF2, arancione caldo #FE9117, più bianco. - Giallo #FFD23F e turchese #2DD4B0 solo come macchioline di glitch. - Se do colori di brand, inseriscili in base al ruolo. - Font: Roboto Flex con peso 900 e spaziatura stretta (-0,035 em) per tutti i titoli. JetBrains Mono per la cornice, le didascalie e le righe di commento. Instrument Serif Italic per la dichiarazione su due righe e la call to action. - Una morbida vignettatura laterale, più scura solo sui bordi sinistro e destro: circa -8 % a metà bordo e -12 % negli angoli. - Una cornice in stile broadcast sopra tutto fino al glitch: - Parentesi d'angolo da 26 px. - Un titolo in alto a sinistra (esempio "[YOUR BRAND] / YOUR TAGLINE"). - Un timecode in corsa in alto a destra (00:00:SS:FF a 60 fps). - Il nome del capitolo corrente in basso a sinistra. - Un contatore di fotogrammi "NNN / 900" con una barra di avanzamento da 300 px in basso a destra. - Ogni parte è chiara con opacità 0,9 in modalità di fusione esclusione, quindi diventa scura sulle scene chiare e tinta su rosa o viola. La cornice appare in dissolvenza a 0,3 s. </composition> <techniques> - Ogni cambio di scena si appoggia sulla griglia di beat da 28 fotogrammi. Scene e tendine si sovrappongono per alcuni fotogrammi, così nessun fotogramma è mai vuoto. - Varia le transizioni: la palla che si gonfia nello sfondo successivo, tagli di colore netti tra le quattro parole, tendine a strisce verticali, una tendina a barre orizzontale, un flash con anello d'urto e un glitch con separazione RGB verso la scheda finale. - Dai alla palla e al marchio logo un movimento fisico: schiacciamento all'impatto, allungamento nella caduta, leggero motion blur alla velocità. - Usa ingressi lettera per lettera ovunque, ogni parola con la propria curva (atterraggi expo.out, salite back.out da una maschera, scatti su note da 1/32), tornando nitide man mano che le lettere arrivano. - Mantieni tutto nitido e vettoriale: particelle, punti e linee sono minuscoli e netti, e i bagliori restano morbidi e dietro il testo. </techniques> <music> Crea una base house originale a 128,57 BPM, esattamente 15 s, posata sulla griglia dei beat. - Intro: un pad arioso con pluck frizzanti. - Dal colpo a 1,867 s: il groove completo, con cassa in quattro quarti, clap, hat e basso in sidechain. - Finale: un riser e un glitch verso un grande colpo finale a 13,07 s, poi l'accordo di chiusura risuona fino a 15 s. </music> <sound> Sopra la base, aggiungi colpi composti per il montaggio: - un riser verso un boom sul fill a 1,867 s - brevi whoosh con il picco su ogni taglio di parola e ogni tendina - morbidi click sulle onde di forme - un piccolo boom e un tic di vetro sul flash di particelle - un whoosh di scia quando le particelle se ne vanno - un sub drop verso la scena 3D - un riser e tic digitali di glitch verso il boom finale a 13,07 s - una campana quando il marchio logo atterra a 13,51 s Nessuna voce fuori campo. Mix a circa -14 LUFS, true peak sotto -1 dBTP. </sound> <references> Uno showreel di lancio di un prodotto tech nello stile di eleganti reel animati di brand: un overlay HUD broadcast, tipografia cinetica, particelle generative, una nuvola di punti 3D rotante e una dashboard UI pulita. </references>

Anteprima del prompt “Showreel di app fluido da 15 secondi in pura motion graphics”

Showreel di app fluido da 15 secondi in pura motion graphics

<direction> Crea uno showreel orizzontale di motion graphics di 15 secondi per la mia app, 1920x1080 a 60 fps. Tutto è grafica disegnata, senza filmati. L'unica cosa che fornisco è il logo della mia app (un'icona app a quadrato arrotondato). L'idea è un unico movimento continuo in cui ogni sezione passa il suo ultimo oggetto alla successiva. Un punto diventa il logo, il logo diventa il nome, le lettere diventano punti, i punti diventano palline da corsa, una pallina inonda l'inquadratura, una forma si rompe in tessere, le tessere diventano una nuvola di punti 3D, e poi arrivano parole cinetiche e una schermata finale. Ogni sezione mostra una abilità di motion. Usa colori piatti, forme vettoriali nitide e un HUD da mirino di fotocamera sopra tutto, con tagli agganciati a una traccia a 128 BPM. Evita filmati, gradienti e texture, voce fuori campo e qualsiasi sezione che parta dal nulla invece di nascere dalla precedente. </direction> <structure> 1. 0–1,9 s, quasi nero: un punto rosa sta in un sottile anello grigio, e l'anello si apre con expo.out. Un secondo anello si srotola fino a un grande cerchio tenue (0,45 s, expo.out). A 0,5 s il mio logo cresce dal punto, con i suoi livelli che compaiono uno dopo l'altro con back.out. Si assesta più grande a 0,92 s mentre ruota dolcemente. Intorno compare un sottile anello rosa di testo mono che gira ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·", sostituiscilo con il tuo) e ruota lentamente. A 1,7 s il simbolo si rimpicciolisce con un po' di sfocatura tornando un piccolo punto chiaro. 2. 1,9–3,5 s: sul drop a 1,93 s due dischi esplodono dal punto, prima quello chiaro e quello rosa 30 ms dopo (expo.out, 0,3 s), così un sottile anello chiaro cavalca il bordo rosa. Il nome della mia app nel grottesco largo sale lettera per lettera dalla linea di base: ogni lettera è ritagliata nel proprio riquadro, con 30 ms di sfasamento e 0,26 s expo.out. Il nome riempie sempre la stessa larghezza di 1640 px. Una sottile linea scura si disegna dal centro sopra di esso, con "01" che si digita a sinistra e il mio indirizzo web a destra. Da 2,55 s un'onda di larghezza attraversa le lettere: ognuna si comprime dal 150% a circa il 55% di larghezza e torna in 0,6 s, 0,1 s dopo la precedente. La parola viene riadattata a 1640 px a ogni fotogramma, quindi le lettere strette diventano più alte. A 2,84 s uno slogan chiaro in serif corsivo ("ideas in motion") sale parola per parola sotto. A 3,3 s le lettere collassano in punti scuri e lo slogan cade. 3. 3,5–5,6 s: uno stacco diagonale chiaro arriva dal basso a destra (0,16 s). Sei punti scuri si lanciano in curva all'inizio di sei righe (power2.inOut, sfalsati) e prendono i colori delle righe. Un titolo in serif corsivo si digita da sinistra ("Chat instead of a timeline."), con una nota mono a destra ("NO KEYFRAMES · LIVE PREVIEW") e etichette di traccia "IDEA" e "MP4" alle due estremità. - Ogni riga ha un numero rosa, un nome mono ("animated type", "shapes", "transitions", "3D effects", "sound", "live preview"), una minuscola icona di curva che si disegna da sola e una linea di traccia che si disegna da sinistra a destra. - A 4,215 s sei palline (scura, viola, rosa, ripetendo) corrono per 1040 px in esattamente 0,94 s, ciascuna con la propria curva: linear, power2.inOut, expo.out, back.out(1.7), elastic.out(1, 0.3) e bounce.out. - Tacche sopra ogni traccia segnano dove si trovava la pallina a ogni 1/16 della corsa. Tre anelli fantasma sfumanti seguono ogni pallina, le palline si allungano lungo la loro velocità, un punto cavalca ogni icona di curva in sincronia e ogni pallina riceve un alone di contorno all'arrivo. - A 5,3 s le righe sfumano, le palline volano al centro e si fondono, e quella viola si gonfia fino a riempire l'inquadratura. 4. 5,6–7,5 s, viola: un cerchio chiaro balza su da un punto (elastic.out, 0,45 s). Dodici punti satellite sfrecciano su un'orbita (expo.out, a 12 ms l'uno dall'altro). - Dietro ci sono sottili linee guida a croce, un cerchio orbitale tratteggiato con tacche e le etichette "270°" e "90°". - Letture mono ai lati: "SHAPES NO KEYFRAMES" a sinistra e richieste di modifica tra virgolette a destra ("“BIGGER” “SLOWER”", "“ANOTHER COLOUR”"). - Anelli d'onda rosa pulsano attorno al cerchio. - La forma poi si trasforma: cerchio → triangolo → stella → quadrato. Ogni trasformazione dura 0,26–0,3 s su back.out(2,2) con una rotazione di 120°, e contorni eco rosa seguono la forma solo mentre ruota. - I satelliti si trasformano un attimo dopo, uno dopo l'altro, e svaniscono a 7,22 s. Si assesta come un quadrato dritto di 360 px. 5. 7,5–9,75 s, quasi nero: il quadrato si divide in nove tessere da 120 px. Un labirinto truchet cresce anello per anello fino a riempire l'inquadratura (back.out, circa 30 ms per anello); ogni tessera contiene due archi di quarto di cerchio in angoli opposti, disegnati come linee chiare da 20 px. Onde rosa lo attraversano: prima due bande da sinistra a destra, poi un anello che si stringe verso il centro. Le tessere dentro un'onda ruotano di 90 o 180 gradi, si riducono all'80% e diventano rosa, così le linee si spezzano in trattini e poi tornano una volta passata la banda. Una piccola etichetta mono si digita in basso ("SHAPES · TRANSITIONS · NO KEYFRAMES"). Da 9,45 s le tessere collassano dal centro verso l'esterno. 6. 9,5–11,25 s: una griglia di 24 x 24 punti appare dove c'erano le tessere, vista dall'alto. Si inclina in un piano prospettico e si piega in una sfera, un vaso, una massa schiacciata e un toro mentre ruota attorno al suo asse verticale. Tra una forma e l'altra si muove con power2.inOut, con deboli linee tra i vicini, circa un punto su nove rosa, e punti più tenui con la profondità. Un'etichetta mono sta sotto ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). Fa zoom attraverso la camera e sfuma a 11 s. 7. 11,25–13,0 s, parole cinetiche: una parola ogni 0,23 s, ciascuna sul proprio sfondo piatto e ciascuna riempie la larghezza con una diversa larghezza dello stesso font. Sostituisci le sei parole con la tua frase. - "IDEA": scuro su rosa, scivola da sinistra, scala da 1,3 a 1, sfocatura che si schiarisce in 0,14 s. - "IN.": chiaro su quasi nero con un punto fermo rosa, entra da destra con sfocatura, e una piccola nota mono in alto a sinistra ("EDIT IN WORDS ↗"). - "VIDEO": ultra-condensato viola sulla pagina chiara, lettere che salgono dal basso a 25 ms l'una dall'altra. - "OUT.": chiaro su viola, entra da sinistra con sfocatura, con una nota in alto a destra ("↘ MP4 EXPORT"). - "NO": scuro su giallo. Le lettere cadono inclinate con back.out, poi copie contornate della parola riempiono righe sopra e sotto e scorrono in direzioni alterne mentre la riga principale va alla deriva verso sinistra. - "KEYFRAMES.": chiaro su quasi nero, scivola a sinistra a velocità costante con una sottile linea diagonale, poi esce veloce con sfocatura. 8. 13,0–15 s, schermata finale: il rosa inonda da destra e un anello chiaro si srotola dal centro (0,42 s). Il mio logo entra ruotando al centro (back.out) con un piccolo scoppio di coriandoli di punti, anelli e triangoli in scuro, chiaro e viola, poi si sposta a sinistra del lockup. Il nome della mia app cade lettera per lettera accanto, da sfocato a nitido, 0,22 s ciascuna. Uno slogan in serif corsivo sale sotto ("your AI motion designer"). Si disegna una linea e sotto si digita una riga mono: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT", un piccolo punto di registrazione, poi il mio indirizzo web a destra. Mantieni l'ultimo secondo. </structure> <composition> Palette, tutto piatto: - nero profondo quasi nero #0d0b1e - rosa acceso #fb2d89 (l'accento principale) - pagina chiara #faf9ff - viola morbido #7c6cf2 - giallo caldo #ffd23f, solo per un taglio cinetico Font: - Un grottesco largo variabile con asse di larghezza (Anybody, peso 900, larghezza 50–150%) per il nome e le parole cinetiche. - Un serif corsivo editoriale condensato (Instrument Serif Italic) per titoli e slogan. - Un mono (JetBrains Mono) per le etichette dell'interfaccia, 14 px, spaziatura tra le lettere 0,16em. Un HUD da mirino di fotocamera copre tutto il video: - Sottili parentesi d'angolo da 2 px, a 44 px da ogni angolo. - In alto a sinistra: il nome della mia app in maiuscolo mono grassetto con uno slogan più tenue dopo ("APP NAME IDEAS IN MOTION"). - In alto a destra: l'etichetta della sezione corrente ("01 — APP NAME", "02 — NO KEYFRAMES", "03 — SHAPES", "04 — EDIT IN WORDS", "05 — 3D EFFECTS", "06 — KINETIC TYPE", "07 — TRY IT FREE"). - In basso a sinistra: un timecode in corsa con fotogrammi ("00:00:03:09") e un breve slogan ("LIVE PREVIEW"). - In basso a destra: un altro slogan ("NO KEYFRAMES"), quattro piccoli quadrati che si accendono uno per battuta, e "MP4". - Lungo il bordo inferiore: una linea di avanzamento da 2 px che cresce con il tempo. L'HUD passa da inchiostro scuro a chiaro a ogni taglio per leggersi su qualsiasi sfondo. Tutte le parole sullo schermo sono esempi da sostituire con le tue. </composition> <techniques> - Ogni sezione termina su un oggetto da cui cresce la successiva: punto a logo, logo di nuovo a punto, dischi a nome, lettere a punti, punti a palline, pallina a inondazione viola, quadrato a tessere, tessere a griglia di punti, nuvola di punti che fa zoom attraverso la camera nelle parole cinetiche. - Ogni nuova etichetta di sezione dell'HUD si digita in 0,3 s, con glifi casuali che corrono davanti al cursore. Anche le altre righe mono si digitano. - Tipografia a larghezza variabile: anima l'asse di larghezza di ogni lettera e riadatta l'intera parola a una larghezza fissa a ogni fotogramma. - Le rivelazioni delle lettere sono ritagliate nel riquadro di ogni lettera. - Usa una leggera sfocatura di movimento solo sui movimenti veloci e una debole frangia di colore viola sul grande stacco a iride. - Contorni eco, anelli fantasma e aloni sono sottili tratti rosa o dello stesso colore che sfumano rapidamente. </techniques> <music> Synth-pop elettronico energico a 128 BPM, primo battere a 0,06 s, lungo esattamente 15 s: - Morbidi accordi di pad simili a campane nella prima battuta. - Dopo il drop a 1,93 s, una cassa four-on-the-floor con clap su 2 e 4, hi-hat in controtempo, un basso synth incisivo e brevi accordi staccati sotto le sezioni. - Un break da circa 10 s che sale verso la sezione cinetica. - Un accordo finale di pad risonante sulla schermata finale. Le sezioni cambiano sulle linee di battuta, il nome atterra sul drop a 1,93 s e i tagli delle parole cinetiche cadono sugli ottavi. </music> <sound> Nessuna voce. Colpi sopra la musica: - un riser lungo la prima battuta - un boom sul drop a 1,93 s - un riser da circa 10 s fino a un colpo punch a 11,25 s - una cassa e un breve whoosh a ogni taglio di parola cinetica - un colpo di piatto a 12,71 s - un boom con l'accordo di pad risonante quando atterra la schermata finale - un piccolo blip a 14,1 s La musica regge la traccia e i colpi arrivano chiari sopra. </sound> <references> Uno showreel da motion designer incrociato con uno sizzle di lancio di un prodotto tech. Combina un overlay da mirino di fotocamera, tipografia cinetica audace in stile svizzero, dimostrazioni di curve di easing, pattern generativi di tessere truchet e una nuvola di punti 3D rotante. </references>

Newsletter

Ti mandiamo i migliori nuovi prompt della community con i loro video. Niente spam, e in ogni email c’è il link per disiscriverti.

Usiamo la tua email solo per questa newsletter. Informativa sulla privacy

I cookie essenziali ricordano le impostazioni del sito. Con il tuo consenso, Google Analytics ci aiuta a capire come viene usato Motion Fab. Puoi cambiare la tua scelta a piè di pagina.

Le tue scelte sulla privacy ai sensi delle leggi statali USA applicabili. Informativa sulla privacy