Vai al contenuto
animorio
EN
Torna alla libreria

Il logo rapito dall’UFO

Intro, SVG, TestoGSAPImpegnativaPeso compresso: Demo 24 KBGSAP 28 KBGratisScarica lo zip

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.

Il codice

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>

Playground

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

Oppure chiedila a Claude Code

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 sito

Cosa fa

Su un cielo chiaro c’è l’insegna spenta di un marchio inventato, Moonvale, disegnata a tratteggio: le lettere si accendono una dopo l’altra con lo sfarfallio di un neon, qualche scintilla e un rimbalzo. Il cielo si scurisce un poco e dall’alto scende ondeggiando un disco volante, con le luci del bordo che corrono in giro e, sotto una cupola di vetro, un alieno verde con gli occhioni, le palpebre, le antenne che vibrano e le manine sul cruscotto; avvicinandosi fa tremolare l’insegna. Si ferma sopra il logo, l’alieno lo guarda tutto, poi uno scanner sottile lo legge da sinistra a destra e ogni lettera si illumina al suo passaggio. Si apre il raggio traente, un cono di luce con anelli che salgono: una lettera si stacca, trema, gira piano su se stessa e sale fino alla botola, che la inghiotte (l’alieno arrossisce, contento). Un’altra sale a metà, l’alieno si sporge a guardarla, fa di no con la testa e il raggio la rimanda giù capovolta. L’ultima si aggrappa: il raggio la tira, lei si allunga come gomma, il disco si sforza, finché la lettera molla e schizza su come un elastico. Il disco fa un giro di festa con i coriandoli e scappa in diagonale con la lettera appesa sotto, lasciando una scia. Il logo resta coi buchi tratteggiati e la lettera capovolta che dondola, mentre il disco ripassa piccolo e lontano in alto; poi le lettere tornano (quella rapita scende col paracadute, quella capovolta si rigira) e la storia ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine, tagliata a strisce: il raggio prende le strisce.

Come funziona

Il palco a misura

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

Le lettere a strati

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.

Il disco e il pilota

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 raggio traente

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.

La lettera portata via

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.

La regia e il tuo logo

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

Valori da cambiare

NomeFileDi partenzaCosa cambia
NAMEscript.js'Moonvale'Il logo scritto: ogni lettera è un pezzo che il disco può portarsi via.
IMAGEscript.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.
TAKENscript.js2Quante 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.
FLIPPEDscript.js4La lettera rimandata giù capovolta, contando da 0 senza gli spazi (in Moonvale la 4 è la v, che capovolta si legge bene).
UFOscript.js2.6Quanto è largo il disco volante, in altezze di lettera. Su uno schermo alto diventa un po’ più grande.
FLIGHTscript.js1La velocità dei voli del disco (la discesa, gli spostamenti, il giro di festa, la fuga, il passaggio lontano): 2 è il doppio.
SPEEDscript.js1La velocità di tutta la storia: 2 è il doppio, 0.5 la metà.
RESTscript.js4Quanti secondi il logo resta coi buchi prima che le lettere tornino. Da 2,5 secondi in su il disco ripassa lontano.
LOOPscript.jstrueSe le lettere tornano e la storia ricomincia. Con false il logo resta coi buchi e la lettera capovolta continua a dondolare.

Provali nel Playground

Quando usarla

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.

Sul telefono

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.

Con il movimento ridotto

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.

Trappole

  • getBBox di un testo dà la scatola dell’em, non l’inchiostro: girata di mezzo giro intorno a quel centro, una lettera minuscola finiva sospesa sopra la riga. Il centro si calcola con actualBoundingBox lettera per lettera e si passa come svgOrigin.
  • Dopo mezzo giro il piede della lettera è in alto: lo schiacciamento all’atterraggio e il dondolio della lettera capovolta girano intorno alla sua cima, che ora tocca la riga.
  • La lettera portata via la mette il ticker, non la timeline: tornando indietro con seek prima dello strappo restava in cielo. Ora, prima dell’etichetta snap, torna al suo posto.
  • fromTo dentro una timeline disegna subito i valori di partenza: le lettere che tornano dal cielo sparivano già all’inizio della storia. Ci vuole immediateRender false.
  • Sul telefono, sopra l’ultima lettera, il disco usciva per metà dallo schermo: si ferma prima del bordo e il raggio, ridisegnato a ogni fotogramma dalla botola alla lettera, si inclina.
  • Strisce di un’immagine tagliate e accostate lasciano righe sottili dove si toccano: l’immagine resta intera e solo le strisce che partono sono copie, con una maschera che apre il loro buco quando se ne vanno.
  • La a capovolta di Moonvale si leggeva come una e e lo scherzo non si capiva: la lettera capovolta predefinita è la v, che diventa una Λ.
  • Con le braccia più lunghe, che tengono cloche e leva, l’esultanza a 95 gradi metteva le mani davanti alla faccia: le braccia si alzano solo di una cinquantina di gradi, di fianco alla testa.
  • La parabola gira schiacciandola in larghezza: per un attimo è larga zero e sparisce, e se è simmetrica non si capisce da che parte gira. È inclinata di lato e non scende mai sotto un decimo della sua larghezza.

Librerie

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.

Collaudo

Provata il 10 ottobre 2026

  • Computer: Fatto
  • Telefono: Fatto
  • Movimento ridotto: Fatto
  • Safari su iPhone: Da fare

Licenza d’uso

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.

Tutte le animazioni