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.
§ 07 — Labs
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
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.
Click or tap to release fireflies.
Lab 02
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.
Websites that grow.
Press replay.
Lab 03
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.
Want motion like this on your site, without slowing it down? It’s the Motion & 3D add-on.
See packages