il tuo motion designer AI

IT

Apri l’app beta

Simple Motion

Spiegazione del prodotto come ricetta di drink disegnata a mano

Un video esplicativo quadrato disegnato a mano che mostra i passaggi di un prodotto come un drink nel bicchiere: cade il ghiaccio, tre bottiglie versano, un cucchiaio mescola e una scorza si posa.

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

Struttura

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.

Composizione

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

Tecniche

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.

Musica

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.

Suono

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.

Riferimenti

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.

Cosa preparare

Il tuo logo o l'icona dell'app, un semplice segno quadrato leggibile anche in piccolo; appare sulle etichette bianche delle tre bottiglie.

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 “Tremolio del tratto disegnato a mano” — A 0:16 nel video

Texture

Tremolio del tratto disegnato a mano

Ogni linea disegnata oscilla di un paio di pixel e si assesta su un nuovo tremolio ogni 4 fotogrammi, come nell'animazione disegnata a mano in cui ogni disegno viene ripassato. Un filtro SVG (feTurbulence con baseFrequency 0.016, un'ottava, poi feDisplacementMap con scale 3.6) agisce sui contorni, e la timeline in pausa avanza il seed della turbolenza ogni 4/30 s, così il tremolio è scorrevole e cade su fotogrammi interi.

Quando usarla Per dare a disegni vettoriali piatti, contorni e tipografia da titolo un aspetto da taccuino di schizzi fatto a mano.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tremolio del tratto disegnato a mano</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg width="0" height="0" style="position:absolute"><filter id="boil" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence id="boilNoise" type="fractalNoise" baseFrequency="0.016" numOctaves="1" seed="1" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="3.6" xChannelSelector="R" yChannelSelector="G"/></filter></svg>
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 40)" filter="url(#boil)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
const DURATION = 4;
const tl = gsap.timeline({ paused: true });
// Boil: a new noise seed every 4 frames at 30 fps (7.5 drawings a second, whole frames each).
for (let k = 0; k * 4 / 30 < DURATION; k++) tl.set("#boilNoise", { attr: { seed: 1 + (k % 9) } }, k * 4 / 30);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Anteprima della tecnica “Lettere adesivo che compaiono una a una” — A 0:00 nel video

Tipografia

Lettere adesivo che compaiono una a una

Un titolo massiccio viene composto per intero, poi ogni lettera si imprime al suo posto: da scale 0.1, 22 px più in basso e inclinata (alternando da -14 a +12 gradi) fino a riposo in 0.36 s con back.out(1.7), una lettera ogni 0.14 s. Ogni lettera è un adesivo: riempimento rosa, un contorno d'inchiostro scuro dietro con text-stroke su ::before e un'estrusione viola spostata in basso a sinistra su ::after.

Quando usarla Per una rivelazione di titolo giocosa che si legge lettera per lettera senza spostare il layout della parola.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lettere adesivo che compaiono una a una</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#word { position: absolute; left: 0; right: 0; top: 440px; text-align: center; font: 176px/1 "Lalezar", sans-serif; letter-spacing: -4px; white-space: nowrap; --sw: 7px; --sd: 7px; --ssw: 2.6px; }
.pop { position: relative; display: inline-block; color: #FB2D89; isolation: isolate; }
.pop::before, .pop::after { content: attr(data-ch); position: absolute; left: 0; top: 0; }
.pop::before { z-index: -1; color: #1C0B5D; -webkit-text-stroke: var(--sw) #1C0B5D; }   /* outline, behind the fill */
.pop::after { z-index: -2; transform: translate(calc(-1 * var(--sd)), var(--sd)); color: #7C6CF2; -webkit-text-stroke: var(--ssw) #1C0B5D; } /* extruded depth */
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <div id="word" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
const TEXT = "HELLO";            // the word
const START = 0.15, STAGGER = 0.14;   // first letter, gap between letters (s)
const word = document.getElementById("word");
for (const ch of TEXT) { const s = document.createElement("span"); s.className = "pop"; s.dataset.ch = ch; s.textContent = ch; word.appendChild(s); }
const tl = gsap.timeline({ paused: true });
gsap.utils.toArray("#word .pop").forEach((el, i) => {
  const t0 = START + i * STAGGER, tilt = [-14, 10, -8, 12, -10, 8, -12][i % 7];
  gsap.set(el, { opacity: 0 });
  tl.set(el, { opacity: 1 }, t0);
  tl.fromTo(el, { scale: 0.1, y: 22, rotation: tilt }, { scale: 1, y: 0, rotation: 0, duration: 0.36, ease: "back.out(1.7)", immediateRender: true }, t0);
});
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 “Titolo che sale e diventa intestazione” — A 0:02 nel video

Layout

Titolo che sale e diventa intestazione

Il titolo d'apertura resta al centro dell'inquadratura con una piccola riga sotto; la riga svanisce in 0.16 s, poi il titolo sale di 365 px e si riduce a 0.576 in 0.8 s con power3.inOut, simmetrico rispetto al suo punto medio, e diventa l'intestazione. Un nuovo sottotitolo in tre parti compare sotto in 0.4 s all'arrivo, così l'intro passa al layout senza stacco.

Quando usarla Quando una scheda d'apertura deve diventare l'intestazione permanente di un contenuto esplicativo.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titolo che sale e diventa intestazione</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#titleBox { position: absolute; left: 40px; top: 378px; width: 1000px; height: 220px; }
#title { position: absolute; left: 0; width: 1000px; top: 36px; text-align: center; font: 176px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 3px #1C0B5D; }
#intro, #sub { position: absolute; left: 0; width: 1080px; text-align: center; font-family: "Playpen Sans", sans-serif; color: #6B6385; }
#intro { top: 586px; font-size: 28.5px; }
#sub { top: 181px; font-size: 24px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="titleBox" class="clip" data-start="0" data-duration="4"><div id="title">BIG IDEA</div></div>
  <div id="intro" class="clip" data-start="0" data-duration="4">a short line</div>
  <div id="sub" class="clip" data-start="0" data-duration="4">first part · second part · third part</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo("#intro", { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.24, ease: "power1.out" }, 0.3);
tl.to("#intro", { opacity: 0, duration: 0.16, ease: "power1.in" }, 1.35);
// The move: 0.8 s, power3.inOut, to the header place and size.
tl.fromTo("#titleBox", { y: 0, scale: 1 }, { y: -365, scale: 0.576, duration: 0.8, ease: "power3.inOut" }, 1.4);
tl.fromTo("#sub", { opacity: 0 }, { opacity: 1, duration: 0.4, ease: "power1.out" }, 2.1);
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 “Contorno che si disegna da solo, poi si riempie” — A 0:03 nel video

Forme

Contorno che si disegna da solo, poi si riempie

Un oggetto appare come un disegno: i suoi tracciati di contorno si disegnano con stroke-dashoffset in sequenza (parete sinistra 0.17 s, parete destra 0.14 s da +0.10 s, bordo 0.20 s da +0.20 s, fondo 0.17 s da +0.23 s, power1.inOut), e solo dopo il riempimento appare in 0.28 s. Il dash array è la lunghezza del tracciato più 24 e l'offset parte 12 oltre la fine, così le estremità arrotondate non lasciano un puntino prima dell'inizio del tratto.

Quando usarla Per introdurre un oggetto disegnato come se una penna lo schizzasse, prima che riceva colore e contenuto.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contorno che si disegna da solo, poi si riempie</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <g id="fills"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/></g>
    <path id="l" class="ink" d="M209,461 L234,786"/><path id="r" class="ink" d="M495,461 L470,786"/>
    <path id="rim" class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path id="b" class="ink" d="M234,786 Q352,808 470,786"/>
  </g></svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const START = 0.4;
const drawOn = (id, t0, dur) => {
  const el = document.getElementById(id), L = el.getTotalLength();
  tl.fromTo(el, { strokeDasharray: L + " " + (L + 24), strokeDashoffset: L + 12 }, { strokeDashoffset: 0, duration: dur, ease: "power1.inOut", immediateRender: true }, t0);
};
drawOn("l", START, 0.17);
drawOn("r", START + 0.1, 0.14);
drawOn("rim", START + 0.2, 0.2);
drawOn("b", START + 0.23, 0.17);
tl.fromTo("#fills", { opacity: 0 }, { opacity: 1, duration: 0.28, ease: "power1.out", immediateRender: true }, START + 0.4);
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 “Scheda del passo rimontata con valore timbrato” — A 0:06 nel video

Transizione

Scheda del passo rimontata con valore timbrato

Ogni nuovo passo rimonta la scheda informativa invece di farla sfumare: nel fotogramma del passo la scheda sparisce e si vede solo il nuovo valore grande, a scale 0.72; il valore scatta a dimensione piena in 0.3 s (back.out(2.6)) mentre la scheda torna da 4 gradi di inclinazione, scale 0.965 e opacità zero in 0.15 s (power2.out). Il vecchio contenuto scompare in quello stesso fotogramma, quindi nulla resta in sospeso.

Quando usarla Per spiegazioni passo per passo in cui ogni nuovo passo deve sembrare una carta appena distribuita sul tavolo.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scheda del passo rimontata con valore timbrato</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#card, #bigs { position: absolute; left: 345px; top: 416px; width: 390px; height: 248px; }
#card .frame { position: absolute; inset: 0; border: 3px solid #1C0B5D; border-radius: 14px; background: #FFFFFF; box-shadow: 7px 8px 0 #F0EDFF; }
.pane { position: absolute; inset: 0; opacity: 0; }
.kicker { position: absolute; left: 27px; top: 32px; font: 17.5px/1 "Playpen Sans", sans-serif; color: #FB2D89; }
.name { position: absolute; left: 29px; top: 135px; font: 47px/1 "Lalezar", sans-serif; color: #1C0B5D; }
.note { position: absolute; left: 29px; top: 183px; font: 17.5px/1.2 "Playpen Sans", sans-serif; color: #6B6385; }
.big { position: absolute; left: 27px; top: 58px; font: 76px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 2.5px #1C0B5D; opacity: 0; transform-origin: 30% 55%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="card" class="clip" data-start="0" data-duration="4"><div class="frame"></div>
    <div class="pane" id="p0"><div class="kicker">"STEP 01"</div><div class="name">"FIRST THING"</div><div class="note">"a short note about it"</div></div>
    <div class="pane" id="p1"><div class="kicker">"STEP 02"</div><div class="name">"NEXT THING"</div><div class="note">"another short note"</div></div>
  </div>
  <div id="bigs" class="clip" data-start="0" data-duration="4"><div class="big" id="b0">GO</div><div class="big" id="b1">NOW</div></div>
</div>
<script>
const STEPS = [0.6, 2.2];           // when each step arrives (s)
const tl = gsap.timeline({ paused: true });
gsap.set("#card", { opacity: 0 });
STEPS.forEach((s, i) => {
  tl.fromTo("#card", { opacity: 0, rotation: 4, scale: 0.965 }, { opacity: 1, rotation: 0, scale: 1, duration: 0.15, ease: "power2.out", immediateRender: false }, s);
  tl.set("#p" + i, { opacity: 1 }, s);
  tl.set("#b" + i, { opacity: 1 }, s);
  tl.fromTo("#b" + i, { scale: 0.72 }, { scale: 1, duration: 0.3, ease: "back.out(2.6)", immediateRender: false }, s);
  if (i > 0) { tl.set("#p" + (i - 1), { opacity: 0 }, s); tl.set("#b" + (i - 1), { opacity: 0 }, s); }
});
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 “Tracker dei passi: pulsazione, spunta e riempimento della guida” — A 0:05 nel video

Dati

Tracker dei passi: pulsazione, spunta e riempimento della guida

Una fila di cerchi dei passi su una guida. Il cerchio del passo corrente respira da 1 a 1.12 e ritorno ogni 1.03 s (metà sine.inOut da 0.515 s) con punto ed etichetta nel colore d'accento. Quando il passo è completato, il cerchio si riempie di rosa, una spunta bianca si disegna in 0.17 s, l'etichetta si scurisce e 0.03 s dopo la guida verso il cerchio successivo si riempie in 0.37 s (power1.inOut) mentre il cerchio successivo inizia a respirare.

Quando usarla Per mostrare l'avanzamento in una sequenza di passi in qualsiasi spiegazione o tutorial.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tracker dei passi: pulsazione, spunta e riempimento della guida</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=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.rail { stroke: rgba(107, 99, 133, 0.3); stroke-width: 3; stroke-linecap: round; }
.railOn { stroke: #FB2D89; stroke-width: 3.4; stroke-linecap: round; }
.ring { fill: #FFFFFF; stroke: rgba(107, 99, 133, 0.3); stroke-width: 2.6; }
.dot { fill: rgba(107, 99, 133, 0.62); }
.done { fill: #FB2D89; stroke: #1C0B5D; stroke-width: 2.8; opacity: 0; }
.check { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#labels { position: absolute; inset: 0; }
.lbl { position: absolute; top: 580px; width: 200px; margin-left: -100px; text-align: center; font: 18px/1.2 "Playpen Sans", sans-serif; color: rgba(107, 99, 133, 0.62); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080" id="tracker"></svg>
  <div id="labels" class="clip" data-start="0" data-duration="5"></div>
</div>
<script>
const LABELS = ["FIRST", "SECOND", "THIRD", "FOURTH"];
const X = LABELS.map((_, i) => 306 + i * 156), Y = 540, R = 21.5;
const STARTS = [0.4, 1.6, 2.8, 4.0], DONE = [1.5, 2.7, 3.9];   // each step starts, and ends (s)
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("tracker");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
for (let i = 0; i < X.length - 1; i++) {
  el("line", { class: "rail", x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const on = el("line", { class: "railOn", id: "on" + i, x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const len = X[i + 1] - X[i] - 2 * R - 7; on.style.strokeDasharray = len + " " + len; on.style.strokeDashoffset = len; on.dataset.len = len;
}
X.forEach((x, i) => {
  const n = el("g", { transform: "translate(" + x + " " + Y + ")" }, svg), g = el("g", { id: "n" + i }, n);
  el("circle", { class: "ring", r: R, id: "ring" + i }, g);
  el("circle", { class: "done", r: R, id: "done" + i }, g);
  el("circle", { class: "dot", r: 5.5, id: "dot" + i }, g);
  const ck = el("path", { class: "check", id: "ck" + i, d: "M-8.5,0.5 L-2.5,6.5 L8.5,-6" }, g); ck.style.strokeDasharray = "28 28"; ck.style.strokeDashoffset = 28;
  const l = document.createElement("div"); l.className = "lbl"; l.id = "l" + i; l.style.left = x + "px"; l.textContent = LABELS[i]; document.getElementById("labels").appendChild(l);
});
const tl = gsap.timeline({ paused: true });
STARTS.forEach((s, i) => {
  tl.set("#ring" + i, { stroke: "#1C0B5D" }, s);
  tl.set("#dot" + i, { fill: "#FB2D89" }, s);
  tl.set("#l" + i, { color: "#FB2D89" }, s);
  const end = DONE[i] ?? 5, cycles = Math.max(1, Math.floor((end - s) / 1.03));
  tl.fromTo("#n" + i, { scale: 1, svgOrigin: "0 0" }, { scale: 1.12, svgOrigin: "0 0", duration: 0.515, ease: "sine.inOut", yoyo: true, repeat: cycles * 2 - 1, immediateRender: false }, s);
  if (DONE[i] === undefined) return;
  tl.set("#n" + i, { scale: 1 }, end);
  tl.set("#done" + i, { opacity: 1 }, end);
  tl.set("#dot" + i, { opacity: 0 }, end);
  tl.fromTo("#ck" + i, { strokeDashoffset: 28 }, { strokeDashoffset: 0, duration: 0.17, ease: "power1.out", immediateRender: false }, end);
  tl.set("#l" + i, { color: "#1C0B5D" }, end);
  const on = document.getElementById("on" + i);
  tl.fromTo(on, { strokeDashoffset: on.dataset.len }, { strokeDashoffset: 0, duration: 0.37, ease: "power1.inOut", immediateRender: false }, end + 0.03);
});
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 “Versamento che riempie un bicchiere” — A 0:13 nel video

Forme

Versamento che riempie un bicchiere

Una bottiglia scivola dentro, si inclina a 115 gradi su un piccolo arco (sale di 18 px, poi scende al punto di versamento, 0.37 s), e un getto si disegna dalla bocca lungo una curva quadratica fino alla bevanda in 0.17 s. Il livello sale con sine.inOut in 2 s mentre il colore si fonde con il nuovo in circa 1.3 s; goccioline di schizzo saltellano sopra la superficie dove cade il getto. Alla fine la parte alta del getto si stacca e cade in 0.2 s (power2.in) mentre la bottiglia si raddrizza. Tutto è calcolato dal tempo in un unico setter, quindi qualsiasi fotogramma può essere reso da solo.

Quando usarla Per ricette, miscelazioni o metafore di riempimento: tutto ciò che viene versato in un contenitore passo dopo passo.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Versamento che riempie un bicchiere</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/>
    <path id="liq" stroke-width="2"/><ellipse id="top" stroke-width="2"/>
    <g id="drops"><circle r="3"/><circle r="4.6"/><circle r="3"/><circle r="4.6"/></g>
    <path id="sOut" fill="none" stroke="#1C0B5D" stroke-width="10.5" stroke-linecap="round"/><path id="sIn" fill="none" stroke="#FB2D89" stroke-width="6.4" stroke-linecap="round"/>
    <path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/>
    <g id="bottle"><path d="M-44,-12 Q-44,-27 -32,-34 Q-12,-46 -12,-62 L-12,-121 L12,-121 L12,-62 Q12,-46 32,-34 Q44,-27 44,-12 L44,123 Q44,135 32,135 L-32,135 Q-44,135 -44,123 Z" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3" stroke-linejoin="round"/><rect x="-17.5" y="-135" width="35" height="15" rx="3" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3"/><rect x="-36" y="20" width="73" height="75" rx="6" fill="#FFFFFF" stroke="#1C0B5D" stroke-width="2.6"/></g>
  </g></svg>
</div>
<script>
const FROM = "#FFFFFF", TO = "#FB2D89";   // drink before and after this pour
const LEVEL0 = 750, LEVEL1 = 621;            // surface y before and after
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v)), lerp = (a, b, p) => a + (b - a) * p;
function kf(track, t) { if (t <= track[0][0]) return track[0][1]; for (let i = 1; i < track.length; i++) { const [t1, v1, e] = track[i]; if (t <= t1) { const [t0, v0] = track[i - 1], p = (t - t0) / (t1 - t0); return v0 + (v1 - v0) * (e ? ease(e)(p) : p); } } return track[track.length - 1][1]; }
const BX = [[0.2, -60], [0.45, 107, "power2.out"], [0.8, 107], [0.97, 112, "power1.inOut"], [1.17, 130, "power2.out"], [3.6, 130], [3.82, 120, "power1.in"], [4.04, 107, "power2.out"]];
const BY = [[0.8, 300], [0.97, 282, "power1.out"], [1.17, 337, "power2.inOut"], [3.6, 337], [3.82, 300, "power1.in"], [4.04, 300, "power2.out"]];
const BR = [[0.8, 0], [0.97, 70, "power1.in"], [1.17, 115.3, "power2.out"], [3.6, 115.3], [3.82, 62, "power1.in"], [4.04, 0, "power2.out"]];
const hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
const mix = (a, b, p) => "rgb(" + hex(a).map((v, i) => Math.round(lerp(v, hex(b)[i], p))).join(",") + ")";
const inL = (y) => 217 + 25 * (y - 460) / 326, inR = (y) => 487 - 25 * (y - 460) / 326;
const $ = (id) => document.getElementById(id);
function render(t) {
  const level = lerp(LEVEL0, LEVEL1, ease("sine.inOut")(c01((t - 1.37) / 2))), q = ease("sine.inOut")(c01((t - 1.6) / 1.33));
  const col = mix(FROM, TO, q), edge = mix("#9E9E9E", "#1C0B5D", q * 0.6);
  const xl = inL(level), xr = inR(level), on = level < LEVEL0 - 1;
  $("liq").setAttribute("d", on ? "M" + xl + "," + level + " L" + inL(746) + ",746 Q352,764 " + inR(746) + ",746 L" + xr + "," + level + " Z" : "");
  $("liq").setAttribute("fill", col); $("liq").setAttribute("stroke", edge);
  Object.entries({ cx: (xl + xr) / 2, cy: level, rx: on ? (xr - xl) / 2 : 0, ry: Math.min(12.5, (LEVEL0 - level) * 0.5 + 2) }).forEach(([k, v]) => $("top").setAttribute(k, v));
  const c = hex(FROM).map((v, i) => lerp(v, hex(TO)[i], q)), surf = c.map((v) => Math.round(v + (255 - v) * 0.22));   // the surface: the drink, a touch lighter
  $("top").setAttribute("fill", "rgb(" + surf.join(",") + ")"); $("top").setAttribute("stroke", edge);
  const bx = kf(BX, t), by = kf(BY, t), br = kf(BR, t), a = br * Math.PI / 180;
  $("bottle").setAttribute("transform", "translate(" + bx + " " + by + ") rotate(" + br + ")");
  const pouring = t >= 1.17 && t < 3.77, mx = bx + 128.5 * Math.sin(a), my = by - 128.5 * Math.cos(a) + 6, ey = Math.min(level, 752);
  const s1 = c01((t - 1.17) / 0.17), s0 = t > 3.57 ? ease("power2.in")(c01((t - 3.57) / 0.2)) : 0;
  ["sOut", "sIn"].forEach((id) => { const p = $(id); p.setAttribute("d", "M" + mx + "," + my + " Q" + (mx + 47) + "," + (my + 102) + " " + (mx + 66) + "," + ey); const L = p.getTotalLength(); p.style.strokeDasharray = Math.max(0, (s1 - s0) * L) + " " + (L + 10); p.style.strokeDashoffset = -s0 * L; p.style.opacity = pouring ? 1 : 0; });
  [...$("drops").children].forEach((d, i) => { const ph = (t * 2.4 + i * 0.27) % 1; d.setAttribute("cx", mx + 36 + i * 9); d.setAttribute("cy", level - 8 - Math.sin(ph * Math.PI) * 14 - (i % 2) * 5); d.setAttribute("fill", TO); d.setAttribute("stroke", "#1C0B5D"); d.setAttribute("stroke-width", 1.6); d.style.opacity = pouring && on ? 1 : 0; });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 5, duration: 5, ease: "none", immediateRender: true }, 0);
render(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 “Caduta con rimbalzo e scintille d'impatto” — A 0:04 nel video

Altro

Caduta con rimbalzo e scintille d'impatto

Gli oggetti cadono da sopra l'inquadratura sotto gravità (power2.in, circa 0.32 s per 760 px), toccano il pavimento, rimbalzano di circa 140 px (power2.out, 0.13 s), ricadono, fanno un piccolo balzo di 20 px e si assestano, il tutto con una leggera rotazione che si scioglie fino all'angolo di riposo. Tre brevi tratti di scintilla lampeggiano sopra ciascuno per 0.3 s mentre supera il bordo. Ogni oggetto parte 0.35 s dopo il precedente e atterra in un punto diverso, l'ultimo sopra gli altri.

Quando usarla Per cose che cadono in un contenitore o su una superficie: ghiaccio, monete, blocchi, articoli in un carrello.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Caduta con rimbalzo e scintille d'impatto</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
.cube { fill: rgba(255, 255, 255, 0.6); stroke: #1C0B5D; stroke-width: 2.6; }
.spark { fill: none; stroke: #1C0B5D; stroke-width: 2; stroke-linecap: round; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><g id="items"></g><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
// Each item: x, rest y, rest angle, start time.
const ITEMS = [[296, 711, 14, 0.2], [402, 704, -15, 0.55], [351, 645, 31, 0.92]];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("items");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
const tl = gsap.timeline({ paused: true });
ITEMS.forEach(([x, rest, ang, t0], i) => {
  const pos = el("g", { id: "pos" + i }, host), rot = el("g", {}, pos);
  el("rect", { class: "cube", x: -35, y: -35, width: 70, height: 70, rx: 13 }, rot);
  const sp = el("g", { opacity: 0 }, pos);
  ["M-44,-34 L-56,-44", "M-12,-52 L-15,-66", "M18,-50 L25,-63"].forEach((d) => el("path", { class: "spark", d }, sp));
  const fall = Math.sqrt((rest + 50) / 760) * 0.32;          // time to fall from y = -50
  gsap.set(pos, { x, y: -50 });
  tl.to(pos, { y: rest, duration: fall, ease: "power2.in" }, t0)
    .to(pos, { y: rest - 140, duration: 0.13, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.13, ease: "power2.in" })
    .to(pos, { y: rest - 20, duration: 0.06, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.06, ease: "power2.in" });
  tl.fromTo(rot, { rotation: ang - 40, svgOrigin: "0 0" }, { rotation: ang, svgOrigin: "0 0", duration: fall + 0.38, ease: "power1.out", immediateRender: true }, t0);
  const enter = t0 + fall * Math.sqrt((470 + 50) / (rest + 50));   // when it passes the rim (y 470)
  tl.set(sp, { opacity: 1 }, enter).to(sp, { opacity: 0, duration: 0.1 }, enter + 0.2);
});
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 “Esplosione finale di trattini che respirano” — A 0:27 nel video

Particelle

Esplosione finale di trattini che respirano

Quando il pezzo è completo, sette brevi trattini in due colori d'accento scattano lungo raggi attorno all'oggetto principale (raggio interno circa 180-200 px, lunghi 26 px) in 0.16 s con power2.out, alcuni sfalsati fino a 0.1 s, poi continuano a respirare avanti e indietro di 7 px in cicli sine da 1.3 s con fasi diverse. Nello stesso momento l'oggetto cresce del 4.2% in 0.6 s (sine.inOut) e resta così.

Quando usarla Per un momento sobrio di «fatto» o «ta-da» alla fine di una costruzione, senza coriandoli.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Esplosione finale di trattini che respirano</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>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 -70)"><g id="hero"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g><g id="bursts"></g></g></svg>
</div>
<script>
const CX = 352, CY = 610, START = 0.5;
// angle (deg), radius, colour, delay
const RAYS = [[-104.8, 212, "#FE9117", 0], [-142.4, 228, "#FB2D89", 0.1], [181, 230, "#FE9117", 0], [164, 212, "#FB2D89", 0.03], [-65, 209, "#FB2D89", 0.06], [-27, 215, "#FE9117", 0], [8.3, 222, "#FB2D89", 0.04]];
const PHASE = [0, 2.2, 4.1, 1.3, 3.3, 5.2, 0.7];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("bursts");
const lines = RAYS.map(([, , c]) => { const l = document.createElementNS(NS, "line"); l.setAttribute("stroke", c); l.setAttribute("stroke-width", 4); l.setAttribute("stroke-linecap", "round"); host.appendChild(l); return l; });
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v));
function render(t) {
  RAYS.forEach(([a, r, , d], i) => {
    const t0 = START + d, l = lines[i];
    if (t < t0) { l.style.opacity = 0; return; }
    const p = ease("power2.out")(c01((t - t0) / 0.16));
    const wob = 7 * Math.sin(2 * Math.PI * Math.max(0, t - t0 - 0.16) / 1.3 + PHASE[i]) * c01((t - t0 - 0.16) / 0.3);
    const rad = a * Math.PI / 180, r0 = r - 34 + 18 * p + wob, r1 = r0 + 26 * p;
    l.setAttribute("x1", CX + r0 * Math.cos(rad)); l.setAttribute("y1", CY + r0 * Math.sin(rad));
    l.setAttribute("x2", CX + r1 * Math.cos(rad)); l.setAttribute("y2", CY + r1 * Math.sin(rad));
    l.style.opacity = 1;
  });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 4, duration: 4, ease: "none", immediateRender: true }, 0);
tl.fromTo("#hero", { scale: 1, svgOrigin: "352 623" }, { scale: 1.042, svgOrigin: "352 623", duration: 0.6, ease: "sine.inOut", immediateRender: false }, START + 0.36);
render(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

Anteprima del prompt “Tuffo in un muro 3D di app: demo di prodotto in tre passaggi”

Tuffo in un muro 3D di app: demo di prodotto in tre passaggi

<direction> Realizza una demo di prodotto orizzontale di 31 secondi in 1280x720, costruita interamente con l'animazione, con audio. Si svolge come un unico movimento di camera continuo, senza stacchi, e si ripete senza interruzioni: l'ultimo fotogramma coincide con il primo. L'idea: un muro di schermate di app inclinato all'indietro in 3D, la camera si tuffa in una schermata, quella schermata diventa la finestra dell'app e tre passaggi numerati mostrano cosa fa il prodotto prima di una schermata finale con il mio logo. Lo stile è pulito e moderno: interfaccia vettoriale piatta disegnata da te, profondità morbida, molto spazio, movimento calmo e preciso. Evita stacchi netti, filmati reali, immagini stock, sfondi affollati, easing rimbalzanti o da cartone animato e tutto ciò che interrompe il loop. </direction> <structure> Apertura, circa 0-4 s: un muro di schermate di app inclinato all'indietro in 3D scivola lentamente. Un titolo centrato come "Your ideas, in motion" (sostituiscilo con il tuo) sta sopra, poi svanisce sfocandosi. Tuffo, circa 4-6 s: la camera avanza in una schermata, che cresce fino a diventare la finestra dell'app e si ferma su un lato dell'inquadratura. Passaggio 01, circa 6-13 s: un piccolo numero di passaggio "01" e un titolo come "Sketch your idea" (sostituiscilo con il tuo) scorrono verso l'alto riga per riga accanto alla finestra. Dentro la finestra, una pennellata si disegna sulla tela. Passaggio 02, circa 13-20 s: il testo precedente scorre verso l'alto e esce, poi "02" e un titolo come "Chat to shape it" scorrono nello stesso modo. Il contenuto della finestra cambia di conseguenza. Passaggio 03, circa 20-26 s: "03" e un titolo come "Export in one click" entrano allo stesso modo, e la finestra mostra un terminale che digita righe di testo con un cursore lampeggiante. Schermata finale, circa 26-31 s: il mio logo e "[your brand]" con un breve slogan come "Make it move" (sostituiscilo con il tuo). Poi la camera si ritira verso il muro inclinato di schermate, così il fotogramma finale coincide con il primo e il video si ripete. </structure> <composition> Tieni la finestra grande, circa il 60% della larghezza dell'inquadratura, su un lato. Metti la colonna di testo sull'altro lato, allineata a sinistra. Posiziona il numero del passaggio piccolo, nel colore d'accento, sopra il titolo. Componi i titoli in un sans-serif pulito e in grassetto, al massimo due righe brevi, con un peso più leggero per eventuali righe di supporto. Usa il mio logo come icona dell'app nella barra della finestra e centrato nella schermata finale. Usa colori per ruolo del mio brand, per esempio uno sfondo quasi nero (#0E0F13), testo bianco sporco (#F4F4F6), un accento brillante per i numeri dei passaggi, le evidenziazioni e la pennellata, e un grigio tenue per la barra della finestra e l'interfaccia secondaria. Mantieni il muro di schermate nella stessa palette con contrasto più basso, così il titolo si legge sopra. </composition> <techniques> Tutto avviene all'interno di un unico movimento di camera continuo: una lenta deriva sul muro 3D, inclinato all'indietro di circa 25 gradi, con una leggera parallasse tra le schermate. Il titolo se ne va con una sfocatura crescente e una dissolvenza di circa 0,6 s. Il tuffo è una spinta ease-in-out fluida verso una schermata mentre si ingrandisce e si appiattisce nella finestra dell'app. Le righe dei titoli scorrono verso l'alto di circa 30 px con dissolvenza, sfalsate di circa 0,1 s, con un ease-out morbido. Il testo in uscita scorre verso l'alto e svanisce prima che entri il passaggio successivo. Il contenuto della finestra cambia sul posto con brevi dissolvenze incrociate e scorrimenti. La pennellata si disegna progressivamente. Il terminale digita carattere per carattere con un cursore lampeggiante. Nella schermata finale, il logo si ingrandisce dolcemente, poi la camera torna indietro con morbidezza al muro iniziale per un loop senza interruzioni. </techniques> <music> Usa una traccia strumentale synthwave rilassata a circa 100 BPM, lunga esattamente 31 secondi, con stacchi e colpi sulla griglia del ritmo. Un pad caldo suona sotto il titolo. Il beat entra con un morbido boom quando la camera si tuffa nella finestra. La traccia si alza un po' per il passaggio 02 e si dirada sotto il terminale. Un riser porta alla schermata finale, e la traccia si risolve in modo che il loop verso l'inizio sia senza interruzioni. Punta a circa -14 LUFS con true peak sotto -1 dBTP. </music> <sound> Aggiungi un whoosh al tuffo nella finestra, un morbido tick di interfaccia quando ogni riga del titolo si posa, un leggero fruscio di pennello sulla pennellata del passaggio 01 e leggeri tocchi di tastiera sotto la digitazione del terminale. Aggiungi un impatto morbido o un chime quando il logo si posa nella schermata finale. Tieni gli effetti sotto la musica, senza voce fuori campo. </sound> <references> Somiglia a un'animazione curata di lancio o presentazione di un'app: una camera che sorvola una griglia 3D di schermate di interfaccia fino a una finestra di prodotto pulita, con passaggi numerati delle funzionalità, come nelle demo delle landing page di software moderni. </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 “Promo da landing page con transizioni tramite oggetti”

Promo da landing page con transizioni tramite oggetti

<direction> Crea un promo di motion graphics orizzontale di 15 secondi in 1920x1080 per [your brand], costruito come una landing page che prende vita. Montalo su una traccia elettronica a 128 BPM senza voce fuori campo. L'idea è che non ci sia mai un semplice stacco: ogni scena passa alla successiva attraverso un oggetto (un punto, una scelta del rullo, un telefono, una tessera vincente). Mantieni un aspetto pulito e luminoso da UI di prodotto: sfondi chiari, pillole arrotondate, card, un telefono, una dashboard e un muro di video, con tutte le etichette in testo scuro su piastre bianche e i miei colori di brand usati per ruolo. Evita stacchi netti, dissolvenze incrociate, voce, testo bianco su sfondi chiari o a righe ed etichette che si sovrappongono ad anelli o forme vicine. </direction> <structure> Cinque battute di durata più o meno uguale, circa 3 secondi ciascuna, con ogni passaggio che cade sul tempo. 1. Apertura: un singolo punto compare al centro e cresce in una pillola orizzontale con una fila di cerchi: piccoli ritratti e icone come "Aa", forme semplici e un cubo. Ogni icona è completamente visibile, non coperta dal cerchio vicino. La camera si allontana e rivela un titolo su due righe, entrambe centrate. La prima riga è tipo "No … keyframes." (sostituiscila con la tua). L'ultima parola del titolo continua a scorrere tra alternative come un rullo da slot machine. 2. Uno zoom si tuffa in un rullo rotante di ritratti di creator e card. Il rullo rallenta e si ferma su una scelta, che viene evidenziata. 3. La scelta diventa un telefono e un ventaglio di card delle funzioni si apre intorno. Una card riporta "Edit in words" con il grande numero "03" e una piccola etichetta "Live preview" accanto al numero (sostituisci con le tue funzioni). Le didascalie delle card stanno su piastre bianche. 4. Una panoramica veloce porta a una dashboard di tessere video con didascalie su piastre bianche. Le valuta e sceglie un video vincente, che viene evidenziato. 5. La tessera vincente si apre in un muro inclinato di video con didascalie su piastre bianche. Poi il muro si piega nel mio logo per la schermata finale, con "[your website]" accanto al logo su una piastra bianca. </structure> <composition> Inquadratura centrata e simmetrica per il titolo e la schermata finale con il logo. Gli elementi UI sono disposti come in una vera landing page: una fila di pillole, card con grandi numeri e piccole etichette, un mockup di telefono, una griglia da dashboard e un muro inclinato in prospettiva. Usa i miei colori di brand per ruolo: toni di sfondo (chiari, con alcuni riempimenti a righe), un accento per evidenziazioni, selezioni e anelli, e un colore di testo scuro. Ogni didascalia su card, tessere e muro è testo scuro su una piastra bianca arrotondata, così si legge su qualsiasi sfondo. Usa una sola famiglia sans-serif pulita: titolo in grassetto, etichette a peso normale ed etichette dei pulsanti in grassetto. Mantieni margini generosi in modo che nessun testo tocchi anelli o bordi. </composition> <techniques> Ogni transizione è un oggetto che si trasforma nella scena successiva, mai uno stacco. Il punto si ingrandisce nella pillola con un ease-out morbido e i cerchi compaiono con un leggero sfalsamento. L'allontanamento della camera è una riduzione di scala fluida che rivela il titolo. La parola che scorre è un rullo verticale tipo slot che passa in loop tra parole diverse. Lo zoom attraversa la pillola fino al rullo. Il rullo gira veloce e rallenta con un lungo ease-out per fermarsi con precisione sulla scelta. La scelta cambia scala e si trasforma nel telefono, e le card si aprono a ventaglio intorno con rotazione e scorrimento sfalsati. La panoramica veloce è un movimento orizzontale rapido con motion blur e un ease in-out deciso. La selezione nella dashboard è un anello di evidenziazione e un ingrandimento del vincitore. Il vincitore si espande nel muro 3D inclinato, che si piega e collassa nel logo con un assestamento finale. Tutti i movimenti e gli arrivi chiave cadono sulla griglia del tempo. </techniques> <music> Crea una traccia elettronica originale e vivace a 128 BPM, lunga esattamente 15 secondi, con un arco chiaro: inizio leggero, crescita attraverso le scene del rullo e del telefono, un drop intorno alla panoramica veloce e una chiusura pulita sul logo. Posizionala sulla griglia del tempo del montaggio, con colpi composti sopra per ogni passaggio, un riser verso il drop e un colpo finale quando il muro si piega nel logo. Masterizza a circa -14 LUFS con true peak sotto -1 dBTP. </music> <sound> Niente voce fuori campo. Aggiungi whoosh sullo zoom e sulla panoramica veloce, un breve tic-e-stop quando il rullo si ferma e un impatto morbido sul logo. Tienili tutti sotto la musica e a tempo. </sound> <references> Una landing page SaaS animata in un promo di prodotto: card UI, mockup di telefono, dashboard analitica e muro di video, nello stile dei moderni video di lancio di app con transizioni fluide da oggetto a oggetto. </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