La festa a sorpresa

Hover, SVGGSAPMediaPeso compresso: Demo 7,0 KBGSAP 28 KBGratisScarica lo zip

Un titolo con una finestra tonda in mezzo alla riga, e dentro una mascotte. Sulla pagina si nascondono piccole forme: vicino al puntatore crescono, fanno due giri e spariscono. Il bottone «Click for a surprise» fa partire la festa: la finestra cambia colore nove volte, la mascotte balla con gli occhiali e tutte le forme si svegliano tre volte.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The surprise party</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/dm-serif-display@5.3.0/400-italic.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="bar">
    <a class="brand" href="#">Sprinkle &amp; Co.</a>
    <nav class="pill" aria-label="Sections">
      <a href="#">Cakes</a>
      <a href="#">Parties</a>
      <a href="#">Visit</a>
      <a class="pill__cta" href="#">Order a cake</a>
    </nav>
  </header>

  <main class="hero" data-hero>
    <!-- the shapes hide here: the script places them and wakes them near the pointer -->
    <div class="shapes" data-shapes aria-hidden="true"></div>

    <h1 class="title">
      <span class="title__line">Baking
        <!-- the round window with the mascot inside: it changes colour during the party -->
        <span class="window" data-window aria-hidden="true">
          <svg class="mascot" data-mascot viewBox="0 0 200 240">
            <g data-body>
              <!-- the paper cup -->
              <path d="M44 150h112l-12 78H56z" fill="#f7c868"/>
              <path d="M62 150l4 78M82 150l2 78M100 150v78M118 150l-2 78M138 150l-4 78" stroke="#e3ab45" stroke-width="7"/>
              <!-- the arms, each turning at its shoulder -->
              <g data-arm="left">
                <path d="M48 168c-16 2-26 10-32 22" fill="none" stroke="#e3ab45" stroke-width="9" stroke-linecap="round"/>
                <circle cx="15" cy="192" r="8" fill="#f7c868"/>
              </g>
              <g data-arm="right">
                <path d="M152 168c16 2 26 10 32 22" fill="none" stroke="#e3ab45" stroke-width="9" stroke-linecap="round"/>
                <circle cx="185" cy="192" r="8" fill="#f7c868"/>
              </g>
              <!-- the frosting, with its drips -->
              <path d="M28 156c-8-62 32-108 72-108s80 46 72 108c-6 8-14 4-18-4-4 10-14 12-20 2-6 10-18 10-24 0-6 10-18 10-24 0-6 10-16 8-20-2-4 8-12 12-18 4z" fill="#ff8fb3"/>
              <path d="M60 80c10-14 26-22 40-22" fill="none" stroke="#ffc2d6" stroke-width="7" stroke-linecap="round"/>
              <!-- sprinkles -->
              <g stroke-width="5" stroke-linecap="round">
                <path d="M66 70l8-4" stroke="#ffd23f"/>
                <path d="M130 66l7 6" stroke="#6a8cff"/>
                <path d="M146 100l4 8" stroke="#58c98f"/>
                <path d="M48 112l3-8" stroke="#ffffff"/>
                <path d="M112 54l8 2" stroke="#58c98f"/>
                <path d="M82 136l6-6" stroke="#ffd23f"/>
                <path d="M128 136l7 4" stroke="#ffffff"/>
              </g>
              <!-- the cherry -->
              <path d="M104 28c4-10 10-16 18-18" fill="none" stroke="#5b8a3c" stroke-width="4" stroke-linecap="round"/>
              <circle cx="100" cy="38" r="12" fill="#e5383b"/>
              <!-- the face -->
              <g data-eyes>
                <ellipse cx="80" cy="104" rx="9" ry="11" fill="#2a1d22"/>
                <ellipse cx="120" cy="104" rx="9" ry="11" fill="#2a1d22"/>
                <circle cx="83" cy="100" r="3" fill="#fff"/>
                <circle cx="123" cy="100" r="3" fill="#fff"/>
              </g>
              <path d="M86 124c8 8 20 8 28 0" fill="none" stroke="#2a1d22" stroke-width="5" stroke-linecap="round"/>
              <ellipse cx="66" cy="120" rx="8" ry="5" fill="#ff6f9c"/>
              <ellipse cx="134" cy="120" rx="8" ry="5" fill="#ff6f9c"/>
              <!-- the party glasses: they come down when the party starts -->
              <g data-glasses>
                <path d="M62 94h30c2 0 4 2 4 4v8c0 8-6 14-14 14h-6c-8 0-16-6-16-14v-8c0-2 1-4 2-4zM108 94h30c1 0 2 2 2 4v8c0 8-8 14-16 14h-6c-8 0-14-6-14-14v-8c0-2 2-4 4-4z" fill="#1d1b22"/>
                <path d="M96 100h8" stroke="#1d1b22" stroke-width="5"/>
                <path d="M68 100l8-4M114 100l8-4" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
              </g>
            </g>
          </svg>
        </span>
        loud</span>
      <span class="title__line">party <em>cakes.</em></span>
    </h1>

    <footer class="hero__foot">
      <p class="hero__note" data-hint>Something hides around here. Move the pointer to find it.</p>
      <button class="surprise" type="button" data-surprise data-autoclic>Click for a surprise</button>
    </footer>
  </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.

38 valori da cambiare

Apri il Playground

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 «La festa a sorpresa» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La home di una pasticceria inventata che fa torte per le feste, Sprinkle & Co., su un fondo color panna. Al centro il titolo «Baking loud party cakes.»: fra «Baking» e «loud» c’è una finestra tonda scura, grande come una lettera, e dentro un cupcake con la faccia che sale dal fondo, mette gli occhiali e saluta. Intorno al titolo si nascondono diciotto forme, stelle, cuori, spirali, fiori, rombi, raggi e codette di zucchero, in sei colori: quando il puntatore passa a meno di cento pixel da una, la forma cresce mentre gira, fa due giri interi e sparisce. Passando sulla finestra il cupcake fa l’occhiolino e indica. In basso a destra il bottone «Click for a surprise»: la finestra passa per nove colori, il cupcake mette gli occhiali e balla a tempo, saltando e alzando le braccia, e tutte le forme si svegliano in ordine casuale, tre volte ciascuna.

Come funziona

La finestra nel titolo

La finestra è uno span inline-block largo e alto 1,12 em, tondo e con overflow nascosto, abbassato di 0,16 em perché stia sulla riga come una lettera. Dentro c’è il cupcake in SVG, più largo della finestra e appoggiato sotto il bordo, così si vede dalla vita in su.

Le forme nascoste

Lo script mette diciotto forme in posti fissi intorno al titolo, ognuna con il suo disegno, colore e misura presi da un caso col seme, a scala 0. Svegliarsi è una timeline GSAP di SPIN secondi: nel primo quarto cresce fino a 1 girando di mezzo giro, a metà fa un giro intero a misura piena, nell’ultimo quarto rimpicciolisce girando il resto; una sì e una no gira al contrario.

Il puntatore

A ogni movimento si misura la distanza fra il puntatore e il posto di ogni forma: sotto REACH pixel la forma si sveglia. Mentre è sveglia, e per mezzo secondo dopo, non si risveglia, così un puntatore fermo vicino non la tiene accesa di continuo. Senza mouse ogni forma si sveglia da sola ogni AUTO secondi, ognuna 0,3 secondi dopo la precedente.

La festa

Il bottone costruisce una timeline: il fondo della finestra passa per i colori di DISCO, uno ogni STEP secondi, e alla fine torna scuro. Intanto ogni forma, in un ordine mischiato, si sveglia ROUNDS volte: la i-esima dopo GAP[0] · i secondi, e ogni giro GAP[1] secondi dopo il precedente. Tutto passa per delayedCall, l’orologio di GSAP, e non per i timer del browser.

La mascotte

Il cupcake è un disegno con il corpo, le braccia, gli occhi e gli occhiali in gruppi separati. Il ballo è costruito battuta per battuta, ogni mezzo secondo: il corpo salta di 16 unità allungandosi e atterra schiacciandosi, inclinato di 6 gradi da una parte e dall’altra, e le braccia girano intorno alle spalle con svgOrigin, una su e una giù. Gli occhi sbattono ogni due o quattro secondi.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`REACH`	script.js	`100`	Quanto deve avvicinarsi il puntatore a una forma nascosta per svegliarla, in pixel.
`SPIN`	script.js	`2`	I secondi che vive una forma: cresce, gira e sparisce.
`TURNS`	script.js	`2`	Quanti giri fa in quel tempo.
`COUNT`	script.js	`18`	Quante forme si nascondono sulla pagina (al massimo 24).
`COLORS`	script.js	`['#6a8cff', '#ff7a45', '#1d1b22', '#ff8fb3', '#ffc93c', '#58c98f']`	I colori delle forme.
`DISCO`	script.js	`['#ff8fb3', '#6a8cff', '#ffc93c', '#58c98f', '#ff7a45', '#b07cff', '#3fc6d6', '#ff5d5d', '#f7c868']`	I colori della finestra durante la festa.
`STEP`	script.js	`0.45`	I secondi di ogni colore della festa.
`ROUNDS`	script.js	`3`	Quante volte si sveglia ogni forma durante la festa.
`GAP`	script.js	`[0.3, 2.5]`	Nella festa: l’attesa fra una forma e la successiva e fra un giro e l’altro, in secondi. La seconda va tenuta ad almeno SPIN + 0,5: un giro che trova la forma ancora sveglia va perso.
`AUTO`	script.js	`2.5`	Senza puntatore (sui telefoni), ogni quanti secondi ogni forma si sveglia da sola.

Provali nel Playground

Quando usarla

Per un’apertura che deve far sorridere: dolci, giochi, feste, uno studio creativo con un suo personaggio. Vuole un titolo corto e una mascotte che si riconosce subito; su una pagina seria o lunga da leggere le forme distraggono.

Sul telefono

Senza puntatore le forme si svegliano da sole, una dopo l’altra, ogni due secondi e mezzo, e il bottone fa partire la festa come col mouse. Il titolo va al 15% della larghezza della finestra e il menù tiene solo il bottone per ordinare.

Con il movimento ridotto

Le forme non crescono e non girano: compaiono e spariscono in dissolvenza. Nella festa la finestra cambia colore di colpo e la mascotte mette gli occhiali senza ballare; non entra dal fondo e non saluta.

Trappole

Le forme devono vivere sull’orologio di GSAP, con delayedCall, e non su setInterval o su un’animazione CSS: il banco delle anteprime e le registrazioni fermano solo l’orologio della pagina.
Una forma deve poter rinascere solo mezzo secondo dopo essere sparita, altrimenti un puntatore fermo vicino la tiene accesa senza sosta.
Le braccia della mascotte girano intorno alla spalla con svgOrigin, in coordinate del disegno: un transformOrigin in percentuale si riferisce al riquadro del gruppo, che cambia mentre il braccio si muove.
Se la festa parte mentre la mascotte sta ancora salutando, l’ingresso va chiuso subito: finirebbe togliendo gli occhiali a metà del ballo.
Fra un giro e l’altro della festa servono almeno SPIN più mezzo secondo: una forma resta sveglia per SPIN secondi e riposa mezzo secondo, e una chiamata che la trova ancora accesa va persa. Il sito originale richiama le forme ogni 2 secondi, e così ognuna si accende due volte invece di tre.

Librerie

GSAP 3.15.0, Outfit (font variabile) 5.3.0, DM Serif Display 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,0 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 2 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.