Playground (06)
Interactions, built in code.
Small projects where I test an interaction idea by building it. Each one is live, and the code is public.
Happy Wall
01Direct manipulation. Drag photos around a cork wall, edit their captions and add your own, including HEIC files.
TypeScriptLive ↗, Happy WallCode ↗, Happy WallKoffi
02Scroll-driven motion. A coffee landing page where cards stack as you scroll.
HTML, CSS, JavaScriptLive ↗, KoffiCode ↗, KoffiColette
03Editorial detail. Parallax scrolling, a magnifying lens on hover and text that reveals as you read.
HTML, CSS, JavaScriptLive ↗, ColetteCode ↗, ColetteTech Stacks
04Playful physics. Tool names drop in as pills you can push around. Day 10 of a 30-day challenge.
TypeScriptLive ↗, Tech StacksCode ↗, Tech StacksCarousel
05A tool, not a demo. Compose continuous-flow social carousels on one canvas and export the slides.
JavaScriptLive ↗, CarouselCode ↗, CarouselTypeCraft
06A Figma plugin. Choose fonts and a target device, and it generates organised text styles with a typography preview.
JavaScript, Figma pluginFigma ↗, TypeCraftCode ↗, TypeCraft