Sunflowers that follow the pointer

Hover, SVGGSAPMediumCompressed weight: Demo 9.8 KBGSAP 28 KBFreeDownload the zip

A field of sunflowers in SVG, in several rows, under a sun that is the pointer: the heads turn slowly toward it, the stems bend and the leaves follow late. With the sun low the sunflowers bow; a click sends a cloud across and, while it covers the sun, they drop their heads.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the 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

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

34 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “Sunflowers that follow the pointer” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

The home page of an invented farm, Halden Farm: the headline “Forty acres of faces that turn to the sun.”, a line above it and a button; below, three rows of sunflowers, the furthest smaller and veiled in haze, and on the horizon a strip of very distant ones. The pointer is a small drawn sun, its rays slowly turning: wherever it goes, every head turns toward it in a couple of seconds, overshoots a little and settles; the stem bends the same way and the leaves arrive later, swaying. As it turns, a head squashes on the far side and the brown disc slides toward the sun, while the green back shows on the other side. If the sun goes down toward the field the sky warms, the sun turns orange and the sunflowers bow their heads. A click sends a cloud across at the sun’s height: while it covers the sun the field darkens and the sunflowers drop their heads, then lift them again with a little bounce. On arrival the sunflowers grow row by row, the sun rises from below the field and a first cloud passes by itself; with no pointer for three seconds the sun wanders off.

How it works

Rows and haze

The rows are drawn from the furthest to the nearest: each one has its own hill, bigger sunflowers and longer stems than the one before. Between one row and the next there is a rectangle in the colour of the low sky, with a gradient that is clear at the top and solid toward the ground: it veils only the rows behind and leaves the sky clean. The repeated shapes, petals, disc, leaf, cloud, are SVG symbols called with use.

A head in three layers

Every head is the green back, the ring of petals and the disc with its seeds in a spiral (one every 137.5 degrees). To turn it, the three layers are squashed in width and slid: the disc by 42% of the radius toward the sun, the petals by 14%, the back by 30% the other way. It is the shift between layers that reads as a face turning.

The stem is a curve

The stem is a quadratic curve from the base to the head. As it turns, the tip moves toward the sun by LEAN degrees; as it bows, it drops and goes sideways while the control point rises above the tip: the curve becomes a hook, like a tired sunflower. The head rotates with the direction of the stem at the top.

Springs for heads and leaves

Every sunflower has two springs, one for how far it turns and one for how far it bows, with a period of TURN seconds and a damping of BOUNCE; each one is a little quicker or slower than the others. The leaves stay attached to the stem but turn on slower, less damped springs: they arrive later and sway.

The sun, the sunset, the cloud

The sun chases the pointer and how low it is sets the sunset: the sky orange, the sun orange, the sunflowers bowed by BOW. A cloud crosses the screen in CLOUD seconds; every frame measures how close it is to the sun and that value darkens the field and bows the sunflowers. With no pointer the sun walks by itself.

Values to change

Name	File	Default	What it changes
`TURN`	script.js	`1.8`	The seconds a head takes to turn toward the sun: higher is slower.
`BOUNCE`	script.js	`0.42`	How far the heads overshoot before they stop: at 0.1 they sway a lot, at 1 not at all.
`LEAN`	script.js	`14`	How far the stems lean toward the sun, in degrees.
`BOW`	script.js	`1`	How low the sunflowers bow when the sun goes down: 0 never, 1.3 a lot.
`LEAF_LAG`	script.js	`0.45`	How far behind the stem the leaves follow, in seconds.
`CLOUD`	script.js	`4.2`	The seconds a cloud takes to cross the sky.
`WANDER`	script.js	`3`	The seconds without a pointer before the sun wanders off by itself; at 0 it stays still.
`ROWS`	script.js	`3`	The rows of sunflowers, from the furthest to the nearest.
`PETALS`	script.js	`20`	The petals in each of a head’s two rings.

Try them in the Playground

When to use it

For the opening of a site that lives on sun and seasons: a farm, a farm stay, a brand of oils or seeds, an open-air festival. It works with a pointer that moves a lot, so above all on a computer; it suits a page with little text at the top and the field filling the lower half of the screen.

On phones

A finger drags the sun and a tap sends the cloud across; when the finger lifts, after three seconds the sun wanders off by itself. On narrow, tall screens the stems are shorter, so the sunflowers are not all stalk, and the third menu link is hidden. Over the field the page does not scroll.

With reduced motion

The sunflowers stand still, each one turned a little its own way, and they do not grow on arrival: the page fades in. The sun follows the pointer without turning rays and without walks; the sky still warms when it goes down. On a click the cloud fades in over the sun, the field darkens and brightens again.

Pitfalls

SVG presentation attributes (fill, stop-color) do not understand CSS variables: written as fill="var(--petal)" the petal stays black. The colours go into the element’s style, and then the symbols called with use take them from :root too.
A solid veil of haze over the far rows covers the sky as well and dulls it all: the gradient must be clear at the top and solid only toward the ground.
If GSAP and the frame loop write the transform of the same group, one wipes out the other: the sun has three nested groups, the position (written by the loop), the bounce on a click (GSAP) and the turning rays (GSAP).
On tall, narrow screens, stems sized on the height and heads sized on the width make sunflowers that are all stalk and turn into arches when they bow: the stems’ height follows the width too.
A cloud that ends its journey after a resize looks for itself in a list that has been emptied: indexOf gives −1 and splice(−1, 1) removes the last cloud, a different one. The index is checked first.

Libraries

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

Compressed with gzip, the three demo files weigh 9.8 KB; the libraries: GSAP 28 KB.

Testing

Tested on 10 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.