I girasoli che seguono il puntatore

Hover, SVGGSAPMediaPeso compresso: Demo 9,8 KBGSAP 28 KBGratisScarica lo zip

Un campo di girasoli in SVG, a più file, sotto un sole che è il puntatore: le teste si girano piano verso di lui, gli steli si piegano e le foglie seguono in ritardo. Col sole in basso i girasoli si chinano; un clic fa passare una nuvola e, mentre copre il sole, abbassano la testa.

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>Sunflowers that follow the pointer</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/wght-italic.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="farm" data-farm>
    <!-- the sky, the rows of sunflowers, the clouds and the sun: all drawn by the script -->
    <svg class="field" data-field aria-hidden="true"></svg>

    <header class="bar">
      <a class="brand" href="#">Halden Farm</a>
      <nav class="bar__nav" aria-label="Sections">
        <a href="#">Pick your own</a>
        <a href="#">Farm shop</a>
        <a href="#">Find us</a>
      </nav>
    </header>

    <section class="words" data-words>
      <p class="words__kicker">Open for picking, late July to the first rain</p>
      <h1 class="words__title">
        <span class="words__line">Forty acres of faces</span>
        <span class="words__line">that turn to <em>the sun.</em></span>
      </h1>
      <a class="words__button" href="#" data-button><span class="words__fill" aria-hidden="true"></span><span class="words__label">Plan a visit</span></a>
    </section>

    <footer class="foot">
      <p data-hint>Move the sun. Click for a cloud.</p>
    </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.

34 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 «I girasoli che seguono il puntatore» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina d’apertura di una fattoria inventata, Halden Farm: il titolo «Forty acres of faces that turn to the sun.», una riga sopra e un bottone; sotto, tre file di girasoli, le più lontane più piccole e velate di foschia, e all’orizzonte una striscia di girasoli lontanissimi. Il puntatore è un piccolo sole disegnato, con i raggi che girano piano: dove passa, ogni testa si gira verso di lui in un paio di secondi, passa un poco la misura e si assesta; lo stelo si piega dalla stessa parte e le foglie arrivano dopo, ondeggiando. Girandosi, la testa si schiaccia dal lato opposto e il disco marrone scivola verso il sole, mentre il retro verde spunta dall’altra parte. Se il sole scende verso il campo il cielo si scalda, il sole diventa arancio e i girasoli si chinano a testa bassa. Un clic fa passare una nuvola all’altezza del sole: mentre lo copre il campo si scurisce e i girasoli abbassano la testa, poi la rialzano con un piccolo rimbalzo. All’arrivo i girasoli crescono fila per fila, il sole sale da sotto il campo e una prima nuvola passa da sola; senza puntatore per tre secondi il sole va a spasso.

Come funziona

Le file e la foschia

Le file si disegnano dalla più lontana alla più vicina: ognuna ha la sua collina, girasoli più grandi e steli più lunghi della precedente. Fra una fila e l’altra c’è un rettangolo col colore del cielo in basso, con una sfumatura che è trasparente in alto e piena verso terra: vela solo le file che stanno dietro e lascia il cielo pulito. Le figure ripetute, petali, disco, foglia, nuvola, sono simboli SVG richiamati con use.

Una testa in tre strati

Ogni testa è il retro verde, la corona di petali e il disco con i semi a spirale (uno ogni 137,5 gradi). Per girarla, i tre strati si schiacciano in larghezza e scivolano: il disco del 42% del raggio verso il sole, i petali del 14%, il retro del 30% dalla parte opposta. È lo scarto fra gli strati che fa leggere una faccia che si volta.

Lo stelo è una curva

Lo stelo è una curva quadratica dalla base alla testa. Girandosi, la cima si sposta verso il sole di LEAN gradi; chinandosi, scende e va di lato, mentre il punto di controllo sale sopra la cima: la curva diventa un uncino, come un girasole stanco. La testa ruota con la direzione dello stelo in cima.

Molle per teste e foglie

Ogni girasole ha due molle, una per quanto si gira e una per quanto si china, con un periodo di TURN secondi e uno smorzamento BOUNCE; ognuno è un po’ più svelto o più lento degli altri. Le foglie stanno attaccate allo stelo ma ruotano con molle più lente e meno smorzate: arrivano dopo e ondeggiano.

Il sole, il tramonto, la nuvola

Il sole insegue il puntatore e quanto è basso decide il tramonto: il cielo arancio, il sole arancio, i girasoli chinati di BOW. Una nuvola attraversa lo schermo in CLOUD secondi; a ogni fotogramma si misura quanto è vicina al sole e quel valore scurisce il campo e china i girasoli. Senza puntatore il sole passeggia da solo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TURN`	script.js	`1.8`	I secondi che una testa impiega a girarsi verso il sole: più alto, più lento.
`BOUNCE`	script.js	`0.42`	Quanto le teste passano la misura prima di fermarsi: a 0,1 ondeggiano molto, a 1 per niente.
`LEAN`	script.js	`14`	Quanto si piegano gli steli verso il sole, in gradi.
`BOW`	script.js	`1`	Quanto si chinano i girasoli quando il sole scende: 0 mai, 1,3 molto.
`LEAF_LAG`	script.js	`0.45`	Quanto le foglie restano indietro rispetto allo stelo, in secondi.
`CLOUD`	script.js	`4.2`	I secondi che una nuvola impiega ad attraversare il cielo.
`WANDER`	script.js	`3`	I secondi senza puntatore prima che il sole vada a spasso da solo; a 0 resta fermo.
`ROWS`	script.js	`3`	Le file di girasoli, dalla più lontana alla più vicina.
`PETALS`	script.js	`20`	I petali in ognuna delle due corone di una testa.

Provali nel Playground

Quando usarla

Per l’apertura di un sito che vive di sole e di stagioni: una fattoria, un agriturismo, un marchio di oli o di semi, un festival all’aperto. Funziona con un puntatore che si muove molto, quindi soprattutto sul computer; regge una pagina con poco testo in alto e il campo che occupa la metà bassa dello schermo.

Sul telefono

Il dito trascina il sole e un tocco fa passare la nuvola; quando il dito si alza, dopo tre secondi il sole va a spasso da solo. Gli steli si accorciano sugli schermi stretti e alti, così i girasoli non diventano tutto gambo, e la terza voce del menu sparisce. Sul campo la pagina non scorre.

Con il movimento ridotto

I girasoli stanno fermi, ognuno girato un poco a modo suo, e non crescono all’arrivo: la pagina compare in dissolvenza. Il sole segue il puntatore senza raggi che girano e senza passeggiate; il cielo si scalda lo stesso quando scende. Al clic la nuvola compare sopra il sole in dissolvenza, il campo si scurisce e torna chiaro.

Trappole

Gli attributi di presentazione dell’SVG (fill, stop-color) non capiscono le variabili CSS: scritto fill="var(--petal)" il petalo resta nero. I colori vanno messi nello style dell’elemento, e allora anche i simboli richiamati con use li prendono da :root.
Un velo di foschia a tinta piena sopra le file lontane copre anche il cielo e lo spegne tutto: la sfumatura deve essere trasparente in alto e piena solo verso terra.
Se GSAP e il ciclo dei fotogrammi scrivono il transform dello stesso gruppo, uno cancella l’altro: il sole ha tre gruppi uno dentro l’altro, la posizione (scritta dal ciclo), il rimbalzo al clic (GSAP) e i raggi che girano (GSAP).
Sugli schermi alti e stretti, steli lunghi in proporzione all’altezza e teste in proporzione alla larghezza fanno girasoli tutto gambo, che chinandosi diventano archi: l’altezza degli steli segue anche la larghezza.
Una nuvola che finisce il suo viaggio dopo un ridimensionamento cerca se stessa in un elenco già svuotato: indexOf dà −1 e splice(−1, 1) toglie l’ultima nuvola, un’altra. Si controlla l’indice prima.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,8 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.