Experiments
Interfaces, interactions and ideas I’m exploring.
01
Creative technology · Product interaction
Sneaker Studio — Interactive Product Customizer
Recolour a sneaker part by part and see every combination instantly.
A product configurator with eight editable parts, colour presets and PNG export, built on a recolour pipeline that keeps the material shading intact.
Built with
React · Canvas API
AI-assisted with
Claude Code
Interaction
Part-by-part customization · presets · PNG export
D//01 — Creative Synthesizer
An interactive design instrument for shaping original compositions.
Pick FORM, TYPE, COLOR or MOOD, then turn one contextual dial to explore the result.
03
Generative simulation · Spatial editing · AI interaction design
Exposure Lab
What if generative editing understood causes instead of instructions?
Paint environmental effects directly onto a subject and control where, how strongly and for how long they change it.
Built with
JavaScript · HTML · CSS · Canvas API · Python
AI-assisted with
Claude
Interaction
Parameter + location + duration → state change
Mouse, pen or touch
04
Interaction design · Creative coding
Type. Print. Send.
A digital message becomes a physical letter in real time.
Type, delete and send while a CSS-3D printer mirrors each action: feeding, retracting, folding and mailing the paper.
Built with
React · CSS 3D transforms
AI-assisted with
Claude Code
Interaction
Typing, deleting and sending drive the printer
05
Computer vision · Real-time 3D
Reality Transfer
Bring a real object into a 3D scene from your camera or a photo.
The browser isolates the object, decides whether to keep, restyle or rebuild it, and places it in the character’s open hand.
Built with
Three.js · WebGL · Transformers.js · MediaPipe
Technology
ORMBG segmentation · Depth Anything V2 · local browser inference
Interaction
Camera or image → scene object
Camera works best in full view
06
Creative technology · Motion
Puffpath — Animated 404
A 404 page that turns getting lost into a small adventure.
An original animated mascot, Momo, with custom interaction design and AI-assisted character animation.
Built with
React/TypeScript · Vite · Tailwind CSS
AI-assisted with
GPT-6 Astra
Interaction
Head home, try another path or open the menu
07
Creative technology · Direct manipulation
BEAK.
The cursor becomes a falcon beak that can pick things up.
Grab, carry and drop objects with the beak tip instead of an arrow, using a mouse, pen or touch.
Built with
React · Pointer Events
AI-assisted with
Claude Code
Interaction
Grab and drag from the beak tip
Reset
08
Interaction design · Creative coding · Art direction
The City Before You Wake Up
One Berlin street, from 01:00 to 08:00.
Drag the clock to meet the bakers, sorters, sweepers and track crews who run the city before anyone wakes, then open a scene to look closer.
Built with
React · Canvas
AI-assisted with
Claude Code
Interaction
Clock scrubbing · Explorable scenes
09
Interaction · Motion
Falcon
A footer mascot that notices you.
The falcon idles, yawns and falls asleep, then wakes and flies to the call-to-action the moment you reach for it.
Built with
React · Sprite animation
AI-assisted with
Claude Code
Interaction
Footer presence · reacts as you reach for the CTA
