Ice Cream Mode
An easter-egg toggle that turns my portfolio into a sprinkle-filled ice cream sundae.
Context
I wanted to give my portfolio a little personality and really show my love for ice cream. I also hadn't had a reason to explore Claude's Fable 5 model, so Ice Cream Mode filled that gap. Inspired by easter eggs from around the internet, I thought adding a 🍦 toggle just made sense. Once selected, the whole site flips into a dessert world with a bright palette, waffle-cone textures, and sprinkles falling from the top.
Challenge
I figured this was a 15-minute job. The first version actually deployed that fast. The hour came after — refining the design, reworking the toggle a few times, and adding a gyroscope tilt on mobile so the sprinkles fall toward real gravity. None of that was necessary, but isn't that sort of the point in a quick-turn personal project?
Insight
Fable 5 is genuinely fantastic. But on a Pro plan, the usage window shrinks fast, so save it for your hardest problems. Running something like this on Fable 5 is like a Lamborghini doing 25 mph through small-town downtown.
Execution
Shipped v1 in ~15 minutes: one tap swaps the whole site to a dessert palette via CSS variables, with sprinkles falling from the top.
Added the small stuff in quick passes — click-burst mini-sprinkles, a 🍦 browser-tab title and cone favicon, and a hidden brain-freeze blizzard when you toggle 3× fast.
Wired gyroscope tilt on mobile so the sprinkle field rotates to real gravity — flip the phone and they fall upward.
In motion
A tap or click bursts with sprinkles.
On mobile, the gyroscope maps how sprinkles fall to align with actual gravity, just like they'd fall in real life.
No matter the page, Ice Cream Mode persists with the new dessert palette reflected as you scroll.
When you get to the bottom of my site, you'll be met with a waffle cone footer. The best type of cone.
Every page, off → on
Homepage
Project page
Footer
Mobile nav
Next case study