Hero sections
Drift Field
A canvas of drifting dots behind the text. About 4 KB of JavaScript, no image files.
R650
Once. Yours to keep
The shape of it, not a screenshot
What it is
A canvas sits behind the text with a few hundred dots drifting across it, joined by thin lines when they pass close to each other. It is drawn in plain JavaScript, about 4 KB, with no library and no image files at all.
Density, speed, dot size, link distance and colour are set at the top of one file. It measures its container rather than the window, pauses through an IntersectionObserver when it scrolls out of view, and under prefers-reduced-motion it draws a single static frame of the same field and stops. Device pixel ratio is capped at two so laptops are not asked to redraw a retina canvas sixty times a second.
This fits a developer tool, an agency, anything technical where a photograph would be a lie. It is the wrong choice for a business with real subject matter to show — a bakery does not need particles, it needs bread. It is also wrong if you want the effect on five sections of the same page. One canvas is fine; five is a fan spinning.
What you get
- field.js, roughly 4 KB, no dependencies
- Config block for density, speed, dot size, link distance and colour
- IntersectionObserver pause when the section is off screen
- Single static frame rendered for prefers-reduced-motion
- Astro component wrapping the canvas and the text layer
- Sparse and dense presets
After you buy
- 01 You message me On WhatsApp. Tell me which one and where it is going.
- 02 I set it up for you Your words, your colours, your logo dropped in — or the raw files if you would rather do it yourself.
- 03 It goes live On your hosting or on mine. Either way it ends up in your own account.
- 04 It is yours The whole thing, with nothing to renew and nothing tied back to me.
You might also want
- Hero sections R880 Quiet Loop Muted video behind the headline, with a poster frame that holds if the video never loads.
- Hero sections R740 Cover Plate One photograph across the whole screen under a scrim measured for readable text.
- Hero sections R560 Ticker Band A headline over a band of text that scrolls sideways and never stops.
Nothing to look at yet
This one is written up but not built, so there is no live version to show. Ask me and I will tell you honestly how long it would take.
Ask about it