The mark, layered
The logo rides its own SVG layer above the field — sharp at every size, while the wave stays weather behind it.
The mark, layered Wordmark The full wordmark over a calm field — the default brand hero.
#mark-wordmark
The mark, layered Icon One Bitfur glyph, large. A square mark wants a lower horizon so the field reads as ground beneath it.
#mark-icon
The mark, layered Mark and copy The mark sits above the headline on its own layer, so the copy never has to fight it for the middle of the frame.
#mark-with-copy
The mark, layered Mark on a still field A frozen field behind a sharp mark — for a page where nothing should move except what the reader does.
#mark-still
Motion & interaction
The six curated presets, then the three ways the field answers a person — the cursor, a click, and the scroll.
Motion & interaction Calm The default resting hero — slow and shallow enough that headline copy stays the loudest thing on the page.
#motion-calm
Motion & interaction Swell The general-purpose hero: visible movement without the field competing with a call to action.
#motion-swell
Motion & interaction Storm The loudest preset — a launch or a campaign opener, and the only place worth paying for its high dot count.
#motion-storm
Motion & interaction Pulse A compact heartbeat band for a stat strip or a section divider — big dots, low count, quick beat.
#motion-pulse
Motion & interaction Breathe Almost-still ambience for a page that has to be read — a docs landing, a pricing page, a long-form intro.
#motion-breathe
Motion & interaction Still A frozen terrain for anywhere motion is wrong — a print-like page, a legal page, or a screenshot.
#motion-still
Motion & interaction Pointer dent The cheapest way to make a hero feel responsive — the field reacts before the visitor has clicked anything.
#motion-pointer
Motion & interaction Click ripple Rewards a click anywhere on the hero, which makes it the right pairing for a section with one big CTA.
#motion-ripple
Motion & interaction Pointer + ripple The full toy — for a demo or an interactive landing page where playing with the hero IS the pitch.
#motion-pointer-ripple
Motion & interaction Scroll drift (low) A hint of parallax for a hero that sits above ordinary page content — enough to feel deliberate, not enough to distract.
#motion-scroll-drift
Motion & interaction Scroll dive (high) A full-screen scroll-driven opener — the section reads as a flight, so give it a screen of its own.
#motion-scroll-dive
Motion & interaction Swell + scroll Shows that scroll composes with a preset — the wave keeps its own motion while the camera travels on top of it.
#motion-scroll-swell
Form — colour, geometry, data
Twelve fields that each change one thing, so you can see what a knob actually does before you reach for it.
Form — colour, geometry, data Sweep across X The default read — colour travels left to right regardless of height, so the field stays one calm gradient behind copy.
#color-sweep
Form — colour, geometry, data Colour by elevation Crests take the second token and troughs stay in the first — use it when the height means something and you want the eye to read the ridges.
#color-elevation
Form — colour, geometry, data Square lattice Rows sit directly under rows — the strict grid, best when the section already carries a lot of structure and wants a quiet floor.
#lattice-square
Form — colour, geometry, data Hexagonal lattice Alternate rows offset by half a step, which kills the vertical banding a square grid shows at low density — the safer default for a big hero.
#lattice-hexagon
Form — colour, geometry, data No horizon glow Nothing behind the dots — the flattest, most neutral background, and the one to pick when the page already has a light source of its own.
#glow-off
Form — colour, geometry, data Strong horizon glow A soft light in the first token sits behind the field and reads as distance — good for a landing hero, bad behind small text.
#glow-strong
Form — colour, geometry, data Low horizon value (0.24) The vanishing line sits high in the frame, so the terrain fills almost everything and there is very little empty sky — a full-bleed texture, not a backdrop.
#horizon-low
Form — colour, geometry, data High horizon value (0.66) The vanishing line drops low, leaving two thirds of the frame as open sky — the shape to use when a headline needs quiet room above the terrain.
#horizon-high
Form — colour, geometry, data Low density Roughly 11k dots — individual points stay legible and the frame cost is small, which is what you want on a compact band or a slow device.
#density-low
Form — colour, geometry, data High density Roughly 39k dots per frame — the points dissolve into a continuous surface; reserve it for one hero per page, never a repeated band.
#density-high
Form — colour, geometry, data Data terrain, low blend Thirty daily counts at blend 0.35 — the wave still moves like a wave but leans toward the numbers, so the rise and fall is felt rather than measured.
#data-lean
Form — colour, geometry, data Data terrain, high blend + elevation colour Blend 0.8 with colour by elevation is the data-viz read — but be honest about it: a 30-point series varies only along the depth axis, so at a high blend the field leans toward a ridged sheet, because the data has nothing to say across the width; the engine clamps the sine floor at 0.34 for exactly that reason, and the residual ripple across X is what keeps it from going flat.
#data-terrain