Hey HN,
I overloaded my personal Next.js portfolio with ambient audio, sound effects, and heavy animations. It felt magical on my machine—but on mobile or slower connections, it crawled. Users bounced before hearing a note or seeing a transition.
Standard fixes (lazy loading, code splitting) helped marginally, but I wanted real progressive enhancement: deliver a fast, accessible baseline first, then upgrade to the rich stuff only when the device/network could truly afford it.
So I built Birthday-Cake Loading (BCL)—a tiny runtime that detects capability signals (memory, CPU, network, reduced-motion/data prefs), buckets them into conservative tiers (base → ultra), and lets you gate features with simple components like <CakeLayer> and <CakeUpgrade>.
Now my site loads instantly with static fallbacks, then smoothly adds motion/audio/images when safe. Lighthouse scores improved dramatically, and it respects user preferences out of the box.
Open source (Apache 2.0), tree-shakeable, Next.js App Router ready with SSR bootstrap support.
GitHub:
https://github.com/shiftbloom-studio/birthday-cake-loading
npm: @shiftbloom-studio/birthday-cake-loading
Demo in the repo (examples/next-demo) (W.I.P.)
Would love your thoughts, brutal feedback, or war stories from media-heavy sites!