Simple MotionCodice del prompt: NPXReel prodotto «Esemplare vivente» con morph del logo
placeholder
Usato 1 voltaBrand reel verticale di 19 secondi: una palla lucida rimbalza su un manifesto a tempo, un pendolo e una lampada, poi un montaggio veloce e un finale di voxel.
Codice del prompt MOVPubblicato Usato 2 volte
Usa il promptIl prompt si apre nell’app: aggiungi i tuoi materiali e l’agente crea il video.
Segnala questo promptRealizza un brand reel verticale di 19,2 secondi (1080x1920, 30 fps) che si ripete senza stacchi. È tutta motion graphics, montata su un beat a 150 BPM (0,4 s a battuta, 12 battute). L'idea: una palla lucida è l'eroina di tutto il film. Rimbalza attraverso un manifesto-hook di una parola per battito, diventa il peso di un pendolo, si trasforma in una lampada che illumina una pagina, aspetta un montaggio veloce dietro il nome del tuo brand e finisce da sola sulla schermata finale esattamente dove inizia il primo fotogramma. Lo stile è una tipografia editoriale audace su sfondi piatti notte profonda e carta, con un accento a gradiente rosa-arancio e un secondo accento viola. Ritmo: frenetico per i primi 3,2 s, poi due lunghe scene che respirano su un battito a due tempi, un'esplosione di 3,2 s di tagli in ottavi, un climax di 2 s e un punto di loop tranquillo. Evita girato, voce fuori campo, dissolvenze morbide e qualsiasi taglio che manchi il beat: ogni taglio cade su un battito o mezzo battito. Le parole di colore accento devono usare lo stesso peso ExtraBold del resto, mai più sottile.
Hook, 0–3,2 s. Un fotogramma scuro. La palla (140 px) parte dal centro e cade verso una linea del pavimento a circa y 1516, rimpicciolendosi a 88 px, e atterra a 0,37 s. Da 0,4 s appare una parola per battito, poi per mezzo battito: «noi» (0,4), «non» (0,8), «facciamo» (1,2), «solo prompt.» (1,6), «noi» (2,0), «dirigiamo.» (2,2, nel gradiente d'accento), «scriviamo» (2,6), «luce» (2,8), «profondità» (3,0). Sostituiscile con le tue righe di manifesto. Lo sfondo passa da scuro a carta a ogni taglio. Su «luce» e «profondità» la palla vola in alto ed esce in alto a sinistra.
Pendolo, 3,2–8,0 s. Sfondo carta. La palla diventa il peso (112 px) di una sottile asta scura appesa a un perno 380 px sopra il centro in alto (lunghezza del braccio 1317 px). Un'ombra sfocata di asta e peso è spostata a destra. Un titolo su due righe in maiuscolo sta al centro e cambia a ogni oscillazione: «FATTO / A MANO?» → «FATTO / CON IL CODICE.» (seconda riga nell'accento) → «NIENTE / TIMELINE.» → «NIENTE / KEYFRAME.» → «SOLO / PAROLE.» (accento) → «E / LUCE.». Sono esempi da sostituire. A 7,2 s la luce si spegne oltre l'asta e l'ultima oscillazione trascina il buio attraverso l'inquadratura.
Lampada, 8,0–12,8 s. Scuro #14112E. La palla diventa una lampada luminosa il cui cono di luce rivela una pagina di carta. La pagina contiene «LA LUCE / È SOLO / MATEMATICA.» in maiuscolo (esempio; l'ultima riga in viola) e un piccolo lockup del logo vicino a y 1430: un punto a gradiente e il tuo logotipo in inchiostro. Da 12,27 s l'intera pagina è illuminata.
Montaggio, 12,8–16,0 s. Sul drop, «[il tuo brand]» in Anton (alto circa 260 px, centrato) resta fermo mentre il mondo dietro cambia a ogni ottavo (0,2 s). I mondi, in ordine:
un blob 3D lucido e marmorizzato rosa e arancio con un bordo ben visibile, su grigio
lo stesso blob più vicino
blocchi piatti: quadrati viola, scuri e carta, e il gradiente d'accento
anelli ipnotici inchiostro e carta che zoomano e ruotano
un cartellino di carta bianco che dondola da uno spago su viola
un campo di tasti scuri di tastiera visto dall'alto, con alcuni tasti rosa e arancio che si premono
un toro disegnato con puntini di mezzatinta ben distinti su scuro
viola piatto con una griglia tenue
forme 3D giocattolo che rotolano su un prugna scuro (cubi, palle, anelli, coni e capsule nella palette più giallo #FFD23F)
le stesse forme sfocate su rosa pastello
un telefono di vetro su grigio
il blob su viola
un pavimento di cubi bianchi con colonne rosa e arancio che salgono
il toro a mezzatinta come punti d'inchiostro su bianco
corallo piatto con griglia
Finale di voxel, 16,0–18,2 s. Sfondo viola. Una parola breve (il tuo prodotto, o la seconda metà del nome del tuo brand) è costruita con piccoli cubi. È completamente formata a 16,6 s, respira, poi esplode da 17,72 s mentre un buco nero si apre dal centro e riempie l'inquadratura a 18,17 s.
Schermata finale, 18,2–19,2 s. Scura. La palla cresce dal nulla al centro (142 px a x 539, y 959). Il tuo logotipo nel gradiente rosa-arancio appare sotto a 18,1 s, resta e svanisce a 18,85 s. Rimane solo la palla, esattamente dove inizia il primo fotogramma del film, quindi il loop è senza giunture.
Palette:
notte profonda #0C0A1E e un #14112E leggermente più chiaro per le scene scure
carta #F2EFFA per quelle chiare
inchiostro #1C0B5D per il testo su carta
un gradiente d'accento rosa-arancio #FB2D89 → #FE9117
un secondo accento viola #7C4DFF
giallo #FFD23F solo per le forme giocattolo
Le parole dell'hook sono color carta sui tagli scuri e inchiostro sui tagli carta.
Tipografia:
parole e titoli in Manrope ExtraBold, con crenatura stretta (-0,035em sui titoli maiuscoli)
il nome del brand nel montaggio in Anton
un piccolo handle «@yourbrand» (da sostituire) in JetBrains Mono in alto a sinistra, a 56 px dal bordo sinistro e 246 px dall'alto, per tutto il film
Titolo del pendolo: la riga uno alta circa 145 px di maiuscola, la riga due circa 128 px, centrato.
La palla è una sfera lucida: un morbido riflesso bianco in alto a sinistra su un corpo sfumato arancio → rosa → magenta profondo.
Nome del brand nel montaggio: tre livelli (un'ombra netta spostata di 9 px, un contorno di 16 px e il riempimento). È bianco con contorno scuro sui mondi scuri o affollati, e scuro con contorno bianco su quelli chiari.
Parola di voxel: una riga, alta circa 430 px e larga 890 px. La prima lettera è sfumata da rosa ad arancio dall'alto in basso; le altre sono bianco carta.
Schermata finale: palla centrata; il logotipo a gradiente a circa y 1225, largo circa 620 px.
Hook:
Ogni parola atterra in quattro fotogrammi con un forte ease-out (power3.out). Le entrate ruotano a turno: una crenatura che si chiude da mezzo em, una caduta con zoom da 125% e 320 px più in basso, uno stiramento verticale da 260% ancorato alla linea di base e uno scivolamento da 835 px fuori a sinistra.
I cambi di sfondo sono tagli netti.
A ogni taglio la palla si gonfia al 125% sul posto per un fotogramma ed è al culmine del rimbalzo nel successivo. In cinque fotogrammi scivola nell'altra posizione di riposo (x 287 o 788) rimpicciolendosi di nuovo.
Pendolo:
Oscilla di ±23,6° con power3.inOut in 0,34 s, ogni oscillazione centrata su un battito su due (3,6, 4,4, 5,2, 6,0, 6,8, 7,6 s), e resta fermo alle estremità.
Tre copie sbiadite a un fotogramma di distanza seguono il peso.
L'asta è ben visibile e la sua ombra si nota.
Ogni oscillazione spazza il titolo nel successivo. Il nuovo titolo compare sul lato che il peso ha già superato e il vecchio sull'altro, con maschere inset rettangolari sullo stesso easing.
A 7,2 s tutto ciò che sta oltre la linea dell'asta diventa scuro, e l'ultima oscillazione trascina il buio attraverso l'inquadratura.
Lampada:
La palla scivola al centro in un terzo di secondo e comincia a brillare, con un morbido alone arancio-rosa di circa 220 px intorno.
Un cono di luce si apre dalla palla come una fessura di 7° puntata dritta verso l'alto. Scende a sinistra e a destra allargandosi mentre la palla si muove: fino a circa x 800, y 1090, poi x 900, y 975, poi in alto fino a x 760, y 560.
Il cono si assesta sopra le parole, largo 120° e puntato verso il basso.
Il cono è una maschera a cuneo con il vertice nella palla, che rivela la pagina di carta sotto il buio. Una copia della pagina al 28% di opacità, più larga di 4,5° per lato, crea una penombra grigia netta.
Da 12,27 s il cono si apre a 360° in 0,33 s con un easing in-out.
Montaggio: tagli netti ogni 0,2 s dietro il nome fermo. Ogni mondo si muove nel suo slot: gli anelli zoomano e ruotano, il cartellino dondola, i tasti si premono, le forme rotolano e le colonne salgono.
Finale di voxel:
Circa 800 piccoli cubi, profondi tre, su una griglia 11x18 per lettera.
I cubi partono sparsi in profondità e volano a posto con un quartic in-out in mezzo secondo, sfalsati fino a 0,18 s, mentre scintille sfrecciano davanti alla camera.
La parola respira: ogni lettera ruota un poco attorno al suo centro e un'ondulazione attraversa le sue file.
Da 17,72 s ogni cubo esplode verso l'esterno e verso l'obiettivo, striato di motion blur.
Un disco scuro si apre da un forellino al centro (power3.in, 0,37 s da 17,8 s) e riempie l'inquadratura a 18,17 s, con i cubi che volano sopra.
Schermata finale: la palla cresce dal nulla in circa 0,12 s, e il logotipo svanisce a 18,85 s.
Crea un brano strumentale elettronico originale, scuro e incisivo, a 150 BPM in re minore con un feeling half-time (cassa sull'uno, rullante sul tre). Ha un basso distorto e pulsante in ottavi, batteria serrata e pad tesi, oltre a un chop vocale processato senza parole usato come texture, senza canto. Suona dal primo fotogramma. Le sue casse e i suoi rullanti cadono sui tagli delle parole e sulle oscillazioni del pendolo, e il drop arriva a 12,8 s. Finisce con un colpo pesante con un accordo scuro esattamente sul buco nero a 18,0 s, che risuona sotto la schermata finale. Tagliala a 19,2 s sulla battuta.
Sovrapponi questi alla musica:
un click morbido a ogni flash di parola
un whoosh a ogni oscillazione
un riser verso il pendolo
uno sweep discendente quando la luce si spegne
una campana quando la palla si accende
un riser in un boom sul montaggio a 12,8 s
un leggero tick a ogni nuovo mondo
un whoosh mentre i cubi si precipitano
un piccolo boom quando la parola atterra
un riser in un boom profondo sotto il buco nero
Niente voce.
Gli accorgimenti di motion design con cui è costruito il video, ognuno con codice autonomo da aprire nel browser o da passare al tuo agente.
Una parola per battuta (0,4 s a 150 BPM, mezze battute alla fine), con lo sfondo che passa da quasi nero a carta a ogni stacco. Ogni parola atterra in quattro fotogrammi con power3.out usando a rotazione una di quattro entrate: un tracking che si chiude da mezzo em, una caduta con zoom da 125% e 320 px più in basso, uno stiramento verticale da 260% ancorato alla linea di base e uno scorrimento da 835 px fuori campo a sinistra.
Quando usarla Un manifesto veloce o una frase di richiamo detta una parola alla volta a tempo.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flash di parole a tempo con quattro entrate</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@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#bg { position: absolute; inset: 0; background: #0c0a1e; }
.w { position: absolute; left: 0; top: 840px; width: 1080px; text-align: center; white-space: nowrap; font: 800 230px/1.1 "Manrope", sans-serif; letter-spacing: -0.03em; opacity: 0; }
.w span { display: inline-block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920">
<div id="bg" class="clip" data-start="0" data-duration="2.8"></div>
<div id="words" class="clip" data-start="0" data-duration="2.8"></div>
</div>
<script>
const BEAT = 0.4; // seconds per beat (150 BPM)
const E = 4 / 30; // every entrance lands in four frames
const DARK = "#0c0a1e", PAPER = "#f2effa", INK = "#1c0b5d";
const WORDS = [ // [word, entrance, beats on screen]
["we", "track", 1], ["don't", "zoom", 1], ["just", "stretch", 1], ["prompt.", "slide", 1],
["we", "track", 0.5], ["direct.", "zoom", 1], ["type", "stretch", 0.5], ["light", "slide", 0.5], ["depth", "track", 0.5],
];
const tl = gsap.timeline({ paused: true });
const host = document.getElementById("words"), bg = document.getElementById("bg");
let t = 0;
WORDS.forEach(([text, kind, beats], i) => {
const dark = i % 2 === 0;
const el = document.createElement("div");
el.className = "w";
el.style.color = text === "direct." ? "#fb2d89" : dark ? PAPER : INK;
el.innerHTML = [...text].map((c) => "<span>" + c + "</span>").join("");
host.appendChild(el);
tl.set(bg, { backgroundColor: dark ? DARK : PAPER }, t);
tl.set(el, { opacity: 1 }, t);
tl.set(el, { opacity: 0 }, t + beats * BEAT);
if (kind === "track") el.querySelectorAll("span").forEach((g, k, all) =>
tl.fromTo(g, { x: 115 * (k - all.length / 2) }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t));
if (kind === "zoom") tl.fromTo(el, { scale: 1.25, y: 320 }, { scale: 1, y: 0, duration: E, ease: "power3.out", immediateRender: false }, t);
if (kind === "stretch") tl.fromTo(el, { scaleY: 2.6, transformOrigin: "50% 100%" }, { scaleY: 1, duration: E, ease: "power3.out", immediateRender: false }, t);
if (kind === "slide") tl.fromTo(el, { x: -835 }, { x: 0, duration: E, ease: "power3.out", immediateRender: false }, t);
t += beats * BEAT;
});
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>
Una sfera CSS lucida (due radial-gradient: un morbido riflesso bianco su un corpo da arancione a magenta) riposa in uno di due punti sulla linea del pavimento. Nel fotogramma di ogni stacco si gonfia a 125% sul posto, nel successivo è già al culmine del salto, e in cinque fotogrammi scivola nell'altro punto tornando a 100%, così si legge come un rimbalzo 3D verso la camera. Animata con keyframe fotogramma per fotogramma.
Quando usarla Una mascotte o un punto che segna ogni battuta di un gancio a una parola per battuta.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Palla che scatta sullo stacco e rimbalza dall'altra parte</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0c0a1e; }
#floor { position: absolute; inset: 0; }
#ball { position: absolute; left: 0; top: 0; width: 88px; height: 88px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.8" data-width="1080" data-height="1920">
<div id="floor" class="clip" data-start="0" data-duration="2.8"><div id="ball"></div></div>
</div>
<script>
const F = 1 / 30;
const L = { x: 287, y: 1516 }, R = { x: 788, y: 1516 }; // the two resting spots
const P = [0, 0.42, 0.7, 0.876, 0.963, 0.995, 1]; // share of the way across, frame by frame
const H = [0, 165, 136, 65, 19, 2, 0]; // height above the floor, px
const S = [1.25, 1.14, 1.07, 1.045, 1.02, 1, 1]; // the pop on the cut, then back to size
const tl = gsap.timeline({ paused: true });
const ball = document.getElementById("ball");
gsap.set(ball, { xPercent: -50, yPercent: -50, x: L.x, y: L.y });
for (let k = 0; k < 6; k++) {
const from = k % 2 ? R : L, to = k % 2 ? L : R, t0 = 0.4 + k * 0.4; // a hop on every beat
P.forEach((p, f) => tl.to(ball, { x: from.x + (to.x - from.x) * p, y: to.y - H[f], scale: S[f], duration: F, ease: "none" }, t0 + (f - 1) * F));
}
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>
Un'asta pende da un perno sopra il quadro e oscilla di ±23,6° con power3.inOut in 0,34 s, centrata a ogni seconda battuta, poi si ferma. Quando il peso passa, clip-path inset guidati dalla stessa curva rivelano il titolo successivo su due righe dal lato che ha superato e tagliano via il vecchio; tre copie attenuate del peso, distanziate di un fotogramma, lasciano una scia, e una copia sfocata di asta e peso fa da ombra. Nell'ultima oscillazione un poligono scuro delimitato dalla linea dell'asta copre tutto ciò che sta oltre e viene trascinato attraverso il quadro.
Quando usarla Alternare una serie di frasi brevi con un ritmo fisico da metronomo, concludendo con un blackout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendolo che spazza i titoli e trascina la luce</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@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f2effa; }
#stage { position: absolute; inset: 0; }
.title { position: absolute; left: 0; top: 600px; width: 1080px; text-align: center; font: 800 150px/0.95 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; opacity: 0; }
.title .hot { color: #fb2d89; }
.arm { position: absolute; left: 536px; top: -380px; width: 8px; height: 1317px; transform-origin: 4px 0; }
.rod { position: absolute; inset: 0; background: #120a33; border-radius: 4px; }
.bob { position: absolute; left: -52px; top: 1261px; width: 112px; height: 112px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#shadow { left: 558px; top: -374px; filter: blur(9px); opacity: .22; }
#shadow .rod, #shadow .bob { background: #1c0b5d; }
#curtain { position: absolute; inset: 0; background: #0c0a1e; opacity: 0; }
</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 class="title" id="t0"><div>MADE</div><div>BY HAND?</div></div>
<div class="title" id="t1"><div>MADE</div><div class="hot">BY CODE.</div></div>
<div class="title" id="t2"><div>NO</div><div>KEYFRAMES.</div></div>
<div class="title" id="t3"><div>AND</div><div>LIGHT.</div></div>
<div class="arm" id="shadow"><div class="rod"></div><div class="bob"></div></div>
<div class="arm ghost" id="g2" style="opacity:.15"><div class="bob"></div></div>
<div class="arm ghost" id="g1" style="opacity:.3"><div class="bob"></div></div>
<div id="curtain"></div>
<div class="arm" id="arm"><div class="rod"></div><div class="bob"></div></div>
</div>
</div>
<script>
const AMP = 23.6, SWING = 0.34, PX = 540, PY = -380, L = 1317; // swing angle, its length, pivot, arm
const CENTRES = [0.4, 1.2, 2.0, 2.8]; // a swing on every second beat
const tl = gsap.timeline({ paused: true });
const titles = [...document.querySelectorAll(".title")];
gsap.set(titles[0], { opacity: 1 });
const x = (deg) => PX + L * Math.sin(deg * Math.PI / 180); // where the bob is, left or right
for (const [sel, lag] of [["#arm", 0], ["#shadow", 0], ["#g1", 1 / 30], ["#g2", 2 / 30]]) {
gsap.set(sel, { rotation: AMP });
gsap.set(sel + " .bob", { rotation: -AMP }); // keep the highlight up and left
CENTRES.forEach((c, k) => {
const to = k % 2 ? AMP : -AMP;
tl.to(sel, { rotation: to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag);
tl.to(sel + " .bob", { rotation: -to, duration: SWING, ease: "power3.inOut" }, c - SWING / 2 + lag);
});
}
CENTRES.slice(0, 3).forEach((c, k) => { // the wipe follows the bob
const inc = titles[k + 1], out = titles[k], t0 = c - SWING / 2, a = x(-AMP), b = x(AMP), ltr = k % 2 === 0;
tl.set(inc, { opacity: 1 }, t0);
tl.fromTo(inc, { clipPath: ltr ? "inset(0px " + (1080 - a) + "px 0px 0px)" : "inset(0px 0px 0px " + b + "px)" },
{ clipPath: ltr ? "inset(0px " + (1080 - b) + "px 0px 0px)" : "inset(0px 0px 0px " + a + "px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0);
tl.fromTo(out, { clipPath: ltr ? "inset(0px 0px 0px " + a + "px)" : "inset(0px " + (1080 - b) + "px 0px 0px)" },
{ clipPath: ltr ? "inset(0px 0px 0px " + b + "px)" : "inset(0px " + (1080 - a) + "px 0px 0px)", duration: SWING, ease: "power3.inOut", immediateRender: false }, t0);
tl.set(out, { opacity: 0 }, t0 + SWING);
});
// the light goes out beyond the rod, and the last swing drags the dark across
const poly = (deg) => { const r = deg * Math.PI / 180, qx = PX + 3 * L * Math.sin(r), qy = PY + 3 * L * Math.cos(r);
return "polygon(" + PX + "px " + PY + "px, " + qx + "px " + qy + "px, 6000px " + qy + "px, 6000px -3000px, " + PX + "px -3000px)"; };
const cur = document.getElementById("curtain"), ease = gsap.parseEase("power3.inOut"), last = CENTRES[3] - SWING / 2;
gsap.set(cur, { clipPath: poly(AMP) });
tl.set(cur, { opacity: 1 }, 2.2);
for (let f = 1; f <= 11; f++) tl.to(cur, { clipPath: poly(AMP - 2 * AMP * ease(Math.min(1, f / 30 / SWING))), duration: 1 / 30, ease: "none" }, last + (f - 1) / 30);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
if (!root) return;
const scale = Math.min(innerWidth / width, innerHeight / height);
Object.assign(root.style, {
width: width + 'px',
height: height + 'px',
transform: 'scale(' + scale + ')',
marginLeft: (innerWidth - width * scale) / 2 + 'px',
marginTop: (innerHeight - height * scale) / 2 + 'px',
});
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>
Su fondo scuro una sfera luminosa attraversa alcune posizioni mentre un clip-path a cuneo (vertice sulla sfera, una direzione e una semi-larghezza, disegnato come poligono che arriva ben oltre il quadro) mostra un livello di carta con le parole. Una seconda copia della pagina al 28% di opacità, ritagliata da un cuneo più largo di 4,5°, crea la penombra a bordo netto. Il fascio parte come una scheggia di 7° rivolta verso l'alto, spazza a sinistra e in basso allargandosi fino a circa 120°, poi si apre a 360° in un terzo di secondo per illuminare l'intera pagina.
Quando usarla Rivelare una riga o un prodotto come se una lampada lo trovasse al buio.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cono di faro in cerca che rivela una pagina illuminata</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@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #14112e; }
#scene { position: absolute; inset: 0; }
.page { position: absolute; inset: 0; background: #f2effa; }
#soft { opacity: .28; }
.line { position: absolute; left: 0; top: 660px; width: 1080px; text-align: center; font: 800 190px/0.93 "Manrope", sans-serif; letter-spacing: -0.04em; color: #1c0b5d; }
.line span { color: #7c4dff; }
#lamp { position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#glow { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,128,72,.6) 0%, rgba(252,80,110,.12) 36%, rgba(252,60,120,0) 50%); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4.5" data-width="1080" data-height="1920">
<div id="scene" class="clip" data-start="0" data-duration="4.5">
<div class="page" id="soft"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div>
<div class="page" id="lit"><div class="line">LIGHT<br>IS JUST<br><span>MATH.</span></div></div>
<div id="glow"></div><div id="lamp"></div>
</div>
</div>
<script>
const PEN = 4.5; // the soft edge, degrees
const s = { x: 536, y: 696, dir: 271, half: 0 }; // ball and beam (0 deg = right, 90 = down)
const wedge = (h) => { if (h <= 0) return "polygon(" + Array(8).fill(s.x + "px " + s.y + "px").join(",") + ")";
h = Math.min(h, 180); const pts = [s.x + "px " + s.y + "px"];
for (let i = 0; i <= 6; i++) { const a = (s.dir - h + i * h / 3) * Math.PI / 180; pts.push((s.x + 5000 * Math.cos(a)) + "px " + (s.y + 5000 * Math.sin(a)) + "px"); }
return "polygon(" + pts.join(",") + ")"; };
const draw = () => {
gsap.set("#lamp, #glow", { x: s.x, y: s.y });
gsap.set("#soft", { clipPath: wedge(s.half) });
gsap.set("#lit", { clipPath: wedge(s.half >= 180 ? 180 : s.half - PEN) });
};
const tl = gsap.timeline({ paused: true, onUpdate: draw });
tl.to(s, { half: 19, duration: 0.25, ease: "power2.out" }, 0.2) // a sliver opens upward
.to(s, { x: 797, y: 1094, dir: 154, half: 22, duration: 0.6, ease: "power2.inOut" }, 0.5) // sweeps down-left
.to(s, { x: 897, y: 976, dir: 179, half: 27, duration: 0.5, ease: "power2.out" }, 1.2)
.to(s, { x: 757, y: 558, dir: 124, half: 35, duration: 0.5, ease: "power2.inOut" }, 1.8)
.to(s, { x: 537, y: 326, dir: 90, half: 66, duration: 0.45, ease: "power2.inOut" }, 2.4) // settles above the words
.to(s, { half: 180, duration: 0.35, ease: "power2.inOut" }, 3.8); // and lights everything
draw();
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>
Una parola in un carattere display condensato resta fissa al centro mentre il mondo dietro cambia ogni 0,2 s (un ottavo a 150 BPM): gradienti, strisce, anelli concentrici, una griglia, colore piatto. La parola è fatta di tre livelli sovrapposti: un'ombra dura spostata di 9 px, un contorno di 16 px e il riempimento; sui mondi chiari riempimento e contorno si scambiano, così si legge sempre.
Quando usarla Un nome di brand o prodotto che deve sopravvivere a un rapido sfrigolio di look.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nome contornato su mondi che cambiano ogni mezza battuta</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@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; }
#world { position: absolute; inset: 0; }
#name { position: absolute; inset: 0; }
.wl { position: absolute; left: 0; top: 760px; width: 1080px; text-align: center; font: 330px/1.2 "Anton", sans-serif; }
.sh { transform: translate(9px, 9px); }
.sh, .ol { -webkit-text-stroke: 16px currentColor; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.2" data-width="1080" data-height="1920">
<div id="world" class="clip" data-start="0" data-duration="3.2"></div>
<div id="name" class="clip" data-start="0" data-duration="3.2"><div class="wl sh">motion</div><div class="wl ol">motion</div><div class="wl fi">motion</div></div>
</div>
<script>
const WORLDS = [ // [background, light world?]
["radial-gradient(80% 60% at 40% 40%, #fe9117, #fb2d89 60%, #8e89a3)", true], ["linear-gradient(160deg, #fb2d89, #fe9117)", false],
["linear-gradient(#7c4dff 0 59%, #0c0a1e 59% 74%, #fb2d89 74%)", false], ["repeating-radial-gradient(circle, #1c0b5d 0 60px, #f2effa 60px 120px)", false],
["repeating-radial-gradient(circle, #f2effa 0 70px, #1c0b5d 70px 140px)", true], ["radial-gradient(#8f63ff, #5a2fe0)", true],
["repeating-linear-gradient(90deg, #17122b 0 110px, #f2effa 110px 118px)", false], ["#0c0a1e", false],
["#7c4dff", false], ["radial-gradient(#4a1440, #22061f)", false], ["#ffd9e6", true], ["linear-gradient(#b9b5c6, #7f7a90)", false],
["linear-gradient(#fb2d89, #7c4dff)", false], ["repeating-linear-gradient(45deg, #fe9117 0 60px, #f2effa 60px 120px)", true],
["#f7f5fc", true], ["#fb4f6a", true],
];
const tl = gsap.timeline({ paused: true });
const world = document.getElementById("world");
const [sh, ol, fi] = document.querySelectorAll(".wl");
WORLDS.forEach(([bg, light], k) => { // a cut every eighth note
const t = k * 0.2;
tl.set(world, { background: bg }, t);
tl.set([sh, ol], { color: light ? "#ffffff" : "#0c0a1e" }, t);
tl.set(fi, { color: light ? "#0c0a1e" : "#ffffff" }, 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>
Una parola disegnata su una bitmap 11x18 per lettera diventa circa 800 cubi istanziati, profondi tre. Ogni cubo parte da una posizione e una rotazione casuali e vola alla sua cella con un quartic in-out in mezzo secondo, sfalsato fino a 0,18 s, mentre alcune centinaia di particelle sfrecciano accanto alla camera. Una volta atterrata, ogni lettera ruota piano attorno al proprio centro e un'onda percorre le sue righe; alla fine ogni cubo accelera verso l'esterno e verso l'obiettivo (quadratic in), ciascuno con sei copie più tenui qualche millisecondo indietro come motion blur. La prima lettera ha un gradiente da rosa ad arancione dall'alto in basso, le altre sono bianco carta, su viola.
Quando usarla Un logo o una parola breve che si assembla da particelle al culmine.
Libreriethree
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Parola di voxel che vola insieme, respira ed esplode</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; }
#gl { position: absolute; inset: 0; width: 1080px; height: 1920px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.6" data-width="1080" data-height="1920">
<canvas id="gl" class="clip" data-start="0" data-duration="2.6" width="1080" height="1920"></canvas>
</div>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("gl"), antialias: true, alpha: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(1); renderer.setSize(1080, 1920, false);
const scene = new THREE.Scene(), cam = new THREE.PerspectiveCamera(30, 1080 / 1920, 10, 20000);
cam.position.set(0, 420, 3583); cam.lookAt(0, 0, 0); // about 1 px per unit on the word's plane
scene.add(new THREE.HemisphereLight(0xffffff, 0x4a2fa0, 1.6));
const sun = new THREE.DirectionalLight(0xffffff, 2.7); sun.position.set(-600, 1400, 1800); scene.add(sun);
const G = { // 11 x 18 cells per letter ("#" = cube)
F: ["###########", "###########", "##", "##", "##", "##", "##", "##", "#########", "#########", "##", "##", "##", "##", "##", "##", "##", "##"],
A: [" ######### ", "###########", ...Array(6).fill("## ##"), "###########", "###########", ...Array(8).fill("## ##")],
B: ["######### ", "########## ", ...Array(5).fill("## ## "), "########## ", "######### ", "########## ", ...Array(6).fill("## ##"), "###########", "########## "],
};
const P = 24, LEFT = [96, 408, 720], TOP = 744; // cell pitch, letter positions in the frame
let seed = 23; const rnd = () => ((seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0) / 4294967296);
const cubes = [];
["F", "A", "B"].forEach((ch, li) => G[ch].forEach((row, ry) => [...row].forEach((cell, cx) => {
if (cell !== "#") return;
for (let dz = 0; dz < 3; dz++) cubes.push({ li, ry, color: li ? new THREE.Color(0xf2effa) : new THREE.Color(0xfb2d89).lerp(new THREE.Color(0xfe9117), ry / 17),
tx: LEFT[li] + cx * P + P / 2 - 540, ty: 960 - (TOP + ry * P + P / 2), tz: -dz * P,
sx: (rnd() - 0.5) * 3600, sy: (rnd() - 0.5) * 5200, sz: -3000 + rnd() * 5400, r: [rnd() * 6, rnd() * 6, rnd() * 6], delay: rnd() * 0.18, dur: 0.5 + rnd() * 0.12 });
})));
const mesh = new THREE.InstancedMesh(new THREE.BoxGeometry(21, 21, 21), new THREE.MeshStandardMaterial({ roughness: 0.55 }), cubes.length);
cubes.forEach((k, i) => mesh.setColorAt(i, k.color)); scene.add(mesh);
const centres = LEFT.map((x) => new THREE.Vector3(x + 132 - 540, 0, -P)), o = new THREE.Object3D(), v = new THREE.Vector3(), e = new THREE.Euler();
const inOut4 = (p) => (p < 0.5 ? 8 * p ** 4 : 1 - 8 * (1 - p) ** 4), c01 = (x) => Math.min(1, Math.max(0, x));
function draw(t) {
const hold = Math.max(0, t - 0.55);
cubes.forEach((k, i) => {
const p = inOut4(c01((t - k.delay) / k.dur)), c = centres[k.li];
v.set(k.tx - c.x, k.ty, k.tz - c.z + 10 * Math.sin(k.ry * 0.6 + hold * 6)); // a ripple through the rows
e.set(0.07 * Math.sin(hold * 3.1 + k.li * 1.7), 0.2 * Math.sin(hold * 4.2 + k.li * 0.9), 0); // each letter turns a little
v.applyEuler(e).add(c);
const q = c01((t - 1.8) / 0.55), b = q * q * q; // the burst
o.position.set((k.sx + (v.x - k.sx) * p) * (1 + 3.5 * b), (k.sy + (v.y - k.sy) * p) * (1 + 3.5 * b), k.sz + (v.z - k.sz) * p + 3000 * b);
o.rotation.set(k.r[0] * (1 - p) + 4 * b, k.r[1] * (1 - p) + 3 * b, k.r[2] * (1 - p));
o.updateMatrix(); mesh.setMatrixAt(i, o.matrix);
});
mesh.instanceMatrix.needsUpdate = true;
renderer.render(scene, cam);
}
const clock = { t: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(clock, { t: 2.6, duration: 2.6, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => draw(clock.t));
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>
Un disco scuro grande il doppio della diagonale del quadro cresce da 0 al centro con power3.in in 0,37 s, quindi parte come un forellino mentre le lettere stanno già esplodendo e inghiotte il quadro sul colpo finale. Al suo interno la palla protagonista cresce dal nulla in 0,12 s, il marchio compare in due fotogrammi, resta e svanisce 0,75 s dopo, lasciando solo la palla al centro dove inizia il primo fotogramma del video, così il reel si ripete senza stacchi.
Quando usarla Chiudere un pezzo rumoroso con una quieta pausa sul logo che torna all'inizio.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iride a buco nero verso una card finale pronta per il loop</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@800&family=Anton&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #7c4dff; }
#end { position: absolute; inset: 0; }
#hole { position: absolute; left: 540px; top: 960px; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; border-radius: 50%; background: #0c0a1e; }
#ball { position: absolute; left: 0; top: 0; width: 142px; height: 142px; background: radial-gradient(circle at 33% 27%, rgba(255,246,236,.95) 0%, rgba(255,246,236,0) 15%), radial-gradient(circle at 38% 32%, #ffb347 0%, #fe9117 24%, #fb2d89 66%, #b0135c 90%, #7d0b40 100%); border-radius: 50%; }
#mark { position: absolute; left: 0; top: 1160px; width: 1080px; text-align: center; font: 800 110px/1 "Manrope", sans-serif; letter-spacing: -0.03em; background: linear-gradient(90deg, #fb2d89, #fe9117); -webkit-background-clip: text; background-clip: text; color: transparent; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="1.5" data-width="1080" data-height="1920">
<div id="end" class="clip" data-start="0" data-duration="1.5"><div id="hole"></div><div id="ball"></div><div id="mark">your brand</div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
gsap.set("#ball", { xPercent: -50, yPercent: -50, x: 539, y: 959, scale: 0 });
tl.fromTo("#hole", { scale: 0 }, { scale: 1, duration: 0.37, ease: "power3.in" }, 0.1) // the hole opens
.fromTo("#ball", { scale: 0 }, { scale: 1, duration: 0.12, ease: "power2.in", immediateRender: false }, 0.35) // the ball grows in it
.fromTo("#mark", { opacity: 0 }, { opacity: 1, duration: 0.067, ease: "none" }, 0.4)
.to("#mark", { opacity: 0, duration: 0.15, ease: "none" }, 1.15); // only the ball remains
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>
Simple MotionCodice del prompt: NPXplaceholder
Usato 1 volta
Simple MotionCodice del prompt: SYP<direction> Crea un reel di brand verticale di 15,5 secondi (1080x1920, 30 fps). Un volo 3D su un telefono sopra il profilo del mio brand si trasforma in un momento logo, poi una tipografia cinetica tagliata sillaba per sillaba su un beat trap duro in half-time termina sul mio logo. Tutto è disegnato, senza riprese filmate. Usa il mio logo e, al posto degli esempi qui sotto, i colori e le parole del mio brand. Lo stile ha tre mondi: sfumature dal blu navy profondo al quasi nero per la parte 3D, uno studio grigio chiaro nel mezzo e nero puro con bagliore neon alla fine. Evita una piastra quadrata o un cubo dietro il logo, lettere speculari quando una parola passa dietro qualcosa, testo che tocca i bordi dell'inquadratura, un'inquadratura capovolta dopo una panoramica fulminea e un logo ologramma piatto o schiacciato. Lo schermo del telefono deve stare esattamente dentro la sua cornice. </direction> <structure> 1. 0–4,3 s, volo sul telefono. Un telefono 3D (una faccia con lo schermo e un retro argentato luminoso con la sporgenza della fotocamera) entra rotolando, piccolo e inclinato, con il retro in avanti. Ruota di circa 200 gradi e si assesta in piedi sul suo schermo a 1,05 s (power2.out). Lo schermo è centrato nell'inquadratura con un bordo uniforme su tutti i lati. Mostra il brand come un profilo social: handle, un avatar rotondo con il mio logo, nome e payoff di una riga, una bio di due righe con il sito web, un pulsante principale rosa e quattro storie in evidenza rotonde le cui etichette non si sovrappongono. Sotto c'è una griglia 3x3 di riquadri colorati leggermente piccoli, con angoli arrotondati, che stanno nello schermo, con etichette brevi che stanno dentro ogni riquadro ("IDEAS IN MOTION", "3D", "LOGO REVEAL"; sostituiscile con le tue). Da 1,05 s il telefono si inclina all'indietro di circa 48 gradi e cresce, mentre i riquadri si staccano dallo schermo verso la camera a diverse altezze. Una panoramica fulminea a 1,95 s atterra vicino all'intestazione del profilo. La camera scende lentamente lungo la bio, inclinandosi, finché una seconda panoramica a 3,0 s la porta a guardare in basso verso l'avatar. Atterra in piedi, quindi il profilo resta leggibile. Tre anelli rosa luminosi si impilano uscendo dall'avatar (back.out, a distanza di 80 ms). Una copia rotonda del mio logo con contorno rosa e bagliore sale da essi, inclinandosi verso lo spettatore come un ologramma. 2. 4,3–6,5 s, logo 3D. Stacco netto sul simbolo del mio logo, estruso in 3D: una pila di strati sottili in un tono profondo (per esempio rosa scuro) dietro la faccia frontale illuminata, senza quadrato dietro. Brilla su una sfumatura radiale blu navy. Entra ruotando da una posa inclinata (power3.out, 1 s), oscilla, poi si allontana ruotando, piccolo (power3.in), nello stacco. Una parola decisa come "AHHHH" (sostituiscila con la tua) sta su un anello appena sotto il logo, mai sopra. È composta nel grottesco extra-bold con sfumatura da arancione a rosa e un morbido bagliore rosa, con le lettere spaziate e mai speculari. La parola scorre sul davanti, poi vola via con il logo. Da 4,75 s una parola gigante di sfondo in contorno ("OMG") appare in dissolvenza e sale alla deriva. 3. 6,5–9,2 s, parole digitate in una stanza chiara. Stacco netto su una stanza grigio chiaro con vignettatura. Le parole vengono digitate lettera per lettera sulle sillabe del beat, in un gruppo 3D attraverso cui la camera scivola. Prima "yeah". Poi "she" in bianco su un riquadro nero che prima appare come una linea sottile e scatta aprendosi. Poi "typed" in rosa, "one" e un "single prompt" più grande. A 8,1 s la vignettatura si chiude in un'ellisse orizzontale in 0,22 s e si riapre in 0,25 s, mentre le vecchie parole volano via a sinistra. Nuove parole cadono dall'alto uscendo da una sfocatura: "Now" / "it moves like". Un "magic" rosa sale sfocato dal basso poco prima dello stacco. 4. 9,2–15,5 s, pila neon e logo. Stacco sul nero con il "magic" rosa luminoso in alto. Ogni riga successiva ha il proprio colore, bagliore e ingresso, e si impilano: "And I'm" in arancione, "unstoppable" in viola, "might do" in bianco, "MOTION" in rosa. La pila ruota lentamente in 3D, poi vola in alto e fuori in 0,25 s a 11,95 s. Una riga finale compare parola per parola uscendo da una sfocatura in rosa: "no" / "more" / "timelines". A 12,7 s cinque barre metalliche cadono su di essa dall'alto. A 13,25 s tutto si sfoca e svanisce, e il mio logo in bianco con un payoff molto spaziato ("YOUR TAGLINE HERE") appare dalla sfocatura e resta fino alla fine. Tutte le parole tra virgolette sono esempi da sostituire con le tue. </structure> <composition> Palette di esempio: blu navy #1C0B5D, quasi nero #04020C, rosa acceso #FB2D89, arancione #FE9117, viola #8F7BFF, grigio chiaro #D2D4D9, grigio del testo #4A4E56 e bianco. Usa un unico grottesco pesante, extra-bold con tracking stretto (-0,045em), per esempio Manrope ExtraBold, per ogni parola. La parola di sfondo nella scena 2 è un contorno gigante (text-stroke a circa il 20 % di alpha). La parte 3D poggia su sfumature dal blu navy profondo al quasi nero, e la scena del logo su una sfumatura radiale blu navy. Il centro è una stanza grigio chiaro con vignettatura, e la fine è nero puro con bagliori neon. Tieni ogni riga di testo dentro l'inquadratura con margini di sicurezza, soprattutto le righe lunghe "And I'm" e "unstoppable". La scheda finale è il logo centrato in bianco con un piccolo payoff molto spaziato sotto. </composition> <techniques> Panoramiche fulminee: 0,08 s di sfocatura di 14 px, un salto alla nuova inquadratura, poi 0,12 s di ritorno alla nitidezza. Gli anelli si impilano con back.out, a distanza di 80 ms. L'ologramma del logo sale con contorno rosa e bagliore e una leggera inclinazione verso la camera. Il logo 3D entra ruotando con power3.out (1 s) e esce con power3.in. Ogni lettera digitata si ribalta verso l'alto dal basso (rotationX -70, back.out, 0,18 s, a distanza di 30–70 ms). Il riquadro di "she" si apre da una linea sottile con uno scatto. La transizione a iride chiude la vignettatura in un'ellisse orizzontale (0,22 s) e la riapre (0,25 s). Ingressi delle righe neon: le lettere di "And I'm" entrano di colpo da grandi, "unstoppable" scivola da destra uscendo da una sfocatura, le lettere di "might do" salgono e le lettere di "MOTION" scattano da sinistra con inclinazione e scia di movimento. La pila esce verso l'alto in 0,25 s. Le parole finali compaiono una a una uscendo da una sfocatura. Cinque barre metalliche cadono dall'alto (power3.in, a distanza di 30 ms). Alla fine tutto si sfoca e svanisce, poi il logo appare da una sfocatura di 24 px (0,45 s) e cresce lentamente del 4 % mentre resta fermo. Le parole cambiano ogni 0,1–0,3 s sulle sillabe del beat; solo il logo resta. </techniques> <music> Circa 147 BPM, trap in half-time in sol minore, strumentale, senza voci. Sotto la parte del telefono suona un cupo motivo di campane con tensione crescente. Il beat completo (cassa 808 dura, sub distorto, clap, hi-hat rullanti con rullate in terzine) cade esattamente sullo stacco al logo 3D a 4,33 s. Taglia la traccia in modo che il drop cada lì. Dissolvenza in uscita alla fine. </music> <sound> Solo sound design sopra la musica: un boom quando il telefono atterra, whoosh sulle due panoramiche fulminee e uno scintillio per il logo ologramma. Aggiungi un colpo sullo stacco al logo 3D, un impatto sullo stacco alla stanza chiara e un whoosh sull'iride. Poi un boom sullo stacco al nero, whoosh quando le righe scivolano dentro e volano via, un colpo metallico quando le barre atterrano e un boom profondo sul logo finale, poi una dissolvenza in uscita. Nessuna voce fuori campo. </sound>
Usato 9 volte
Simple MotionCodice del prompt: UKE<direction> Realizza un film quadrato di tipografia cinetica di 20 secondi, 1080x1080 a 60 fps, con musica e sound design. Un breve messaggio di prodotto costruisce una struttura con le proprie parole: una parola pesante preme verso il basso come un architrave, un'altra pende da cavi e piega la linea a cui è appesa, due parole ruotano fino a diventare supporti verticali, la camera si tuffa attraverso l'occhiello di una lettera e la dichiarazione finale si assembla su una piattaforma. Deve andare in loop senza stacchi: l'ultimo fotogramma è esattamente il primo. Tutto è disegnato: caratteri piatti, linee e filetti su un fondo piatto di inchiostro profondo. Evita riprese, foto, texture, grana, correzioni colore e sfumature. I carichi pesanti non rimbalzano mai; solo la linea è elastica. Il movimento segue la fraseologia del messaggio, non un ritmo da ballo. Tutte le parole a schermo sono esempi da sostituire con il tuo messaggio, scelte in base al ruolo e alla lunghezza di ogni slot perché l'impaginazione regga. </direction> <structure> - Cue 1, 0–3,3 s, l'architrave: una parola enorme e pesante, 320 px, attraversa il quadro in alto (esempio «CACCIA»), con la linea di base a y 524. Sotto c'è la linea, leggerissimamente inclinata (y 712 a sinistra, y 697 a destra). La frase sale dalla linea in due gruppi a 0,33 s e 1,03 s, Playfair 58 px, linea di base 17 px sopra la linea (esempio «Niente keyframe» / «da cacciare.»). Vive nell'apertura tra la linea di base della parola grande, estesa lungo il quadro, e la linea. Da 0 a 2,9 s la parola grande scende di 104 px e si inclina da -0,15 a -1,9 gradi attorno alla sua linea di base sinistra (power2.inOut), così l'apertura si restringe. A 2,93 s cade sulla linea con un assestamento a smorzamento critico (omega circa 14 al secondo) e si livella all'angolo della linea. La frase viene tagliata dall'alto dalla sua linea di base e svanisce. - Cue 1 a 2, 3,28–4,03 s: la linea si abbassa di 5 px sotto l'atterraggio. Poi la parola grande vola dritta verso l'alto fuori dal quadro (power2.inOut, 0,7 s, circa 700 px) mentre la linea e tutto ciò che c'è sopra scivola in alto di 230 px (power2.inOut, 0,75 s). - Cue 2, 3,5–6,5 s, il carico appeso: una seconda frase sale dalla linea a 3,58 s e 4,18 s (esempio «Una chat al posto» / «di una»). A 4,49 s due filetti sottili (1 px, bianco pagina chiaro al 45 %) scendono dalla linea a x 468 e x 627 (power2.inOut, 0,34 s). A 4,79 s una parola pesante da 138 px (esempio «TIMELINE») cade da dietro la linea, ritagliata all'area sottostante. Cade con un moto a smorzamento critico da 191 px sopra il suo punto di riposo (omega 8,6 al secondo) e pende circa 90 px sotto la linea. A 5,43 s la linea cede: un cedimento a semionda sinusoidale tra i suoi estremi, guidato da una molla sottosmorzata (30 px, omega 11,9 al secondo, rapporto di smorzamento 0,30). Supera una volta fino a 41 px, rimbalza un po' e si ferma a 30 px. I filetti diventano cavi rosa da 2,5 px in 0,12 s e la parola affonda con il cedimento. Ogni parola della frase cavalca la curva, ruotata secondo la pendenza locale. - Cue 3, 6,43–9,47 s, il primo supporto: la camera arretra al 76 % attorno a un punto molto a destra del quadro (power2.inOut, 0,65 s), così la linea e la parola appesa si spostano a destra e la frase affonda nella linea. A 6,96 s una locuzione sale in alto a sinistra, 49 px a schermo (esempio «Descrivi il»). A 7,09 s una parola pesante sale da sotto il quadro per sdraiarsi accanto all'estremo sinistro libero della linea (smorzamento critico, 0,6 s). La sua lunghezza è circa l'altezza dell'estremo libero della linea (esempio «VIDEO»). A 7,95 s ruota di 90 gradi in senso antiorario attorno al suo estremo lontano (circa 0,8 s) e sta eretta sotto la linea, leggendosi dal basso verso l'alto. Mentre si alza solleva l'estremo sinistro della linea di 61 px (power4.out, 0,53 s) e la parola appesa si inclina a +2,7 gradi. A 8,83 s una piccola locuzione sale sotto la parola appesa (esempio «Idee in»). A 9,02 s sale una grande parola in Playfair (152 px a schermo, 0,56 s) la cui seconda lettera è una O (esempio «MOVIMENTO»). Dentro l'occhiello della O la scena successiva è già disegnata a circa il 5 % della sua dimensione: la linea, il supporto e la parola appesa nella loro disposizione successiva. - Cue 3 a 4, 9,47–10,02 s, attraverso la O: la camera zooma nell'occhiello della O. Il logaritmo naturale della scala cresce con il quadrato del tempo (circa x18 a 10,0 s) mentre il centro dell'occhiello scivola al centro del quadro (power2.inOut). La piccola scena viaggia con lo zoom, poi lo supera e atterra esattamente a pieno quadro a 9,93 s mentre l'anello della O sfila oltre i bordi. - Cue 4, 10–12,5 s, il livello: una locuzione sale in alto a sinistra a 10,22 s e 10,52 s, 64 px (esempio «Modifica a» / «parole.»). A 10,49 s un secondo supporto eretto (la stessa parola) sale dal basso sul bordo destro fino al suo posto sotto l'estremo destro basso della linea (smorzamento critico, 0,89 s). Da 11,08 a 11,43 s la linea si livella fino a essere perfettamente orizzontale e perde il cedimento (power1.out), e la parola appesa si livella con essa. È il primo momento perfettamente orizzontale del film. Da 11,4 a 11,6 s un filetto di terra da 1 px (#E9E4F2 al 18 %) si disegna dal centro a y 965 (power2.in). Poi immobilità. - Cue 5, 12,5–16 s, la piattaforma: la locuzione del cue 4 affonda. A 12,53 s la parola appesa sale per stare appena sotto la linea (smorzamento critico, 0,7 s) e i cavi si accorciano con essa. A 12,93 s una locuzione con grazie (54 px, esempio «La tua idea è pronta a») sale per attendere circa 58 px sopra la riga, poi a 13,83 s si posa su di essa (smorzamento critico, 0,5 s). A 13,33 s la prima parola pesante della piattaforma sale dalla linea (117 px, 0,56 s, esempio «MUOVERSI.»). A 14,17 s una breve parola con grazie sale per attendere sopra la linea, poi a 14,59 s si posa sulla linea (la prima parola di [your brand]). A 14,87 s l'ultima parola pesante sale dalla linea e atterra per ultima (119 px, 0,58 s; l'ultima parola di [your brand], con un punto finale). - Cue 6, 16–18 s: mantieni la dichiarazione completa; nulla si muove. - Cue 7, 18–20 s, il loop: a 18,0 s la camera si tuffa sotto la piattaforma ai piedi dell'asta di una lettera della parola appesa (una E o una I). Il logaritmo della scala accelera (circa x40 a 19 s) mentre il piede dell'asta viene portato giù oltre il quadro, finché il colore chiaro dell'asta riempie il quadro. A 19,05 s, sotto quella piena occlusione, passa al fotogramma d'apertura del cue 1, visto dall'interno di un'asta della parola grande: la parola grande alla sua posizione iniziale, la linea, nessuna frase. I segni del tempo indicano di nuovo il primo cue. Esci con una scala logaritmica che rallenta (da circa x22 a x1 a 20,0 s) in modo che l'ultimo fotogramma sia esattamente il primo. - Ritmo: circa un nuovo elemento ogni 0,5–0,7 s dentro un cue, una lunga e lenta pressione nel cue 1, una breve immobilità dopo che la linea si livella e una pausa di due secondi prima del loop. </structure> <composition> - Campo: inchiostro profondo #1C0B5D, piatto. Tutti i caratteri in bianco pagina chiaro #FAF9FF. Un solo accento strutturale, rosa #FB2D89, usato solo per la linea principale, i cavi e il segno del cue. - Parole pesanti: Pliant 900 a larghezza 105 (un grottesco largo e molto pesante), crenatura stretta. Locuzioni: Playfair Display 400. Segni del tempo: JetBrains Mono 13 px in lavanda #F0EDFF al 47 % di opacità. - Margini di 60 px. La linea principale è un tratto rosa da 4 px da x 60 a x 1020. - Segni del tempo su ogni fotogramma, in alto: - in alto a sinistra: il tuo indirizzo web in maiuscolo (esempio «YOURSITE.COM»); - in alto a destra: l'intervallo del cue corrente, scritto come «06.50 — 10.00»; - sotto: un filetto da 1 px (#E9E4F2 al 18 %) da x 60 a x 1020, con una tacca da 3 px ogni secondo e una da 6 px ogni cinque secondi; - su quel filetto: una barra rosa da 3 px che copre esattamente l'intervallo del cue corrente. - La barra e i tempi saltano al cue successivo sul suo primo fotogramma. Ci sono sette cue: 0–3, 3–6,5, 6,5–10, 10–12,5, 12,5–16, 16–18 e 18–20 s. </composition> <techniques> - Ogni locuzione si rivela salendo da una linea. È ritagliata all'area sopra la linea (o sopra una linea invisibile circa 17 px sotto la sua linea di base) e parte 1,28 corpi più in basso, completamente nascosta. Si posa su una curva a smorzamento critico, 1 - (1 + 6p)e^(-6p), normalizzata per raggiungere 1 in 0,5 s: partenza rapida, lungo atterraggio morbido, nessun superamento. - Le locuzioni di una stessa frase arrivano in gruppi parlati a distanza di 0,6–0,7 s. - I carichi pesanti si assestano con un vero moto a smorzamento critico e senza rimbalzo. Solo la linea è elastica: una molla sottosmorzata quando cede. - Le parole che cavalcano la linea piegata ruotano secondo la sua pendenza locale. - Quando un cue finisce, la sua frase affonda di nuovo nella sua linea (power2.in, circa 0,26 s). - La camera è scala e posizione sull'intera scena: - un arretramento al 76 % attorno a un punto molto a destra del quadro; - uno zoom attraverso l'occhiello di una lettera, dove il logaritmo naturale della scala cresce con il quadrato del tempo e la disposizione successiva è pre-disegnata dentro l'occhiello; - un tuffo nell'asta di una lettera che termina in piena occlusione e nasconde lo stacco verso il fotogramma d'apertura. </techniques> <music> Un letto elettronico cinematografico minimale a 120 BPM, esattamente 10 battute, così che ogni confine di cue cada su un battito (3, 6,5, 10, 12,5, 16 e 18 s). Ha un basso synth profondo e pulsante, pad morbidi, un motivo pizzicato rado e percussioni leggere che ticchettano. L'arco: - 0–3 s: basso e pesante, con un accento a 3 s; - da 3 s: uno slancio; - verso i 10 s: un crescendo di filtro fino a un forte primo tempo esattamente a 10 s, il momento in cui atterra lo zoom; - da 11,5 s: aperto e quasi fermo; - verso i 15,5 s: un crescendo sicuro fino a una dichiarazione piena; - 16–18 s: un accordo tenuto; - 18–20 s: un'onda che culmina a 19 s e ricade alla texture d'apertura entro 20 s, così che il loop sia impercettibile. Niente voci. </music> <sound> Effetti sonori solo sopra il letto, senza batteria o basso propri: - un morbido tic di legno sul primo fotogramma visibile di ogni locuzione; - un boom grave con un pesante colpo di legno quando l'architrave atterra (3,1 s), e un whoosh d'aria quando vola via; - due minuscoli tic quando cadono i filetti sottili; - un whoosh discendente, poi uno scricchiolio di asse con un breve sub drop quando la linea cede; - un morbido swoosh sotto l'arretramento della camera; - whoosh quando il supporto sale e ruota, con un colpo quando solleva la linea; - un riser verso un colpo di campana quando lo zoom attraverso la O atterra a 10 s; - un leggero clic metallico quando la linea si blocca in piano e un morbido fruscio quando si disegna il filetto di terra; - colpi di legno quando atterrano le parole della piattaforma e morbidi tocchi quando le locuzioni si posano; - un boom più profondo con un colpo di legno e una debole campana sotto l'ultima parola; - un riser verso il bianco del tuffo, uno swoosh invertito allo stacco nascosto e un whoosh all'uscita. Niente voce fuori campo. Mixa a circa -14 LUFS con true peak sotto -1 dBTP. </sound> <references> Tipografia cinetica editoriale in stile svizzero in cui le parole hanno peso e fungono da architettura (architravi, cavi, colonne, una piattaforma). Caratteri con simulazione fisica, con assestamenti a smorzamento critico e una linea elastica. Loop tipografici a zoom infinito che viaggiano attraverso occhielli e aste delle lettere. </references>
Usato 1 voltaNewsletter
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