il tuo motion designer AI

IT

Apri l’app beta

Simple Motion

Il testo digitato diventa tipografia: promo app di 30 secondi

Un promo app disegnato di 30 secondi: righe digitate diventano titoli serif, esplosione del logo, finestra dell'app, schede delle funzioni e scheda finale a 128 BPM.

Pubblicato 10 novembre 2026

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

Segnala questo prompt

Usa con il tuo agenteNel tuo agente

Concept

Crea un promo di prodotto di 30 secondi, completamente animato, per la mia app, 1920x1080 orizzontale a 60 fps. L'idea: il testo scritto continua a trasformarsi in tipografia finita. Le righe mono digitate diventano grandi titoli serif, il titolo vortica in un'esplosione che diventa il logo, una finestra dell'app renderizza ciò che viene digitato, poi seguono schede delle funzioni, una griglia di icone e una scheda finale. Tutto è disegnato: tipografia, interfaccia e forme, nessun filmato. Deve sembrare un pezzo di motion design premium, con ogni movimento ammorbidito e ogni stacco a tempo con una traccia a 128 BPM. Usa il nome del mio prodotto "[your brand]", l'icona quadrata della mia app (o disegna un semplice marchio a quadrato arrotondato nei miei colori), uno slogan di una riga, tre passaggi di come funziona, alcune brevi righe di funzioni e il mio indirizzo web. Sostituisci ogni esempio tra virgolette qui sotto con le mie parole, mantenendo ogni riga circa lunga quanto l'esempio perché il layout regga. Evita filmati e foto, movimenti lineari, stacchi fuori tempo e musica che si interrompe prima della fine.

Struttura

Tempi in secondi; una battuta = 1,875 s.

0–7,5, intro digitata. Una riga mono "# Ideas" viene digitata al centro, un carattere per ogni sedicesimo, con un cursore rosa (il "#" in rosa). A tempo le lettere mono si sollevano di 26 px e si sfocano in una rapida sequenza mentre la stessa parola sale come un enorme titolo serif (circa 228 px), lettera per lettera da 74 px più in basso, sfocatura da 10 a 0, scala da 1,12 a 1 (0,3 s, power3.out). Il cursore salta alla fine con un piccolo overshoot e lampeggia sui contrattempi. Una seconda riga mono "in motion" viene digitata al doppio della velocità e si trasforma allo stesso modo nella seconda riga rosa in corsivo "in motion.", e piccoli glifi "#" e "*" si disperdono mentre il testo mono si dissolve. Da 3,75 s quattro chip bianchi compaiono su battiti consecutivi attorno al titolo (back.out, lievi inclinazioni). Ognuno mostra prima un breve comando in mono, poi passa a ciò che fa: "bigger" diventa un "Bigger" in grassetto, "slower" diventa uno "slower" in corsivo con una barra, "colour" riceve un campione rosa, "MP4" diventa "export". I chip ondeggiano dolcemente. A 6,0 s entrambe le righe del titolo si piegano in archi attorno al centro, ruotano fino a circa 330 gradi e si riducono a nulla in meno di un secondo, mentre i chip orbitano verso l'esterno e si sfocano. 48 raggi sottili (uno ogni cinque rosa, gli altri grigio lavanda) arrivano a tutta velocità da fuori e si dispongono attorno al centro, un punto rosa compare al centro, l'inquadratura si scurisce leggermente in grigio viola e il punto si schiaccia poco prima dello stacco.
7,5–9,75, rivelazione del logo sul drop. Due anelli rosa si espandono dal centro e svaniscono, e circa 70 piccoli glifi ("+", "×", "~", "/", "°", "< >") esplodono, vorticano e si allontanano alla deriva. L'icona dell'app compare al centro (scala 0,4, 1,55, 1,22, 1,0 in 0,3 s) e scivola a sinistra in un lockup. Il nome del prodotto "[your brand]" (circa 205 px, serif grassetto) sale lettera per lettera, una ogni 60 ms, da 70 px più in basso con inclinazione e sfocatura. Il punto rosa che è schizzato in alto allo stacco ricade e atterra come punto di una "i" (o come punto fermo), schiacciandosi. Lo slogan "Your AI motion designer" (attenuato, 45 px) sale parola per parola sotto e una breve sottolineatura rosa cresce con expo.out. A 9,55 s lo slogan cade via e l'intero lockup si rimpicciolisce e vola nell'angolo in alto a sinistra, dove diventa il logo nell'intestazione di una finestra dell'app.
9,75–15,0, l'app. Una finestra dell'app bianca con angoli arrotondati (1600x900) cresce da quel logo dell'intestazione con expo.out. I pulsanti dell'intestazione compaiono uno alla volta (un pulsante fantasma "Preview", un pulsante rosa "Export" con una freccia, piccole icone a tratto), un divisore cresce e le etichette dei pannelli "CHAT" e "PREVIEW" appaiono in dissolvenza. A sinistra vengono digitate righe in mono con indicatori rosa e un cursore: "# Ideas in motion", "Tell the chat what to show.", "## Features", "- Fonts for every script", "- Vertical or square", "- [x] Live preview", "- [ ] MP4 export", "> Edit in words." e una riga di codice recintata con due parole tra virgolette. Quando ogni riga finisce, lancia un sottile tratto bézier rosa attraverso il divisore; dove atterra, l'elemento renderizzato appare a destra con sfocatura da 8 a 0 e un piccolo scivolamento (un titolo serif, una riga di testo con parole in grassetto e corsivo, un titolo con una linea sottile, elenchi puntati, una casella rosa selezionata, una vuota, una citazione con una barra, un riquadro di codice colorato con token arancioni e viola), una morbida banda rosa lampeggia dietro e resta un piccolo punto rosa. La camera si muove per tutto il tempo (vedi tecniche) e termina con uno zoom attraverso l'anteprima a 14,8 s.
15,0–24,4, cinque schede delle funzioni, circa una battuta ciascuna. Ognuna ha lo stesso blocco a sinistra: un sopratitolo mono rosa spaziato che si decifra da caratteri casuali, una riga serif in grassetto e una riga rosa in corsivo (circa 119 e 114 px) che salgono lettera per lettera dalla loro linea di base, una banda evidenziatore rosa traslucida che scorre sotto la riga in corsivo e una riga di testo attenuata che si apre da sinistra a destra. Visual a destra:
1. "01 — PICK A TEMPLATE" / "Live" / "preview." / "Tell the chat what to show. The agent builds the animation." Due schede entrano con una rotazione 3D: una scheda chat che digita "# Ideas", "Edit in words", "- bigger", "- slower", e una scheda anteprima che renderizza ogni battitura; un badge rosa circolare con un fulmine tra le due compare e gira a ogni riga completata. Esce con una breve spinta e una frustata verticale verso l'alto.
2. "02 — DESCRIBE YOUR IDEA" / "Chat instead" / "of a timeline." / "No keyframes to hunt for. Say what should change." Entra con una frustata dal basso. Un grande cerchio tenue e il contorno di un laptop si disegnano da soli, l'icona dell'app cade sullo schermo con schiacciamento e rimbalzo, partono anelli di impulso e tre icone grigie di strumenti attorno (un rombo di keyframe, una timeline, una curva) vengono barrate in rosa una dopo l'altra. Esce con una frustata orizzontale.
3. "03 — REFINE IN WORDS" / "Edit" / "in words." / "“Bigger”, “slower”, “another colour”: the preview updates as you talk." Una scheda chat con righe numerate segnala una riga con una banda arancione e un'icona, una nota "Say what should change." si apre scorrendo sopra le righe, viene inserita una riga vuota, la nota si chiude e un anello di conferma turchese si espande con puntini di coriandoli. Poi una tendina rosa inclinata attraversa l'inquadratura con la scheda successiva già sotto.
4. "NO KEYFRAMES" / "Another" / "colour." / "Kinetic type, shapes, 3D effects and sound." Una scheda bianca con un'icona sole compare con una rotazione 3D, seguono quattro campioni di colore; un puntatore clicca sulla scheda, parte un anello rosa, il sole diventa luna e l'intera scena si apre sul tema scuro in un cerchio che cresce dalla scheda.
5. Un lampo grigio viola di un fotogramma, poi su inchiostro profondo: "MP4 EXPORT" / "Your idea is" / "ready to move." / "Vertical, horizontal or square." Un puntatore apre un menu "Export" accanto a un pulsante "Open app" e sceglie "Vertical MP4", poi "Square MP4"; ogni volta una scheda file scura con l'etichetta ".mp4" cade dal menu con un'inclinazione e qualche scintilla.
24,4–26,25, griglia di icone. Una griglia scura 11 x 6 di icone sottili di motion design (play, film, music, type, layers, wand, image, video, shapes, mic, chat, palette, sun, sparkles) con sei tessere rosa accese che compaiono a tempo e alcune che sfarfallano; la griglia si attenua dopo lo stacco e avanza lentamente. Enormi parole singole si ribaltano al centro a ogni contrattempo, alternando bianco grassetto e rosa corsivo: "Type." "Shapes." "3D." "Sound." "Footage." "Free." Ognuna compare da scala 1,12 con sfocatura, una si schiaccia. L'ultima parola fa glitch, poi l'intera griglia si avvita a spirale verso il centro e lascia un punto rosa.
26,25–30, scheda finale. Anelli e glifi esplodono da dove si trova l'icona, l'icona compare, il nome arriva volando da destra lettera per lettera con sfocatura, lo slogan sale parola per parola e la sottolineatura cresce. Poi tre pillole bianche con piccole icone rosa compaiono a un quarto di secondo l'una dall'altra: "Live preview", "Try it free" e "[your web address]". Un cursore rosa lampeggia subito dopo il nome a tempo e la scheda avanza molto lentamente fino alla fine.

Composizione

Pagina chiara #FAF9FF al centro, che passa attraverso #F4F2FE a una morbida vignettatura #D9D4EA agli angoli, con due bagliori lavanda-rosa molto morbidi che vanno alla deriva lentamente e una debole griglia di punti. Le schede sono bianche con ombre morbide tinte #1C0B5D, linee sottili #E9E4F2, pannelli morbidi #F0EDFF. Il testo scuro e le scene scure in inchiostro profondo #1C0B5D (un gradiente radiale verso #0D0B1E ai bordi); testo attenuato #6B6385; accento principale rosa #FB2D89, secondo accento arancione #FE9117, piccoli tocchi di viola #7C6CF2 e turchese #2DD4B0 (l'anello di successo).
Font: un serif da display ad alto contrasto, Fraunces a dimensione ottica 72, per i titoli, grassetto dritto per la prima riga e corsivo medio in rosa per la seconda; Onest per le righe di testo, lo slogan e le pillole; JetBrains Mono per il testo digitato, i sopratitoli spaziati e le etichette dell'interfaccia.
Dimensioni: titolo dell'intro circa 228 px, nome del prodotto circa 205 px, slogan 45 px, righe delle funzioni circa 119 px (grassetto) e 114 px (corsivo), finestra dell'app 1600x900 con angoli arrotondati. Il lockup del logo ha l'icona a sinistra e il nome a destra, con lo slogan e una breve sottolineatura rosa sotto. Le schede delle funzioni tengono il blocco di testo a sinistra e il visual a destra.

Tecniche

Ogni movimento ammorbidito, niente di lineare: power3.out per le salite delle lettere, back.out per le comparse (chip, pillole, schede file), expo.out per finestre, divisori e sottolineature che crescono.
Il testo entra lettera per lettera da sotto la linea di base con sfocatura e una lieve riduzione di scala o inclinazione; gli slogan salgono parola per parola; le righe di testo si aprono da sinistra a destra; i sopratitoli si decifrano da caratteri casuali.
Morph da mono a serif: le lettere mono digitate si sollevano di 26 px e si sfocano in una rapida sequenza mentre la parola serif sale al loro posto e piccoli glifi si disperdono.
Le comparse vanno oltre il bersaglio (scala dell'icona 0,4, 1,55, 1,22, 1,0 in 0,3 s); i punti e l'icona si schiacciano quando atterrano.
I tratti bézier rosa vengono disegnati in circa 0,1 s e cancellati dalla coda in 0,14 s.
Camera nella scena dell'app: una lenta spinta, una rapida spinta fino a circa 1,4x sulla parte alta della finestra a 11 s, una lenta panoramica verso il basso che segue la digitazione, un rapido arretramento con la finestra inclinata di circa 10 gradi in 3D a 14 s e uno zoom attraverso l'anteprima con forte sfocatura a 14,8 s. Lente spinte sulla griglia di icone e sulla scheda finale.
Transizioni: vortice ad arco e rotazione verso raggi, esplosione di anelli e glifi, lockup che vola nell'intestazione della finestra, zoom attraverso con sfocatura, breve spinta più frustata verticale, frustata orizzontale, una tendina rosa inclinata con quattro bordi più chiari a gradini che attraversa da sinistra a destra in circa 0,22 s, una rivelazione circolare sul tema scuro, un lampo grigio viola di un fotogramma e la griglia che si avvita in un unico punto.
Le schede entrano con una rotazione 3D, i chip ondeggiano dolcemente e il cursore lampeggia sui contrattempi.

Musica

Synthwave strumentale brillante a 128 BPM con caldi sintetizzatori analogici, creato da zero e lungo esattamente 30 secondi, posato sulla griglia ritmica dell'immagine. Ogni stacco cade su una battuta: il drop e il logo a 7,5 s, una funzione per battuta, parole sui contrattempi, la scheda finale a 26,25 s. Arco: quattro battute di crescendo con arpeggi e un riser di rumore, il drop con un crash sul logo, poi un groove incalzante con basso in sidechain che corre senza alcuna pausa fino alla scheda finale, al suo ultimo battito e a una lunga coda di sintetizzatore che tiene fino alla fine. Mix a circa -14 LUFS, true peak sotto -1 dBTP.

Suono

Sound design solo sui momenti dell'immagine, sopra la musica: morbidi tic di digitazione sotto le righe digitate, un blip quando ogni riga diventa tipografia, piccoli pop per chip, pillole e schede file, un whoosh per il vortice, ogni frustata, la tendina, lo zoom attraverso e la rivelazione scura, un riser verso il drop e un boom su di esso, un breve tonfo quando l'icona atterra sul laptop, un campanello ascendente per la conferma turchese, clic per il puntatore, un glitch sul lampo grigio, un colpo sullo stacco della griglia, un tic per ogni parola che si ribalta e un breve riser verso un boom finale sul primo battito della scheda finale. Nessuna voce fuori campo.

Cosa preparare

Icona quadrata dell'app facoltativa per la rivelazione del logo, l'intestazione della finestra dell'app, la scheda del laptop e la scheda finale; altrimenti viene disegnato un marchio a quadrato arrotondato.
Il nome del tuo prodotto, uno slogan di una riga, tre passaggi, alcune brevi righe di funzioni e il tuo indirizzo web, ciascuno circa lungo quanto gli esempi.

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 mono digitata che si trasforma in titolo serif” — A 0:01 nel video

Tipografia

Riga mono digitata che si trasforma in titolo serif

Una riga mono viene digitata un carattere per ogni sedicesimo con un cursore rosa; sul beat le sue lettere salgono di 26 px e sfocano con uno sfasamento di 22 ms mentre il titolo serif sale lettera per lettera da 74 px più in basso (blur da 10 a 0, scala da 1.12 a 1, 0.3 s power3.out, sfasamento di 36 ms). Il cursore salta alla fine del titolo con back.out(2.2), cresce fino all'altezza delle maiuscole e lampeggia sui mezzi battiti.

Quando usarla Aprire un pezzo in cui un'idea scritta o un comando diventa tipografia finita.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Riga mono digitata che si trasforma in titolo serif</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#mono { position: absolute; left: 0; right: 0; top: 480px; text-align: center; font: 400 107px/1 "JetBrains Mono", monospace; color: #6b6385; white-space: pre; }
#mono .mk { color: #fb2d89; }
#serif { position: absolute; left: 0; right: 0; top: 420px; text-align: center; font: 760 228px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#mono span, #serif span { display: inline-block; }
#caret { position: absolute; left: 0; top: 0; width: 6px; height: 120px; background: #fb2d89; border-radius: 1px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div id="mono"># Ideas</div>
    <div id="serif">Ideas</div>
    <div id="caret"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const BEAT = 60 / 128;                                   // the music's beat: typing runs on 16th notes
const split = (el, mk) => { const t = el.textContent; el.textContent = ""; return Array.from(t).map((c, i) => { const s = document.createElement("span"); s.textContent = c; if (mk.includes(i)) s.className = "mk"; el.appendChild(s); return s; }); };
const mono = split(document.getElementById("mono"), [0]), serif = split(document.getElementById("serif"), []);
const caret = document.getElementById("caret");
const right = (s) => s.getBoundingClientRect().right;    // measured once, at build time
gsap.set([...mono, ...serif], { opacity: 0 });
gsap.set(caret, { x: mono[0].getBoundingClientRect().left, y: 472 });
// 1. Type the mono line, the caret after the last character.
mono.forEach((s, i) => { const t = 0.12 + i * BEAT / 4; tl.set(s, { opacity: 1 }, t); tl.set(caret, { x: right(s) + 4 }, t); });
// 2. Morph: mono letters lift and blur away while the serif letters rise in.
tl.to(mono, { y: -26, opacity: 0, filter: "blur(5px)", duration: 0.13, stagger: 0.022, ease: "power2.in" }, 1.0);
tl.fromTo(serif, { y: 74, opacity: 0, scale: 1.12, filter: "blur(10px)" }, { y: 0, opacity: 1, scale: 1, filter: "blur(0px)", duration: 0.3, stagger: 0.036, ease: "power3.out" }, 1.02);
// 3. The caret jumps to the end of the headline, grows to its height and blinks on half beats.
tl.to(caret, { x: right(serif[serif.length - 1]) + 18, y: 430, height: 196, duration: 0.22, ease: "back.out(2.2)" }, 1.02);
for (let t = 1.3, on = false; t < 4; t += BEAT / 2, on = !on) tl.set(caret, { opacity: on ? 1 : 0 }, t);
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 “Vortice del titolo che collassa in un'esplosione radiale” — A 0:06 nel video

Transizione

Vortice del titolo che collassa in un'esplosione radiale

Entrambe le righe del titolo si piegano in archi attorno al centro dell'inquadratura, ruotano fino a 330 gradi e si riducono a nulla in meno di un secondo (keyframe a tratti per rotazione, scala e curvatura, valutati a ogni fotogramma dal tempo della timeline). Intanto 48 raggi sottili sfrecciano da 500-1000 px e si dispongono attorno al centro (cubic ease out, un raggio su cinque rosa, gli altri grigio lavanda), un punto rosa compare al centro con back.out(2.5) e si schiaccia prima del taglio, e l'inquadratura si scurisce in un grigio-viola.

Quando usarla Un passaggio di consegne ad alta energia da un'intro tipografica a un logo o alla scena successiva, esattamente sul drop.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vortice del titolo che collassa in un'esplosione radiale</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
.line { position: absolute; left: 0; width: 1920px; text-align: center; font: 760 228px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#l1 { top: 317px; }
#l2 { top: 537px; font-style: italic; font-weight: 560; font-size: 222px; color: #fb2d89; }
.line span { display: inline-block; }
#burst { position: absolute; left: 960px; top: 538px; }
#burst i { position: absolute; left: 0; top: -1.5px; height: 3px; width: 300px; border-radius: 2px; transform-origin: 0 50%; opacity: 0; }
#dot { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: #fb2d89; opacity: 0; }
#dim { position: absolute; inset: 0; background: #77708f; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="2">
    <div id="l1" class="line">Ideas</div>
    <div id="l2" class="line it">in motion.</div>
    <div id="burst"><div id="dot"></div></div>
    <div id="dim"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const key = (t, ts, vs) => { if (t <= ts[0]) return vs[0]; for (let i = 1; i < ts.length; i++) if (t <= ts[i]) return vs[i - 1] + (vs[i] - vs[i - 1]) * (t - ts[i - 1]) / (ts[i] - ts[i - 1]); return vs[vs.length - 1]; };
let seed = 11; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;   // seeded, same every render
const CX = 960, CY = 540, letters = [];
for (const id of ["l1", "l2"]) { const el = document.getElementById(id); const t = el.textContent; el.textContent = "";
  const spans = Array.from(t).map((c) => { const s = document.createElement("span"); s.textContent = c; el.appendChild(s); return s; });
  const pts = spans.map((s) => { const r = s.getBoundingClientRect(); return { s, x: r.left + r.width / 2 - CX, y: r.top + r.height * 0.58 - CY }; });
  const yL = pts.reduce((a, p) => a + p.y, 0) / pts.length; pts.forEach((p) => letters.push({ ...p, yL })); }
const rays = []; const burst = document.getElementById("burst");
for (let k = 0; k < 48; k++) { const w = document.createElement("div"); w.style.cssText = `position:absolute;transform:rotate(${k * 7.5}deg)`; const i = document.createElement("i");
  const pink = k % 5 === 2; i.style.background = pink ? "#fb2d89" : "#bdb6d1"; w.appendChild(i); burst.insertBefore(w, burst.firstChild);
  rays.push({ i, rin: pink ? 70 + rnd() * 30 : 52 + rnd() * 60, len: pink ? 320 + rnd() * 90 : 220 + rnd() * 150, r0: 520 + rnd() * 520 }); }
const TS = [0.2, 0.35, 0.5, 0.63, 0.7, 0.77, 0.83, 0.9, 0.97, 1.03, 1.1, 1.17];      // seconds of the collapse
const SPIN = [0, 4, 18, 45, 70, 100, 130, 175, 220, 260, 300, 330], SCALE = [1, 1, 0.95, 0.86, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.15, 0], BEND = [0, 0.25, 0.55, 0.85, 1, 1.1, 1.15, 1.2, 1.2, 1.2, 1.2, 1.2];
function draw(t) {
  const sp = key(t, TS, SPIN) * Math.PI / 180, sc = key(t, TS, SCALE), bd = key(t, TS, BEND), c = Math.cos(sp), s = Math.sin(sp);
  for (const p of letters) { let x = p.x, y = p.y, rot = 0;
    if (bd > 0.001) { const rho = Math.abs(p.yL) / bd, phi = p.x / rho, off = p.y - p.yL; x = rho * Math.sin(phi);
      y = p.yL > 0 ? p.yL - rho + rho * Math.cos(phi) + off : p.yL + rho - rho * Math.cos(phi) + off; rot = p.yL > 0 ? -phi : phi; }
    const xr = (x * c - y * s) * sc, yr = (x * s + y * c) * sc;
    p.s.style.transform = t <= TS[0] ? "" : `translate(${xr - p.x}px, ${yr - p.y}px) rotate(${(rot + sp) * 57.2958}deg) scale(${Math.max(sc, 0.001)})`;
    p.s.style.opacity = t < 1.08 ? 1 : Math.max(0, 1 - (t - 1.08) / 0.08); }
  const q = Math.min(1, Math.max(0, (t - 0.55) / 0.58)), e = 1 - Math.pow(1 - q, 3);
  for (const r of rays) { const rin = r.r0 + (r.rin - r.r0) * e, len = 560 + (r.len - 560) * e;
    r.i.style.transform = `translateX(${rin}px) scaleX(${len / 300})`; r.i.style.opacity = t < 0.55 ? 0 : Math.min(1, (t - 0.55) / 0.1); }
}
const proxy = { t: 0 };
tl.to(proxy, { t: 2, duration: 2, ease: "none", onUpdate: () => draw(proxy.t) }, 0);
tl.fromTo("#dot", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.18, ease: "back.out(2.5)" }, 1.06);
tl.to("#dot", { scaleX: 1.9, scaleY: 0.6, duration: 0.12, ease: "power2.in" }, 1.58);
tl.fromTo("#dim", { opacity: 0 }, { opacity: 0.36, duration: 0.47, ease: "power2.in" }, 1.23);
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>

Tipografia

Lockup del logo con onde d'urto, esplosione di glifi e punto della i che cade

Al taglio due anelli rosa si espandono dal centro (raggio da 190 a 660 in 0.42 s, con dissolvenza) mentre circa 70 piccoli glifi esplodono, vorticano e si allontanano. Il simbolo quadrato compare al centro (scala 0.4, 1.55, 1.22, 1.0 in 0.3 s) e scivola a sinistra nel lockup; le lettere del nome salgono una ogni 60 ms da 70 px più in basso con un'inclinazione di 18 gradi e sfocatura (0.24 s back.out(1.3)), e un punto rosa lanciato verso l'alto al taglio ricade con power2.in per diventare il punto della i, schiacciandosi all'atterraggio. Il tagline segue parola per parola e una sottolineatura cresce con expo.out.

Quando usarla Una rivelazione di logo o nome prodotto che atterra sul drop della musica.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lockup del logo con onde d'urto, esplosione di glifi e punto della i che cade</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#rings { position: absolute; left: 0; top: 0; }
#rings circle { fill: none; stroke: #fb2d89; stroke-width: 7px; opacity: 0; filter: blur(1.6px); }
.pt { position: absolute; left: 0; top: 0; font: 700 22px/1 "JetBrains Mono", monospace; white-space: pre; opacity: 0; }
#mark { position: absolute; left: 322px; top: 392px; width: 172px; height: 172px; border-radius: 41px; background: linear-gradient(135deg, #1c0b5d 0%, #2a1a73 100%); box-shadow: inset 0 0 0 26px #1c0b5d, inset 0 0 0 52px #fb2d89; }
#word { position: absolute; left: 582px; top: 368px; font: 700 205px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#word span { display: inline-block; }
#dot { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; background: #fb2d89; }
#tag { position: absolute; left: 587px; top: 612px; font: 400 45px/1 "Onest", sans-serif; color: #6b6385; white-space: pre; }
#tag span { display: inline-block; opacity: 0; }
#under { position: absolute; left: 586px; top: 687px; width: 115px; height: 8px; border-radius: 4px; background: #fb2d89; transform-origin: 0 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <svg id="rings" width="1920" height="1080"><circle id="r1" cx="960" cy="540" r="190" /><circle id="r2" cx="960" cy="540" r="110" /></svg>
    <div id="pts"></div>
    <div id="mark"></div>
    <div id="word">Motıon Fab</div>
    <div id="dot"></div>
    <div id="tag"><span>Your AI </span><span>motion </span><span>designer</span></div>
    <div id="under"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
let seed = 23; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;   // seeded randomness
const word = document.getElementById("word"); const text = word.textContent; word.textContent = "";
const letters = Array.from(text).map((c) => { const s = document.createElement("span"); s.textContent = c; word.appendChild(s); return s; });
const ii = letters[3].getBoundingClientRect(); const dotX = ii.left + ii.width / 2, dotY = 423;   // the dotless i takes the falling dot
// Rings at the cut.
tl.fromTo("#r1", { attr: { r: 190 }, opacity: 0.75 }, { attr: { r: 660 }, opacity: 0, duration: 0.42, ease: "power2.out" }, 0);
tl.fromTo("#r2", { attr: { r: 110 }, opacity: 0.7 }, { attr: { r: 600 }, opacity: 0, duration: 0.5, ease: "power2.out", immediateRender: false }, 0.1);
// The mark pops at the centre, then slides left into the lockup.
gsap.set("#mark", { x: 552, y: 62, scale: 0.4, rotation: -12, opacity: 0 });
tl.to("#mark", { keyframes: [{ scale: 1.55, rotation: 6, opacity: 1, duration: 0.1, ease: "power2.out" }, { scale: 1.22, rotation: -2, duration: 0.09 }, { scale: 1, rotation: 0, duration: 0.12, ease: "power2.out" }] }, 0.08);
tl.to("#mark", { keyframes: [{ x: 451, y: 52, duration: 0.08, ease: "power2.in" }, { x: 124, y: 14, duration: 0.067, ease: "none" }, { x: 29, y: 3, duration: 0.05, ease: "power2.out" }, { x: -9, y: 0, duration: 0.066 }, { x: 0, duration: 0.1, ease: "sine.inOut" }] }, 0.42);
// Letters rise in one after another.
letters.forEach((s, i) => { if (s.textContent === " ") return;
  tl.fromTo(s, { x: 50, y: 70, rotation: 18, opacity: 0, filter: "blur(6px)" }, { x: 0, y: 0, rotation: 0, opacity: 1, filter: "blur(0px)", duration: 0.24, ease: "back.out(1.3)" }, 0.47 + i * 0.06); });
// The dot shoots up at the cut, falls into the i and squashes.
gsap.set("#dot", { x: 960, y: 540, scale: 0.8 });
tl.to("#dot", { x: dotX - 14, y: 6, scale: 1, duration: 0.06, ease: "power2.out" }, 0);
tl.to("#dot", { x: dotX, y: dotY, duration: 0.25, ease: "power2.in" }, 0.5);
tl.to("#dot", { keyframes: [{ scaleX: 1.35, scaleY: 0.7, duration: 0.05 }, { scaleX: 1, scaleY: 1, duration: 0.14, ease: "back.out(2)" }] }, 0.75);
// Tagline word by word, then the underline.
document.querySelectorAll("#tag span").forEach((s, i) => tl.fromTo(s, { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.22, ease: "power2.out" }, 1.0 + i * 0.075));
tl.fromTo("#under", { scaleX: 0 }, { scaleX: 1, duration: 0.6, ease: "expo.out" }, 1.42);
// Glyph burst: out from the centre with a swirl, then a slow drift and fade.
const box = document.getElementById("pts"), G = ["+", "×", "~", "/", "°", "( )", "< >", "*", "·", "="], parts = [];
for (let i = 0; i < 70; i++) { const p = document.createElement("div"); p.className = "pt"; p.textContent = G[Math.floor(rnd() * G.length)];
  p.style.fontSize = (14 + rnd() * 22) + "px"; p.style.color = rnd() < 0.6 ? "#fb2d89" : "#6b6385"; box.appendChild(p);
  parts.push({ p, a0: rnd() * 6.283, r1: 140 + Math.pow(rnd(), 0.8) * 560, w: (rnd() < 0.5 ? -1 : 1) * (0.5 + rnd() * 0.9), rot: (rnd() - 0.5) * 60, fade: 0.95 + rnd() * 0.6 }); }
const draw = (t) => { for (const q of parts) { const u = Math.max(0, t - 0.02), r = q.r1 * (1 - Math.exp(-u / 0.2)) + 45 * u, a = q.a0 + q.w * (1 - Math.exp(-u / 0.35));
  q.p.style.transform = `translate(${960 + Math.cos(a) * r * 1.2}px, ${540 + Math.sin(a) * r * 0.82 + 22 * u}px) rotate(${q.rot + 40 * u}deg)`;
  q.p.style.opacity = t < 0.02 ? 0 : Math.min(1, (t - 0.02) / 0.06, Math.max(0, 1 - (t - q.fade) / 0.35)) * 0.9; } };
const proxy = { t: 0 }; tl.to(proxy, { t: 3, duration: 3, ease: "none", onUpdate: () => draw(proxy.t) }, 0); draw(0);
window.__timelines = window.__timelines || {}; window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Anteprima della tecnica “Riga digitata che lancia un tratto al suo gemello renderizzato” — A 0:11 nel video

Layout

Riga digitata che lancia un tratto al suo gemello renderizzato

Una finestra di app a due pannelli: ogni riga digitata a sinistra (mono, marcatori in rosa, cursore al seguito) termina lanciando un sottile tratto bézier rosa oltre il divisore (stroke-dashoffset disegnato in circa 0.1 s con power1.in, poi cancellato dalla coda in 0.14 s). Dove atterra, a destra compare l'elemento renderizzato con blur da 8 px a 0 e uno scorrimento di 8 px, dietro di esso lampeggia una morbida banda rosa che svanisce in 0.55 s, e un piccolo marcatore a punto resta al 35 % di opacità. Una lenta spinta e panoramica di camera segue la digitazione.

Quando usarla Mostrare l'input che diventa subito output: un editor e la sua anteprima, un prompt e il suo risultato, una chat e ciò che crea.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Riga digitata che lancia un tratto al suo gemello renderizzato</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#win { position: absolute; left: 160px; top: 90px; width: 1600px; height: 900px; border-radius: 16px; background: #fff; box-shadow: 0 40px 90px rgba(28, 11, 93, 0.16); transform-origin: 30% 20%; }
#div { position: absolute; left: 800px; top: 40px; width: 1.5px; height: 820px; background: #e9e4f2; }
.ln { position: absolute; left: 90px; font: 400 19px/30px "JetBrains Mono", monospace; color: #1c0b5d; white-space: pre; }
.ln span { opacity: 0; }
.ln .mk { color: #fb2d89; }
#cur { position: absolute; left: 0; top: 0; width: 2.5px; height: 24px; background: #fb2d89; }
.pv { position: absolute; left: 898px; font: 400 19.5px/30px "Onest", sans-serif; color: #1c0b5d; white-space: pre; opacity: 0; transform-origin: 0 50%; }
.pv.h { font: 700 46px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; }
.band { position: absolute; left: 872px; width: 696px; background: rgba(251, 45, 137, 0.13); opacity: 0; }
#strokes { position: absolute; left: 0; top: 0; overflow: visible; }
#strokes path { fill: none; stroke: #fb2d89; stroke-width: 2.5px; stroke-linecap: round; opacity: 0; }
.mark { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fb2d89; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3.2">
    <div id="win">
      <div id="div"></div>
      <div id="ed"></div><div id="cur"></div>
      <div class="band" id="b0" style="top: 84px; height: 60px;"></div><div class="band" id="b1" style="top: 166px; height: 40px;"></div>
      <div class="pv h" id="p0" style="top: 90px;">Ideas in motion</div>
      <div class="pv" id="p1" style="top: 171px;">Tell the <b>chat</b> what to <i>show</i>.</div>
      <svg id="strokes" width="1600" height="900"></svg>
    </div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
// A scene that starts later is display: none until then, where every box measures 0: lay it out while building.
const held = []; for (let el = document.getElementById("win"); el; el = el.parentElement) if (getComputedStyle(el).display === "none") { held.push([el, el.style.getPropertyValue("display"), el.style.getPropertyPriority("display")]); el.style.setProperty("display", "block", "important"); }
const tl = gsap.timeline({ paused: true });
const LINES = [                                           // [tokens, typing start, end, preview item, its centre y]
  { tok: [["#", "mk"], [" Ideas in motion"]], t0: 0.2, t1: 0.55, item: "#p0", band: "#b0", py: 114 },
  { tok: [["Tell the "], ["**", "mk"], ["chat"], ["**", "mk"], [" what to "], ["*", "mk"], ["show"], ["*", "mk"], ["."]], t0: 0.8, t1: 1.2, item: "#p1", band: "#b1", py: 186 } ];
const ed = document.getElementById("ed"), cur = document.getElementById("cur"), svg = document.getElementById("strokes");
LINES.forEach((L, n) => {
  const y = 110 + n * 60.6, ln = document.createElement("div"); ln.className = "ln"; ln.style.top = (y - 15) + "px"; ed.appendChild(ln);
  const chars = []; L.tok.forEach(([t, c]) => Array.from(t).forEach((ch) => { const s = document.createElement("span"); s.textContent = ch; if (c) s.className = c; ln.appendChild(s); chars.push(s); }));
  chars.forEach((s, i) => { const t = L.t0 + (L.t1 - L.t0) * i / (chars.length - 1); tl.set(s, { opacity: 1 }, t); tl.set(cur, { x: 90 + s.offsetLeft + s.offsetWidth + 2, y: y - 12 }, t); });
  const last = chars[chars.length - 1], sx = 90 + last.offsetLeft + last.offsetWidth + 14, ex = 872;
  const p = document.createElementNS("http://www.w3.org/2000/svg", "path"); p.setAttribute("d", `M${sx} ${y} C${sx + 140} ${y + 46}, ${ex - 170} ${L.py + 36}, ${ex} ${L.py}`); svg.appendChild(p);
  const len = p.getTotalLength(); p.style.strokeDasharray = len; p.style.strokeDashoffset = len;
  const tp = L.t1 + 0.1;                                     // the moment the stroke lands
  tl.set(p, { opacity: 1 }, L.t1 + 0.02);
  tl.to(p, { strokeDashoffset: 0, duration: 0.08, ease: "power1.in" }, L.t1 + 0.02);
  tl.to(p, { strokeDashoffset: -len, duration: 0.14, ease: "power2.out" }, tp);
  const mk = document.createElement("div"); mk.className = "mark"; mk.style.left = (ex - 4) + "px"; mk.style.top = L.py + "px"; document.getElementById("win").appendChild(mk);
  tl.fromTo(mk, { scale: 0, opacity: 1 }, { scale: 1.5, duration: 0.08 }, tp); tl.to(mk, { scale: 1, opacity: 0.35, duration: 0.3 }, tp + 0.08);
  tl.fromTo(L.band, { opacity: 0 }, { opacity: 1, duration: 0.05 }, tp); tl.to(L.band, { opacity: 0, duration: 0.55, ease: "power1.in" }, tp + 0.2);
  tl.fromTo(L.item, { opacity: 0, x: -8, scale: n ? 1 : 1.08, filter: "blur(8px)" }, { opacity: 1, x: 0, scale: 1, filter: "blur(0px)", duration: 0.16, ease: "power2.out" }, tp);
});
tl.fromTo("#win", { scale: 1 }, { scale: 1.12, duration: 3.2, ease: "sine.inOut" }, 0);   // slow push that follows the typing
held.forEach(([el, v, p]) => (v ? el.style.setProperty("display", v, p) : el.style.removeProperty("display")));   // hand the scene back as it was
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 “Blocco funzione: eyebrow che si decodifica, lettere che salgono, banda evidenziatore, wipe del testo” — A 0:15 nel video

Tipografia

Blocco funzione: eyebrow che si decodifica, lettere che salgono, banda evidenziatore, wipe del testo

Un blocco funzione allineato a sinistra in quattro parti: un eyebrow mono spaziato si risolve da caratteri casuali da sinistra a destra in circa 0.45 s; la riga serif in grassetto e la riga rosa in corsivo salgono lettera per lettera da sotto la maschera della propria linea di base (yPercent da 105 a 0, 0.16-0.18 s power3.out, sfasamento di 12-15 ms, la seconda riga 0.16 s dopo); una banda evidenziatore rosa traslucida scorre sotto la riga in corsivo (scaleX da sinistra, 0.26 s power3.out); il testo si apre da sinistra a destra con un wipe clip-path inset in 0.34 s.

Quando usarla Schede numerate di funzioni o passaggi in un video di prodotto, una per battito o battuta.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blocco funzione: eyebrow che si decodifica, lettere che salgono, banda evidenziatore, wipe del testo</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
#eb { position: absolute; left: 160px; top: 320px; font: 500 22px/1 "JetBrains Mono", monospace; letter-spacing: 0.2em; color: #fb2d89; white-space: pre; }
.ln { position: absolute; left: 160px; font-family: "Fraunces", serif; line-height: 1; white-space: pre; font-variation-settings: "opsz" 72; clip-path: inset(-30px -40px 0 -40px); }
.ln span { display: inline-block; }
#l1 { top: 360px; font-weight: 600; font-size: 119px; color: #1c0b5d; }
#l2 { top: 483px; font-style: italic; font-weight: 500; font-size: 114px; color: #fb2d89; clip-path: inset(-30px -40px -8px -40px); }
#band { position: absolute; left: 156px; top: 541px; height: 48px; background: rgba(251, 45, 137, 0.13); transform-origin: 0 50%; }
#body { position: absolute; left: 160px; top: 640px; width: 760px; font: 400 29.5px/46px "Onest", sans-serif; color: #6b6385; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="eb">01 — PICK A TEMPLATE</div>
    <div id="l1" class="ln">Live</div>
    <div id="band"></div>
    <div id="l2" class="ln">preview.</div>
    <div id="body">Tell the chat what to show. The agent builds the animation.</div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
// A scene that starts later is display: none until then, where every box measures 0: lay it out while building.
const held = []; for (let el = document.getElementById("l2"); el; el = el.parentElement) if (getComputedStyle(el).display === "none") { held.push([el, el.style.getPropertyValue("display"), el.style.getPropertyPriority("display")]); el.style.setProperty("display", "block", "important"); }
const tl = gsap.timeline({ paused: true });
const split = (el) => { const t = el.textContent; el.textContent = ""; return Array.from(t).map((c) => { const s = document.createElement("span"); s.textContent = c; el.appendChild(s); return s; }); };
const T = 0.2;                                            // when the block comes in
const c1 = split(document.getElementById("l1")), c2 = split(document.getElementById("l2"));
tl.fromTo(c1, { yPercent: 105 }, { yPercent: 0, duration: 0.16, stagger: 0.015, ease: "power3.out" }, T);
tl.fromTo(c2, { yPercent: 115 }, { yPercent: 0, duration: 0.18, stagger: 0.012, ease: "power3.out" }, T + 0.16);
const band = document.getElementById("band"); band.style.width = (document.getElementById("l2").offsetWidth + 10) + "px";
tl.fromTo(band, { scaleX: 0 }, { scaleX: 1, duration: 0.26, ease: "power3.out" }, T + 0.5);
tl.fromTo("#body", { clipPath: "inset(-10px 100% -10px 0px)", opacity: 0.4 }, { clipPath: "inset(-10px 0% -10px 0px)", opacity: 1, duration: 0.34, ease: "power2.out" }, T + 0.3);
// Eyebrow decode: each character cycles through random glyphs, then settles, left to right.
const eb = document.getElementById("eb"), FINAL = eb.textContent, GL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#*/<>-_";
const decode = (time) => { const n = FINAL.length, f = Math.floor(time * 30); let s = "";
  for (let i = 0; i < n; i++) { const shown = T + 0.04 + (i / n) * 0.2, fixed = T + 0.04 + ((i + 1) / n) * 0.46;
    s += time < shown ? " " : time >= fixed || FINAL[i] === " " ? FINAL[i] : GL[(i * 7 + f * 13) % GL.length]; }
  eb.textContent = s; };
const proxy = { t: 0 }; tl.to(proxy, { t: 3, duration: 3, ease: "none", onUpdate: () => decode(proxy.t) }, 0); decode(0);
held.forEach(([el, v, p]) => (v ? el.style.setProperty("display", v, p) : el.style.removeProperty("display")));   // hand the scene back as it was
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 “Wipe di colore inclinato con bordi a gradini” — A 0:20 nel video

Transizione

Wipe di colore inclinato con bordi a gradini

Una banda più larga dell'inquadratura, inclinata di 14 gradi, la attraversa da sinistra a destra in circa 0.22 s: quattro gradini da 60 px, dal rosa pallido al rosa pieno, precedono e seguono il suo nucleo solido, così i bordi si leggono come una scia di movimento senza alcuna sfocatura. La scena uscente viene tagliata nel momento in cui la banda copre tutta l'inquadratura e la successiva è già sotto quando passano i gradini finali.

Quando usarla Un cambio di scena netto e grafico su un tempo forte tra due scene chiare.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wipe di colore inclinato con bordi a gradini</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=Fraunces:ital,opsz,wght@0,9..144,500..800;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Onest:wght@400;500&display=block");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse farthest-corner at 50% 50%, #faf9ff 0%, #f4f2fe 62%, #d9d4ea 100%); }
#stage { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; }
.t { position: absolute; left: 160px; top: 440px; font: 600 119px/1 "Fraunces", serif; font-variation-settings: "opsz" 72; color: #1c0b5d; white-space: pre; }
#b { opacity: 0; }
#wipe { position: absolute; left: 0; top: -210px; width: 2780px; height: 1500px; transform: skewX(-14deg); transform-origin: 0 50%;
  background: linear-gradient(90deg, #f9c7de 0 60px, #f9a2c8 60px 120px, #fa77b0 120px 180px, #fb529d 180px 240px, #fb2d89 240px 2540px, #fb529d 2540px 2600px, #fa77b0 2600px 2660px, #f9a2c8 2660px 2720px, #f9c7de 2720px); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.2" data-width="1920" data-height="1080">
  <div id="stage" class="clip" data-start="0" data-duration="1.2">
    <div id="a" class="scene"><div class="t">“Edit in words.”</div></div>
    <div id="b" class="scene"><div class="t">“Another colour.”</div></div>
    <div id="wipe"></div>
  </div>
</div>
<script>
document.fonts.ready.then(() => {
const tl = gsap.timeline({ paused: true });
const T = 0.2;                                            // the wipe starts here; it covers the frame at T + 0.1
gsap.set("#wipe", { x: -2780 });
tl.to("#wipe", { keyframes: [{ x: -2490, duration: 0.05, ease: "power1.in" }, { x: -1724, duration: 0.033, ease: "none" }, { x: -1302, duration: 0.017, ease: "none" },
  { x: 576, duration: 0.05, ease: "none" }, { x: 1400, duration: 0.033, ease: "none" }, { x: 1960, duration: 0.034, ease: "power1.out" }] }, T);
tl.set("#a", { opacity: 0 }, T + 0.117);                  // swap the scenes under full cover
tl.set("#b", { opacity: 1 }, T + 0.117);
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 “Film di lancio app lucido su un beat a 120 bpm”

Film di lancio app lucido su un beat a 120 bpm

<direction> 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. </direction> <structure> 1. 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. 2. 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. 3. 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,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. 5. 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. 6. 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. 7. 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. </structure> <composition> 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. </composition> <techniques> 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. </techniques> <music> 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. </music> <sound> 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. </sound> <references> 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. </references>

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

Showreel di app fluido da 15 secondi in pura motion graphics

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

Newsletter

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

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

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

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