La gru dei peluche

3D, Hover, FisicaCanvas, GSAPImpegnativaPeso compresso: Demo 17 KBGSAP 28 KBGratisScarica lo zip

L’intestazione di una sala giochi inventata, nello stile ricco: una macchinetta della gru vista in 3D di tre quarti, con la vetrina, l’insegna con le luci a strisce che corrono, la leva e il pulsante giallo, piena di peluche di animali cuciti (orsetto, coniglio, volpe, rana, polpo, pinguino). Col puntatore o il dito si mira, al clic la gru scende, chiude le tre dita e prende un peluche, che pende e oscilla; se la presa è storta scivola via, se no finisce nella buca e spunta dallo sportello dei premi.

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 plush claw machine</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/baloo-2@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="arcade" data-arcade>
    <!-- the header of a made-up arcade and toy shop, Pocket Zoo: a claw machine seen at three quarters, full of plush
         animals. Move to aim the claw, click or tap to drop it: it closes its three fingers, lifts a plush (which can
         slip away), carries it to the chute and drops it into the prize door -->
    <canvas class="arcade__canvas" data-canvas tabindex="0" role="img"
      aria-label="A claw machine full of plush animals: a bear, a bunny, a fox, a frog, an octopus and a penguin. Move the pointer or use the arrow keys to aim the claw, click, tap or press Space to drop it."></canvas>

    <header class="arcade__bar">
      <span class="arcade__brand">Pocket Zoo</span>
      <span class="arcade__hours">Arcade &amp; toy shop</span>
    </header>

    <section class="arcade__copy" data-copy>
      <h1 class="arcade__title">Catch a <em>friend.</em></h1>
      <p class="arcade__lede">Twelve machines, a hundred plush animals and one very honest claw.</p>
      <button class="arcade__button" type="button" data-play><span>Play now</span></button>
    </section>

    <div class="arcade__prize" data-prize aria-hidden="true">
      <span class="arcade__prize-small">Prize door</span>
      <span class="arcade__prize-text" data-prize-text>You won a fox!</span>
    </div>

    <p class="arcade__hint" data-hint>Aim, then click or tap to drop</p>
    <p class="sr-only" aria-live="polite" data-live></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.

32 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 gru dei peluche» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Pocket Zoo è una sala giochi e un negozio di giocattoli. A destra del titolo «Catch a friend.» c’è la sua macchinetta della gru, vista di tre quarti: il fondo rosso corallo con la griglia dell’altoparlante, la targhetta del gettone e lo sportello dei premi con la ribalta «PUSH»; sopra, la vetrina coi pali d’acciaio e due riflessi obliqui sul vetro; in cima l’insegna verde acqua «POCKET ZOO» con una cornice di luci a strisce gialle e bianche che corrono; davanti, la pulsantiera con la leva a sfera rossa e il pulsante giallo a cupola. Dentro, su un tappeto verde acqua davanti a una parete a strisce, sono ammucchiati i peluche: orsetti, coniglietti, volpi con la coda, rane, polpi coi tentacoli e pinguini, morbidi, con le cuciture, gli occhietti lucidi e le guance rosa. Muovendo il puntatore (o trascinando il dito) la gru d’acciaio scorre sul ponte sotto il soffitto e dondola sul cavo; la leva si inclina dalla stessa parte. Un clic (o un tocco, o Spazio) preme il pulsante: la gru apre le tre dita, scende, le chiude e risale. Se si è chiusa vicino al centro di un peluche lo tiene: il peluche pende dalle dita, oscilla mentre la gru lo porta sopra la buca di plexiglas, cade dentro, la ribalta dello sportello si apre e ne spunta il premio con «You won a fox!». Se la presa è storta, a metà salita il peluche scivola fra le dita e ricade sul mucchio girando. Dopo ogni vincita dall’alto cade un peluche nuovo. Lasciata sola, la macchinetta gioca da sé: una volta vince, una volta no.

Come funziona

Una prospettiva fatta a mano

Ogni punto del mondo (x a destra, y in alto, z verso chi guarda) gira di −0,46 radianti attorno all’asse verticale e di 0,2 attorno a quello orizzontale, poi va in prospettiva dividendo per la distanza dalla camera. Le facce della macchinetta sono quadrilateri proiettati; per scritte, strisce e riflessi su una faccia si usa setTransform con i tre angoli proiettati, che porta un quadrato di 100 per 100 sulla faccia. La misura si calcola proiettando gli spigoli della macchinetta e scalando finché stanno nella zona libera accanto al titolo (o sotto, sul telefono).

I peluche

Ogni animale è un disegno 2D fatto di forme morbide: ellissi con una sfumatura radiale chiara in alto a sinistra e scura in basso a destra, un contorno appena più scuro, le cuciture tratteggiate, gli occhi con un riflesso e le guance rosa. Orecchie, coda, tentacoli e zampe partono sempre dal bordo del corpo. Il disegno va nel punto proiettato, grande quanto la profondità; ombre, peluche e gru si ordinano per distanza dalla camera prima di disegnarli.

La gru

La gru segue la mira con una molla smorzata e dondola sul cavo con un pendolo spinto dalla sua accelerazione. La partita sono tre timeline di GSAP una dopo l’altra: apri e scendi fino alla cima del peluche più alto sotto la gru, chiudi; risali; porta sopra la buca e apri. Le dita ruotano ognuna attorno al suo perno sul mozzo; quella davanti è accorciata perché viene verso chi guarda.

Prendere, oscillare, scivolare

Chiusa la gru, il peluche più vicino entro 0,2 viene preso; se la distanza dal suo centro è sotto GRIP la presa è buona, se no a metà salita scivola e ricade con la gravità, con un rimbalzo e una rotazione che si assesta. Il peluche preso è un pendolo con due angoli, spinti dall’accelerazione della gru, e ruota attorno al punto dove lo tengono le dita.

Il premio

Il peluche lasciato sopra la buca cade dietro la parete di plexiglas (si disegna prima della parete). Quando sparisce sotto il pavimento, la ribalta dello sportello si apre con una molla, il peluche spunta con un elastico e sopra compare il biglietto «You won …», messo con la posizione proiettata dello sportello. Poi tutto si richiude e un peluche nuovo cade dall’alto nel mucchio.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SPEED`	script.js	`1`	Quanto in fretta la gru segue il puntatore.
`DROP_TIME`	script.js	`0.9`	Secondi per scendere fino ai peluche (la salita dura poco di più).
`GRIP`	script.js	`0.08`	Quanto vicino al centro del peluche deve chiudersi la gru per tenerlo: più alto, più facile vincere.
`SWING`	script.js	`1`	Quanto oscilla il peluche preso mentre la gru lo porta.
`LIGHTS`	script.js	`1`	La velocità delle luci a strisce attorno all’insegna.
`PLUSH`	script.js	`11`	Quanti peluche nella vetrina sul computer; sul telefono un terzo di meno.
`PAUSE`	script.js	`2.2`	Secondi fra una partita e l’altra del pilota automatico.
`--cabinet, --trim, --teal, --fox…`	style.css	`corallo, giallo, verde acqua`	I colori in :root: la macchinetta e ogni peluche li rileggono a ogni cambio di misura.

Provali nel Playground

Quando usarla

Per l’intestazione di una sala giochi, un negozio di giocattoli o di peluche, una fiera, un’app di giochi o una pagina di concorso a premi. È un gioco: le informazioni vere (orari, indirizzo, prezzi) vanno anche in testo normale.

Sul telefono

Stessa macchinetta e stessa partita, misure adattate: il titolo e il pulsante Play now stanno in alto, la macchinetta sotto, con un terzo di peluche in meno. Col dito si trascina per mirare e si tocca per far scendere la gru; il canvas ha touch-action none.

Con il movimento ridotto

Niente movimento: la macchinetta è ferma con le luci spente in posa, la gru non scende e non oscilla; Play now, un clic o Spazio mostrano direttamente il biglietto «You won …» in dissolvenza, col premio già fuori dallo sportello.

Trappole

L’ordine di disegno conta: il peluche che cade nella buca va disegnato prima della parete di plexiglas, quelli del mucchio e la gru dopo, ordinati per distanza dalla camera.
Una scritta su una faccia in prospettiva va disegnata con setTransform sui tre angoli proiettati; ricordarsi di tornare alla trasformazione dello schermo dopo, se no il resto del fotogramma esce storto.
Il peluche preso deve ruotare attorno al punto dove lo tengono le dita, non attorno al suo centro, se no sembra staccato.
Non aggiungere tween a una timeline mentre corre: la partita sono timeline separate legate con onComplete.
La mira col puntatore inverte la proiezione sul piano all’altezza della gru con qualche passo di Newton: con un piano diverso la gru non sta sotto il puntatore.

Librerie

GSAP 3.15.0, Baloo 2 (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.

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

Collaudo

Provata il 22 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.