·Playground

Playground.

Small open-source experiments. UI effects and recreations I wanted to understand, each with a short writeup. Open to borrow.

The “Ask AI” button
A WebGL iridescent rim, recreated from Octant and made cursor-reactive. WebGL · Svelte action
Max Based
Max Based @baseddesigner
Holographic foil
A trading-card holo sheen that tilts with your pointer (or phone gyro). WebGL · Svelte action
Film grain
An animated grain overlay for a tactile, printed feel. WebGL · Svelte action
Fluid trail
Glowing metaball ink that follows your cursor. WebGL · Svelte action

click to replay

Develop from noise
A photo that resolves out of dither. Click to replay. WebGL · Svelte action

scroll to shear

Scroll shear
An image that shears + splits with your scroll speed. WebGL · Svelte action

click to wipe

Displacement wipe
Click to dissolve between two grades along a noise edge. WebGL · Svelte action