il tuo motion designer AI

IT

Apri l’app beta

Simple Motion

Film di lancio app lucido su un beat a 120 bpm

Lancio app scuro e lucido di 15 secondi: un prompt digitato collassa in un link, un clic fa cadere il beat, poi globo, scheda, rete, parole e scheda finale.

Pubblicato 10 novembre 2026

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

Segnala questo prompt

Concept

Crea un film di lancio di 15 secondi per la mia app (15,07 s), tutto motion graphics, orizzontale 1920x1080 a 60 fps, montato stretto su un beat a 120 bpm: un beat ogni 0,5 s da 0, una battuta ogni 2 s. L'idea è una catena ininterrotta in cui ogni oggetto si trasforma nel successivo. Un lungo prompt digitato collassa in un punto, il punto diventa un link breve, e un clic su di esso fa cadere il beat. Poi arrivano un globo, una scheda prodotto, una rete, otto schede di parole e una scheda finale. Deve sembrare una presentazione di prodotto premium: scura e lucida per la maggior parte, e termina con una scheda finale luminosa. Non si gira nulla. Il nome del mio prodotto, il mio indirizzo, il mio marchio e le mie frasi sostituiscono tutti gli esempi tra virgolette qui sotto (sostituisci con i tuoi). Evita riprese o filmati stock, nomi o affermazioni di altri brand e tempi imprecisi: ogni cambio cade sulla griglia del beat.

Struttura

0-1,5 s, il lungo prompt. Su una pagina scura lampeggia un cursore rosa, e un'intestazione «DESCRIBE YOUR IDEA · 02» (DESCRIVI LA TUA IDEA · 02) appare in dissolvenza a 0,2 s.
Una frase molto più lunga dello schermo si digita da sola in Geist Mono 46 px: «Dì alla chat cosa mostrare. L'agente costruisce l'animazione. Nessun keyframe da cercare. Dì cosa deve cambiare...». La digitazione parte lenta, esplode a metà (centinaia di caratteri al secondo) e atterra dolcemente a 1,0 s. Le parole chiave sono bianche, il resto attenuato.
Il cursore corre fino a circa l'82% della larghezza, poi si ferma mentre la riga scorre a sinistra sotto di esso, con il bordo sinistro che sfuma tramite una maschera.
Da 1,05 s la riga si sfoca di lato (sfocatura solo orizzontale) e si affievolisce. A 1,38 s si schiaccia in una linea luminosa rosa-bianca di 4 px le cui estremità si chiudono in cinque fotogrammi in un punto al centro.
1,5-2,3 s, il link breve. Un fotogramma piatto di flash grigio-viola decade in 0,2 s. Dal punto nasce una pillola scura con un sottile bordo chiaro: il mio marchio e «[il tuo brand]» in bianco con «.app» in rosa, Manrope bold.
Le lettere si digitano, ognuna che sale da una sfocatura, mentre la camera avanza fino a circa 1,2x e poi torna indietro dolcemente.
Un puntatore bianco vola dentro dal basso a destra e clicca esattamente a 2,0 s (il drop). Al clic:

la pillola si preme a 0,96 e si illumina per due fotogrammi;
la pagina lampeggia di rosa scuro e decade in 0,12 s;
un anello chiaro e due anelli rosa crescono dal clic con power4.out;
circa settanta scintille rosa e bianche esplodono con resistenza.

2,0-4,4 s, il globo. Un globo scuro (raggio 780 px) sale dal basso e gira lentamente. Ha un bagliore rosa sul bordo interno, punti bianchi per le terre e meridiani tenui.
La pillola si riduce a circa la metà e sale in alto. Sotto c'è «● LIVE PREVIEW» (ANTEPRIMA LIVE) in mono rosa, poi un enorme indicatore mono da 154 px «IDEAS IN MOTION» (IDEE IN MOVIMENTO) che scorre come un contachilometri:

una colonna ritagliata per lettera, ognuna che scorre tra lettere casuali;
le colonne atterrano da sinistra a destra su una curva power4.out in 2,5 s;
le colonne non ancora atterrate restano in un colore fantasma attenuato.
Comete rosa disegnano archi dalla pillola al globo e lasciano un anello di impulso dove atterrano.

4,4-7,5 s, la scheda prodotto. Una dissolvenza sfocata (4,41-4,52 s) porta a una scheda scura dagli angoli arrotondati in lieve prospettiva 3D che si assesta da una forte inclinazione e continua a muoversi.
In alto: una pillola con un'icona di link e «[il tuo brand].app», una pillola «Live preview» (Anteprima live) e il mio marchio in alto a destra.
Tre statistiche in fila, etichettate «Pick a template» (Scegli un modello), «Describe your idea» (Descrivi la tua idea) e «Refine in words, then export» (Rifinisci con le parole, poi esporta), con valori che contano fino a «01», «02» e «03».
La statistica attiva poggia su un pannello tenue con una sottolineatura luminosa. Il pannello salta alla statistica successiva a 5,5 s e 6,0 s, e la sua sottolineatura diventa viola, poi rosa, poi turchese.
Un grafico ad area con una linea luminosa si disegna, poi si trasforma in una nuova curva e colore a ogni salto.
Da 6,3 s un cursore con un piccolo tooltip percorre la linea. Il tooltip dice «Edit in words» (Modifica con le parole) / «Bigger» (Più grande), poi «Slower» (Più lento).
Quattro notifiche scorrono da destra e spingono la pila verso l'alto:

«Describe your idea» (Descrivi la tua idea) / «Tell the chat what to show.» (Dì alla chat cosa mostrare.)
«No keyframes» (Nessun keyframe) / «Say what should change.» (Dì cosa deve cambiare.)
«Live preview» (Anteprima live) / «The preview updates as you talk.» (L'anteprima si aggiorna mentre parli.)
«MP4 export» (Esportazione MP4) / «Vertical, horizontal or square» (Verticale, orizzontale o quadrato)
A 7,25 s la scheda ruota via in 3D, si sfoca e sparisce entro 7,48 s.

7,5-10,5 s, la rete. Un disco bianco con il mio marchio spunta dal buio dentro un bagliore viola, superando 1,12x e assestandosi entro 7,9 s.
Il titolo «Edit in words.» (Modifica con le parole.) sale parola per parola dal proprio riquadro di riga in alto, con «words.» (parole.) in un gradiente viola-rosa-arancione.
Intorno al disco circa 37 avatar rotondi (volti segnaposto semplici in anelli colorati) spuntano anello per anello lungo due ellissi punteggiate. Sottili linee viola li uniscono al centro, e orbitano lentamente.
Scintille turchesi corrono lungo le linee. Ogni anello che raggiungono diventa turchese e brilla, e accanto spunta una piccola pillola turchese con una funzione: «+Type», «+Shapes», «+3D», «+Sound», «+Music», «+Fonts», «+Photos», «+Logos» (+Testo, +Forme, +3D, +Suono, +Musica, +Font, +Foto, +Loghi). Nessuna pillola si sovrappone mai a un'altra.
In basso «[il tuo brand].app» scorre lettera per lettera in mono turchese, con «YOUR AI MOTION DESIGNER» (IL TUO MOTION DESIGNER AI) sotto. La camera scivola a sinistra da 9,8 s.
10,5-12,5 s, otto schede di parole, una ogni 0,25 s sugli ottavi. La prima sfreccia dal bordo destro e frena bruscamente, con il titolo in sfocatura di movimento. Ogni scheda è un titolo Manrope ExtraBold 240 px:

«Kinetic type.» (Tipografia cinetica.) in inchiostro profondo sulla pagina chiara;
«Shapes.» (Forme.) bianco su quasi nero, con quadrati rosa scuro che si accendono;
«3D effects.» (Effetti 3D.) inchiostro profondo su rosa, con le lettere che salgono una a una;
«Sound effects.» (Effetti sonori.) in caratteri bianchi solo contorno su quasi nero;
«Another colour.» (Un altro colore.) su un gradiente conico degli accenti che ruota lentamente;
«Your footage.» (Le tue riprese.) viola sulla pagina chiara;
«Music.» (Musica.) turchese luminoso su note musicali che cadono;
il mio marchio con «[il tuo brand].» bianco su quasi nero.
Gli angoli portano piccolo testo mono:
in alto a sinistra: il mio marchio e indirizzo;
in alto a destra: «0N / 08»;
in basso a sinistra: un'etichetta di sezione come «[ NO KEYFRAMES ]» ([ NESSUN KEYFRAME ]);
in basso a destra: una linea di avanzamento che si riempie di un ottavo per scheda.

12,5-15,07 s, la scheda finale. Un fotogramma pallido, poi una pagina chiara si apre come un cerchio dal centro su una pagina grigio-viola.
Da 12,5 a 13,0 s il mio marchio si allontana da circa 3x, raddrizzandosi e passando da un grigio slavato al colore pieno.
Una nuvola pastello (rosa, viola, pesca, menta, burro) si gonfia dal basso e si sposta.
A 13,15 s il marchio scivola a sinistra e il nome «[il tuo brand]» esce da dietro di esso in un lockup centrato: inchiostro profondo, Manrope 600, circa 170 px.
La riga «Your idea is ready to move.» (La tua idea è pronta a muoversi.) sale parola per parola da 13,46 s, a 0,05 s di distanza. «move.» (muoversi.) è rosa, e una sottolineatura rosa viene tracciata sotto a 14,06 s.
Due pulsanti compaiono con una curva back: uno in inchiostro profondo «Try it free →» (Provalo gratis →) a 14,16 s e uno bianco mono «[il tuo brand].app» a 14,25 s. Mantieni fino alla fine.

Composizione

Palette:

sfondo quasi nero #0D0B1E;
inchiostro profondo #1C0B5D per il testo scuro sulle pagine chiare;
pagina chiara #FAF9FF e lavanda morbida #F0EDFF;
testo attenuato #6B6385, e un attenuato più chiaro #8F89A8 sullo scuro;
linee #E9E4F2;
bianco #FFFFFF.
Accenti: il rosa #FB2D89 è il principale (cursore, link, anelli, la parola in evidenza), con l'arancione #FE9117 al secondo posto. Viola #7C6CF2, turchese #2DD4B0 e giallo #FFD23F compaiono solo dove tre colori devono essere distinguibili.
Caratteri: Manrope (700-800) per titoli e interfaccia, Geist Mono per testo digitato, etichette, contatori e indirizzi. Le piccole etichette sono mono 24 px maiuscole con ampia spaziatura (circa 0,23 em).
Una tenue griglia da 96 px nel colore delle linee sta sotto una maschera radiale: 5% sulle pagine scure, 3,5% sulla scheda finale chiara.
Il mio marchio, un'icona d'app a quadrato arrotondato, appare nella pillola del link breve, sulla scheda prodotto, al centro della rete, nell'angolo delle schede di parole e sulla scheda finale.

Tecniche

Ogni scena passa il proprio oggetto alla successiva: la linea collassa in un punto, il punto cresce in pillola, la pillola sale sopra il globo, il globo si dissolve nella scheda, la scheda ruota via verso la rete, e la rete scatta nelle schede di parole.
Tagli e colpi usano singoli fotogrammi piatti di flash che decadono in fretta: grigio-viola in 0,2 s a 1,5 s, rosa scuro in 0,12 s al clic, viola attenuato che svanisce in tre fotogrammi a ogni taglio di scheda di parole, pallido sulla scheda finale.
Curve:

power4.out per gli anelli e l'atterraggio del contachilometri;
un overshoot per la comparsa del disco della rete;
una curva back per i pulsanti della scheda finale;
frenata brusca per lo scatto della prima scheda di parole.
Sfocatura di movimento e maschere: sfocatura solo orizzontale per la sbavatura e lo scatto, una salita dalla sfocatura su ogni lettera digitata, una dissolvenza sfocata nella scheda, una sfocatura sulla sua uscita 3D e dissolvenze con maschera sui bordi che scorrono.
La camera respira sempre: l'avvicinamento alla pillola, la lenta deriva 3D della scheda, gli avatar in orbita e la deriva a sinistra nella rete. I bagliori stanno su linee, bordi, anelli e sulla sottolineatura attiva, e le scintille volano con resistenza.

Musica

Synthwave elettronico strumentale a 120 bpm in do minore, scuro e lucido, lungo esattamente quanto il video.

Una tranquilla intro filtrata si apre mentre cresce nei primi due secondi, con un riser.
Il drop cade esattamente sul clic a 2,0 s, in un beat incalzante: cassa su ogni beat, hi-hat in controtempo, basso pulsante, arpeggio brillante.
Una spinta costante arriva fino alla scheda finale.
Tutto si ferma a 12,5 s con un grande colpo e un brillante accordo di do minore, la cui lunga coda di riverbero si spegne entro la fine.
Sonorità di circa −14 LUFS, true peak sotto −1 dBTP.

Suono

Gli effetti sonori stanno sull'immagine e non raddoppiano mai la batteria della musica:

lievi tick sotto la digitazione;
un breve whoosh e un tick vitreo quando la linea collassa e lampeggia;
un clic, un boom e un colpo al drop a 2,0 s;
un whoosh nella scheda a 4,45 s;
piccoli blip sui due salti di scheda e su ciascuna delle quattro notifiche;
un whoosh quando la scheda ruota via;
un lieve tonfo quando il marchio spunta a 7,55 s;
un rapido whoosh sulla frustata a 10,5 s;
un tick a ogni taglio di scheda di parole;
un breve riser nella scheda finale;
un boom e un lieve splash a 12,5 s;
un leggero whoosh quando si apre il lockup;
due blip per i pulsanti.
Non c'è voce fuori campo.

Riferimenti

Un reel di lancio SaaS premium nello stile di un motion design curato di presentazione prodotto: interfaccia scura e lucida, linee luminose, tipografia cinetica, contatori a contachilometri, schede dashboard 3D e schede titolo di una sola parola a ritmo di beat, che si chiude su un lockup di brand pastello e arioso.

Cosa preparare

Il marchio della mia app come icona quadrata o a quadrato arrotondato, mostrato nella pillola del link, sulla scheda prodotto, al centro della rete, negli angoli delle schede di parole e sulla scheda finale.
Facoltativo: piccole foto ritratto quadrate per sostituire i volti segnaposto negli avatar della rete.

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 “Riga lunga digitata su curva a S sotto un cursore parcheggiato” — A 0:00 nel video

Tipografia

Riga lunga digitata su curva a S sotto un cursore parcheggiato

Una frase molto più lunga dell'inquadratura si digita da sola in un carattere monospaziato: il numero di caratteri segue una curva lento-veloce-lento (pochi caratteri, una raffica di ~600 al secondo, poi un atterraggio morbido in 0,75 s). Il cursore avanza fino a fermarsi all'82% della larghezza e resta parcheggiato mentre la riga scorre a sinistra sotto di esso; una maschera sfuma il bordo sinistro della riga, così le vecchie parole si dissolvono man mano che arrivano le nuove. Le parole chiave sono luminose e il resto attenuato, come l'evidenziazione della sintassi.

Quando usarla Per mostrare «molto input» o un prompt, un link o un comando lunghi che nel tempo successivo si riducono a qualcosa di breve.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Riga lunga digitata su curva a S sotto un cursore parcheggiato</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=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#head { position: absolute; left: 0; right: 0; top: 381px; text-align: center; font: 400 24px/26px "Geist Mono", monospace; letter-spacing: 5.4px; color: #6B6385; }
#head b { font-weight: 400; color: #FB2D89; }
#wrap { position: absolute; left: 0; top: 486px; width: 1920px; height: 68px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 90px, #000 600px); mask-image: linear-gradient(90deg, transparent 90px, #000 600px); }
#line { position: absolute; left: 254px; top: 0; height: 68px; line-height: 68px; font: 400 45.9px/68px "Geist Mono", monospace; white-space: pre; }
#line .k { color: #FFFFFF; } #line .v { color: #8F89A8; }
#cursor { position: absolute; left: 254px; top: 493px; width: 4px; height: 54px; background: #FB2D89; box-shadow: 0 0 10px rgba(251,45,137,.8); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="head" class="clip" data-start="0" data-duration="3">DESCRIBE YOUR IDEA <b>· 02</b></div>
  <div id="wrap" class="clip" data-start="0" data-duration="3"><div id="line"></div></div>
  <div id="cursor" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
// the text: [bright?, words] pairs; replace with your own long line
const PARTS = [[1, "Tell the chat"], [0, " what to show. "], [1, "The agent"], [0, " builds the animation. "], [1, "No keyframes"], [0, " to hunt for. "], [1, "Say what should change."], [0, " The preview updates as you talk."]];
const X0 = 254;          // where the line starts
const STOP = 1566;       // where the cursor parks and the line starts to scroll
const ADV = 27.54;       // one character of Geist Mono at 45.9 px (0.6 em)
const T_START = 0.21, T_END = 0.97; // the typing window, seconds
// share of the line typed against the share of the window: slow start, burst, soft landing
const CURVE = [[0, 0], [0.1, 0.02], [0.2, 0.05], [0.3, 0.12], [0.38, 0.22], [0.43, 0.31], [0.48, 0.43], [0.53, 0.57], [0.57, 0.69], [0.62, 0.78], [0.66, 0.84], [0.71, 0.88], [0.79, 0.94], [0.88, 0.98], [1, 1]];
const line = document.getElementById("line"), cursor = document.getElementById("cursor");
const chars = [];
PARTS.forEach(([k, s]) => { for (const ch of s) chars.push([k, ch]); });
line.innerHTML = chars.map(([k, ch]) => `<span class="${k ? "k" : "v"}" style="visibility:hidden">${ch === " " ? "&nbsp;" : ch}</span>`).join("");
const spans = [...line.children];
const curve = (u) => { for (let i = 1; i < CURVE.length; i++) if (u <= CURVE[i][0]) { const a = CURVE[i - 1], b = CURVE[i]; return a[1] + (b[1] - a[1]) * (u - a[0]) / (b[0] - a[0]); } return 1; };
function draw(t) {
  const u = Math.max(0, Math.min(1, (t - T_START) / (T_END - T_START)));
  const n = Math.floor(curve(u) * chars.length);
  spans.forEach((s, i) => { s.style.visibility = i < n ? "visible" : "hidden"; });
  const end = X0 + n * ADV;
  line.style.transform = `translateX(${Math.min(0, STOP - 2 - end)}px)`;
  cursor.style.transform = `translateX(${Math.min(STOP, end + 2) - X0}px)`;
  cursor.style.opacity = t < 0.21 && Math.floor(t / 0.08) % 2 ? 0 : 1; // blink while it waits
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#head", { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "none" }, 0.19);
tl.to({}, { duration: 3 });
tl.eventCallback("onUpdate", () => draw(tl.time()));
draw(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Anteprima della tecnica “Sbavatura, schiacciamento in linea di luce, riduzione a punto, flash” — A 0:01 nel video

Transizione

Sbavatura, schiacciamento in linea di luce, riduzione a punto, flash

La riga di testo riceve una sfocatura solo orizzontale (un feGaussianBlur SVG con stdDeviation «x 0» animato da 0 a 7 in 0,33 s, power2.in) e si attenua; poi viene sostituita da una linea luminosa di 4 px (nucleo bianco, estremità d'accento, bagliore d'accento) i cui bordi si chiudono ogni due fotogrammi (1468, 1300, 1060, 530, 140, 24 px di larghezza) finché diventa un punto al centro. Un fotogramma dopo, l'intera pagina lampeggia in grigio medio e decade con power1.out in 0,2 s mentre l'oggetto successivo nasce da quel punto.

Quando usarla Per trasformare qualcosa di lungo in qualcosa di breve, o per passare da una scena all'altra attraverso un solo punto.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sbavatura, schiacciamento in linea di luce, riduzione a punto, flash</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=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 70% at 50% 48%, #5a5470, #3d3952); }
#text { position: absolute; left: 100px; width: 1468px; top: 486px; height: 68px; font: 400 45.9px/68px "Geist Mono", monospace; color: #FFFFFF; white-space: nowrap; filter: url(#smear); }
#beam { position: absolute; left: 100px; top: 518px; width: 1468px; height: 4px; border-radius: 2px; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(251,45,137,0), #ff5aa5 18%, #ffe0ef 50%, #ff5aa5 82%, rgba(251,45,137,0)); box-shadow: 0 0 14px 4px rgba(251,45,137,.55); }
#pill { position: absolute; left: 760px; top: 480px; width: 400px; height: 80px; border-radius: 40px; background: #120f26; border: 2px solid rgba(233,228,242,.16);
  color: #FFFFFF; font: 700 44px/76px "Geist Mono", monospace; text-align: center; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <svg width="0" height="0" style="position:absolute"><filter id="smear" x="-5%" y="-50%" width="110%" height="200%"><feGaussianBlur id="smearblur" stdDeviation="0 0" /></filter></svg>
  <div id="flash" class="clip" data-start="0" data-duration="2"></div>
  <div id="text" class="clip" data-start="0" data-duration="2">"No keyframes to hunt for. Say what should change."</div>
  <div id="beam" class="clip" data-start="0" data-duration="2"></div>
  <div id="pill" class="clip" data-start="0" data-duration="2">"your.app"</div>
</div>
<script>
const T0 = 0.1;                      // when the smear starts
const EDGES = [[220, 1300], [380, 1060], [690, 530], [890, 140], [948, 24]]; // [left, width] of the line, every two frames at 60 fps
const tl = gsap.timeline({ paused: true });
tl.to("#smearblur", { attr: { stdDeviation: "7 0" }, duration: 0.33, ease: "power2.in" }, T0);
tl.to("#text", { opacity: 0.55, duration: 0.3, ease: "power1.in" }, T0 + 0.03);
tl.to("#text", { opacity: 0, duration: 0.05, ease: "none" }, T0 + 0.33);
tl.fromTo("#beam", { opacity: 0 }, { opacity: 1, duration: 0.04, ease: "none" }, T0 + 0.31);
tl.fromTo("#beam", { x: 0, scaleX: 1 }, { keyframes: EDGES.map(([l, w], i) => ({ x: l - 100, scaleX: w / 1468, duration: i === 4 ? 0.017 : 0.03 })), ease: "none" }, T0 + 0.33);
tl.to("#beam", { opacity: 0, duration: 0.02, ease: "none" }, T0 + 0.465);
// the flash: one frame full, then a quick decay while the new object grows out of the point
tl.set("#flash", { opacity: 1 }, T0 + 0.458);
tl.to("#flash", { opacity: 0, duration: 0.2, ease: "power1.out" }, T0 + 0.467);
tl.fromTo("#pill", { opacity: 0, scale: 0.12 }, { opacity: 1, scale: 1, duration: 0.24, ease: "power2.out" }, T0 + 0.458);
tl.to({}, { duration: 2 }, 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 “Clic con pressione e onde: flash, anelli sfalsati, scintille” — A 0:02 nel video

Particelle

Clic con pressione e onde: flash, anelli sfalsati, scintille

Un puntatore entra dolcemente e clicca su una pillola: la pillola si preme a 0,96 e si illumina per due fotogrammi, la pagina lampeggia in un colore d'accento scuro che decade in circa 0,12 s, e tre anelli sottili crescono dal punto del clic con power4.out (uno chiaro a 0 s fino a r 890, quelli d'accento a +0,08 s e +0,17 s fino a r 740 e 560), che svaniscono dopo 0,3 s. Settanta scintille con seed fisso esplodono dallo stesso punto con resistenza esponenziale, il 30% bianche e il resto nel colore d'accento.

Quando usarla Per far sembrare che un solo clic metta in moto qualcosa di grande.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clic con pressione e onde: flash, anelli sfalsati, scintille</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=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, #4a0f2f, #2b081c); }
#fx, #rings { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
#pill { position: absolute; left: 610px; top: 460px; width: 700px; height: 160px; border-radius: 80px; background: linear-gradient(#1d1934, #120f26); border: 2px solid rgba(233,228,242,.16);
  color: #FFFFFF; font: 700 80px/156px "Geist Mono", monospace; text-align: center; box-shadow: 0 0 60px 6px rgba(251,45,137,.42); }
#arrow { position: absolute; left: 0; top: 0; width: 30px; height: 44px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080">
  <div id="flash" class="clip" data-start="0" data-duration="2.5"></div>
  <canvas id="fx" class="clip" data-start="0" data-duration="2.5" width="1920" height="1080"></canvas>
  <svg id="rings" class="clip" data-start="0" data-duration="2.5" viewBox="0 0 1920 1080">
    <circle id="r0" cx="1150" cy="540" r="0" fill="none" stroke="#E9E4F2" stroke-width="3" />
    <circle id="r1" cx="1150" cy="540" r="0" fill="none" stroke="#FB2D89" stroke-width="3" />
    <circle id="r2" cx="1150" cy="540" r="0" fill="none" stroke="#FB2D89" stroke-width="3" />
  </svg>
  <div id="pill" class="clip" data-start="0" data-duration="2.5">"your.app"</div>
  <svg id="arrow" class="clip" data-start="0" data-duration="2.5" viewBox="0 0 30 44"><path d="M2 2 L2 34 L10 26 L16 40 L21 38 L15 24 L26 24 Z" fill="#fff" stroke="#000" stroke-width="2" stroke-linejoin="round" /></svg>
</div>
<script>
const CLICK = 0.5, P = [1150, 540];   // when and where the click lands
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const r = rng(11), sparks = [];
for (let i = 0; i < 70; i++) sparks.push({ a: r() * Math.PI * 2, sp: 120 + r() * 650, life: 0.7 + r() * 1.8, size: 1.5 + r() * 2.8, white: r() < 0.3, delay: r() * 0.08 });
const ctx = document.getElementById("fx").getContext("2d");
function draw(t) {
  ctx.clearRect(0, 0, 1920, 1080);
  for (const s of sparks) {
    const dt = t - CLICK - s.delay; if (dt < 0 || dt > s.life) continue;
    const dist = s.sp * (1 - Math.exp(-2.2 * dt)) / 2.2, a = 1 - dt / s.life;
    ctx.fillStyle = s.white ? `rgba(255,255,255,${a})` : `rgba(251,45,137,${a})`;
    ctx.beginPath(); ctx.arc(P[0] + Math.cos(s.a) * dist, P[1] + Math.sin(s.a) * dist, s.size / 2, 0, Math.PI * 2); ctx.fill();
  }
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#arrow", { x: 1600, y: 1060, opacity: 0 }, { x: P[0] + 10, y: P[1] + 10, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.03);
tl.to("#arrow", { scale: 0.88, duration: 0.03, yoyo: true, repeat: 1 }, CLICK - 0.02);
tl.to("#pill", { keyframes: [{ scale: 0.96, filter: "brightness(1.45)", duration: 0.03 }, { scale: 0.955, filter: "brightness(1)", duration: 0.06 }, { scale: 1, duration: 0.1 }], ease: "power1.out" }, CLICK - 0.01);
tl.fromTo("#flash", { opacity: 0 }, { keyframes: [{ opacity: 1, duration: 0.01 }, { opacity: 0.58, duration: 0.017 }, { opacity: 0.39, duration: 0.033 }, { opacity: 0.13, duration: 0.033 }, { opacity: 0, duration: 0.034 }], ease: "none" }, CLICK - 0.01);
[["#r0", 0, 890, 0.5, 0.9], ["#r1", 0.08, 740, 0.57, 0.9], ["#r2", 0.17, 560, 0.58, 0.85]].forEach(([id, d, R, dur, op]) => {
  tl.fromTo(id, { attr: { r: 0 }, opacity: op }, { attr: { r: R }, duration: dur, ease: "power4.out" }, CLICK + d);
  tl.to(id, { opacity: 0, duration: 0.65, ease: "power1.in" }, CLICK + 0.3 + d);
});
tl.to({}, { duration: 2.5 }, 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 “Odometro di lettere che atterra da sinistra a destra” — A 0:03 nel video

Tipografia

Odometro di lettere che atterra da sinistra a destra

Una frase è costruita con una colonna ritagliata per ogni carattere, ciascuna con una striscia di dieci lettere casuali e quella vera per ultima. Un unico progresso power4.out (2,5 s) guida tutte le colonne: la colonna i scorre nella sua striscia mentre il progresso attraversa i/n, così la frase atterra da sinistra a destra, veloce all'inizio e più lenta alla fine. Le colonne che non sono ancora atterrate restano in un colore fantasma attenuato, come gli zeri iniziali di un contatore.

Quando usarla Per un titolo o un indirizzo che deve sembrare vivo, contato o decodificato piuttosto che digitato.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Odometro di lettere che atterra da sinistra a destra</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=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#label { position: absolute; left: 0; right: 0; top: 291px; text-align: center; font: 400 24px/26px "Geist Mono", monospace; letter-spacing: 5.4px; color: #FB2D89; }
#label i { display: inline-block; width: 12px; height: 12px; border-radius: 6px; background: #FB2D89; margin-right: 14px; vertical-align: 2px; }
#readout { position: absolute; left: 0; right: 0; top: 324px; height: 176px; display: flex; justify-content: center; }
.col { position: relative; width: 90.5px; height: 176px; overflow: hidden; }
.strip { position: absolute; left: 0; top: 0; width: 100%; }
.strip div { height: 176px; line-height: 176px; font: 500 154px/176px "Geist Mono", monospace; text-align: center; color: #FFFFFF; }
.ghost .strip div { color: #2a2442; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080">
  <div id="label" class="clip" data-start="0" data-duration="3.5"><i></i>LIVE PREVIEW</div>
  <div id="readout" class="clip" data-start="0" data-duration="3.5"></div>
</div>
<script>
const TEXT = "IDEAS IN MOTION";   // the phrase that lands
const START = 0.2, DUR = 2.5;        // the counter's curve: power4.out over DUR
const ROLL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const r = rng(31), box = document.getElementById("readout");
const cols = [...TEXT].map((ch) => {
  const col = document.createElement("div"); col.className = "col";
  const cells = []; for (let k = 0; k < 10; k++) cells.push(ch === " " ? "&nbsp;" : ROLL[Math.floor(r() * ROLL.length)]);
  cells.push(ch === " " ? "&nbsp;" : ch);
  col.innerHTML = `<div class="strip">${cells.map((c) => `<div>${c}</div>`).join("")}</div>`;
  box.appendChild(col); return col;
});
function draw(t) {
  const p = Math.max(0, Math.min(1, (t - START) / DUR)), prog = 1 - Math.pow(1 - p, 5);
  cols.forEach((col, i) => {
    const u = Math.max(0, Math.min(1, prog * (cols.length + 0.6) - i));
    col.firstChild.style.transform = `translateY(${-u * 10 * 176}px)`;
    col.classList.toggle("ghost", u < 1);
  });
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#readout", { opacity: 0, y: 50, filter: "blur(10px)" }, { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.15, ease: "power2.out" }, START - 0.05);
tl.fromTo("#label", { opacity: 0 }, { opacity: 1, duration: 0.12 }, START + 0.08);
tl.to({}, { duration: 3.5 }, 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 “Tab di statistiche con pannello saltellante e grafico a linee che si trasforma” — A 0:06 nel video

Dati

Tab di statistiche con pannello saltellante e grafico a linee che si trasforma

Una scheda scura con tre dati in fila: quello attivo poggia su un pannello appena più chiaro con una sottolineatura luminosa di 4 px. Il numero di ogni tab conta in crescendo con power3.out; quando subentra il tab successivo, pannello e sottolineatura saltano su di esso in 0,08 s (power3.inOut), la sottolineatura assume l'accento del tab, il numero precedente si attenua e il grafico ad area sotto trasforma i suoi 60 punti da una serie alla successiva mentre tratto e riempimento sfumato cambiano colore. La prima serie si disegna da sinistra a destra con un punto luminoso in testa.

Quando usarla Per percorrere in una sola inquadratura tre numeri, passaggi o modalità di un prodotto.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tab di statistiche con pannello saltellante e grafico a linee che si trasforma</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#card { position: absolute; left: 240px; top: 137px; width: 1440px; height: 806px; border-radius: 30px; background: linear-gradient(#17142c, #100d22); border: 1.5px solid rgba(233,228,242,.07); font-family: "Manrope", sans-serif; color: #FFFFFF; }
#panel { position: absolute; left: 44px; top: 130px; width: 420px; height: 172px; border-radius: 14px 14px 0 0; background: rgba(240,237,255,.03); }
#under { position: absolute; left: 44px; top: 298px; width: 420px; height: 4px; border-radius: 2px; background: #7C6CF2; }
#rule { position: absolute; left: 44px; top: 300px; width: 1351px; height: 1.5px; background: rgba(233,228,242,.07); }
.stat { position: absolute; top: 140px; white-space: nowrap; }
.lab { display: flex; align-items: center; font-size: 25px; font-weight: 500; color: #E9E4F2; height: 34px; }
.lab i { width: 13px; height: 13px; border-radius: 3px; margin-right: 14px; }
.val { font-size: 78px; font-weight: 600; line-height: 1; margin-top: 26px; color: #8F89A8; }
#chart { position: absolute; left: 0; top: 330px; width: 1440px; height: 476px; }
</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">
    <div id="panel"></div><div id="rule"></div><div id="under"></div>
    <div class="stat" style="left:74px"><div class="lab"><i style="background:#7C6CF2"></i>"Pick a template"</div><div class="val" id="v0">00</div></div>
    <div class="stat" style="left:520px"><div class="lab"><i style="background:#FB2D89"></i>"Describe your idea"</div><div class="val" id="v1">00</div></div>
    <div class="stat" style="left:956px"><div class="lab"><i style="background:#2DD4B0"></i>"Refine in words"</div><div class="val" id="v2">00</div></div>
    <canvas id="chart" width="1440" height="476"></canvas>
  </div>
</div>
<script>
const TABS = [{ end: 1, start: 0.0, dur: 0.87, color: [124, 108, 242] }, { end: 2, start: 1.07, dur: 0.59, color: [251, 45, 137] }, { end: 3, start: 1.57, dur: 0.59, color: [45, 212, 176] }];
const PANEL_X = [44, 490, 930];       // where the panel sits for each tab
const rng = (seed) => () => { seed |= 0; seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
const series = [3, 9, 21].map((seed) => { const r = rng(seed), p = []; let v = 0.25; for (let i = 0; i < 60; i++) { v = Math.max(0.05, Math.min(0.95, (v + (r() - 0.43) * 0.11) * 0.97 + (0.18 + 0.62 * i / 59) * 0.03)); p.push(v); } const lo = Math.min(...p), hi = Math.max(...p); return p.map((x) => (x - lo) / (hi - lo)); });
const ctx = document.getElementById("chart").getContext("2d");
const clamp = (x) => Math.max(0, Math.min(1, x)), out4 = (p) => 1 - Math.pow(1 - clamp(p), 4);
const inOut3 = (p) => { p = clamp(p); return p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2; };
const at = (d, u) => { const f = u * (d.length - 1), i = Math.min(d.length - 2, Math.floor(f)); return d[i] + (d[i + 1] - d[i]) * (f - i); };
function draw(t) {
  TABS.forEach((tab, i) => { document.getElementById("v" + i).textContent = "0" + (t < tab.start ? 0 : Math.round(tab.end * out4((t - tab.start) / tab.dur))); });
  const s1 = inOut3((t - TABS[1].start) / 0.08), s2 = inOut3((t - TABS[2].start) / 0.08), act = t < TABS[1].start ? 0 : t < TABS[2].start ? 1 : 2;
  [0, 1, 2].forEach((i) => { document.getElementById("v" + i).style.color = i === act ? "#FFFFFF" : "#8F89A8"; });
  const x = PANEL_X[0] + (PANEL_X[1] - PANEL_X[0]) * s1 + (PANEL_X[2] - PANEL_X[1]) * s2;
  document.getElementById("panel").style.transform = document.getElementById("under").style.transform = `translateX(${x - 44}px)`;
  const c = [0, 1, 2].map((k) => TABS[0].color[k] + (TABS[1].color[k] - TABS[0].color[k]) * s1 + (TABS[2].color[k] - TABS[1].color[k]) * s2).map(Math.round);
  document.getElementById("under").style.background = `rgb(${c})`;
  const data = series[0].map((v, i) => v + (series[1][i] - v) * s1 + (series[2][i] - series[1][i]) * s2);
  const upto = clamp((t - 0.12) / 0.55);
  ctx.clearRect(0, 0, 1440, 476); if (upto <= 0) return;
  const pts = []; for (let k = 0; k <= 200 * upto; k++) { const u = k / 200; pts.push([33 + 1377 * u, 420 - 260 * at(data, u)]); }
  const g = ctx.createLinearGradient(0, 160, 0, 476); g.addColorStop(0, `rgba(${c},0.34)`); g.addColorStop(1, `rgba(${c},0)`);
  ctx.beginPath(); ctx.moveTo(pts[0][0], 476); pts.forEach(([x, y]) => ctx.lineTo(x, y)); ctx.lineTo(pts[pts.length - 1][0], 476); ctx.fillStyle = g; ctx.fill();
  ctx.shadowColor = `rgba(${c},0.9)`; ctx.shadowBlur = 16; ctx.strokeStyle = `rgb(${c})`; ctx.lineWidth = 5; ctx.lineJoin = "round";
  ctx.beginPath(); pts.forEach(([x, y], i) => (i ? ctx.lineTo(x, y) : ctx.moveTo(x, y))); ctx.stroke(); ctx.shadowBlur = 0;
  const [hx, hy] = pts[pts.length - 1]; ctx.fillStyle = "#FFFFFF"; ctx.beginPath(); ctx.arc(hx, hy, 7, 0, Math.PI * 2); ctx.fill();
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#card", { opacity: 0, filter: "blur(16px)", rotationX: 16, y: 90, transformPerspective: 2200 }, { opacity: 1, filter: "blur(0px)", rotationX: 4, y: 0, duration: 0.45, ease: "power3.out" }, 0);
tl.to({}, { duration: 3 }, 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 “Carte di parole da un quarto di secondo tagliate da un flash di un fotogramma” — A 0:11 nel video

Transizione

Carte di parole da un quarto di secondo tagliate da un flash di un fotogramma

Otto carte a tutto schermo, una ogni 0,25 s sulla griglia di ottavi a 120 bpm, ciascuna con una o due parole da 240 px su un proprio sfondo (chiaro; scuro con forme che si accendono; accento con lettere che salgono una a una; testo a contorno; un gradiente conico rotante; testo d'accento su chiaro; testo luminoso su glifi che cadono; il marchio con il nome). Ogni taglio passa per un unico fotogramma piatto di grigio medio che svanisce nei tre fotogrammi successivi. Piccole etichette mono stanno negli angoli: il sito, un contatore 0N / 08, un tag [ SECTION ] e una linea di avanzamento che si riempie di un ottavo a ogni carta.

Quando usarla Per un elenco rapido di funzioni a tempo di battuta alla fine di un film di lancio.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carte di parole da un quarto di secondo tagliate da un flash di un fotogramma</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
.card { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.title { position: absolute; left: 0; right: 0; top: 404px; height: 280px; line-height: 280px; text-align: center; font: 800 240px/280px "Manrope", sans-serif; letter-spacing: -8px; white-space: nowrap; }
.title span { display: inline-block; }
.meta { position: absolute; font: 500 18px/24px "Geist Mono", monospace; letter-spacing: 3px; }
.bar { position: absolute; left: 1552px; top: 1019px; width: 315px; height: 3px; transform-origin: 0 50%; }
#flash { position: absolute; inset: 0; background: #6B6385; opacity: 0; }
.conic { position: absolute; inset: -400px; background: conic-gradient(from -30deg at 50% 52%, #FB2D89, #FE9117, #FFD23F, #2DD4B0, #7C6CF2, #FB2D89); filter: blur(30px); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1920" data-height="1080">
  <div id="cards" class="clip" data-start="0" data-duration="2.2"></div>
  <div id="flash" class="clip" data-start="0" data-duration="2.2"></div>
</div>
<script>
// your words, backgrounds and ink per card; "typed" letters rise in one by one, "conic" turns a gradient
const CARDS = [["Kinetic type.", "#FAF9FF", "#1C0B5D"], ["Shapes.", "#0D0B1E", "#FFFFFF"], ["3D effects.", "#FB2D89", "#1C0B5D", "typed"], ["Sound effects.", "#0D0B1E", "outline"],
  ["Another colour.", "#7C6CF2", "#1C0B5D", "conic"], ["Your footage.", "#FAF9FF", "#7C6CF2"], ["Music.", "#0D0B1E", "#2DD4B0"], ["Your name.", "#0D0B1E", "#FFFFFF"]];
const STEP = 0.25, FIRST = 0.1;
const root = document.getElementById("cards");
const cards = CARDS.map(([word, bg, ink, fx], i) => {
  const el = document.createElement("div"); el.className = "card";
  const meta = bg === "#FAF9FF" || bg === "#FB2D89" ? "#6B6385" : "#8F89A8";
  const title = fx === "typed" ? [...word].map((c) => `<span>${c === " " ? "&nbsp;" : c}</span>`).join("") : `<span>${word}</span>`;
  const style = ink === "outline" ? "color:transparent;-webkit-text-stroke:2.5px #FFFFFF;letter-spacing:0" : `color:${ink}`;
  el.innerHTML = `<div style="position:absolute;inset:0;background:${bg}">${fx === "conic" ? '<div class="conic"></div>' : ""}</div>` +
    `<div class="title" style="${style}${word.length >= 14 ? ";font-size:196px" : ""}${fx === "typed" ? ";clip-path:inset(0 -60px 0 -60px)" : ""}">${title}</div>` +
    `<div class="meta" style="left:48px;top:52px;color:${meta}">YOUR.SITE</div><div class="meta" style="right:52px;top:50px;color:${meta}">0${i + 1} / 08</div>` +
    `<div class="meta" style="left:51px;top:1005px;color:${meta}">[ SECTION ]</div><div class="bar" style="background:${meta}"></div>`;
  root.appendChild(el); return el;
});
function draw(t) {
  const k = Math.max(0, Math.min(7, Math.floor((t - FIRST) / STEP + 1e-6))), since = t - FIRST - k * STEP, p = Math.max(0, Math.min(1, since / STEP));
  cards.forEach((el, i) => { el.style.opacity = t >= FIRST && i === k ? 1 : 0; el.querySelector(".bar").style.transform = `scaleX(${(k + p) / 8})`; });
  document.getElementById("flash").style.opacity = t < FIRST || k === 0 ? 0 : since < 0.02 ? 1 : Math.max(0, 0.55 * (1 - (since - 0.02) / 0.05));
  if (CARDS[k][3] === "typed") [...cards[k].querySelectorAll(".title span")].forEach((s, i) => { const u = Math.max(0, Math.min(1, (since - i * 0.0135) / 0.045)); s.style.transform = `translateY(${(1 - u) * 120}px)`; s.style.opacity = u > 0 ? 1 : 0; });
  if (CARDS[k][3] === "conic") cards[k].querySelector(".conic").style.transform = `rotate(${40 * p}deg)`;
}
const tl = gsap.timeline({ paused: true });
tl.to({}, { duration: 2.2 }, 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 “Apertura a iride con marchio che si allontana, poi il lockup si apre” — A 0:12 nel video

Transizione

Apertura a iride con marchio che si allontana, poi il lockup si apre

Un fotogramma pallido, poi una pagina chiara si apre come un cerchio da r 495 a pieno schermo in circa 0,15 s sopra una pagina più scura, mentre il marchio all'interno si allontana da 3,2x a 1x (con keyframe in mezzo secondo), ruotando da −75° fino a stare dritto e passando da un grigio sbiadito al colore pieno. Sotto di esso si gonfia una nuvola di colore pastello. Poi il marchio scivola dal centro alla sinistra di un lockup centrato mentre il logotipo esce da dietro di esso (la riga è traslata del 50% della sua larghezza meno metà del marchio, quindi non si misura nulla), il payoff sale parola per parola in box propri (a 0,05 s di distanza), si traccia una sottolineatura sotto la parola d'accento e due pulsanti compaiono con back.out(2).

Quando usarla Per una scheda finale che nasce dall'ultimo taglio e costruisce un logo, una riga e una call to action.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Apertura a iride con marchio che si allontana, poi il lockup si apre</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
html, body, #root { background: #B9B3CC; }
#page { position: absolute; inset: 0; background: #FAF9FF; clip-path: circle(495px at 50% 50%); font-family: "Manrope", sans-serif; color: #1C0B5D; }
#cloud { position: absolute; left: 260px; top: 560px; width: 1400px; height: 760px; filter: blur(70px); opacity: 0; transform-origin: 50% 70%; }
#cloud i { position: absolute; border-radius: 50%; }
#lock { position: absolute; left: 0; right: 0; top: 335px; height: 209px; display: flex; justify-content: center; }
#row { display: flex; align-items: center; height: 209px; }
#mark { width: 209px; height: 209px; flex: none; border-radius: 50px; background: linear-gradient(135deg, #1C0B5D, #3a1d8a); position: relative; z-index: 2; }
#word { margin-left: 68px; clip-path: inset(-20px -40px -20px -68px); font-size: 150px; font-weight: 600; letter-spacing: -3px; white-space: nowrap; }
#word span { display: inline-block; }
#tag { position: absolute; left: 0; right: 0; top: 640px; height: 120px; text-align: center; font-size: 100px; line-height: 120px; font-weight: 700; letter-spacing: -2.5px; white-space: nowrap; }
#tag .w { display: inline-block; clip-path: inset(0 -20px 0 -20px); }
#tag .w > span { display: inline-block; position: relative; }
#tag .o span { color: #FB2D89; }
#under { position: absolute; left: 4px; right: 20px; top: 98px; height: 7px; border-radius: 4px; background: #FB2D89; transform-origin: 0 50%; }
#btns { position: absolute; left: 0; right: 0; top: 820px; height: 92px; display: flex; justify-content: center; gap: 27px; }
.btn { height: 92px; padding: 0 46px; border-radius: 16px; display: flex; align-items: center; font-size: 34px; font-weight: 600; opacity: 0; }
#b1 { background: #1C0B5D; color: #FFFFFF; } #b2 { background: #FFFFFF; border: 1.5px solid #E9E4F2; font-family: "Geist Mono", monospace; font-weight: 500; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="page" class="clip" data-start="0" data-duration="3">
    <div id="cloud"><i style="left:380px;top:120px;width:640px;height:520px;background:#FDB4D6"></i><i style="left:120px;top:260px;width:520px;height:460px;background:#CFC8FA"></i><i style="left:820px;top:200px;width:560px;height:480px;background:#FFD3A3"></i><i style="left:880px;top:420px;width:420px;height:340px;background:#B8F1E5"></i></div>
    <div id="lock"><div id="row"><div id="mark"></div><div id="word"><span>"Your Name"</span></div></div></div>
    <div id="tag"><span class="w"><span>"Your</span></span> <span class="w"><span>idea</span></span> <span class="w"><span>is</span></span> <span class="w"><span>ready</span></span> <span class="w"><span>to</span></span> <span class="w o"><span>move."<i id="under"></i></span></span></div>
    <div id="btns"><div class="btn" id="b1">"Try it free" →</div><div class="btn" id="b2">"your.site"</div></div>
  </div>
</div>
<script>
// [t, scale, rotation, wash 0..1] of the mark, and the iris radius, read off a real cut
const MARK = [[0, 3.3, -80, 1], [0.017, 3.16, -75, 0.93], [0.05, 2.45, -55, 0.74], [0.067, 2.0, -35, 0.4], [0.1, 1.72, -25, 0.34], [0.15, 1.47, -12, 0.16], [0.2, 1.31, -5, 0.05], [0.25, 1.17, -1, 0], [0.3, 1.1, 0, 0], [0.5, 1, 0, 0]];
const IRIS = [[0, 470], [0.017, 495], [0.05, 660], [0.067, 840], [0.1, 1000], [0.15, 1150]];
// the lockup opening: [t, 1 = mark centred .. 0 = lockup centred, share of the wordmark still behind the mark]
const SLIDE = [[0.65, 1, 1], [0.7, 0.943, 0.909], [0.75, 0.873, 0.597], [0.8, 0.496, 0.348], [0.85, 0.146, 0.1], [0.9, 0.054, 0.036], [0.95, 0.016, 0.012], [1.0, 0, 0]];
const keys = (k, t) => { if (t <= k[0][0]) return k[0].slice(1); for (let i = 1; i < k.length; i++) if (t <= k[i][0]) { const a = k[i - 1], b = k[i], f = (t - a[0]) / (b[0] - a[0]); return a.slice(1).map((v, j) => v + (b[j + 1] - v) * f); } return k[k.length - 1].slice(1); };
const mark = document.getElementById("mark"), row = document.getElementById("row"), word = document.querySelector("#word span"), page = document.getElementById("page");
function draw(t) {
  const [s, rot, wash] = keys(MARK, t), [k0, hid] = keys(SLIDE, t);
  page.style.clipPath = `circle(${keys(IRIS, t)[0]}px at 50% 50%)`;
  mark.style.transform = `rotate(${rot}deg) scale(${s})`;
  mark.style.filter = wash > 0.002 ? `grayscale(${wash}) brightness(${1 + 2.2 * wash})` : "none";
  row.style.transform = `translateX(calc(${50 * k0}% - ${104.5 * k0}px))`;
  word.style.transform = `translateX(calc(${-hid} * (100% + 68px)))`;
}
const tl = gsap.timeline({ paused: true });
tl.fromTo("#cloud", { opacity: 0, scale: 0.35 }, { opacity: 1, scale: 1, duration: 0.8, ease: "power2.out" }, 0.35);
document.querySelectorAll("#tag .w > span").forEach((el, i) => tl.fromTo(el, { y: 130 }, { y: 0, duration: 0.3, ease: "power3.out" }, 0.96 + i * 0.05));
tl.fromTo("#under", { scaleX: 0 }, { scaleX: 1, duration: 0.2, ease: "power2.out" }, 1.56);
tl.fromTo("#b1", { opacity: 0, scale: 0.88, y: 28 }, { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(2)" }, 1.66);
tl.fromTo("#b2", { opacity: 0, scale: 0.88, y: 28 }, { opacity: 1, scale: 1, y: 0, duration: 0.3, ease: "back.out(2)" }, 1.75);
tl.to({}, { duration: 3 }, 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>

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 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>

Anteprima del prompt “Spiegazione del prodotto come ricetta di drink disegnata a mano”

Spiegazione del prodotto come ricetta di drink disegnata a mano

<direction> Crea un motion graphic quadrato di 30 secondi (1080x1080, 30 fps) con un sottofondo musicale lounge leggero, effetti sonori giocosi su ogni azione e senza voce. È un video esplicativo disegnato a mano in forma di «ricetta» per il mio prodotto: i suoi passaggi sono mostrati come un drink preparato passo dopo passo in un bicchiere. È un'unica scena illustrata continua senza stacchi, e tutto cambia sul posto. L'aspetto è un'illustrazione 2D piatta su una pagina lavanda-bianco pallido, con contorni d'inchiostro scuro che «ribollono» come nell'animazione disegnata a mano e maiuscole cartoon spesse in stile sticker. Sostituisci ogni parola tra virgolette qui sotto con le parole del mio prodotto, mantenendo ciascuna di lunghezza simile perché il layout regga. Evita stacchi, movimenti di camera, ombreggiature o sfumature oltre i riempimenti piatti, e la voce fuori campo. </direction> <structure> Il ritmo è calmo e uniforme. L'intro è veloce e rimbalzante, ogni versamento dura costanti 5 s, il mescolare e la scorza vanno un po' più veloci, e il finale resta 3 s. Ogni cambio di scheda cade su un battito della musica a 120 BPM: 6,0, 11,0, 16,0, 21,0, 24,5 e 27,0 s. - 0–2,5 s, titolo: «YOUR BRAND» (sostituiscilo con il tuo brand) è disposto grande al centro, largo circa 920 px. Da 0,15 s le sue lettere si imprimono una a una al loro posto in 0,83 s. Ognuna parte dal 10% della dimensione, 22 px più in basso e inclinata di ±8–14°, e atterra in 0,36 s con un morbido overshoot (back.out 1.7). A 1,4 s una piccola riga, «what your product is», appare in dissolvenza sotto di esso e svanisce a 2,45 s. - 2,5–3,6 s, passaggio: il titolo sale di 365 px e si riduce al 58% in 0,8 s (power3.inOut) per diventare l'intestazione. Nel frattempo, da 2,87 s, il bicchiere si disegna da solo come uno schizzo a penna: parete sinistra, parete destra, ellisse del bordo, poi la curva della base, circa 0,4 s in tutto. Poi il suo riempimento appare in dissolvenza (0,28 s) e il sottotitolo dell'intestazione appare sotto il titolo. - 3,6–6,0 s, passaggio 1: la scheda entra con un'inclinazione di 4° e una rapida dissolvenza (0,15 s), e il suo grande valore si imprime da solo. La scheda dice «STEP 01», «PICK», «TEMPLATE» e «vertical, horizontal or square». Il tracker appare in dissolvenza con il primo cerchio attivo. Tre cubetti di ghiaccio cadono da sopra l'inquadratura a 0,35 s di distanza. Ognuno cade con la gravità (power2.in, circa 0,3 s), rimbalza di circa 140 px, saltella di 20 px e si assesta: due sul fondo e uno sopra. Tre piccoli tratti di scintille lampeggiano sopra ogni cubetto quando passa il bordo. Ogni atterraggio riempie un terzo della barra di avanzamento della scheda e aggiunge una parola dello stato «three short words». - 6,0–21,0 s, passaggi 2–4: tre versamenti da 5 s ciascuno, tutti con lo stesso schema. Le schede dicono «STEP 02 / SAY / KINETIC TYPE / tell the chat what to show», poi «STEP 02 / SAY / SHAPES / the agent builds the animation», poi «STEP 02 / SAY / SOUND / music and sound effects to the rhythm». Una bottiglia scivola da sinistra (0,23 s) e sta in piedi. Poi si inclina a 115° su un piccolo arco, un po' in su e poi in giù fino al punto di versamento (0,37 s), e versa un getto curvo nel bicchiere. Le bottiglie sono lavanda, poi rosa, poi inchiostro scuro. Ognuna ha un'etichetta bianca con il mio logo come piccola icona a quadrato arrotondato, una parola («TYPE», «SHAPES», «SOUND») e una piccola riga («kinetic», «3D effects», «music»). Un segno bersaglio grigio («01», poi «02», poi «03») appare accanto al bicchiere con una linea tratteggiata che lo attraversa. Il drink sale fino a quel segno in 2 s (sine.inOut), il ghiaccio galleggia con esso e gocce di schizzo saltano dove cade il getto. Il drink parte bianco e limpido, diventa rosa con il secondo versamento, poi magenta intenso (rosa mescolato a inchiostro scuro) con il terzo, ogni colore sfumando in circa 1,3 s. La barra di avanzamento si riempie e «live preview» si scrive da solo in dieci passi. Poi il segno diventa rosa, la parte alta del getto si stacca e cade, e la bottiglia si reinclina e scivola fuori. - 21,0–24,5 s, passaggio 5: la scheda dice «STEP 03 / REFINE / IN WORDS / “bigger”, “slower”, “another colour”». Un leggero cucchiaio da bar con la punta a sfera cade con un rapido ease-out. Dondola di 8° avanti e indietro in un ciclo di 0,8 s mentre i cubetti si urtano e si attenuano, poi esce. La barra si riempie a scatti di 4 fotogrammi mentre «live preview» viene scritto. - 24,5–27,0 s, passaggio 6: la scheda dice «STEP 03 / MP4 / EXPORT / download the MP4». Un ricciolo di scorza d'arancia compare sopra il bicchiere, si attorciglia e si schiaccia per circa 0,8 s mentre cadono gocce arancioni. Poi scivola sul bordo (0,5 s, power2.inOut) mentre «try it free» finisce di essere scritto. - 27,0–30 s, finale: la scheda si rimonta come «YOUR TAGLINE / OPEN APP / YOURSITE.COM / pick · describe · refine». Sette brevi trattini rosa e arancioni scattano attorno al bicchiere (0,16 s) e continuano a «respirare» dolcemente. Il bicchiere cresce del 4% in 0,6 s e resta fino alla fine. </structure> <composition> Colori: - Pagina: lavanda-bianco pallido (#FAF9FF). - Contorni: inchiostro scuro (#1C0B5D), circa 3 px con estremità arrotondate. - Bicchiere: lavanda (#F0EDFF) con una base tinta di viola. - Cubetti di ghiaccio: quadrati arrotondati, bianchi al 40% su ciò che c'è dietro, con una linea d'angolo interna. - Schede: bianche con una morbida ombra sfalsata lavanda. - Arancione (#FE9117): la guarnizione e metà dei trattini del finale. Tipografia: - Carattere display: maiuscole cartoon spesse (qualcosa come Lalezar) composte come sticker. La faccia è rosa (#FB2D89), con un contorno d'inchiostro scuro dietro e un'estrusione viola (#7C6CF2) spostata in basso a sinistra. - Testo piccolo: una scrittura a mano stampatello amichevole (qualcosa come Playpen Sans), grigio-viola attenuato (#6B6385) per il testo e rosa per le etichette. Layout dopo l'intro: - Intestazione: in alto al centro, larga circa 540 px, con una piccola riga sotto: «first benefit · second benefit · third benefit». - Bicchiere: un bicchiere basso conico a sinistra del centro, largo circa 290 px, bordo a y 457 e base a y 797. - Scheda info: a destra, 390x248 px con angoli di 14 px e bordo d'inchiostro scuro. Dall'alto in basso contiene un piccolo occhiello rosa, il grande valore in lettere sticker, un titolo in maiuscole scure, una riga scritta a mano e una barra di avanzamento a pillola con una breve parola di stato alla sua destra. - Tracker: sei passaggi lungo il fondo. I cerchi sono larghi 43 px e distanti 156 px su una sottile guida, con piccole etichette in maiuscoletto sotto: «TEMPLATE», «TYPE», «SHAPES», «SOUND», «REFINE», «EXPORT». </composition> <techniques> - Linee che ribollono: ogni linea disegnata riceve un lieve tremolio di 1–2 px che cambia in uno nuovo ogni 4 fotogrammi, in tutto il pezzo, come uno spostamento di turbolenza sulle linee. - Rimontaggio della scheda: al primo fotogramma di ogni passaggio, per un fotogramma si mostra solo il nuovo grande valore, poi la scheda ritorna. Il grande valore si imprime da solo dal 72% della dimensione con un overshoot back.out. - Digitazione: le parole di stato si scrivono da sole a passi. - Tracker, passaggio corrente: il suo cerchio ha un anello d'inchiostro scuro, un punto rosa e un'etichetta rosa, e «respira» tra il 100% e il 112% ogni secondo. - Tracker, passaggio completato: circa 0,1 s prima della scheda successiva, il suo cerchio si riempie di rosa e una spunta bianca si disegna in 0,17 s. La sua etichetta diventa inchiostro scuro, e la guida verso il cerchio successivo si riempie di rosa in 0,37 s. - Tracker, passaggi ancora da fare: restano attenuati con un piccolo punto grigio. </techniques> <music> Un brano strumentale lounge-pop caldo e rilassato a 120 BPM in tonalità maggiore: batteria con spazzole, contrabbasso rotondo, vibrafono, archi in pizzicato, schiocchi di dita e un po' di shaker. Tienilo rado e senza melodia principale, così sta sotto gli effetti. Si apre con poche note pizzicate di vibrafono e pizzicato senza batteria, e un basso morbido entra a 2 s. Il groove pieno con le spazzole e il basso walking cade esattamente sulla prima scheda di versamento a 6,0 s. Resta costante durante i versamenti, il mescolare e la scorza, mette un accordo di chiusura a 28,0 s mentre il bicchiere finito si assesta, e risuona fino alla fine. Fallo di esattamente 30 s, mixato a circa -14 LUFS con true peak sotto -1 dBTP. </music> <sound> Nessuna voce. Ogni effetto cade sul suo fotogramma, nettamente sopra la musica; la musica non ha mai bisogno di alzarsi per fargli posto. - Titolo: un pop morbido per ogni lettera, che sale un po' di tono e viene panoramizzato da sinistra a destra mentre la parola si costruisce. - Passaggio: un whoosh delicato sotto la salita del titolo e un leggero grattare di matita per ogni tratto mentre il bicchiere si disegna. - Schede: uno schiocco di carta e un tonfo morbido ogni volta che una scheda viene distribuita e la sua grande parola si imprime. - Atterraggi del ghiaccio: un colpo secco e breve del ghiaccio contro il bicchiere per ogni cubetto, con due o tre contatti a pochi millisecondi di distanza e un tonfo grave sotto la caduta. Più morbido per il rimbalzo e più piccolo per l'ultimo saltello, con ogni colpo ben distinto dalla musica. - Bottiglie: un whoosh morbido quando ogni bottiglia scivola dentro e ancora quando si inclina. - Versamenti: ognuno chiaramente udibile e diverso. Prima un getto limpido frizzante e schizzante che urta il ghiaccio, poi un versamento più pieno a rapidi glug, poi uno scuro e sciropposo a glug lenti e profondi. Dai a ogni versamento corpo nella gamma 1–4 kHz, dove si trovano il getto e la sacca d'aria risonante del bicchiere, così che emerga di circa 8 dB sopra i secondi circostanti. Tienili puliti: soprattutto vetro risonante e bolle, poco sibilo. - Intorno a ogni versamento: l'altezza della sacca d'aria sale da versamento a versamento mentre il bicchiere si riempie, e qualche ultima goccia cade dopo ciascuno. La musica si abbassa di circa 5 dB sotto ogni versamento e torna dolcemente, e un whoosh segue la bottiglia in uscita. - Tracker: un morbido tintinnio di conferma a due note ogni volta che un passaggio viene spuntato, un po' più forte per l'ultimo. - Cucchiaio: un tintinnio metallico quando cade, il ghiaccio che urta il bicchiere a ogni estremo del dondolio e un whoosh quando esce. - Scorza: un pizzico quando compare, tre sottili spruzzi di nebbiolina mentre si attorciglia e un lieve tocco quando si posa sul bordo. - Finale: un tintinnio brillante con lo scoppio dei trattini, sopra un lieve luccichio vitreo fino alla fine. - Mix finale: circa -14 LUFS, true peak sotto -1 dBTP. </sound> <references> Animazione a cel disegnata a mano con linee che ribollono, video esplicativi di app piatti in stile sticker e illustrazioni di ricette di cocktail in cui ogni ingrediente rappresenta una funzione. </references>

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