
Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
L’anteprima di un logo in tre atti: le lettere si accendono come un’insegna, poi scende un disco volante con un alieno nella cupola, legge il logo con uno scanner e col raggio traente si porta via le lettere: una si aggrappa e si allunga come gomma, un’altra torna giù capovolta. Nel Playground ci metti il tuo nome o carichi il tuo logo.
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The UFO-abducted logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sora@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it, writes the logo in it and flies the saucer -->
<svg class="palco" data-stage role="img" aria-label="Moonvale" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the evening comes from the top of the sky -->
<linearGradient id="dusk-fill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="sera" stop-opacity="0.5" />
<stop offset="1" class="sera" stop-opacity="0.08" />
</linearGradient>
<!-- the tractor beam: faint by the saucer, stronger where it lands -->
<linearGradient id="beam-fill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="raggio-stop" stop-opacity="0.2" />
<stop offset="1" class="raggio-stop" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="trail-fill" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" data-trail-fill>
<stop offset="0" class="raggio-stop" stop-opacity="0" />
<stop offset="1" class="raggio-stop" stop-opacity="0.7" />
</linearGradient>
<!-- the metal of the saucer: a soft shine across the disc, darker towards the edges and underneath -->
<linearGradient id="metal-fill" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" class="metallo-scuro" />
<stop offset="0.22" class="metallo" />
<stop offset="0.4" class="metallo-chiaro" />
<stop offset="0.66" class="metallo" />
<stop offset="1" class="metallo-scuro" />
</linearGradient>
<linearGradient id="band-fill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0.68" class="metallo" />
<stop offset="1" class="metallo-fondo" />
</linearGradient>
<linearGradient id="bowl-fill" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" class="metallo-fondo" />
<stop offset="0.42" class="metallo-scuro" />
<stop offset="0.55" class="metallo" />
<stop offset="1" class="metallo-fondo" />
</linearGradient>
<!-- the soft shadow on the floor -->
<radialGradient id="shadow-fill">
<stop offset="0" class="ombra-stop" stop-opacity="1" />
<stop offset="0.55" class="ombra-stop" stop-opacity="0.6" />
<stop offset="1" class="ombra-stop" stop-opacity="0" />
</radialGradient>
<!-- the cabin is lit from the console -->
<radialGradient id="cabin-fill" cx="0.5" cy="0.9" r="0.75">
<stop offset="0" class="cabina-luce" />
<stop offset="1" class="cabina" />
</radialGradient>
<linearGradient id="cabin-beam" x1="0" y1="1" x2="0" y2="0">
<stop offset="0" class="cabina-luce" stop-opacity="0.55" />
<stop offset="1" class="cabina-luce" stop-opacity="0" />
</linearGradient>
<radialGradient id="iris-fill" cx="0.5" cy="0.7" r="0.6">
<stop offset="0" class="iride-chiara" />
<stop offset="1" class="iride-scura" />
</radialGradient>
<!-- the outlines that keep the details inside their piece -->
<clipPath id="ufo-bowl-clip"><path d="M-104 16C-98 46 -60 64 0 64C60 64 98 46 104 16Z" /></clipPath>
<clipPath id="ufo-disc-clip"><ellipse cx="0" cy="0" rx="148.5" ry="28.5" /></clipPath>
<clipPath id="ufo-dome-clip"><path d="M-78.5 -12C-78.5 -77 -43 -116.5 0 -116.5C43 -116.5 78.5 -77 78.5 -12Z" /></clipPath>
<clipPath id="alien-suit-clip"><path d="M-26 0C-28 -24 -16 -38 0 -38C16 -38 28 -24 26 0Z" /></clipPath>
<clipPath id="alien-head-clip"><path d="M-34 -62C-34 -80 -18 -88 0 -88C18 -88 34 -80 34 -62C34 -46 20 -37 0 -37C-20 -37 -34 -46 -34 -62Z" /></clipPath>
<clipPath id="alien-eyes-clip"><ellipse cx="-13" cy="-63" rx="10.5" ry="12.5" /><ellipse cx="13" cy="-63" rx="10.5" ry="12.5" /></clipPath>
<clipPath id="alien-grin-clip"><path d="M-9 -48.5Q0 -46.5 9 -48.5Q8 -38.6 0 -38.4Q-8 -38.6 -9 -48.5Z" /></clipPath>
<clipPath id="alien-screen-clip"><rect x="-13" y="-18" width="26" height="9" rx="2" /></clipPath>
</defs>
<g data-world>
<rect class="cielo-sera" fill="url(#dusk-fill)" data-dusk />
<ellipse class="ombra" data-shadow />
<g data-sockets></g>
<g data-logo></g>
<g data-trail></g>
<!-- the beam, the scanner and the rings: drawn by the script every frame, from the hatch to the logo -->
<g data-beam>
<ellipse class="pozza-luce" data-pool />
<polygon class="raggio" fill="url(#beam-fill)" data-cone />
<g data-rings></g>
<g data-motes></g>
</g>
<g data-scan>
<polygon class="scansione-fascio" data-scan-cone />
<line class="scansione-riga" data-scan-line />
</g>
<!-- the saucer: drawn round its centre, the middle of the disc is 0 0 -->
<g data-ufo-place>
<g data-ufo>
<!-- the heat under the engine: wavy strokes that drift down while it hovers -->
<g data-heat></g>
<!-- the bowl underneath: brushed metal, panels with rivets, two portholes -->
<path class="ufo-conca" d="M-104 16C-98 46 -60 64 0 64C60 64 98 46 104 16Z" />
<g clip-path="url(#ufo-bowl-clip)">
<path class="ufo-ombra-fascia" d="M-110 20Q0 64 110 20" />
<path class="ufo-righe" d="M-80 30Q-74 46 -60 56M80 30Q74 46 60 56M-40 40Q-36 52 -30 62M40 40Q36 52 30 62" />
<path class="rivetti" d="M-74 40.5h0.01M-68 48.5h0.01M-37.6 47h0.01M-34.4 55h0.01M74 40.5h0.01M68 48.5h0.01M37.6 47h0.01M34.4 55h0.01" />
<g class="oblo">
<ellipse class="oblo-cornice" cx="-58" cy="46" rx="8.5" ry="5.6" />
<ellipse class="oblo-vetro" cx="-58" cy="46" rx="5.6" ry="3.4" />
<path class="oblo-lucido" d="M-61 45Q-59.5 43.4 -57 43.3" />
<ellipse class="oblo-cornice" cx="58" cy="46" rx="8.5" ry="5.6" />
<ellipse class="oblo-vetro" cx="58" cy="46" rx="5.6" ry="3.4" />
<path class="oblo-lucido" d="M55 45Q56.5 43.4 59 43.3" />
</g>
</g>
<!-- the engine ring the beam comes out of, with its fins, and the hatch -->
<path class="aletta" d="M-27 66L-33 76L-22 74L-19 68ZM27 66L33 76L22 74L19 68ZM-33 62L-44 69L-36 71L-30 66ZM33 62L44 69L36 71L30 66Z" />
<ellipse class="motore" cx="0" cy="62" rx="34" ry="9" />
<path class="ufo-righe" d="M-26 66.5Q0 72.5 26 66.5" />
<g data-hatch>
<ellipse class="botola" cx="0" cy="62" rx="22" ry="5.6" />
<path class="botola-iride" d="M-6 62L-17 59M6 62L17 59M-6 62L-15 66M6 62L15 66M0 62L0 57" />
<ellipse class="botola-luce" cx="0" cy="62" rx="16" ry="3.4" data-hatch-glow />
</g>
<!-- the rim, then the disc on top of it: the rim shows as a band, where the lights run -->
<ellipse class="ufo-fascia" cx="0" cy="12" rx="150" ry="30" />
<g data-lights></g>
<ellipse class="ufo" cx="0" cy="0" rx="150" ry="30" />
<!-- the plates of the disc, their seams and rivets, and the signs of a long service -->
<g clip-path="url(#ufo-disc-clip)">
<g data-seams></g>
<path class="graffio" d="M-70 15L-52 20.5M-66 19.5L-56 22.5M40 22L58 19M100 8L112 4.5" />
<g transform="rotate(-8 -112 10)">
<rect class="toppa" x="-124" y="4" width="22" height="12" rx="2" />
<path class="rivetti rivetti--fini" d="M-120.5 7h0.01M-105.5 7h0.01M-120.5 13h0.01M-105.5 13h0.01" />
</g>
<path class="ammaccatura" d="M78 13C82 9 92 9 95 14C91 12.5 84 12.5 78 13Z" />
<path class="ammaccatura-luce" d="M79 15.4C84 17.6 91 17.4 95 15.6" />
</g>
<ellipse class="ufo-chiaro" cx="0" cy="-6" rx="112" ry="19" />
<ellipse class="ufo-solco" cx="0" cy="-7" rx="97" ry="15" />
<path class="ufo-lucido" d="M-130 -10C-104 -22 -64 -27 -24 -29" />
<!-- the dish that turns, on the left of the deck, and the whip aerial with its pennant on the right -->
<rect class="ufo-scuro" x="-109" y="-27" width="6" height="20" rx="2" />
<ellipse class="ufo-scuro" cx="-106" cy="-7.5" rx="8" ry="3" />
<g data-dish>
<g transform="rotate(-20 -106 -32)">
<path class="parabola-dietro" d="M-121 -32Q-106 -15 -91 -32Z" />
<ellipse class="parabola" cx="-106" cy="-32" rx="15" ry="5.4" />
<path class="parabola-braccio" d="M-112 -31L-106 -45L-100 -31" />
<rect class="parabola-testa" x="-108.5" y="-49" width="5" height="5" rx="1.4" />
</g>
</g>
<ellipse class="ufo-scuro" cx="104" cy="-7" rx="6.5" ry="2.6" />
<g data-whip>
<path class="antennina" d="M104 -8L106 -40" />
<path class="bandierina" d="M106 -40L119 -37L106 -32Z" data-pennant />
</g>
<!-- the glass dome: its back with the light of the cabin, the floor, the controls, the pilot, the console -->
<path class="cupola-dietro" d="M-80 -12C-80 -78 -44 -118 0 -118C44 -118 80 -78 80 -12Z" />
<ellipse class="ufo-scuro" cx="0" cy="-12" rx="80" ry="10" />
<path class="luce-cabina" d="M-14 -16L14 -16L30 -70L-30 -70Z" />
<g data-stick>
<rect class="leva" x="-45.5" y="-37" width="3" height="27" rx="1.4" />
<rect class="leva-pomo leva-pomo--cloche" x="-47" y="-42" width="6" height="7" rx="2.6" />
</g>
<g data-lever>
<rect class="leva" x="42.5" y="-36" width="3" height="26" rx="1.4" />
<ellipse class="leva-pomo" cx="44" cy="-37" rx="4.6" ry="3.6" />
</g>
<!-- the pilot -->
<g data-alien>
<g data-alien-body>
<path class="tuta" d="M-26 0C-28 -24 -16 -38 0 -38C16 -38 28 -24 26 0Z" />
<g clip-path="url(#alien-suit-clip)">
<path class="cinghia-bordo" d="M-19 -36L4 -12M19 -36L-4 -12" />
<path class="cinghia" d="M-19 -36L4 -12M19 -36L-4 -12" />
<path class="tuta-righe" d="M-24 -18Q0 -13 24 -18" />
</g>
<path class="stemma" d="M-4.5 -31L4.5 -31L4.5 -27Q4.5 -23.6 0 -22.2Q-4.5 -23.6 -4.5 -27Z" />
<path class="stemma-segno" d="M-2.6 -26.4A2.6 2.6 0 1 0 2.6 -26.4A2.6 2.6 0 1 0 -2.6 -26.4M-4 -25.2L4 -27.6" />
<path class="colletto" d="M-17 -35Q0 -27 17 -35Q16 -42 0 -42Q-16 -42 -17 -35Z" />
</g>
<g data-alien-head>
<g data-antenna-l>
<path class="antenna" d="M-9 -84L-14 -94" />
<g data-antenna-l2>
<path class="antenna" d="M-14 -94L-22.5 -101.5" />
<circle class="antenna-punta" cx="-24" cy="-104" r="4.8" />
<path class="antenna-lucido" d="M-26.4 -105.4Q-25.6 -107.2 -23.6 -107.4" />
</g>
<circle class="antenna-giunto" cx="-14" cy="-94" r="2.2" />
</g>
<g data-antenna-r>
<path class="antenna" d="M9 -84L14 -94" />
<g data-antenna-r2>
<path class="antenna" d="M14 -94L22.5 -101.5" />
<circle class="antenna-punta" cx="24" cy="-104" r="4.8" />
<path class="antenna-lucido" d="M21.6 -105.4Q22.4 -107.2 24.4 -107.4" />
</g>
<circle class="antenna-giunto" cx="14" cy="-94" r="2.2" />
</g>
<path class="alieno" d="M-34 -62C-34 -80 -18 -88 0 -88C18 -88 34 -80 34 -62C34 -46 20 -37 0 -37C-20 -37 -34 -46 -34 -62Z" />
<g clip-path="url(#alien-head-clip)">
<ellipse class="alieno-mento" cx="0" cy="-35" rx="36" ry="9" />
<path class="alieno-macchia" d="M17 -80a3.4 2.5 -15 1 0 6.8 0a3.4 2.5 -15 1 0 -6.8 0ZM25 -72a2.1 1.7 0 1 0 4.2 0a2.1 1.7 0 1 0 -4.2 0ZM-29 -72a2.7 2.1 20 1 0 5.4 0a2.7 2.1 20 1 0 -5.4 0ZM-22 -81a1.8 1.4 0 1 0 3.6 0a1.8 1.4 0 1 0 -3.6 0ZM27 -60a2.3 1.8 0 1 0 4.6 0a2.3 1.8 0 1 0 -4.6 0ZM-32 -58a1.7 1.4 0 1 0 3.4 0a1.7 1.4 0 1 0 -3.4 0ZM4 -85a1.6 1.2 0 1 0 3.2 0a1.6 1.2 0 1 0 -3.2 0ZM-8 -86.4a1.3 1 0 1 0 2.6 0a1.3 1 0 1 0 -2.6 0ZM29.6 -67a1.2 1 0 1 0 2.4 0a1.2 1 0 1 0 -2.4 0ZM-30.6 -65a1.2 1 0 1 0 2.4 0a1.2 1 0 1 0 -2.4 0Z" />
</g>
<path class="alieno-lucido" d="M-24 -78C-18 -84 -10 -86 -2 -86" />
<g data-cheeks>
<ellipse class="guancia" cx="-24" cy="-49" rx="5.5" ry="3.2" />
<ellipse class="guancia" cx="24" cy="-49" rx="5.5" ry="3.2" />
</g>
<ellipse class="occhio" cx="-13" cy="-63" rx="10.5" ry="12.5" />
<ellipse class="occhio" cx="13" cy="-63" rx="10.5" ry="12.5" />
<g clip-path="url(#alien-eyes-clip)">
<g data-pupils>
<circle class="iride" cx="-12" cy="-61" r="6.8" />
<circle class="pupilla" cx="-12" cy="-61" r="3.6" />
<circle class="riflesso" cx="-14.6" cy="-64.4" r="2.2" />
<circle class="riflesso" cx="-9.2" cy="-58.4" r="1.1" />
<circle class="iride" cx="14" cy="-61" r="6.8" />
<circle class="pupilla" cx="14" cy="-61" r="3.6" />
<circle class="riflesso" cx="11.4" cy="-64.4" r="2.2" />
<circle class="riflesso" cx="16.8" cy="-58.4" r="1.1" />
</g>
</g>
<g data-lids>
<ellipse class="palpebra" cx="-13" cy="-63" rx="11.6" ry="13.6" />
<ellipse class="palpebra" cx="13" cy="-63" rx="11.6" ry="13.6" />
</g>
<g data-brow-l><path class="sopracciglio" d="M-21.5 -79.5Q-14 -84.5 -6 -81.5" /></g>
<g data-brow-r><path class="sopracciglio" d="M21.5 -79.5Q14 -84.5 6 -81.5" /></g>
<!-- the mouths: one shows at a time, by the mood of the moment -->
<path class="bocca-linea" d="M-7 -47Q0 -41 7 -47" data-mouth />
<g data-mouth-grin>
<path class="bocca-aperta" d="M-9 -48.5Q0 -46.5 9 -48.5Q8 -38.6 0 -38.4Q-8 -38.6 -9 -48.5Z" />
<g clip-path="url(#alien-grin-clip)">
<ellipse class="lingua" cx="0" cy="-38.6" rx="6" ry="3.6" />
<rect class="dentino" x="1.6" y="-49.5" width="4.2" height="4" rx="1" />
</g>
<path class="bocca-bordo" d="M-9 -48.5Q0 -46.5 9 -48.5Q8 -38.6 0 -38.4Q-8 -38.6 -9 -48.5Z" />
</g>
<g data-mouth-tongue>
<path class="lingua" d="M2.4 -46.4Q7.6 -46.8 8.6 -42.6Q8.2 -40 5.6 -40.6Q3.4 -41.4 2.4 -44Z" />
<path class="bocca-linea" d="M-6.5 -45Q-1 -43.6 6 -46.6" />
</g>
<g data-mouth-yuck>
<path class="lingua" d="M-3.4 -46Q-4 -38.4 0 -38.2Q4 -38.4 3.4 -46Z" />
<path class="lingua-riga" d="M0 -45L0 -41" />
<path class="bocca-linea" d="M-9 -46Q-6.5 -49.5 -3.5 -46.4Q0 -44 3.5 -46.4Q6.5 -49.5 9 -46" />
</g>
<g data-mouth-grit>
<path class="denti" d="M-9.5 -49.5L9.5 -49.5Q10.4 -43 7 -42L-7 -42Q-10.4 -43 -9.5 -49.5Z" />
<path class="denti-righe" d="M-9.6 -45.6L9.6 -45.6M-4.6 -49.5L-4.6 -42M0 -49.5L0 -42M4.6 -49.5L4.6 -42" />
</g>
<ellipse class="bocca-o" cx="0" cy="-45" rx="4.2" ry="5.2" data-mouth-o />
<!-- the sweat of the tug of war -->
<path class="goccia" d="M31 -84Q35 -78.4 33.2 -75.6Q31 -73 28.8 -75.6Q27 -78.4 31 -84Z" data-sweat-a />
<path class="goccia" d="M-33 -76Q-29 -70.4 -30.8 -67.6Q-33 -65 -35.2 -67.6Q-37 -70.4 -33 -76Z" data-sweat-b />
</g>
<!-- the arms, two strokes each (a dark wide one for the outline), a cuff, and the three-fingered hands -->
<g data-arm-l>
<path class="braccio-bordo" d="M-20 -31Q-32 -38 -41 -33" />
<path class="braccio" d="M-20 -31Q-32 -38 -41 -33" />
<path class="polsino-bordo" d="M-37.6 -37.2L-40.4 -30.6" />
<path class="polsino" d="M-37.6 -37.2L-40.4 -30.6" />
<path class="mano" d="M-49 -33C-50 -38.4 -44 -39.4 -42 -36.6C-40 -38.8 -36 -37.6 -37.4 -34C-35 -32 -36 -27 -40 -27C-45 -26 -49 -28 -49 -33Z" />
<path class="mano-dita" d="M-44.6 -35.4L-44.8 -30.2M-41 -35.2L-41.2 -29.8" />
</g>
<g data-arm-r>
<path class="braccio-bordo" d="M20 -31Q32 -38 41 -33" />
<path class="braccio" d="M20 -31Q32 -38 41 -33" />
<path class="polsino-bordo" d="M37.6 -37.2L40.4 -30.6" />
<path class="polsino" d="M37.6 -37.2L40.4 -30.6" />
<path class="mano" d="M49 -33C50 -38.4 44 -39.4 42 -36.6C40 -38.8 36 -37.6 37.4 -34C35 -32 36 -27 40 -27C45 -26 49 -28 49 -33Z" />
<path class="mano-dita" d="M44.6 -35.4L44.8 -30.2M41 -35.2L41.2 -29.8" />
</g>
</g>
<!-- the console, in front of the pilot: a little screen, buttons, and the big one it presses -->
<path class="cruscotto" d="M-62 -8L-56 -20Q0 -27 56 -20L62 -8Q0 -3 -62 -8Z" />
<path class="cruscotto-piano" d="M-56 -20Q0 -27 56 -20L58 -16.5Q0 -23.5 -58 -16.5Z" />
<rect class="schermo" x="-13" y="-18" width="26" height="9" rx="2" />
<g clip-path="url(#alien-screen-clip)">
<path class="schermo-griglia" d="M-13 -13.5L13 -13.5M-6.5 -18L-6.5 -9M0 -18L0 -9M6.5 -18L6.5 -9" />
<path class="onda" data-wave />
</g>
<rect class="tasto tasto--a" x="-34" y="-15" width="6" height="3.4" rx="1.2" />
<rect class="tasto tasto--b" x="-25" y="-15" width="6" height="3.4" rx="1.2" />
<rect class="tasto tasto--c" x="19" y="-15" width="6" height="3.4" rx="1.2" />
<g data-button>
<rect class="tasto tasto--grande" x="35.6" y="-21.6" width="7.4" height="3.2" rx="1.4" />
<rect class="tasto-premuto" x="36.8" y="-21" width="5" height="2" rx="0.9" data-button-lit />
</g>
<path class="cupola" d="M-80 -12C-80 -78 -44 -118 0 -118C44 -118 80 -78 80 -12Z" />
<g clip-path="url(#ufo-dome-clip)">
<path class="cupola-scia" d="M-18 -128L2 -128L-30 0L-50 0Z" data-glint />
</g>
<path class="cupola-lucido" d="M-62 -36C-64 -72 -44 -100 -18 -109" />
<path class="cupola-lucido cupola-lucido--fine" d="M50 -92C58 -82 63 -68 64 -56" />
<path class="cupola-lucido cupola-lucido--punto" d="M-54 -26C-55 -29 -55 -31 -54.6 -33" />
<!-- the collar of the dome: a rubber gasket over a ring of bolts -->
<path class="ufo-chiaro" d="M-86 -12A86 10 0 0 0 86 -12L86 -6A86 10 0 0 1 -86 -6Z" />
<path class="guarnizione" d="M-81 -11.6A81 9.4 0 0 0 81 -11.6" />
<path class="rivetti" d="M-70 -1.4h0.01M-42 1.6h0.01M-14 3h0.01M14 3h0.01M42 1.6h0.01M70 -1.4h0.01" />
</g>
</g>
<g data-fx></g>
</g>
</svg>
<p class="nota">Click or tap to see it again</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
44 valori da cambiare
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Il logo rapito dall’UFO» da Animorio e adattala al mio sitoIl palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Le lettere si misurano su una canvas con lo stesso carattere: measureText dà l’avanzamento e, con actualBoundingBox, l’inchiostro vero di ogni lettera (sinistra, destra, sopra, sotto), e da lì viene una sola grandezza per il disco, il raggio e il logo. Su uno schermo alto c’è cielo in più: il disco diventa largo fino a metà schermo e il raggio più lungo.
Ogni lettera è un gruppo esterno che si sposta, gira e scala intorno al centro dell’inchiostro (svgOrigin, non getBBox, che per un testo dà la scatola dell’em) e un gruppo interno che si allunga dal piede: così la lettera che si aggrappa resta ferma sulla riga mentre si stira verso l’alto. Sotto il logo c’è una copia tratteggiata di ogni lettera: è l’insegna spenta all’inizio e il buco quando la lettera se ne va.
Disco, cupola e alieno sono disegnati una volta sola nella pagina, a pezzi e col contorno: la conca di metallo con pannelli, rivetti e due oblò, l’anello del motore con le alette e la botola a diaframma, il bordo con dodici luci a barretta, il disco con la sfumatura del metallo, le giunture delle lamiere, i graffi, una toppa rivettata e un’ammaccatura, la parabola che gira e l’antennina con la bandierina. Sotto la cupola (riflessi, guarnizione, luce della cabina) c’è il cruscotto con lo schermino, i pulsanti, la cloche e la leva, e l’alieno con tuta, colletto, cinghie e distintivo, pelle a macchioline, occhi con iride sfumata e due riflessi, palpebre, sopracciglia e cinque bocche, una per umore. I dettagli stanno dentro la loro sagoma con un clipPath; ogni pezzo ruota intorno alla sua articolazione (le antenne ne hanno due, così la punta arriva in ritardo). Il ticker, dal tempo della timeline, fa girare la parabola, beccheggiare il disco, scorrere il riflesso sulla cupola e l’onda sullo schermo, salire il calore sotto il motore: una foto a un istante dato è sempre uguale.
Il cono è un poligono ridisegnato a ogni fotogramma dalla botola, dovunque sia il disco e comunque sia inclinato, alla lettera: se la lettera sta in fondo alla parola il disco resta dentro lo schermo e il raggio si inclina. Gli anelli sono ellissi che salgono restringendosi col cono (o scendono, quando il raggio rimanda giù la lettera), i granelli ruotano salendo; lo scanner è una lama sottile con una riga che scorre.
Quando la lettera molla, la timeline porta da 0 a 1 un solo numero col rimbalzo di back.out, e il ticker mette la lettera fra la riga e il punto sotto la botola, calcolato ogni volta dalla posizione del disco: durante il giro di festa, la fuga e il passaggio lontano la lettera pende sempre in giù e dondola, e rimpicciolisce col disco. La scia della fuga è un triangolo dalla coda alla testa del disco con un gradiente in coordinate dello schermo.
Tutta la storia è una timeline sola, con timeScale per la velocità ed etichette per ogni momento (arrive, scan, take, inspect, flip, grip, snap, party, escape, rest, heal). Le lettere che tornano usano fromTo con immediateRender false; alla fine la scena si ricostruisce da «arrive». Se IMAGE ha un indirizzo, il logo diventa quell’immagine tagliata a strisce: resta intera, le strisce che partono sono copie ritagliate con un clipPath e una maschera apre il loro buco solo quando se ne vanno. Nel Playground accanto al campo c’è il tasto per caricare un file, che entra nel codice come indirizzo data:.
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Moonvale' | Il logo scritto: ogni lettera è un pezzo che il disco può portarsi via. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola e il raggio ne prende le strisce. |
TAKEN | script.js | 2 | Quante lettere il disco si porta via: la prima sale piano, le altre più svelte, l’ultima si aggrappa e se ne va appesa sotto il disco. Con 0 c’è solo quella capovolta. |
FLIPPED | script.js | 4 | La lettera rimandata giù capovolta, contando da 0 senza gli spazi (in Moonvale la 4 è la v, che capovolta si legge bene). |
UFO | script.js | 2.6 | Quanto è largo il disco volante, in altezze di lettera. Su uno schermo alto diventa un po’ più grande. |
FLIGHT | script.js | 1 | La velocità dei voli del disco (la discesa, gli spostamenti, il giro di festa, la fuga, il passaggio lontano): 2 è il doppio. |
SPEED | script.js | 1 | La velocità di tutta la storia: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta coi buchi prima che le lettere tornino. Da 2,5 secondi in su il disco ripassa lontano. |
LOOP | script.js | true | Se le lettere tornano e la storia ricomincia. Con false il logo resta coi buchi e la lettera capovolta continua a dondolare. |
Per presentare un logo in modo che non si dimentichi: l’anteprima per un cliente, l’apertura di un sito o di un video di uno studio, una pagina 404 («qualcuno si è preso la pagina») o un caricamento con un po’ di ironia, un post per i social. Funziona con un marchio scritto e con un’immagine.
La stessa storia, con le misure adattate: su uno schermo alto il disco è largo fino a metà schermo e il raggio è più lungo; sopra le lettere in fondo alla parola il disco resta dentro lo schermo e il raggio si inclina. Un tocco la fa ripartire.
Niente si muove: il logo compare in dissolvenza, il cielo si scurisce, il disco compare fermo col raggio acceso, poi in dissolvenza le lettere rapite spariscono, quella capovolta si scambia con la sua copia girata e il disco sparisce. Se la storia ricomincia, anche il ritorno è una dissolvenza.
GSAP 3.15.0, Sora (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 24 KB; le librerie: GSAP 28 KB.
Provata il 10 ottobre 2026
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
Con l’email e la password del tuo account.
oppure con l’email
Hai fatto l’accesso come .
Con l’account scarichi lo zip di ogni animazione e di ogni pacchetto, gratis.