§ 07 — Labs

Small experiments,
in motion.

Pieces of the motion toolkit used on client sites, kept small and measured. Each one notes what it uses, what it weighs and what phones and reduced-motion visitors get instead.

Move the cursor through the leaves.

Lab 01

Night grove

The hero scene in a box. Palm fronds are procedural line segments; a vertex shader adds wind, and the cursor acts as a gust that pushes the leaflets aside.

Uses
Three.js · GLSL · orthographic camera
Weight
Loaded on demand, only on large pointer screens
Fallback
The same fronds as a static SVG poster

Click or tap to release fireflies.

Lab 02

Firefly field

Canvas 2D sprites with a little steering: each firefly wanders on slow sine waves, is drawn to the pointer and backs off when it gets too close. Tap or click to release more.

Uses
Canvas 2D · one pre-rendered glow sprite
Weight
≈ 2 KB of script, 60 fps on phones
Fallback
Reduced motion draws one still frame

Websites that grow.

Press replay.

Lab 03

Rising type

A headline split into characters that rise out of a mask, with an italic line arriving last. The real text stays in the HTML for search engines and screen readers.

Uses
GSAP SplitText · masks
Weight
Shares the GSAP bundle the site already loads
Fallback
Plain, readable text with reduced motion

Want motion like this on your site, without slowing it down? It’s the Motion & 3D add-on.

See packages