An interactive field study in movement, memory, and light.
Experiment — 021
Canvas / generative / pointer
Playground.
Move to paint. Tap to detonate. Leave it alone and the field finds its own path.
This canvas visualization uses a grid of fading pixels that follows pointer and touch movement.
Selected experiments
Things worth making twice.
Studies, components, and systems built to understand how an interaction works—then rebuilt to make it ours.
Apple Mail Category Animation
The iOS 18 Mail category picker — the active pill stretches open to reveal its label while the inbox swaps with a spring-and-blur transition. Rebuilt from the Built With Code demo on Motion layout animations.
ASCII Rubber Ducky
The classic glTF rubber duck floating in a lit studio, redrawn live as shape-matched ASCII characters — drag to orbit while it auto-rotates. Built with Canvas UI's AsciiObject on Three.js.
Books Showcase
An interactive 3D book gallery — procedurally painted covers, spring physics, hover-peel, and a drag-to-spin detail view. Ported from thebuggeddev/books into Next.js, Tailwind, and Three.js.
The Complete Shelf
A warm editorial 3D library — seven clothbound hardcovers on a continuous shelf with procedural cloth, foil, and paper textures. Open a volume and drag through physically bending pages. Ported from MengTo/complete-shelf.
Continuous Sections
A deck of full-screen sections with no page scroll at all — GSAP Observer turns wheel, touch, and drag intent into one wipe at a time, the background counter-slides for parallax, headings scatter in character by character, and the index wraps so it never ends. Ported from GreenSock's Observer demo.
Zentry Hover Headline
Inline squares punctuating a headline that swell into image cards on hover — the card drifts and tilts after the cursor while the picture slides the opposite way. Ported from the original Codegrid source.
Starfield Scroll
A pinned hyperspace jump — a thousand weighted-palette canvas streaks accelerate out of a soft center hole as scroll scrubs the warp, while three headlines fade through the flight word by word with reading pauses and a gentle scale drift. Ported from the original Codegrid source.
PrototypeStudio Spotlight
A pinned spotlight section where one scroll progress drives three tracks at once — the counter slides down, a column of work scrolls past the viewport lighting up whatever crosses the midline, and each project name rises through its own slice of the range. Ported from the original Codegrid source.
Horizontal Scrolling Gallery
A pinned gallery where vertical scroll scrubs an image strip sideways — the strip travels exactly its overflow width, re-measured on every refresh. Ported from GreenSock's ScrollTrigger horizontal gallery demo.
Camille Mormal Slider
A full-screen GSAP image slider ported from the original Codegrid source into Next.js and Tailwind.
SpencerGabor Magnetic Cards
A cursor-driven card cluster with spring physics — cards get pushed, tilt, and bounce back as the mouse sweeps past. Ported from the original Codegrid source.
GSAP Creative Clutter
A desk of scattered objects that flies between chaos, cleanup, and notebook arrangements using GSAP Flip. Ported from the original Codegrid source.
Interactive Team Section
A row of team avatars where hovering a face grows it and flips the member's name up letter by letter. Ported from the original Codegrid source without SplitText.