lab 02 · the motion kit
What the bleeding edge looks like
Nine pieces we build into client sites, running live — shaders, a fluid simulation, type that answers the cursor. Each one says when it earns its place and what it costs, because the craft is knowing when not to use them.
This whole site scrolls with Lenis and animates with GSAP. The specimens below are vendored from React Bits and tuned to our palette; every one switches off when your device asks for reduced motion.
01
Living aurora
A hero that breathes. On this site it moves the real aurora in the homepage photograph. For a client: a brand moment that stays light enough to sit behind text.
cost ~20 KB + one GPU shader; mounted after the page is idle.
React Bits · SoftAurora (OGL shader)
02
Fluid that follows the cursor
A real-time fluid simulation that reacts to the pointer. For a launch page or a product reveal, where the first five seconds decide whether someone stays.
cost Heavier: a stable-fluids solver on the GPU. One per page, never behind body text.
React Bits · LiquidEther (three.js fluid simulation)
03
Silk
A slow, luxurious surface for premium brands — hospitality, fashion, real estate at the top of the market.
cost One shader; pauses off-screen.
React Bits · Silk (shader)
04
A field that answers the pointer
An interactive dot field — data, infrastructure and engineering brands. Click to send a shockwave.
cost Canvas 2D, light; pauses off-screen.
React Bits · DotGrid (canvas)
05
Type under pressure
A headline whose width, weight and slant respond to the cursor — one word that makes people play. For campaigns and event pages.
cost One variable font (~150 KB) from Google Fonts.
React Bits · TextPressure (variable font: Roboto Flex)
06
Weight by proximity
Body or display type that thickens as the pointer nears — in the site's own typeface, so it reads as craft, not effect.
cost No new font; a few KB of script.
React Bits · VariableProximity (our own Newsreader, variable)
Move across this sentence and watch the weight follow you.
07
Machine voice, decrypted
Status lines and labels that resolve like a system reading out — dashboards, AI products, anything that should feel alive.
cost A few KB; runs once per view.
React Bits · DecryptedText
08
Numbers that land
Proof figures that count up as they arrive. On this site, our version keeps the real number in the HTML for search engines and screen readers.
cost Shares the motion library; tiny.
React Bits · CountUp (motion)
09
Scroll velocity
A band of type that speeds up with your scroll and drifts when you stop — a section break with energy. Used once, never as a logo marquee.
cost A few KB; GPU-composited transforms.
React Bits · ScrollVelocity (motion)
the rule
Effects are a budget, not a style
Every one of these costs something — script, GPU time, a visitor’s attention. On a client site we spend that budget once or twice, where it does a job: the first five seconds of a launch, the number that has to land, the headline people play with and share. Everywhere else the content leads. Speed and accessibility checks run on every page that carries one.
Want one of these on your site? It starts with a free snapshot.