Show HN: Birthday-Cake Loading – Rich Next.js without punishing slow devices

4 points

5 months ago

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!