Experiments

View Experiment →
LIVE

Toggle Micro

Five toggle switches, five distinct microanimations — lava flow via SVG displacement, a 3D coin flip, metaball blob merging, a gravitational orbital arc, and simultaneous shape morphing.

Microanimation SVG Filter CSS 3D Orbital Physics
View Experiment →
LIVE

Webcam OCR

Live webcam feed scanned for text in real time using on-device Tesseract.js (WebAssembly). Detected words are logged with timestamps and confidence scores. Flip the feed horizontally, tune confidence threshold, and download the session as CSV.

getUserMedia Tesseract.js OCR CSV Export
Pigeon app prototype
View Experiment →
LIVE

Pigeon

A fully interactive mobile app prototype rendered inside a pixel-perfect iPhone frame. Send packages via trained city pigeons — browse pricing, track your bird in real time, and check pigeon-unfriendly weather alerts. Five screens, smooth transitions, zero backend.

UI Prototype Mobile Design Interactive CSS Animation
View Experiment →
LIVE

Text Flow

Real-time text reflow around draggable shapes, powered by pretext's variable-width line layout engine. Pure arithmetic — no DOM measurement.

Pretext Canvas 2D Variable Layout Typography
the rain
View Experiment →
LIVE

Rain Text

ASCII rain falls through a story about rain. Characters ripple outward from each drop with spring-return displacement physics.

Canvas 2D ASCII Art Ripple Physics Monospace Grid
21 LANDMARKS
View Experiment →
LIVE

Hand Tracking Debug

MediaPipe Hands tracks 21 landmarks per hand in real time. A WebGL2 renderer draws the full skeleton with glow-blended bone quads, SDF joint circles, depth cues, and an animated sci-fi HUD overlay.

MediaPipe WebGL2 GLSL Shaders getUserMedia
Face + Parallax
View Experiment →
LIVE

Face Parallax

Face tracking drives head-coupled perspective across layered 3D scenes. Move your head to look around — the screen becomes a window into another world.

Face Detection MediaPipe Parallax Layers Canvas 2D
View Experiment →
LIVE

Unicorn Studio II

A second real-time WebGL visual built with Unicorn Studio, embedded live and interactive. Responds to cursor movement and viewport changes.

Unicorn Studio WebGL Interactive
@@@##**++::..  ..::++**##@@@
@##**++::..      ..::++**##@
##**++::..          ..::++*#
#**++::..              .::+*
**++::..                ::+*
++::..                  .:++
::..      .::++**        .::
..    .:+*##@@@@##*.      ..
    .*#@@@@@@@@@@@@#*.
   *#@@@@@@@@@@@@@@@@#*
   *#@@@@@@@@@@@@@@@@#*
    .*#@@@@@@@@@@@@#*.
..    .:+*##@@@@##*.      ..
::..      .::++**        .::
++::..                  .:++
**++::..                ::+*
#**++::..              .::+*
##**++::..          ..::++*#
@##**++::..      ..::++**##@
@@@##**++::..  ..::++**##@@@
View Experiment →
LIVE

Webcam ASCII

Your camera feed translated into characters in real time. Each pixel's luminance maps to a position in the ASCII ramp. Toggle full color mode to inherit per-pixel RGB from the source, or pick a mono accent and adjust grid density.

Canvas 2D getUserMedia ASCII Art Real-time Video
View Experiment →
LIVE

Mosh Pit

Two hundred words, each with its own spring physics. Move your cursor through the crowd — some words surge toward you, others crush inward, each reacting at its own speed.

DOM Typography Spring Physics Variable Fonts
View Experiment →
LIVE

Unicorn Studio

A real-time WebGL visual built with Unicorn Studio, embedded live and interactive. Responds to cursor movement and viewport changes.

Unicorn Studio WebGL Interactive
View Experiment →
LIVE

UI Style Gallery

A living showcase of 4 UI design philosophies. One page, one global style switcher — every element transforms between Brutalist, Glassmorphism, Neomorphism, and Retro/Y2K aesthetics. Includes a micro-animation gallery and full component zoo.

CSS Variables Theme System Micro-Animations Component Zoo
View Experiment →
LIVE

Snake in a Box

Drag the corner handles to resize the box. The snake inside maintains a fixed body length, coiling tightly in small spaces and stretching out when given room.

Canvas 2D Chain Constraint Drag Interaction
View Experiment →
LIVE

Generative Geometry

Audio-reactive spring mesh. Triangulated geometry that breathes with simulated audio and fractures on click, reassembling through spring physics.

Canvas 2D Spring Physics Audio API