Notes 6 notes
How I design and build the small things on this site, in simple words.
Every note starts with the thing itself. Play with it, then read how it was made.
All notes
Interactive loading animation: a Rubik's cube that solves as the page loads
Nobody likes a loading state. How I designed an interactive loading animation: a Rubik's cube that solves itself as the page loads. Live demo inside. · 10 min read
A Yu-Gi-Oh! card binder that folds open in CSS
How I built a black zip case with 72 cards in clear sleeves. The pages turn in 3D and every card opens in a holographic close-up. No canvas, only HTML and CSS. · 6 min readWhat happens when a slider goes past Max
An effort slider has five steps: Low, Medium, High, Extra, Max. I added a secret sixth step and made nine things that can happen there. Each one is below, live, with how I built it. · 13 min read
An isometric street where the road loops
How I built Donut Patrol, a small isometric city block in SVG: a bank, a donut shop and a police precinct on a street that wraps around. Rob the bank and two officers drop their donuts to chase you. · 4 min read
A drawbridge you can operate, drawn in lines
How I built Dusk Drawbridge, an isometric canal crossing in SVG. Raise the span, send a boat through, switch the lamps, and watch the cars queue at the gates. · 4 min read