La corda degli ingredienti dietro al cursore

Hover, FisicaGSAPMediaPeso compresso: Demo 6,0 KBGSAP + MorphSVG 37 KBGratisScarica lo zip

Dal sito di Crav Burgers: il puntatore di una burgeria si tira dietro una corda bianca con quattro perline di vetro smerigliato, insalata, pomodoro, formaggio e carne. La testa segue subito, ogni punto insegue il precedente solo quando si allontana troppo, così la corda si arriccia dietro al movimento; appena ci si ferma si raccoglie sotto il puntatore, e sopra il tasto Order now sparisce in dissolvenza.

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 ingredient string</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/bagel-fat-one@5.3.0/400.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <span class="brand">STAKK</span>
      <span class="hours">Smash burgers, open till 2 am</span>
    </header>

    <section class="hero">
      <div class="title-wrap">
        <h1 class="title" aria-label="Stack it up" data-title>Stack it up</h1>
        <span class="sticker sticker--a" data-sticker>Double smash</span>
        <span class="sticker sticker--b" data-sticker>Cheese pull</span>
      </div>
      <p class="line">Smashed patties, toasted buns, and four good things on a string.</p>
      <!-- over the button the string fades away, as on the original site (data-cursor-hide) -->
      <a class="order" href="#order" data-cursor-hide data-order>
        <svg class="order__blob" viewBox="-10 -10 220 100" preserveAspectRatio="none" aria-hidden="true">
          <path data-blob d="M14 6 C60 -2 140 -2 186 6 C198 8 202 22 200 40 C198 60 196 74 184 76 C140 82 60 82 16 76 C4 74 0 60 0 40 C0 22 2 8 14 6 Z"/>
        </svg>
        <span class="order__text">Order now</span>
      </a>
    </section>

    <p class="hint" data-hint>Move around, then stop: the string gathers.</p>

    <!-- the string that follows the pointer: one path and four frosted beads with an ingredient each -->
    <div class="rope" aria-hidden="true" data-rope>
      <svg class="rope__line"><path data-line/></svg>
      <div class="bead" data-bead>
        <svg viewBox="0 0 40 40"><path class="leaf" d="M6 23c2-6 6-11 13-13 3-1 4 1 6 0 3-1 5-1 7 1 2 2 1 4 2 6 1 3-1 6-4 8-3 3-7 3-10 3-5 1-10 0-14-5Z"/><path class="leaf-vein" d="M9 24c6-3 13-6 22-9M17 20l-1-5M23 18l1-5M22 19l3 5M15 22l2 4"/></svg>
      </div>
      <div class="bead" data-bead>
        <svg viewBox="0 0 40 40"><circle class="tomato" cx="20" cy="20" r="14"/><circle class="tomato-in" cx="20" cy="20" r="10.5"/><path class="tomato" d="M20 10v20M11 20h18M13.5 13.5l13 13M26.5 13.5l-13 13" stroke-width="2"/><g class="seed"><ellipse cx="20" cy="14.5" rx="1.3" ry="2"/><ellipse cx="25.5" cy="20" rx="2" ry="1.3"/><ellipse cx="20" cy="25.5" rx="1.3" ry="2"/><ellipse cx="14.5" cy="20" rx="2" ry="1.3"/></g></svg>
      </div>
      <div class="bead" data-bead>
        <svg viewBox="0 0 40 40"><path class="cheese" d="M6 27 L30 9 C33 12 35 17 35 22 L35 29 C35 30 34 31 33 31 L8 31 C6 31 5 29 6 27Z"/><path class="cheese-top" d="M6 27 L30 9 C33 12 35 17 35 22 L9 24Z"/><circle class="hole" cx="14" cy="27.5" r="1.8"/><circle class="hole" cx="24" cy="27" r="2.4"/><circle class="hole" cx="29" cy="18" r="1.6"/><circle class="hole" cx="20" cy="20.5" r="1.4"/></svg>
      </div>
      <div class="bead" data-bead>
        <svg viewBox="0 0 40 40"><rect class="patty" x="5" y="12" width="30" height="17" rx="8.5"/><path class="patty-top" d="M8 17c4-4 20-4 24 0"/><path class="grill" d="M11 15l5 12M18 14l5 13M25 14l4 10"/></svg>
      </div>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.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.

29 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 corda degli ingredienti dietro al cursore» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina rossa la burgeria inventata STAKK ha il titolo «Stack it up» in giallo senape col bordo bordeaux, che entra una lettera alla volta saltando su da sotto, inclinata, e si assesta con una molla; sotto una riga e il tasto Order now, una macchia gialla. Il puntatore si tira dietro una corda bianca di otto punti con quattro perline di vetro smerigliato, una per ingrediente: una foglia d’insalata, una fetta di pomodoro, uno spicchio di formaggio coi buchi, una polpetta con le righe della piastra. Ogni perlina gira seguendo la direzione della corda. Muovendosi la corda si allunga e si arriccia dietro; fermandosi si accorcia fino a raccogliere le perline una sull’altra sotto il puntatore. Sopra il tasto la corda sparisce in dissolvenza e la macchia del tasto si gonfia in una forma nuova con un piccolo rimbalzo. Sul telefono la corda segue il dito che trascina.

Come funziona

Otto punti

La corda è un elenco di otto punti con x e y. A ogni fotogramma la testa va verso il puntatore con un tween di cinque centesimi; ogni altro punto guarda quello prima e, solo se è più lontano della lunghezza di un segmento, parte verso di lui fino a quella distanza, con un tween un po’ più lento per ogni punto in coda.

Il disegno

Il tracciato passa per i punti medi fra un punto e il successivo, con una curva quadratica che usa il punto come controllo: così la corda è morbida anche con pochi punti. Le perline stanno su quattro punti scelti e girano dell’angolo fra il loro punto e quello prima.

Fermarsi

A ogni movimento la lunghezza del segmento torna piena e subito comincia a calare verso zero in mezzo secondo. Se i movimenti continuano resta lunga; quando si fermano va a zero e ogni punto insegue il precedente fino a coincidere: la corda si raccoglie.

Sparire sul tasto

Il tasto ha l’attributo data-cursor-hide: quando il puntatore ci passa sopra, un tween porta l’opacità della corda a zero, e la riporta su quando esce. La macchia del tasto cambia forma con MorphSVG.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SEGMENTS`	script.js	`8`	Quanti punti fanno la corda.
`SEGMENT`	script.js	`16`	La lunghezza di un segmento in pixel (il sito originale usa 8).
`BEADS`	script.js	`[0, 3, 5, 7]`	Su quali punti della corda stanno le quattro perline.
`HEAD`	script.js	`0.05`	I secondi che la testa impiega a raggiungere il puntatore.
`FOLLOW`	script.js	`0.12`	I secondi che ogni punto impiega a raggiungere quello prima.
`GATHER`	script.js	`0.5`	I secondi che la corda impiega a raccogliersi quando ci si ferma.
`FADE`	script.js	`0.6`	I secondi della dissolvenza sopra il tasto.
`POP`	script.js	`0.055`	Il ritardo fra una lettera e l’altra del titolo.

Provali nel Playground

Quando usarla

Per la home di una burgeria, di un food truck o di una pizzeria, la pagina di un menu, un sito di consegne a domicilio: un puntatore che porta in giro gli ingredienti e si fa da parte sui pulsanti.

Sul telefono

La corda segue il dito che trascina (il sito originale la spegne sui telefoni: qui resta, con le stesse animazioni). Titolo e tasto si misurano anche sull’altezza e stanno nella casella.

Con il movimento ridotto

La corda resta ferma sotto il tasto con le sue perline e non segue il puntatore; il titolo compare in dissolvenza e la macchia del tasto non cambia forma.

Trappole

Il tween di ogni punto va lanciato con overwrite: true, se no a ogni fotogramma se ne accumula uno nuovo e la corda trema.
Il livello della corda deve avere pointer-events: none: altrimenti è lui sotto il puntatore e il tasto non sa più di avere il puntatore sopra.
Per sapere se si è sopra il tasto basta closest('[data-cursor-hide]') sul bersaglio dell’evento: funziona anche quando il bersaglio è il tracciato SVG della macchia.

Librerie

GSAP 3.15.0, MorphSVGPlugin 3.15.0, Bagel Fat One 5.3.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,0 KB; le librerie: GSAP + MorphSVG 37 KB.

Collaudo

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