Move the cursor across the canvas
Physics · canvas2d
Particle field
120 particles drifting under inverse-square repulsion from the cursor. Lines draw between neighbours under a distance threshold.
Lab · 4 concepts · 4 sketches
Studio playground.
A small set of interactive sketches — physics, generative waves, magnetic grids, type. None of it is in production. All of it is a finger exercise for the patterns we use in client work. Move the cursor, see what happens.
Scroll runs the dayLAB-01 · Self-initiated concept
Daybook
Treasury clarity for multi-entity operators — every account, every currency, every company, one cash position. A full product concept in a paper-ledger world unlike this site, with a scroll-driven cash river at its heart. All data illustrative; built end-to-end and labelled honestly.
Enter the concept →
Scroll runs the revealLAB-02 · Self-initiated concept
VESPER
A fictional fragrance house — scroll-choreographed WebGL hero, pinned wordmark resolve, kinetic story type. Self-initiated studio concept — not a client.
Three.js / R3F · GSAP + ScrollTrigger · Lenis
Drive the configuratorLAB-03 · Self-initiated concept
MERIDIAN
A fictional independent watchmaker — a real-time 3D product configurator with URL-shareable state and fully procedural geometry. Self-initiated studio concept — not a client.
Three.js / R3F · PBR materials · URL state
Toggle the two skinsLAB-04 · Self-initiated concept
Cargo desk
A legacy cargo-office admin — the genre still running parcel desks on the UK ↔ Bulgaria corridor — rebuilt as one markup tree wearing two skins: the faithful classic UI and a modern dark rework. All data invented; self-initiated study, not client software.
React · Tailwind · one tree, two skins
- Hover for the pull
Interaction · canvas2d
Magnetic dots
A regular dot grid bends toward the cursor with smoothed inverse-square falloff. Closer dots tilt further; far dots barely move.
- Drag across to morph
Generative · canvas2d
Noise waves
Stacked horizontal lines modulated by layered sin/cos terms — cheap pseudo-noise. Cursor X shifts the phase, Y scales amplitude.
- Click to advance
Type · DOM
Word scramble
A single word cycles every 2.4s using the same scramble routine that ships in the studio nav. Click anywhere to skip ahead.
- ◌ Slot pending
More incoming
Watch this space.
New experiments land monthly. Got a request? Tell us in the brief generator or via contact.
Notes
- Every demo runs at the device pixel ratio (capped at 2×) and pauses when scrolled out of view — the page won't spin up your fan.
- Reduced-motion preferences are respected: every experiment paints a single static frame and stops.
- The code lives in
src/components/lab/. Each is ~120 lines of canvas2d, no external libraries.