Field Lines
Contour lines of a drifting field that bend around your cursor and recover.
Technology
- WebGL
- GLSL
- TypeScript
Field Lines started as a question: can a hero animation say something about how we work, instead of decorating it?
Every line is drawn by a single fragment shader. The cursor adds a local disturbance. Nothing is pre-rendered, and the whole thing weighs less than a small image.
When reduced motion is on, the field renders once and holds still.
More from the Venture Lab
All experimentsInteractive
Grain Field
Live
Soft gradients seen through fine grain, leaning toward your cursor at different depths. It runs the hero of this website.
Typography
Variable Weight
Live
Type that gets heavier the closer you get. A small study in variable fonts and proximity.
Generative
Grid Pulse
Live
The twelve-column grid of this site, played as an instrument. Click anywhere to send a pulse.