Heliotrope: drag the sun, and a field of sunflowers follows it
The story behind Heliotrope
Premise A wide field of sunflowers on rolling ground in the blue hour, heads bowed. The sun is yours to drag, and every plant follows a delayed copy of it, so the light and the turn travel across the field from near to far. A field of attention. Audience: web-literate visitors arriving from X or the archive. Perf target: about 7 ms a frame on a desktop GPU at 1440×900, 20k flowers on desktop and 8k on a phone, 30 fps when settled
Reference al-ro’s grass field: instanced blades, wind and backlit translucency in real time. Terrence Malick’s Days of Heaven for the magic-hour light, rim-lit heads and haze
Built with Three.js (WebGL2) and pmndrs postprocessing, custom shaders throughout, three textures generated with FAL (petal, seed disc, leaf)
Techniques An instanced procedural sunflower in three levels of detail; a sun-history texture that every plant samples at its own delay; per-plant delayed lighting, so dawn and dusk travel; height fog with warm in-scatter toward the sun; a sky shader with a bloomed HDR disc; exposure, bloom, AgX tone mapping and a split-tone grade; a camera that tilts up to follow a high sun; a pixel budget, dynamic resolution, a 30 fps idle and a pause when hidden
Direction Cool ground, warm light: a slate-blue sky with one amber band at the horizon, gold petals, dark seed heads, green-black understory. Instrument Serif and IBM Plex Mono
The Story
Heliotropism is the habit young sunflowers have of following the sun across the sky. Here the sun is something you hold. The page opens in the blue hour before dawn: a field running to a line of low hills, every head bowed. After a moment the rim of the sun breaks the hill on its own, and the field wakes, the nearest rows first.
The idea underneath is a field of attention. Every plant is watching the same sun, but each one sees it a little late, and the farther away it stands, the later it sees it. So when the sun comes up, the light does not switch on across the field. It arrives near you and rolls away into the haze. When it goes down, the dark does the same.
The Take
- Watch the dawn. Leave it alone and the sun rises over the hill by itself. The near rows light and lift first; the far field catches up a few seconds later.
- Drag the sun. Grab the disc and pull it across the sky. The heads swing round after it, the near ones within a second or so, the ones further back still turning when you let go. Drag anywhere else and the sun moves by the same amount, without jumping to your finger.
- Put it down. Pull the sun below the hill and the field bows its heads and goes blue again, from the front rows outward. Let go and it rises again.
- Look closer. A few flowers in the front rows ignore the sun and look at you instead, and follow your pointer. A tap on the flowers sends a small shiver out through the heads around it.
Honestly, the turn reads best in the near rows. Close to the camera you can see each head swing from its back to its face. A hundred metres out the heads are a few pixels across, and what travels there is mostly the light.
The Tech
The field. One sunflower is built in code: a tapered, slightly curved stem, a couple of drooping leaves, a domed seed disc, a ring of sepals and two cupped rings of petals, textured with a petal, a seed-disc and a leaf image generated with FAL. It comes in three levels of detail. Flowers within about 18 m get the full plant, the middle distance gets fewer petals and leaves, and the far field gets a simple stem and an eight-petal head. Each level is drawn as one instanced mesh, with each plant’s position, size, phase and delay stored per instance, sorted near to far. About twenty thousand plants on desktop and eight thousand on a phone, with an undergrowth of grass tufts between the rows, draw in a handful of calls.
The sun’s history. Every frame the sun’s direction (and its brightness) is written into a small ring-buffer texture, 128 texels at 30 Hz, a little over four seconds of the sun’s path. In the vertex shader each plant reads that texture at its own delay, which grows with its distance from the camera: about a quarter of a second at 5 m, two seconds at 30 m, a bit over three at the back of the field. That delayed sun sets the head’s yaw and pitch (with a bow when the sun is below the hill), and a spring smooths the turn so a head takes about a second and a half to come round. The heads are posed in three-quarter view so that a sweep of the sun turns them from edge-on to face-on, which is what makes the turn visible at all from behind.
Delayed light. The first version lit the whole field from the live sun, and the turn was lost: everything brightened at once, like a light switch. Now each plant also lights itself from its delayed sun, so the petals’ backlight, the rims on stems and leaves and the ambient fill all arrive with the wave. The petals use a custom shader with transmission when the sun is behind them, darker at the base and brighter at the thin edges, and a brief glint as a head crosses its profile so the front of the wave catches the light.
The sky and the air. The sky is one fullscreen shader: a gradient that follows the sun’s height, a warm band near the horizon toward the sun, faint cirrus, stars that fade with the dawn, and an HDR disc bright enough to bloom. Everything in the field fades into a height fog that takes its colour from the sky and warms toward the sun, which is what layers the field and the two ridges into depth.
The post stack. The pmndrs postprocessing chain runs in one pass: exposure (brighter in the blue hour, pulled down as the sun climbs), bloom on the sun and the brightest petals, AgX tone mapping, a grade with a lifted black point, a soft S-curve and a cool-shadow, warm-highlight split, then a vignette and a little grain. Desktop adds FXAA; phones get 4× MSAA instead. Depth of field was in the first build and came out: it cost more than the rest of the post stack together, and the haze already does the job.
The camera. The view sits at eye height in the rows. When you drag the sun high, the camera tilts up to follow it, so the sun can climb well above the hills without leaving the frame or landing on the page’s title.
Quiet by default. The render size has a pixel budget and scales itself down if frames run slow. Once the sun and the field have settled, it drops to 30 fps with the wind still moving, and it stops when the tab is hidden.
The sunflowers don’t really do this, by the way. Only young ones track the sun; the grown heads face east and stay there. These ones are being polite.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.