LAB / 01
Experiments / Rendering
Things we built to find out whether we could.
Two pieces of real-time rendering, running on this page rather than recorded. Move the cursor across either one. Everything below explains how they are made and what it is reasonable to expect one to cost.
- Canvas 2D
- No dependencies
- 60 fps target
Motion with a reason
Effects are not decoration.
An effect earns its place when it does something a static image cannot: hold attention at the top of a page, make an abstract idea physical, or give a visitor something to do with their hands while they decide whether to read on. When it does none of those, it is weight on the page and a battery cost on a phone.
Both exhibits below are built to that test. Each one draws on a single canvas, ships no library, stops when it scrolls out of view, and stands still for anyone who has asked their system for reduced motion. The word still reads with JavaScript switched off entirely.
unodevs
Fig. 01
Particle word
A few thousand points sampled from the shape of the letters themselves, projected in three dimensions and sorted back to front every frame. The cloud swings with the cursor and returns to rest when it is left alone.
Full spectrum
Canvas. WebGL. Motion systems.
The technique follows the brief. The standard does not: it runs at sixty frames, it degrades to something readable, and it does not fight the page it is on.
Canvas 2D
Particles, fields, type that behaves like a material. Cheap to run, works everywhere, and the thing most people mistake for WebGL.
3D and WebGL
Product scenes and immersive sequences where depth carries the story. Used when the subject is genuinely an object, not as a way to make a page feel expensive.
Scroll systems
Pinning, scrubbing and sequences tied to the scrollbar, built so that the content still reads if the whole layer never starts.
Interface motion
The small things: how a panel opens, where focus goes, what happens between two states. Most of the perceived quality of a site lives here.
Performance work
Frame budgets, paint cost, what to draw and what to skip. An effect that drops to fifteen frames on a mid-range phone is worse than no effect.
Accessible by default
Reduced-motion respected, keyboard paths intact, and a readable page underneath every animation. Not a retrofit — the still version is what gets built first.
Rendered in the browser
Light, bent by gravity, in real time.
Every pixel follows a ray as it curves through the gravity well. Nothing here is a video or a loop — it is traced live on your machine, and it reacts as you scroll.
Fig. 02
Gravitational lens
Light bent around a mass that is not there. The distortion is computed per frame against the pointer, so nothing about it is a loop and no two passes across it look the same.
Notes
What it takes to keep one of these honest.
Budget
- One canvas, not four
- Draw only what is on screen
- Stop the loop when scrolled past
- No library where maths will do
Fallbacks
- Readable with no JavaScript
- Still frame for reduced motion
- Text stays selectable
- Heading stays in the document
Proof
- Measured on a mid-range phone
- Frame time, not frame count
- Tested against the real page
- Re-measured after every change
Want something like this on yours?
Tell us what the page has to do and we will say whether an effect helps it — including when the answer is that a good photograph would do more for less.
Start a project