Le tessere del percorso

Caricamento, SVG, TransizioniGSAPImpegnativaPeso compresso: Demo 9,1 KBGSAP 28 KBGratisScarica lo zip

La ricerca di un fattorino in un’app di consegne a domicilio, fatta come una griglia di tessere di Truchet: ogni tessera ha due quarti di cerchio che uniscono i lati a due a due, e un quarto di giro cambia quali lati unisce. A riposo le tessere sono mescolate e nessuna linea va da una parte all’altra. Mentre cerca, le tessere vicine al fronte della ricerca vengono provate, si accendono e girano di un quarto, e la tessera giusta gira al suo posto su una molla: il percorso si accende dietro di lei, arco dopo arco, dalla cucina alla porta. Se non c’è nessun fattorino vicino il percorso diventa rosso e si ferma finché Retry non riprende; alla fine il fattorino corre lungo il percorso, e Done rimescola la griglia.

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, viewport-fit=cover">
  <title>The route tiles</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/recursive@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the route tiles: a food delivery app looking for a rider, and the search is a grid of Truchet tiles, each with two
         quarter arcs. Scrambled at rest; while it searches the tiles turn a quarter at a time until one path runs
         unbroken from the kitchen to the door, and the route lights up behind them. The tiles are built by script.js -->
    <section class="rt" aria-labelledby="rt-title" data-route>
      <div class="rt__head">
        <div class="rt__words">
          <h2 class="rt__title" id="rt-title"><span class="rt__swap" data-title>Your order</span></h2>
          <p class="rt__meta"><span class="rt__swap" data-meta>Osteria Lume · 2 items · €31.40</span></p>
        </div>
        <p class="rt__figure" aria-hidden="true">
          <span class="rt__pct" data-pct>0%</span>
          <svg class="rt__tick" viewBox="0 0 28 28" data-tick><path d="M6.5 14.8l5 5 10-11.4" pathLength="1"/></svg>
        </p>
      </div>

      <div class="rt__map" role="progressbar" aria-labelledby="rt-title" aria-valuemin="0" aria-valuemax="100"
           aria-valuenow="0" aria-valuetext="Not started" data-bar>
        <svg class="rt__svg" viewBox="0 0 408 208" aria-hidden="true" data-svg>
          <g data-tiles></g>
          <path class="rt__route" data-route-line/>
          <path class="rt__rider" data-rider/>
          <g class="rt__cap rt__cap--from" data-from>
            <rect x="-6" y="-6" width="12" height="12" rx="3"/>
          </g>
          <g class="rt__cap rt__cap--to" data-to>
            <path d="M-6.5 6.5V-1L0 -7l6.5 6V6.5z"/>
          </g>
        </svg>
      </div>

      <div class="rt__ends" aria-hidden="true">
        <span>Osteria Lume</span>
        <span>14 Via Sole</span>
      </div>

      <div class="rt__foot">
        <span class="rt__status"><span class="rt__swap" data-status>Paid · ready to send</span></span>
        <button class="pill" type="button" data-btn data-autoclic>
          <span class="pill__fill" aria-hidden="true"></span>
          <span class="pill__label" data-label>Find a rider</span>
        </button>
      </div>
      <p class="sr" role="status" aria-live="polite" data-live></p>
    </section>
  </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.

31 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 «Le tessere del percorso» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero, da solo al centro: in alto Your order e sotto Osteria Lume · 2 items · €31.40, a destra 0%; sotto, una griglia di 9 per 5 tessere invisibili, ognuna con due quarti di cerchio grigio scuro, che insieme fanno un labirinto di onde e di cerchi; a sinistra, fuori dalla griglia, un quadratino con gli angoli tondi (la cucina), a destra una casetta disegnata a filo (la porta), sotto i loro nomi Osteria Lume e 14 Via Sole. In fondo Paid · ready to send e la pillola chiara Find a rider. Entrando le tessere compaiono girando di un quarto, in un’onda in diagonale. Premuto Find a rider, il quadratino della cucina diventa giallo e una linea gialla esce verso la griglia; poi, a ogni passo, due o tre tessere vicine al fronte vengono provate (diventano più chiare e girano di un quarto con un piccolo rimbalzo) e la tessera giusta gira al suo posto passando un poco oltre e tornando, e il percorso giallo si allunga sul suo arco. Il percorso serpeggia sulla griglia, a curve, fino alla porta, mentre la percentuale sale e la pillola diventa un anello con Cancel, che spegne il percorso e rimescola le tessere. Una volta su due non c’è nessun fattorino vicino: il percorso diventa rosso, la tessera dove si è fermato trema, il titolo dice in rosso No rider nearby yet e sotto Your food is kept warm; Retry riprende. Alla fine il percorso arriva alla porta, la casetta si riempie di giallo, un piccolo tratto bianco, il fattorino, corre lungo tutto il percorso dalla cucina alla porta e la casetta fa un piccolo salto, la percentuale lascia il posto a una spunta verde, il titolo dice Rider on the way, sotto Arrives in 18 min e in basso Ada is at the kitchen. Done spegne il percorso e rimescola le tessere in un’onda che parte dalla porta, fino allo stesso labirinto di prima.

Come funziona

Le tessere di Truchet

Ogni tessera è un gruppo SVG con due quarti di cerchio di raggio metà lato: girata di 0 gradi unisce il lato di sopra con quello di sinistra e quello di sotto con quello di destra; girata di un quarto unisce sopra con destra e sotto con sinistra. Un mezzo giro non cambia niente, quindi l’orientamento è il numero di quarti di giro modulo due, e GSAP gira il gruppo intorno al centro della tessera con svgOrigin.

Il percorso, cercato prima

Entrando in una tessera da un lato, il percorso può uscire solo da uno dei due lati accanto: deve girare a ogni tessera. Il percorso è un cammino che non passa mai due volte dalla stessa tessera, cercato in profondità con un generatore col seme: parte da sinistra in una riga a caso, preferisce le uscite verso destra con un po’ di caso, torna indietro quando si chiude, e vale solo se esce dal lato destro dopo almeno una volta e mezza le colonne. Ogni tessera del percorso si segna l’orientamento che le serve.

Il disordine e le prove

A riposo ogni tessera del percorso è girata dalla parte sbagliata e le altre a caso, col seme, quindi la griglia non lascia passare niente. Durante la ricerca, a ogni passo, fino a TRIES tessere vicine al fronte (a due tessere di distanza al massimo) si accendono e girano di un quarto con un back.out leggero; poi la tessera del percorso gira di un quarto (o di mezzo giro, se fosse già giusta) con un back.out di SPRING, che passa oltre e torna.

Un percorso solo, sopra le tessere

Il percorso acceso è un solo path SVG, costruito una volta: un tratto dalla cucina, un arco A per tessera (centro nell’angolo fra il lato d’entrata e quello d’uscita, verso dato dal prodotto vettoriale) e un tratto fino alla porta. Ogni arco è lungo π·r/2, quindi la lunghezza accesa è la somma degli archi delle tessere già a posto, e lo stroke-dashoffset la insegue su un tween. Il fattorino è lo stesso path con un trattino solo, che scorre con lo stroke-dashoffset.

Rimescolare uguale

Tornando a riposo ogni tessera gira di uno, due o tre quarti fino al suo orientamento di partenza, in un’onda che parte dalla porta: siccome un mezzo giro non cambia la tessera, il labirinto torna identico a quello di prima anche se gli angoli sono diversi, e il giro dell’anteprima ricomincia uguale.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`GRID`	script.js	`[9, 5]`	Colonne e righe di tessere.
`SECONDS`	script.js	`6`	Quanti secondi dura la ricerca nella demo.
`TRIES`	script.js	`2`	Quante tessere vicine al fronte vengono provate prima di ogni tessera del percorso.
`SPRING`	script.js	`2.4`	Quanto passa oltre una tessera che gira al suo posto.
`SEED`	script.js	`5`	Il percorso e il disordine: un altro numero, un altro percorso.
`MINUTES`	script.js	`18`	Fra quanti minuti arriva il fattorino, detto alla fine.
`FAIL_EVERY`	script.js	`2`	Una ricerca ogni quante non trova subito un fattorino (0 mai).
`FAIL`	script.js	`0.58`	Dove si ferma la ricerca, da 0 a 1.
`PREVIEW`	script.js	`1.4`	Nel giro dell’anteprima: quante volte più veloce.
`LABELS`	script.js	`['Find a rider', 'Cancel', 'Retry', 'Done']`	Le parole della pillola, stato per stato.
`--route`	style.css	`#ffd23f`	Il colore del percorso.
`--tile`	style.css	`#34332f`	Il colore degli archi delle tessere.

Provali nel Playground

Quando usarla

Per la ricerca di un fattorino in un’app di consegne o di un ristorante, per il calcolo di un percorso in un’app di spedizioni, di taxi o di mappe, per la conferma di un ordine con la consegna, per ogni attesa in cui qualcosa deve trovare la strada da un punto a un altro.

Sul telefono

Il pannello prende tutta la larghezza meno i margini e la griglia, che è un SVG con la sua viewBox, si rimpicciolisce con lui: le tessere sono le stesse, un poco più piccole. La pillola risponde al tocco come al mouse.

Con il movimento ridotto

Le tessere non girano: si spengono e si riaccendono già voltate. Il percorso si accende lo stesso tessera dopo tessera, perché è l’avanzamento, ma senza scorrere; il fattorino non corre, la tessera ferma non trema e le scritte cambiano senza spostarsi.

Trappole

Una tessera di Truchet non va mai dritta: entrando da sinistra si esce solo da sopra o da sotto. Un cammino a caso verso destra finiva spesso chiuso in un angolo, quindi il percorso si cerca in profondità tornando indietro, con un limite di tentativi e, se non basta, un cammino qualunque che attraversi la griglia.
Le tessere provate durante la ricerca a volte erano tessere del percorso, che poi giravano dalla parte sbagliata: ora si provano solo le tessere che non fanno parte del percorso.
Tornando a riposo con una rotazione a caso le tessere finivano in un labirinto diverso da quello di partenza, e il giro dell’anteprima non ricominciava uguale: ora ogni tessera torna al suo orientamento di partenza, e il mezzo giro in più di alcune è solo movimento.

Librerie

GSAP 3.15.0, Recursive (font variabile, assi MONO, CASL e wght) 5.3.0.

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

Collaudo

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