il tuo motion designer AI

IT

Apri l’app beta

Simple Motion

Promo con biglietto, valigia e formati con logo reveal

Un promo motion graphics piatto di 15 secondi: biglietto inclinato, tendine circolari rosa, carte dei passaggi da una valigia, tre pannelli di formato e logo reveal.

Pubblicato 10 novembre 2026Usato 2 volte

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

Segnala questo prompt

Concept

Crea un promo motion graphics orizzontale di 15 secondi (1920x1080, 60 fps) per [your brand], un prodotto che trasforma una descrizione in un video finito (adatta le parole alle tue). L'idea: una richiesta diventa un biglietto, il biglietto si apre su una promessa, una valigia consegna i passaggi uno alla volta, tre formati sfrecciano e tutto atterra sul mio logo. Non c'è voce fuori campo: le parole sono sullo schermo e la musica porta tutto. Tutto è disegnato: grafica 2D piatta con una carta inclinata in 3D, nessun filmato. Lo stile è chiaro, pulito ed energico: un solo accento rosa su una pagina chiara, con un campo scuro color inchiostro profondo. Evita filmati, voce, sfocature dentro le maschere di testo e qualsiasi deriva o distorsione del logo. Il logo si forma intero, esattamente come è disegnato, e resta perfettamente fermo da circa 13,3 s fino alla fine.

Struttura

0–1,9 s, la richiesta. A sinistra, un piccolo sovratitolo rosa spaziato «YOUR AI MOTION DESIGNER» sta sopra un titolo di tre righe di circa 180 px, «Describe» / «the» / «video.» (sostituiscilo con il tuo; l'ultima riga è rosa). Le righe salgono dalle loro linee di base una dopo l'altra. La prima si muove già al fotogramma 0 e le altre seguono a 0,13 s di distanza, lineare, 0,17 s ciascuna. A destra c'è una carta-biglietto bianca inclinata in prospettiva, con il lato sinistro più vicino. Ha un'intestazione rosa «FROM IDEA TO VIDEO» e il mio logo piccolo con «[your brand]» accanto. Due campi, «FROM IDEA · Your idea» e «TO MP4 · Video», sono uniti da una linea tratteggiata con un triangolo play rosa. Porta anche piccole etichette «EDIT WORDS», «STEP 03», «EFFECTS 3D» e «PREVIEW LIVE», un codice a barre e «03» sulla matrice. La carta arriva volando da destra a 0,23 s (power3.out, 0,35 s), supera di circa 125 px verso sinistra e torna ad assestarsi (sine.inOut, 0,37 s). Nel frattempo il codice «MP4» fa scorrere lettere casuali 15 volte al secondo e si blocca lettera per lettera a 0,67, 0,8 e 0,93 s. A 1,17 s un timbro rosa a contorno «MP4 EXPORT», inclinato di -14°, si abbatte da 2,4x in 8 fotogrammi con un minuscolo rimbalzo. A 1,67 s il triangolo play si riduce a un punto rosa che cresce in una tendina circolare centrata su di esso, con due anelli rosa pallido appena fuori dal suo bordo. Il raggio passa per 15, 36, 66, 120, 210, 330, 540, 900 e 1500 px, un passo ogni due fotogrammi. Le righe del titolo escono verso l'alto in ordine mentre il cerchio cresce.
1,9–4,0 s, la promessa, su un campo interamente rosa (radiale, più chiaro al centro). Un triangolo play bianco, un po' più lungo che largo in modo da puntare dove va, nasce dentro il cerchio. Vola in un giro attorno alle parole, ruotato lungo il suo percorso: in alto, a sinistra lungo la parte alta, in basso sul lato sinistro, lungo il fondo, in alto sul lato destro e fuori dall'alto a destra. Dietro di sé disegna un'orbita punteggiata bianca i cui punti più vecchi sfumano in una linea sottile e tenue. Due grandi cerchi tenui stanno sullo sfondo. «No keyframes.» (circa 220 px, bianco) entra oscillando lettera per lettera, a 0,03 s di distanza, su un arco da in basso a destra, partendo da 38° e raddrizzandosi. A 2,8 s vola via verso l'alto lettera per lettera. Nello stesso momento «The agent animates it.» (circa 157 px) sale dalla sua linea di base lettera per lettera, a 16 ms di distanza. A 3,03 s una pillola bianca arrotondata entra da sinistra dietro «animates it.» in 0,18 s, e quelle parole diventano rosa al suo interno. A 3,77 s le parole sfumano sfocandosi. Una valigia color inchiostro profondo con una cinghia rosa e un'etichetta «MP4» cade dall'alto e atterra a 4,02 s con un piccolo schiacciamento.
4,0–8,95 s, i passaggi. Un cerchio chiaro si apre dalla valigia con due anelli rosa pallido, e due ellissi d'onda rosa si espandono dalla sua base. In alto sale «Edit in words.» (attenuato, circa 56 px). Poi «Your idea is ready to move.» (circa 93 px) sale parola per parola, con «move.» in rosa e una sottolineatura rosa disegnata a mano che si traccia sotto. Sopra la valigia arrivano sei carte di passaggio bianche, una ogni 0,58 s. Ogni carta misura 900x165 px ed è arrotondata, con una tessera icona a sinistra e un chip di stato a destra. Ognuna sale da dietro la valigia (da 100 px più in basso e al 72% della dimensione, 0,3 s, power2.inOut) con un chip lavanda «Animating» e uno spinner. Poi si illumina in due tempi: prima un bordo rosa e un morbido alone esterno, 0,07 s dopo la tessera icona diventa rosa e il chip diventa un «✓ Ready» rosa. Quando arriva la carta successiva, la precedente sale di 40 px e svanisce in 0,15 s. Le carte dicono: «Kinetic type», «Shapes», «3D effects», «Sound», «Your own footage», «Fonts for every script» (sostituiscile con le tue). Sotto la valigia, sei puntini e un contatore avanzano a ogni carta, da «1 / 6 in motion» a «6 / 6 in motion». A 7,9 s l'ultima carta cambia sul posto in «Ready to move.» con una tessera spunta e un chip rosa «6 / 6». Il contatore viene sostituito da «✓ Live preview. MP4 export.» A 8,4 s tutto tranne la valigia si solleva e si sfoca. A 8,7 s la camera si tuffa nella valigia finché il suo corpo color inchiostro profondo riempie l'inquadratura.
8,95–11,4 s, i formati. Un gruppo di tre bande oblique spazza da destra a sinistra in 0,2 s e apre un pannello a tutto schermo dietro il suo bordo di uscita. Le bande sono inclinate di circa 18°: una sottile striscia rosa scuro, una larga banda rosa e una sottile striscia rosa chiaro. Lo stesso passaggio ritorna a 9,76 s e 10,5 s. I tre pannelli sono blocchi sfumati morbidi con un orizzonte:

da lavanda a viola, con una luce calda nella metà inferiore;
un cielo viola sopra un «mare» color inchiostro profondo;
un cielo arancione sopra l'inchiostro profondo, con una banda di foschia turchese.
Ogni pannello avanza lentamente da 1,07 a 1 e ha una sfumatura color inchiostro profondo in basso. Il suo nome sale lettera per lettera in basso a sinistra, circa 226 px, in bianco: «Vertical», «Horizontal», «Square». In alto a sinistra c'è un piccolo HUD spaziato: «01 / 03» in rosa chiaro, poi «9:16», poi «MP4 EXPORT» che si digita, con una sottolineatura rosa che cresce sotto. Cambia in «02 / 03 · 16:9 · LIVE PREVIEW» e poi in «03 / 03 · 1:1 · NO KEYFRAMES».

11,4–12,5 s, la griglia. L'ultimo pannello si riduce nella carta di destra mentre gli altri due scivolano da sinistra. Insieme formano tre carte verticali (580x780 px, distanziate di 30 px) su un campo color inchiostro profondo. La griglia avanza dolcemente a 1,05 e si assesta in mezzo secondo. «Vertical, horizontal or square.» sale sopra di essa in bianco. Una volta assestata la griglia, piccoli nomi appaiono in dissolvenza sulle carte («Vertical», «Horizontal», «Square»), ben dentro l'inquadratura.
12,2–15 s, il logo. Un punto rosa cresce dalla carta centrale, con anelli di alone pallidi, mentre la griglia si riduce a 0,9 su una pagina bianca. Il suo raggio è animato ogni due fotogrammi da 12 a 1150 px. Poi il punto si rimpicciolisce veloce e rallenta (260, 125, 90, 75 px) mentre viaggia a sinistra del centro. Lì si apre direttamente nella forma di sfondo del mio logo, senza mai sovrapporsi al logo, e le parti interne del logo crescono come un unico pezzo, esattamente come il logo è disegnato. A 13,03 s «[your brand]» scivola fuori da dietro il logo verso destra (power3.out, 0,32 s), mentre un sottile anello rosa si espande attorno al logo e svanisce. Il nome è di circa 150 px, color inchiostro profondo, con le lettere centrate sulla linea mediana del logo e l'intero lockup centrato nell'inquadratura. Poi «Describe the video. The agent animates it.» sale parola per parola sotto, con la seconda frase in rosa. Compaiono tre chip lavanda: «• Vertical», «• Horizontal», «• Square». «[your website]» sale in grigio attenuato. Il logo resta perfettamente fermo da circa 13,3 s, e tutto regge fino alla fine.

Composizione

La base è una pagina chiara #FAF9FF con una tenue griglia di punti da 40 px #E9E4F2 e morbidi bagliori radiali rosa. L'inchiostro profondo #1C0B5D è per il testo scuro, gli oggetti scuri e il campo scuro. C'è un solo accento, il rosa #FB2D89, per evidenziazioni, il campo d'accento e l'avanzamento. L'attenuato #6B6385 è per le righe secondarie e il lavanda #F0EDFF per i chip morbidi. Arancione #FE9117, viola #7C6CF2 e turchese #2DD4B0 compaiono solo nei tre pannelli dei formati (e nel mio logo se li usa). I titoli usano un sans geometrico pesante, Manrope ExtraBold, con crenatura stretta di circa -0,05em. Le piccole etichette, il testo HUD e il sito web usano un sans pulito, Inter SemiBold. Layout per inquadratura:

Inquadratura 1: titolo a sinistra, biglietto inclinato a destra.
Inquadratura 2: parole centrate sul campo rosa.
Inquadratura 3: carte dei passaggi impilate sopra la valigia, puntini e contatore sotto, titolo in alto.
Inquadratura 4: nomi dei formati in basso a sinistra, HUD in alto a sinistra.
Inquadratura 6: lockup finale centrato, con payoff, chip e sito web impilati sotto.

Tecniche

Le rivelazioni sono pulite. Il testo sale dalla propria linea di base dentro un ritaglio che si muove con esso, mai una sfocatura dentro una maschera. Le uscite accelerano e spariscono in circa 0,1 s.

Le tendine circolari crescono in raggi a gradini animati ogni due fotogrammi, con anelli rosa pallido appena fuori dal bordo.
Il codice del biglietto scorre e si blocca lettera per lettera.
Il timbro si abbatte da 2,4x con un minuscolo rimbalzo.
Le lettere entrano su un arco rotante, e la pillola di evidenziazione spazza dietro parole che cambiano colore al suo interno.
Le carte dei passaggi si illuminano in due tempi: prima bordo e alone, poi la tessera e il chip.
La camera si tuffa nella valigia a scala 1,5, 3,1, 6,2 e 7 in un quarto di secondo.
Passaggi obliqui a tre bande portano le transizioni tra i pannelli dei formati, e ogni pannello avanza lentamente.
Il singolo pannello collassa in una griglia di tre carte.
Un punto viaggia e si apre nel logo, che si costruisce come un unico pezzo e non si muove né si deforma mai una volta formato.

Musica

Usa un brano originale di house elettronica vivace e ottimista a 120 BPM, esattamente 15 s. Il groove completo suona dal primo fotogramma, con un kick su ogni battito a circa x,05 e x,55 s. Resta costante sotto le carte e i formati. La batteria sparisce a 12,55 s quando il punto inghiotte la griglia, lasciando un pad caldo e un arpeggio ascendente che svaniscono verso i 15 s. Tagli e colpi chiave cadono sulla griglia dei battiti.

Suono

Il sound design sta sopra il brano, senza batteria aggiuntiva:

un whoosh quando il biglietto arriva volando;
tic leggeri quando il codice si blocca;
un impatto morbido sul timbro;
whoosh su ogni tendina circolare e sulla pillola di evidenziazione;
un tonfo quando la valigia atterra;
un blip che sale di tono quando ogni carta diventa rosa;
un chime quando atterra l'ultima carta;
un riser verso il tuffo e un impatto quando si apre il primo pannello;
whoosh a ogni passaggio di bande e quando le carte si uniscono;
un riser verso il drop;
una campana quando si forma il logo;
click leggeri sui chip.
Missa a circa -14 LUFS con un picco reale sotto -1 dBTP.

Riferimenti

Una moderna pubblicità di lancio app in stile vettoriale piatto, costruita su tipografia cinetica e una metafora di viaggio: una carta d'imbarco, una valigia e pannelli con orizzonte. Si chiude su un lockup del logo pulito e centrato.

Cosa preparare

Il tuo logo, idealmente vettoriale o PNG trasparente; appare piccolo sulla carta del biglietto e si forma da un punto rosa nel lockup finale.

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 “Salita dalla linea di base con clip abbinato” — A 0:00 nel video

Tipografia

Salita dalla linea di base con clip abbinato

Un sopratitolo e un titolo su tre righe salgono dalle proprie linee di base: ogni riga si sposta verso l'alto della propria altezza mentre l'inset inferiore del suo clip-path si riduce alla stessa velocità, così la linea di base resta un bordo netto e fisso e nulla si sfoca dentro la maschera. La prima riga è già in movimento al fotogramma 0 (sine.in dall'88 %), le altre due seguono a circa 0,13 s di distanza con easing lineare in 0,17 s, per cui il blocco si legge come un unico gesto; l'ultima riga prende il colore d'accento. Escono allo stesso modo verso l'alto, in ordine di lettura, ognuna sparisce in 0,1 s.

Quando usarla Aprire un promo con un grande titolo su più righe che deve leggersi nel primo secondo.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Salita dalla linea di base con clip abbinato</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--line) 0 1.6px, transparent 2.2px); background-size: 40px 40px; }
#kicker { position: absolute; left: 110px; top: 650px; font: 800 30px/1 "Manrope"; letter-spacing: 0.16em; color: var(--accent); }
#head { position: absolute; left: 100px; top: 700px; font: 800 200px/192px "Manrope"; letter-spacing: -0.055em; }
.ln { white-space: nowrap; }
.ln span { display: inline-block; padding: 0.12em 0.06em 0.16em; margin: -0.12em -0.06em -0.16em; }
.acc { color: var(--accent); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="4">
    <div id="kicker" class="ln"><span></span></div>
    <div id="head"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const KICKER = "YOUR ONLY TASK";          // example text
const LINES = ["Write", "the", "brief."]; // example text; the last line takes the accent
document.querySelector("#kicker span").textContent = KICKER;
const head = document.getElementById("head");
LINES.forEach((w, i) => {
  const ln = document.createElement("div"); ln.className = "ln";
  const sp = document.createElement("span"); sp.textContent = w; if (i === LINES.length - 1) sp.className = "acc";
  ln.appendChild(sp); head.appendChild(ln);
});
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
const spans = [...head.querySelectorAll(".ln span")];
rise(document.querySelector("#kicker span"), 0.03, 0.12, "none");
rise(spans[0], 0, 0.24, "sine.in", 88); // already moving on frame 0
rise(spans[1], 0.18, 0.18, "none");     // about 0.13 s apart, linear
rise(spans[2], 0.32, 0.17, "none");
sink(document.querySelector("#kicker span"), 3.1, 0.1);
spans.forEach((el, i) => sink(el, 3.15 + i * 0.08, 0.1)); // out upwards in reading order
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 circolare da un'icona con anelli di alone” — A 0:01 nel video

Transizione

Wipe circolare da un'icona con anelli di alone

La scena successiva viene rivelata da un clip-path circle centrato su una piccola icona della scena attuale, e l'icona stessa si rimpicciolisce quando parte il cerchio. Il raggio ha keyframe ogni due fotogrammi a 60 fps (15, 36, 66, 120, 210, 330, 540, 900, 1500 px): una crescita accelerata che copre l'inquadratura in circa 0,3 s. Due cerchi pieni e tenui a 1,07 r + 6 e 1,17 r + 12, in tinte dell'accento, stanno nella scena uscente appena fuori dal bordo, così il wipe sembra un'onda; l'icona della nuova scena parte più grande del 35 % e si assesta.

Quando usarla Passare da un dettaglio (un'icona, un pulsante) a una scena a colori pieni che ne continua l'idea.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wipe circolare da un'icona con anelli di alone</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#a, #b { position: absolute; inset: 0; }
.card { position: absolute; left: 140px; top: 820px; width: 800px; height: 160px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px rgba(28, 11, 93, 0.14); display: flex; align-items: center; gap: 28px; padding-left: 360px; box-sizing: border-box; font: 800 52px/1 "Manrope"; }
.icon { position: absolute; left: 374px; top: 54px; width: 52px; height: 52px; fill: var(--accent); }
.ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
#r1 { background: color-mix(in srgb, var(--accent) 48%, white); }
#r2 { background: color-mix(in srgb, var(--accent) 22%, white); }
#b { background: radial-gradient(ellipse 80% 70% at 50% 45%, #fd4c9c 0%, #e2187a 100%); clip-path: circle(0px at 540px 900px); }
.icon2 { position: absolute; left: 510px; top: 870px; width: 60px; height: 60px; fill: #fff; }
#title { position: absolute; left: 0; width: 1080px; top: 1060px; text-align: center; font: 800 120px/1 "Manrope"; letter-spacing: -0.05em; color: #fff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="a" class="clip" data-start="0" data-duration="1.4">
    <div class="card"><svg class="icon" viewBox="0 0 24 24"><path d="M8.9 4.6 19.1 11.2a1 1 0 0 1 0 1.6L8.9 19.4A1 1 0 0 1 7.4 18.6V5.4a1 1 0 0 1 1.5-.8Z"/></svg><span id="label"></span></div>
    <div id="r2" class="ring"></div><div id="r1" class="ring"></div>
  </div>
  <div id="b" class="clip" data-start="0.95" data-duration="2.05">
    <svg class="icon2" viewBox="0 0 24 24"><path d="M8.9 4.6 19.1 11.2a1 1 0 0 1 0 1.6L8.9 19.4A1 1 0 0 1 7.4 18.6V5.4a1 1 0 0 1 1.5-.8Z"/></svg>
    <div id="title"></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
document.getElementById("label").textContent = "Ticket";  // example text
document.getElementById("title").textContent = "Next.";   // example text
const C = { x: 540, y: 900 }; // the icon's centre: the circle grows from here
const iris = { r: 0 }, b = document.getElementById("b"), r1 = document.getElementById("r1"), r2 = document.getElementById("r2");
const ring = (el, r) => Object.assign(el.style, { width: 2 * r + "px", height: 2 * r + "px", transform: `translate(${C.x - r}px, ${C.y - r}px)` });
const draw = () => {
  b.style.clipPath = `circle(${iris.r}px at ${C.x}px ${C.y}px)`;
  ring(r1, iris.r ? iris.r * 1.07 + 6 : 0);  // two pale rings ride just outside the edge
  ring(r2, iris.r ? iris.r * 1.17 + 12 : 0);
};
draw();
const R = [15, 36, 66, 120, 210, 330, 540, 900, 1500]; // radius every 2 frames at 60 fps
tl.fromTo(iris, { r: 0 }, { keyframes: R.map((r) => ({ r, duration: 2 / 60, ease: "none" })), onUpdate: draw }, 1.0);
tl.fromTo(".icon", { scale: 1, opacity: 1 }, { scale: 0.3, opacity: 0, duration: 4 / 60, ease: "power2.in", transformOrigin: "50% 50%" }, 0.97);
tl.fromTo(".icon2", { scale: 1.35 }, { scale: 1, duration: 0.3, ease: "power2.out", transformOrigin: "50% 50%" }, 1.1);
tl.fromTo("#title", { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, ease: "power3.out" }, 1.45);
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 “Codice di destinazione che si mescola e si blocca lettera per lettera” — A 0:00 nel video

Tipografia

Codice di destinazione che si mescola e si blocca lettera per lettera

Una carta biglietto entra da destra con power3.out, supera di circa 110 px verso sinistra e si assesta con sine.inOut, mentre il suo codice di tre lettere cicla lettere casuali quindici volte al secondo (ogni quattro fotogrammi a 60 fps). Le lettere si bloccano una alla volta, a 0,13 s di distanza, sul codice vero. La casualità è un hash con seme del numero del passo, quindi ogni render mostra le stesse lettere; nulla dipende da un orologio.

Quando usarla Rivelare una destinazione, un codice, un prezzo o un nome con l'effetto di un tabellone a palette.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Codice di destinazione che si mescola e si blocca lettera per lettera</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; }
#card { position: absolute; left: 120px; top: 760px; width: 840px; height: 400px; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 34px 70px rgba(28, 11, 93, 0.16); }
.bar { position: absolute; left: 0; top: 0; right: 0; height: 80px; background: var(--accent); }
.from, .to { position: absolute; top: 130px; font: 700 18px/1 "Manrope"; letter-spacing: 0.14em; color: var(--muted); }
.from { left: 50px; } .to { right: 50px; }
.a, .b { position: absolute; top: 160px; font: 800 96px/1 "Manrope"; letter-spacing: 0.06em; }
.a { left: 46px; } .b { right: 46px; text-align: right; }
.line { position: absolute; left: 330px; right: 330px; top: 210px; border-top: 3px dashed var(--line); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="card"><div class="bar"></div><div class="from">FROM</div><div class="to">TO</div><div class="a" id="codeA"></div><div class="b" id="code"></div><div class="line"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
document.getElementById("codeA").textContent = "NOW";  // example codes
const TARGET = "MP4";
const LOCKS = [0.67, 0.8, 0.93]; // each letter locks on its own frame
const RATE = 15;                  // random letters change 15 times a second
const LET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const hash = (n) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); }; // seeded
const el = document.getElementById("code"), p = { t: 0 };
const draw = () => {
  const step = Math.floor(p.t * RATE);
  el.textContent = [...TARGET].map((c, i) => (p.t >= LOCKS[i] ? c : LET[Math.floor(hash(step * 3 + i) * LET.length)])).join("");
};
tl.fromTo(p, { t: 0.2 }, { t: 3, duration: 2.8, ease: "none", onUpdate: draw }, 0.2);
// the card: in from the right, overshoot left, settle
tl.fromTo("#card", { x: 1000 }, { keyframes: [{ x: -110, duration: 0.35, ease: "power3.out" }, { x: 0, duration: 0.37, ease: "sine.inOut" }] }, 0.23);
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 “Pillola evidenziatrice che scorre dietro le ultime parole” — A 0:03 nel video

Tipografia

Pillola evidenziatrice che scorre dietro le ultime parole

Una riga bianca su un campo d'accento sale lettera per lettera dalla sua linea di base (16 ms di distanza, 0,22 s ciascuna, power3.out). Poi una pillola bianca arrotondata scorre da sinistra dietro le ultime parole in 0,18 s (power2.inOut), e un gemello delle stesse lettere nel colore d'accento si vede solo dentro la pillola attraverso lo stesso clip, così le parole passano da bianco su colore a colore su bianco esattamente dove è arrivata la pillola. La pillola è dimensionata sulle lettere misurate dopo il caricamento del font.

Quando usarla Sottolineare il punto chiave di una frase senza una seconda riga di testo.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pillola evidenziatrice che scorre dietro le ultime parole</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 42%, #fd4c9c 0%, #e2187a 100%); }
.t { position: absolute; top: 880px; font: 800 112px/1 "Manrope"; letter-spacing: -0.045em; color: #fff; white-space: nowrap; }
.t .ch { display: inline-block; white-space: pre; }
#hl { position: absolute; inset: 0; clip-path: inset(0px 1080px 0px 0px); }
#pill { position: absolute; top: 868px; height: 132px; border-radius: 22px; background: #fff; }
#twin { color: var(--accent); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3">
    <div id="line" class="t"></div>
    <div id="hl"><div id="pill"></div><div id="twin" class="t"></div></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const TEXT = "We do the rest.", HIGHLIGHT = "the rest."; // example text
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
document.fonts.ready.then(() => {
  const split = (el) => { [...TEXT].forEach((c) => { const s = document.createElement("span"); s.className = "ch"; s.textContent = c; el.appendChild(s); }); return [...el.children]; };
  const line = document.getElementById("line"), twin = document.getElementById("twin");
  const A = split(line), B = split(twin);
  line.style.left = twin.style.left = (1080 - line.offsetWidth) / 2 + "px";
  const i0 = TEXT.indexOf(HIGHLIGHT), a = A[i0], z = A[i0 + HIGHLIGHT.length - 1];
  const x = line.offsetLeft + a.offsetLeft - 16, w = z.offsetLeft + z.offsetWidth - a.offsetLeft + 34;
  Object.assign(document.getElementById("pill").style, { left: x + "px", width: w + "px" });
  A.forEach((ch, i) => rise([ch, B[i]], 0.2 + i * 0.016, 0.22, "power3.out"));
  const hl = document.getElementById("hl"), p = { v: 0 };
  tl.fromTo(p, { v: 0 }, { v: 1, duration: 0.18, ease: "power2.inOut", onUpdate: () => { hl.style.clipPath = `inset(0px ${1080 - x - w * p.v}px 0px ${x}px)`; } }, 0.75);
  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 “Card dei passaggi che emergono da dietro un oggetto e si accendono” — A 0:06 nel video

Dati

Card dei passaggi che emergono da dietro un oggetto e si accendono

Ogni passaggio è una card bianca che sale da dietro un oggetto scuro sottostante (y +100 px e scale 0,72 fino a riposo in 0,3 s, power2.inOut), aspetta, poi si accende in due tempi: prima bordo e alone esterno, 0,07 s dopo il riquadro dell'icona e il chip di stato. Quando parte la card successiva, la vecchia sale di 40 px e svanisce in 0,15 s con easing lineare, così la pila mantiene una sola card in primo piano. Una fila di puntini e un contatore 'n / total' avanzano a ogni accensione; il periodo è di 0,58 s per card.

Quando usarla Mostrare una checklist, un flusso di onboarding o una pipeline che si completa 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>Card dei passaggi che emergono da dietro un oggetto e si accendono</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#stage { position: absolute; inset: 0; }
.pc { position: absolute; left: 90px; top: 700px; width: 900px; height: 165px; }
.halo { position: absolute; inset: -19px; border-radius: 46px; border: 2px solid color-mix(in srgb, var(--accent) 42%, white); opacity: 0; }
.body { position: absolute; inset: 0; border-radius: 28px; background: #fff; border: 2px solid var(--line); box-shadow: 0 26px 56px rgba(28, 11, 93, 0.13); }
.on { position: absolute; inset: -2px; border-radius: 28px; border: 3px solid var(--accent); opacity: 0; }
.tile, .tile-on { position: absolute; left: 30px; top: 27px; width: 108px; height: 108px; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.tile { background: color-mix(in srgb, var(--accent) 11%, white); } .tile-on { background: var(--accent); opacity: 0; }
.tile svg, .tile-on svg { width: 50px; height: 50px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile svg { stroke: var(--accent); } .tile-on svg { stroke: #fff; }
.label { position: absolute; left: 166px; top: 0; height: 100%; display: flex; align-items: center; font: 800 52px/1 "Manrope"; letter-spacing: -0.03em; }
.chip { position: absolute; right: 40px; top: 54px; height: 57px; padding: 0 24px; border-radius: 30px; display: flex; align-items: center; font: 700 28px/1 "Manrope"; }
.wait { background: var(--line); color: var(--muted); } .done { background: var(--accent); color: #fff; opacity: 0; }
#case { position: absolute; left: 425px; top: 930px; width: 230px; height: 290px; border-radius: 42px; background: var(--ink); overflow: hidden; }
.strap { position: absolute; left: 0; right: 0; top: 110px; height: 34px; background: var(--accent); }
#prog { position: absolute; left: 0; width: 1080px; top: 1300px; display: flex; justify-content: center; align-items: center; gap: 24px; font: 700 30px/1 "Manrope"; }
#dots { display: flex; gap: 13px; } .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1080" data-height="1920">
  <div id="stage" class="clip" data-start="0" data-duration="3.5">
    <div id="cards"></div>
    <div id="case"><div class="strap"></div></div>
    <div id="prog"><div id="dots"></div><span id="count"></span></div>
  </div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const ICONS = {"type": "M4 7V4h16v3M9 20h6M12 4v16", "cube": "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16ZM3.3 7 12 12l8.7-5M12 22V12", "note": "M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0M21 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0"};
const STEPS = [["Type", "type"], ["3D", "cube"], ["Sound", "note"]]; // example labels and their icons
const START = [0.2, 0.78, 1.36], ON = [0.62, 1.2, 1.78];               // 0.58 s per card
const svg = (d) => `<svg viewBox="0 0 24 24"><path d="${d}"/></svg>`;
const cards = document.getElementById("cards");
STEPS.forEach(([label, icon], i) => {
  const c = document.createElement("div"); c.className = "pc";
  c.innerHTML = `<div class="halo"></div><div class="body"><div class="on"></div><div class="tile">${svg(ICONS[icon])}</div><div class="tile-on">${svg(ICONS[icon])}</div><div class="label"></div><div class="chip wait">Working</div><div class="chip done">Done</div></div>`;
  c.querySelector(".label").textContent = label;
  cards.appendChild(c);
  tl.fromTo(c, { y: 100, scale: 0.72, opacity: 0 }, { y: 0, scale: 1, opacity: 1, duration: 0.3, ease: "power2.inOut" }, START[i]);
  tl.fromTo(c.querySelectorAll(".on, .halo"), { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "power1.out" }, ON[i] - 0.07); // border first
  tl.fromTo(c.querySelectorAll(".tile-on, .done"), { opacity: 0 }, { opacity: 1, duration: 0.06, ease: "power1.out" }, ON[i]); // then icon and chip
  tl.fromTo(c.querySelector(".wait"), { opacity: 1 }, { opacity: 0, duration: 0.06, ease: "power1.out" }, ON[i]);
  if (i < STEPS.length - 1) tl.fromTo(c, { y: 0, opacity: 1 }, { y: -40, opacity: 0, duration: 0.15, ease: "none", immediateRender: false }, START[i + 1] - 0.02);
});
const dots = document.getElementById("dots"), count = document.getElementById("count"), p = { t: 0 };
STEPS.forEach(() => { const d = document.createElement("div"); d.className = "dot"; dots.appendChild(d); });
const draw = () => {
  const n = ON.filter((a) => p.t >= a).length;
  count.textContent = `${n} / ${STEPS.length}`;
  [...dots.children].forEach((d, k) => { d.style.background = k < n ? "var(--accent)" : "var(--line)"; d.style.transform = `scale(${k === n - 1 ? 1.6 : 1})`; });
};
draw();
tl.fromTo(p, { t: 0 }, { t: 3.5, duration: 3.5, ease: "none", onUpdate: 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 “Wipe a bande oblique tra pannelli a tutto schermo” — A 0:09 nel video

Transizione

Wipe a bande oblique tra pannelli a tutto schermo

Un gruppo di tre bande oblique (skewX -18,4 deg: una striscia scura, una larga banda d'accento, una striscia chiara) attraversa l'inquadratura da destra a sinistra in circa 0,2 s con sine.inOut. Il pannello a tutto schermo successivo viene rivelato da un polygon clip-path il cui bordo sinistro segue il bordo posteriore delle bande: il vecchio pannello resta visibile davanti alle bande e il nuovo si apre dietro. Poi ogni pannello alza il suo grande nome lettera per lettera dalla linea di base (35 ms di distanza).

Quando usarla Scorrere un elenco di luoghi, prodotti o formati al ritmo del beat.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wipe a bande oblique tra pannelli a tutto schermo</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
.pan { position: absolute; inset: 0; overflow: hidden; }
#p0 { background: linear-gradient(180deg, #e9e4ff 0%, #7c6cf2 55%, #1c0b5d 100%); }
#p1 { background: linear-gradient(180deg, #fe9117 0%, #fb2d89 50%, #1c0b5d 100%); }
#p2 { background: linear-gradient(180deg, #2dd4b0 0%, #1c0b5d 70%); }
.name { position: absolute; left: 70px; top: 1500px; font: 800 190px/1.1 "Manrope"; letter-spacing: -0.05em; color: #fff; white-space: nowrap; }
.name span { display: inline-block; white-space: pre; }
#band { position: absolute; left: 0; top: -100px; width: 700px; height: 2120px; display: flex; transform: translateX(2200px) skewX(-18.4deg); }
#band .d { width: 60px; background: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
#band .m { width: 580px; background: var(--accent); }
#band .l { width: 60px; background: color-mix(in srgb, var(--accent) 55%, white); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1920">
  <div id="p0" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="p1" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="p2" class="pan clip" data-start="0" data-duration="3"><div class="name"></div></div>
  <div id="band" class="clip" data-start="0" data-duration="3"><div class="d"></div><div class="m"></div><div class="l"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NAMES = ["Vertical", "Wide", "Square"]; // example names
const LEAN = 320; // horizontal shift of the slant over half the frame height (tan 18.4 deg x 960)
// rise: the line moves up by its own height while the bottom of its clip shrinks at the same rate,
// so the baseline stays a fixed, sharp edge (no blur inside the mask)
function rise(el, at, dur, ease, from = 100) {
  tl.fromTo(el, { yPercent: from, clipPath: `inset(-20% -10% ${from}% -10%)` },
    { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)", duration: dur, ease }, at);
}
function sink(el, at, dur) {
  tl.fromTo(el, { yPercent: 0, clipPath: "inset(-20% -10% 0% -10%)" },
    { yPercent: -100, clipPath: "inset(100% -10% -20% -10%)", duration: dur, ease: "power2.in", immediateRender: false }, at);
}
const band = document.getElementById("band");
const clipAt = (x) => `polygon(${x + LEAN}px 0px, 2600px 0px, 2600px 1920px, ${x - LEAN}px 1920px)`;
["#p0", "#p1", "#p2"].forEach((sel, k) => {
  const pan = document.querySelector(sel), name = pan.querySelector(".name");
  [...NAMES[k]].forEach((c) => { const s = document.createElement("span"); s.textContent = c; name.appendChild(s); });
  const t0 = k * 1.0;
  if (k > 0) {
    pan.style.clipPath = clipAt(2400);
    const w = { x: 2400 };
    tl.fromTo(w, { x: 2400 }, { x: -480, duration: 0.2, ease: "sine.inOut", immediateRender: false, onUpdate: () => {
      band.style.transform = `translateX(${w.x - 700}px) skewX(-18.4deg)`; // the trailing edge is at w.x
      pan.style.clipPath = clipAt(w.x);
    } }, t0 - 0.2);
  }
  [...name.children].forEach((ch, i) => rise(ch, t0 + 0.05 + i * 0.035, 0.26, "power3.out"));
});
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 “Punto che inghiotte l'inquadratura e diventa il marchio” — A 0:12 nel video

Transizione

Punto che inghiotte l'inquadratura e diventa il marchio

Un punto d'accento cresce dalla card centrale (raggio con keyframe ogni due fotogrammi: da 12 a 1150 px in circa 0,3 s, con due anelli di alone tenui) mentre il layout sotto si riduce a 0,9 su una pagina bianca. Poi si rimpicciolisce in fretta e rallenta (a 260, 125, 90 e 75 px in 0,4 s) viaggiando verso il posto del marchio, dove il cerchio diventa il quadrato arrotondato del marchio (rx da 50 a 24, da accento a inchiostro scuro, 0,12 s) e le forme interne entrano in scala. Il nome scivola fuori da dietro il marchio (power3.out, 0,32 s) attraverso un clip al centro del marchio, e un sottile anello si espande e svanisce attorno ad esso.

Quando usarla Chiudere un promo: far collassare tutto in un punto che diventa il logo.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Punto che inghiotte l'inquadratura e diventa il marchio</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=block");
:root { --page: #faf9ff; --ink: #1c0b5d; --accent: #fb2d89; --muted: #6b6385; --line: #e9e4f2; }
html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: var(--page); }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Manrope", sans-serif; color: var(--ink); }
#end { position: absolute; inset: 0; background: #fff; }
#grid { position: absolute; inset: 0; background: var(--ink); display: flex; flex-direction: column; gap: 30px; padding: 260px 120px; box-sizing: border-box; }
#grid .c { flex: 1; border-radius: 24px; background: linear-gradient(180deg, #7c6cf2, #1c0b5d); }
#dotl { position: absolute; inset: 0; pointer-events: none; }
.dd { position: absolute; left: 0; top: 0; border-radius: 50%; }
#dot { background: var(--accent); } #h1 { background: color-mix(in srgb, var(--accent) 55%, white); } #h2 { background: color-mix(in srgb, var(--accent) 25%, white); }
#mark { position: absolute; top: 845px; width: 150px; height: 150px; opacity: 0; }
#wclip { position: absolute; inset: 0; }
#word { position: absolute; top: 820px; font: 800 150px/1.2 "Manrope"; letter-spacing: -0.045em; white-space: nowrap; }
#ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 58%, white); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1920">
  <div id="end" class="clip" data-start="0" data-duration="4">
    <div id="ring"></div>
    <div id="wclip"><div id="word"></div></div>
    <svg id="mark" viewBox="0 0 100 100"><rect class="bg" width="100" height="100" rx="24" fill="#1c0b5d"/><g class="in"><circle cx="50" cy="50" r="27" fill="#fe9117"/><path d="M42 36 66 50 42 64Z" fill="#fff"/></g></svg>
  </div>
  <div id="grid" class="clip" data-start="0" data-duration="1.2"><div class="c"></div><div class="c mid"></div><div class="c"></div></div>
  <div id="dotl" class="clip" data-start="0" data-duration="2"><div id="h2" class="dd"></div><div id="h1" class="dd"></div><div id="dot" class="dd"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NAME = "Brand"; // example name
document.fonts.ready.then(() => {
  const word = document.getElementById("word"); word.textContent = NAME;
  const W = word.offsetWidth, L0 = 540 - (150 + 40 + W) / 2, MX = L0 + 75, MY = 920; // mark, gap and name centred together
  document.getElementById("mark").style.left = L0 + "px";
  word.style.left = L0 + 190 + "px";
  document.getElementById("wclip").style.clipPath = `inset(0px 0px 0px ${MX}px)`;
  const at = (el, x, y, r) => Object.assign(el.style, { width: 2 * r + "px", height: 2 * r + "px", transform: `translate(${x - r}px, ${y - r}px)` });
  const d = { r: 0, x: 540, y: 960, h: 1 }, dot = document.getElementById("dot"), h1 = document.getElementById("h1"), h2 = document.getElementById("h2");
  const draw = () => { at(dot, d.x, d.y, d.r); at(h1, d.x, d.y, d.r ? d.r * 1.06 + 8 : 0); at(h2, d.x, d.y, d.r ? d.r * 1.14 + 18 : 0); h1.style.opacity = h2.style.opacity = d.h; };
  draw();
  // grow out of the middle card, two frames per key at 60 fps
  tl.fromTo(d, { r: 0 }, { keyframes: [12, 30, 48, 90, 150, 270, 570, 900, 1150].map((r) => ({ r, duration: 2 / 60, ease: "none" })), onUpdate: draw }, 0.4);
  tl.fromTo("#grid", { scale: 1 }, { scale: 0.9, duration: 0.12, ease: "power1.in", transformOrigin: "50% 50%" }, 0.58);
  tl.fromTo(d, { h: 1 }, { h: 0, duration: 0.05, ease: "none", onUpdate: draw, immediateRender: false }, 0.7);
  // shrink fast, then slow, onto the mark
  tl.to(d, { keyframes: [{ r: 260, x: 540 + (MX - 540) * 0.82, y: 960 + (MY - 960) * 0.9, duration: 0.08, ease: "power2.in" }, { r: 125, x: 540 + (MX - 540) * 0.93, y: MY, duration: 0.1, ease: "none" },
    { r: 90, x: 540 + (MX - 540) * 0.97, y: MY, duration: 0.1, ease: "none" }, { r: 75, x: MX, y: MY, duration: 0.11, ease: "power1.out" }], onUpdate: draw }, 0.72);
  tl.fromTo("#dotl", { opacity: 1 }, { opacity: 0, duration: 0.02, ease: "none" }, 1.12);
  // the circle becomes the mark
  tl.fromTo("#mark", { opacity: 0 }, { opacity: 1, duration: 0.01, ease: "none" }, 1.1);
  tl.fromTo("#mark .bg", { attr: { rx: 50 }, fill: "#fb2d89" }, { attr: { rx: 24 }, fill: "#1c0b5d", duration: 0.12, ease: "power2.out" }, 1.11);
  tl.fromTo("#mark .in", { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.12, ease: "power2.out", svgOrigin: "50 50" }, 1.13);
  // the name slides out from behind it; a ring spreads and fades
  tl.fromTo("#word", { x: -(115 + W) }, { x: 0, duration: 0.32, ease: "power3.out" }, 1.23);
  const ring = document.getElementById("ring"), g = { r: 110, o: 0 };
  const drawRing = () => { at(ring, MX, MY, g.r); ring.style.opacity = g.o; };
  drawRing();
  tl.fromTo(g, { r: 110, o: 1 }, { keyframes: [{ r: 175, duration: 0.17, ease: "power2.out" }, { r: 260, o: 0.6, duration: 0.25, ease: "sine.out" }, { r: 300, o: 0, duration: 0.2, ease: "power1.in" }], onUpdate: drawRing, immediateRender: false }, 1.17);
  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 “Video di lancio app cinetico con mockup di interfaccia animato”

Video di lancio app cinetico con mockup di interfaccia animato

<direction> Realizza un video cinetico di lancio prodotto orizzontale 1920x1080 di 42 secondi per [your app]. Mostra come un fondatore crea un video di lancio per la sua startup semplicemente chattando nell'app. Ricostruisci l'interfaccia della mia app dai miei screenshot come un mockup animato pulito fatto di forme e testo, vicino all'originale. In questo video è un'app scura blu notte-viola con una Live preview a sinistra, schede Chat / Files / Panels a destra e pulsanti d'accento rosa. Non mostrare mai gli screenshot come immagini fisse: ogni elemento deve muoversi. Mantieni un'unica interfaccia continua senza stacchi netti. La camera avanza, panoramica e arretra tra i pannelli mentre un cursore si muove e clicca. Resta su una griglia ritmica a 120 BPM (un battito = 0,5 s) e fai succedere qualcosa a ogni battito. Parole cinetiche enormi si schiantano sull'interfaccia tra un passaggio e l'altro. La startup del fondatore è un'app inventata, ad esempio "Pulse — standups your team actually reads" (sostituiscila con la tua). Evita stacchi netti, screenshot statici, qualsiasi cosa tagliata ai bordi dell'inquadratura e testo o barre di evidenziazione che invadono le colonne vicine. </direction> <structure> 1) Hook, 0–3 s: "YOUR LAUNCH VIDEO." poi "IN ONE CHAT." in caratteri enormi, tagliati parola per parola a tempo. "CHAT." si trasforma nella scheda Chat e la camera arretra sull'intera finestra dell'app. 2) Riferimenti, 3–8 s: un link "pulse-demo.app" viene incollato nella chat. Un pitch deck PDF e un logo volano dentro come schede allegato e scattano al loro posto. Parola grande "DROP". 3) Prompt, 8–13 s: il fondatore digita "Make a 30-second launch video for Pulse, kinetic style, our colours" lettera per lettera, poi il cursore tocca invia. Parola grande "ASK". 4) Piano, 13–18 s: l'agente risponde con un piano in cinque passaggi come lista di controllo. I passaggi compaiono e vengono spuntati uno a uno, e la camera arretra un po' a ogni nuova riga così l'inquadratura non sembra mai vuota. Parola grande "PLAN". 5) Schizzo e Go, circa 18–21 s: uno schizzo grigio a struttura del promo riempie rapidamente la Live preview, con l'etichetta "Live preview" e la barra di riproduzione in vista. Il fondatore clicca Go, e uno sfondo rosa cresce dal pulsante premuto e inonda lo schermo dietro un enorme "GO!". 6) Live, circa 21–31 s: righe di stato compaiono nella chat ("Picking fonts", "Animating the title", "Writing a soundtrack") mentre lo schizzo si trasforma nel promo finito. La camera avanza finché il promo riempie l'inquadratura. Verso i 27 s il titolo del promo "Standups your team actually reads." scivola dentro e una barra di evidenziazione lime si disegna sotto "actually reads.". Accanto c'è una colonna di statistiche con "92%" e "updates read". Parola grande "LIVE". 7) Esportazione, circa 31–37 s: la camera arretra sull'app. Il pulsante Export e le schede sono completamente visibili mentre l'esportazione procede e si completa. Parola grande "DONE". 8) Schermata finale, circa 37–42 s: il logo di [your app] e "Live on [launch site] today" (sostituisci con il tuo), che si posano sull'ultimo battito e restano fino alla fine. </structure> <composition> Palette: interfaccia scura blu notte-viola, pulsanti d'accento rosa magenta e l'inondazione rosa, un gradiente rosa-arancione sul logo e il lime come colore di evidenziazione dentro il promo demo. Le parole cinetiche sono enormi, in grassetto, maiuscole, sans-serif nei font del brand e occupano gran parte della larghezza dell'inquadratura. Riduci leggermente una parola lunga piuttosto che lasciarla tagliare. Mantieni margini di sicurezza ovunque. Nelle inquadrature ampie l'intera finestra dell'app è nel frame. Nella chat il campo di input è completamente visibile. Nella scena di esportazione il pulsante Export e le schede sono nel frame. Nel promo il titolo e la barra lime restano nella loro colonna con spazio in abbondanza. La barra ha esattamente la larghezza delle sue parole e non si sovrappone mai alla colonna "92%". </composition> <techniques> Una camera virtuale continua con avanzamenti, panoramiche e arretramenti fluidi in ease-in-out tra i pannelli e senza stacchi. Il cursore scivola verso i suoi bersagli e clicca con una piccola riduzione di scala alla pressione. Le parole dell'hook entrano una per battito. Le schede allegato volano dentro e scattano al loro posto con un leggero overshoot. Il testo della chat viene digitato lettera per lettera. Gli elementi della lista compaiono e vengono spuntati su battiti successivi. Lo schizzo grigio si riempie in fretta e poi si trasforma elemento per elemento nel promo finito. L'inondazione rosa sotto "GO!" cresce radialmente dal pulsante cliccato. Le parole grandi si schiantano con un rapido impatto di riduzione di scala sull'interfaccia e se ne vanno veloci al battito successivo. Ogni battito ha un evento visibile: una parola, un clic, una scheda, una spunta, una riga di stato o un movimento di camera. </techniques> <music> Un brano elettronico energico a 120 BPM, con ogni stacco, impatto di parola ed evento dell'interfaccia agganciato al ritmo. Cresce durante i passaggi di preparazione, sale verso "GO!", spinge la costruzione dal vivo e si risolve con un colpo finale sulla schermata finale. </music> <sound> Clic di tastiera che cadono esattamente su ogni lettera digitata. Clic del mouse a ogni tocco del cursore. Whoosh sui movimenti di camera e sull'ingresso delle schede allegato, e scatti quando le schede atterrano. Tick morbidi per i passaggi della lista e le righe di stato. Un impatto incisivo sotto ogni parola grande, un riser verso "GO!" e un colpo finale sulla schermata finale. Tieni la musica sotto gli effetti in modo che clic e impatti si sentano chiaramente. </sound> <references> Trailer cinetici di lancio di app che ricostruiscono un'interfaccia SaaS come un mockup animato nitido con un unico movimento di camera continuo, nello stile dei promo del giorno di lancio di un prodotto. </references>

Anteprima del prompt “Promo app soft-tech: muro di icone, telefono e studio 3D”

Promo app soft-tech: muro di icone, telefono e studio 3D

placeholder

Anteprima del prompt “Un punto rosa attraverso un collage di incisioni”

Un punto rosa attraverso un collage di incisioni

placeholder

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