Interactive web design & development
I design and build the websites brands, studios and product teams use to make a first impression — both halves of the job, one person, so nothing gets lost in the handoff. Everything on this page is running live in your browser right now. No screenshots. No mockups. Move your cursor.
Most sites lose their edge in the handoff — the design gets flattened to fit what the build turned out to be capable of. I do both halves, so the ambitious idea survives contact with the browser.
Art direction, typography, layout systems, a motion language. Decided with the build already in mind, so what gets designed is what actually gets shipped.
Hand-written HTML, CSS and JavaScript — or React, Next or Svelte when the project earns the weight. Accessible, responsive, and fast on a bad connection.
Shaders, generative visuals, physics, scroll choreography. The parts that make a site feel like an object instead of a document. Six working examples are below.
Design systems, component libraries, Core Web Vitals. Built so the site is still fast and still on-brand after your team has edited it forty times.
Raw WebGL — no three.js, no glslify. A full-screen triangle, a fragment program raymarching
a signed-distance field with soft shadows and fog, and a compiler wired straight to the textarea.
Edit the GLSL below; it relinks on input, and errors come back with real line numbers.
Why it matters to you: when a launch needs a hero image no stock library can produce and no template can fake, this is the machinery underneath it.
Verlet integration written from scratch: positions carry their own velocity, distance
constraints are relaxed four times per frame, and any link stretched past its breaking strain
is removed from the solver. Drag gathers a handful of fabric rather than a single
thread. Shift + drag cuts.
Why it matters to you: weight and resistance are what separate a page that responds from a page that merely reacts. Visitors can't name it, but they feel it and they stay longer.
The same grid, the same start and goal — only the priority function changes. Dijkstra floods
outward blindly, greedy best-first sprints at the wall, and A* buys the shortest path for a
fraction of the work. Backed by a real binary heap. Drag on the grid to draw walls.
Why it matters to you: an interface is a data structure wearing a nice coat. Filtering, search, sorting, a configurator that has to stay instant — I write what's underneath, not just what's on top.
Interface polish is mostly interpolation and restraint. Six primitives, each about a
dozen lines, each respecting prefers-reduced-motion.
Why it matters to you: nobody chooses a studio because of an easing curve. They just come away thinking the whole operation feels expensive.
The button samples pointer distance and eases toward it at 0.22 per frame, then releases on exit. Attraction, not teleportation.
Each glyph gets a random start and end frame, cycles through noise, then locks. Staggered reveal from one requestAnimationFrame loop.
The indicator measures both endpoints, stretches to span the transit, then contracts. Movement with follow-through.
A critically-tuned mass–spring–damper — stiffness 0.16, damping 0.76. Throw it and the release velocity carries.
Click any tag. It jumps to the front and the rest reflow — measured before, measured after, then animated across the difference. The FLIP technique.
The finished surface, with the wireframe still live underneath it. A clip-path
circle chases your pointer — the browser clips rather than composites, so it stays cheap.
Built end to end and running in the wild — not mockups, not concepts.
Handcrafted lapidary art out of Julian, California. A catalogue for a product line where no two pieces are alike — a page per stone, a second collection staged as it comes into development, and a commission form for bespoke requests.
No mystery, no six-week silence followed by a big reveal. Four stages, and you can see the work at every one of them.
Half an hour. What the site has to do, who it's for, and what's actually at stake if it doesn't work. If I'm not the right person for it, I'll tell you and point you at someone better.
Two or three visual routes, built in the browser rather than drawn in Figma — a static frame can't show you how something moves, and movement is half of what you're buying. We pick one.
Weekly builds on a staging URL you can open on your own phone. Feedback lands while it's still cheap to act on, and nothing arrives as a surprise.
Deploy, hand over the code, walk your team through editing it. Thirty days of fixes are included, and I don't disappear on day thirty-one.
Most projects run three to eight weeks and are quoted at a fixed price agreed before anything starts — I don't bill by the hour, because you shouldn't pay more when something turns out to be harder than I expected. Smaller pieces — a single interactive feature, a landing page, a performance rescue — are welcome too.
The more specific you are, the more useful my reply will be. If it looks like a fit, I'll come back with an approach and a number — usually within two working days.
You've been reading the portfolio and the proof at the same time. It's one HTML document — no framework, no bundler, no image files, no fonts fetched from anywhere.
Only the demo you're actually looking at is allowed to run: every animation loop is gated behind an
IntersectionObserver and stops on visibilitychange, so an idle tab costs nothing.
Canvases are drawn at device pixel ratio and re-provisioned through a ResizeObserver.
Reduced-motion visitors get the same content with the movement removed, and everything here is
reachable from the keyboard. That discipline is the actual product — the torus is just how I got
you to scroll this far.