Experiments · sketches

Lab.

Where I test ideas I can't ship at work. Motion sketches, R3F scenes, generative experiments, weird tooling.

9 experiments

Selected sketches

01 · 2026live
0741852963074185

Boot Sequence

GSAP · ScrambleText · CustomEase

4×4 Glyph-Matrix POST. Cells scramble Doto digits, freeze in reading-order with an inverted scan-line, single-frame flash, then coalesce into the wordmark. Plays on this site every first visit.

02 · 2026live

Glyph LED Matrix

React · Interval · State

Nothing Phone-inspired LED grid that pulses sequentially through a JB pattern. SSR-deterministic initial state — no hydration mismatch.

03 · 2026live

Interactive Dot Grid

Canvas 2D · DPR · RAF

Cursor-reactive dot field with scroll parallax. Vanilla canvas, throttled to 12.5 FPS while scrolling so Lenis stays smooth. ~80% lighter than R3F.

04 · 2026live
Hovered

Bracket Cursor

RAF · DOM transform · mix-blend-difference

Four corner brackets that snap to the bounding-rect of any hovered element (target-cursor pattern, à la Active Theory). Manual lerp, direct DOM transform — no React state.

05 · 2025live

HSL Theme Engine

CSS variables · Color math

Dynamic UI theming generated from a single HSL pair extracted from a client logo. Built for Tracknema's white-label tracker — one tenant, one paint job, zero forks.

06 · 2025live

Stockfish Easter Egg

WASM · Konami · Hidden mode

Embedded Stockfish chess engine inside a fitness app, unlocked via Konami code. Pure absurdity — and a working AI opponent.

07 · 2026wip

R3F Wireframe Background

Three.js · React Three Fiber

Slow-rotating wireframe sphere drifting behind the dot-grid layer. Lazy-loaded, prefers-reduced-motion respected.

08 · 2026wip
/A/B

View Transitions

Native API · Next.js 16

Cinematic page-to-page transitions using the View Transitions API + flushSync handoff. Element-shared morph between intro wordmark and hero h1.

09 · 2025archived

Plasma Grid

SVG · Procedural

Animated plasma background pattern shipped on a personal Road Trip site. Lightweight SVG-only generative — no canvas, no WebGL.