Back home

PLAYGROUND / 19 EXPERIMENTS + SOUND

Effects, built by hand.

A working collection of the visual systems behind this portfolio, effects lifted from my other projects, and pieces rebuilt from the best component galleries on the web. Every one runs live in your browser. Move, drag and break them.

Move through the stars

01 / On this site

Galaxy

A shader star field with depth, twinkle and drift.

OGL · GLSL

Open lab

Drag your pointer across the lines

02 / On this site

Waves

A line field on springs that ripples away from the pointer.

Canvas 2D · Spring physics

Open lab
Word

Hover across the letters

03 / On this site

Text Pressure

Variable-font weight that swells toward your pointer.

Variable fonts · requestAnimationFrame

Open lab

Hover each cell with a mouse or trackpad

04 / On this site

Cursor System

One arrow that reads the room: it fills, labels itself and pulses.

SVG path morphing · GSAP · Pointer events

Open lab
Text

Hover the heading; it keeps scrambling on its own

05 / On this site

Shuffle Text

Headings that scramble through glyphs before settling.

GSAP · DOM

Open lab

Move to leave a trail

06 / On this site

Menu Dot Field

A breathing dot grid that parts around your pointer.

Canvas 2D

Open lab

Scroll inside the panel

07 / On this site

Scroll Blur Reveal

Words come into focus as they reach your reading line.

GSAP · CSS filters

Open lab

Drag to drift across the field

08 / From my projects

Atlas Field

A curved wall of images you browse by moving, not scrolling.

Three.js · WebGL

Open lab
Palette

Swipe fast through the panel

09 / From the web

Fluid Cursor

A real-time fluid simulation stirred by your pointer.

WebGL · GLSL · Fluid simulation

Open lab
Shape

Watch the metal flow

10 / From the web

Metallic Paint

A flat logo turned into flowing liquid metal.

WebGL2 · GLSL

Open lab
Text

Move to tilt the word

11 / From the web

ASCII Text

A 3D word rendered live as a field of characters.

Three.js · Canvas

Open lab
Word

Sweep through the letters

12 / From the web

Particle Type

Thousands of particles that hold the shape of a word.

Three.js · Points · Spring physics

Open lab
Obstacle

Move into the paragraph

13 / From the web

Text Reflow

A paragraph that re-lays itself around your pointer, live.

Pretext · Canvas 2D

Open lab

Drag the lens

14 / From the web

Liquid Glass

A lens of glass that bends and splits what's behind it.

OGL · GLSL

Open lab
Pattern

Hover to reveal the original

15 / From the web

Dither

Images rebuilt from ordered dots, like old print and 1-bit screens.

OGL · GLSL

Open lab

Your pointer is a blob too

16 / From the web

Metaballs

Liquid blobs that merge and split as they drift.

OGL · GLSL · Signed distance fields

Open lab

Approach the buttons

17 / From the web

Magnetic Elements

Buttons that lean toward you and spring back.

Framer Motion · Spring physics

Open lab

Drag sideways

18 / From the web

Circular Gallery

An image strip that bends into an arc as it moves.

OGL · GLSL

Open lab

Draw with your pointer

19 / From the web

Pixel Trail

A grid that lights up behind your pointer and fades out.

Canvas 2D

Open lab