Interactive Canvas · 30 Experiments

Visual Design
Playground

Thirty canvas effects, each driven by your mouse, click, or scroll. Pick one to explore.

01 / 30
Particles

Magnetic Cursor

A grid of dots pulled toward your cursor like metal filings around a magnet, springing back when you move away.

View Demo →
02 / 30
Particles

Constellation Field

Star particles that connect with lines when close. Your cursor repels them, breaking constellations apart.

View Demo →
03 / 30
Fluid

Liquid Orbs

Glowing blobs that merge when they overlap, creating organic lava-lamp shapes. Click to attract them to your cursor.

View Demo →
04 / 30
Fluid

Click Ripple

Every click sends a glowing ripple ring propagating outward, coloured by where you clicked on screen.

View Demo →
05 / 30
Depth

Parallax Layers

Five geometric layers at different depths, each shifting at a different rate as you move the mouse.

View Demo →
06 / 30
3D

3D Wireframe

A perspective-projected icosahedron that follows your mouse, edges coloured by depth.

View Demo →
07 / 30
Typography

Text Shatter

Click to shatter text into hundreds of particles, each flying outward. Click again to reform it.

View Demo →
08 / 30
Aa
Typography

Kinetic Type

Individual characters that scale, glow and shift hue based on how close your cursor gets to each letter.

View Demo →
09 / 30
Noise

Flow Field

Hundreds of particles following a noise-based vector field, leaving colour trails. Your cursor warps the field.

View Demo →
10 / 30
Noise

Ink Diffusion

Click and drag to deposit ink that spreads organically using a cellular diffusion simulation.

View Demo →
11 / 30
Depth

Gravity Warp

A grid of lines bends toward your cursor like a gravitational lens, glowing brighter the closer you get.

View Demo →
12 / 30
Fluid

Aurora Borealis

Layered sine-wave curtains of light drift across a starfield. Move your cursor to shift the colour palette.

View Demo →
13 / 30
Physics

Gravity Wells

Left-click to place attractors, right-click for repellers. Watch 300 particles bend into orbital paths.

View Demo →
14 / 30
Generative

Voronoi Cells

18 orbiting seed points divide the canvas into living colour cells. Move your cursor to repel the seeds.

View Demo →
15 / 30
Noise

Digital Rain

Katakana characters cascade in columns. Move your cursor to part the streams like walking through a waterfall.

View Demo →
16 / 30
Physics

Neon Bounce

Glowing balls bounce off the walls and blend together using screen compositing. Click to spawn more.

View Demo →
17 / 30
Generative

String Art

Lines drawn between mathematically offset points on a circle, forming cardioids and rosettes. Mouse shapes the pattern.

View Demo →
18 / 30
Fluid

Smoke Trails

Move your cursor fast to generate drifting smoke particles that expand, billow, and slowly fade away.

View Demo →
19 / 30
Physics

Lightning

Click to spawn branching bolts using midpoint displacement. Hold for a continuous storm of electric arcs.

View Demo →
20 / 30
Generative

Kaleidoscope

An animated wedge pattern mirrored and rotated to form a mesmerising kaleidoscope. X controls facets, Y controls spin.

View Demo →
21 / 30
Particles

Boids Flocking

Two hundred agents follow the classic Reynolds flocking rules — separation, alignment, cohesion. Move your cursor to scatter them.

View Demo →
22 / 30
Particles

Fireworks

Rockets launch and burst into trails of coloured sparks with real gravity and fade. Click to launch your own.

View Demo →
23 / 30
Physics

Falling Sand

A cellular automaton where sand grains fall, pile, and slide realistically. Click and drag to pour. Six colour choices.

View Demo →
24 / 30
Generative

Lissajous

Oscilloscope-style parametric curves that morph as you move the mouse. X sets the frequency ratio, Y shifts the phase.

View Demo →
25 / 30
Physics

Cloth Simulation

A spring-mass cloth grid pinned at the top, hanging under gravity. Grab and drag any point to pull the fabric.

View Demo →
26 / 30
Generative

Spiral Galaxy

Four thousand stars arranged into logarithmic spiral arms, slowly rotating. Move the cursor to warp the disk.

View Demo →
27 / 30
Noise

Reaction Diffusion

The Gray-Scott model grows organic Turing patterns in real time. Click or drag to seed new disturbances.

View Demo →
28 / 30
Generative

Pixel Sort

Columns of pixels continuously sort themselves by brightness, creating glitchy digital art. Click to inject colour chaos.

View Demo →
29 / 30
Generative

Mandala

Each click blooms a procedurally generated mandala with random symmetry, ring count, and colour palette.

View Demo →
30 / 30
Physics

Orbital Mechanics

Place up to 8 gravitational bodies — they attract each other and distort particle paths into orbital flows.

View Demo →