Motion

A small, deliberate motion language. Every animation honors prefers-reduced-motion and falls back to a frame that holds up alone.

01 ⁄ WebGL morph

Lissajous → lockup

6,000 particles tweened entirely on the GPU. The starting state is a figure-8 lissajous cloud — the visual language of the Eddy ambient wave — and each particle then morphs into a position sampled inside the logo's filled silhouette. The motion is the continuity between ambient flow and resolved mark.

horizontal-gradient · WebGL

Press to replay

Morph: 0 · 1500ms
Cross-fade: 850 · 850ms
Wordmark: 800 · 520ms
Tagline: 1000 · 440ms
Particles: 6,000
Total: 1.7s

Hand-rolled WebGL, no Three.js. Particle positions interpolated entirely on the GPU. Honors prefers-reduced-motion.

02 ⁄ Waves

Waves

Slow-moving WebGL mesh gradients for hero treatments. The static gradient underneath stands in during SSR and whenever the user prefers reduced motion.

eddy

Eddy

Closed-loop sister to Current — particles orbit along oversized figure-8 channels whose lobe tips extend past the frame. Flow circles through the view rather than passing across it; the eye reads recirculation, compounding, capital turning over its own ground. Same comet vocabulary as Current, organized as a system of returning paths instead of a one-way stream.

current

Current

Horizontal sister to Tide — a stream of many fine particles drifting left-to-right along faint curved channels. Slow background mass, a handful of brighter foreground accents; trails read as motion blur and quietly link past to present. Built for hero sections where the brief asks for speed, movement, connection, and great amounts — tuned to recede behind text and buttons rather than compete.