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

"use client" ; import { CakeProvider , CakeWatch , CakeLayer , CakeUpgrade , useCakeFeatures } from "@shiftbloom-studio/birthday-cake-loading" ; const MotionStatus = ( ) => { const { motion } = useCakeFeatures ( ) ; return < p > Motion: { String ( motion ) } </ p > ; } ; export default function Page ( ) { return ( < CakeProvider config = { { watchtower : { enabled : true , sensitivity : "medium" , targets : [ "hero" , "gallery" ] } } } > < CakeWatch /> < main > < CakeLayer minTier = "rich" watchKey = "hero" fallback = { < div > Static hero </ div > } > < div > Animated hero </ div > </ CakeLayer > < CakeUpgrade strategy = "idle" minTier = "rich" watchKey = "gallery" loader = { ( ) => import ( "./rich-gallery" ) } fallback = { < div > Static gallery </ div > } /> < MotionStatus /> </ main > </ CakeProvider > ) ; } flowchart LR Headers[Client Hints / Headers] --> Server[server helpers] Server --> Provider[CakeProvider bootstrap] Provider --> Tiering[Tier + Features] Tiering --> UI[Layered UI] Loading import { CakeProvider , CakeWatch , CakeLayer } from "@shiftbloom-studio/birthday-cake-loading" ; export default function App ( ) { return ( < CakeProvider config = { { watchtower : { enabled : true , sensitivity : "medium" } } } > < CakeWatch /> < CakeLayer watchKey = "particles" fallback = { < div > Static background </ div > } > < div > Particles + motion </ div > </ CakeLayer > </ CakeProvider > ) ; }

Author: zimtzimt

---