{"id":35507365,"url":"https://github.com/shiftbloom-studio/birthday-cake-loading","last_synced_at":"2026-04-12T14:15:07.629Z","repository":{"id":332685117,"uuid":"1126244612","full_name":"shiftbloom-studio/birthday-cake-loading","owner":"shiftbloom-studio","description":"Birthday‑Cake Loading (BCL) is a capability‑adaptive progressive enhancement toolkit for React and Next.js. It ships a tiny baseline runtime, detects device/network/user‑preference signals, and lazily upgrades experiences only when the runtime has enough budget.","archived":false,"fork":false,"pushed_at":"2026-01-15T01:56:38.000Z","size":721,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-15T07:56:51.434Z","etag":null,"topics":["lazy-loading","nextjs","react"],"latest_commit_sha":null,"homepage":"https://birthday-cake-loading-demo.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shiftbloom-studio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-01T13:32:09.000Z","updated_at":"2026-01-15T02:58:52.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/shiftbloom-studio/birthday-cake-loading","commit_stats":null,"previous_names":["shiftbloom-studio/birthday-cake-loading"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/shiftbloom-studio/birthday-cake-loading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiftbloom-studio%2Fbirthday-cake-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiftbloom-studio%2Fbirthday-cake-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiftbloom-studio%2Fbirthday-cake-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiftbloom-studio%2Fbirthday-cake-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shiftbloom-studio","download_url":"https://codeload.github.com/shiftbloom-studio/birthday-cake-loading/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiftbloom-studio%2Fbirthday-cake-loading/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28479394,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lazy-loading","nextjs","react"],"created_at":"2026-01-03T20:11:47.086Z","updated_at":"2026-04-12T14:15:07.606Z","avatar_url":"https://github.com/shiftbloom-studio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎂 **Birthday-Cake Loading (BCL)**\n\n**Capability-first progressive enhancement for React + Next.js.**\n\n**Why BCL?**\n- ⚡ **Fast time-to-content** with baseline-first rendering.\n- 🧁 **True progressive enhancement** (upgrade only when the device can afford it).\n- ♿ **Accessibility-first** with reduced-motion/data respect built in.\n- 🌿 **Respects user preferences** (`Save-Data`, `prefers-reduced-*`).\n- 🪶 **Tiny runtime** and tree-shakeable exports.\n- ✅ **Next.js-ready** with a zero-config feel.\n\n[![npm version](https://img.shields.io/npm/v/@shiftbloom-studio/birthday-cake-loading.svg)](https://www.npmjs.com/package/@shiftbloom-studio/birthday-cake-loading)\n[![npm downloads](https://img.shields.io/npm/dm/@shiftbloom-studio/birthday-cake-loading.svg)](https://www.npmjs.com/package/@shiftbloom-studio/birthday-cake-loading)\n[![license](https://img.shields.io/npm/l/@shiftbloom-studio/birthday-cake-loading.svg)](LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/fabianzimber/birthday-cake-loading?style=social)](https://github.com/fabianzimber/birthday-cake-loading)\n[![CI](https://img.shields.io/github/actions/workflow/status/fabianzimber/birthday-cake-loading/ci.yml)](https://github.com/fabianzimber/birthday-cake-loading/actions)\n\n## 🚀 Quickstart\n\n```bash\nnpm install @shiftbloom-studio/birthday-cake-loading\n```\n\n```tsx\n\"use client\";\n\nimport {\n  CakeProvider,\n  CakeWatch,\n  CakeLayer,\n  CakeUpgrade,\n  useCakeFeatures\n} from \"@shiftbloom-studio/birthday-cake-loading\";\n\nconst MotionStatus = () =\u003e {\n  const { motion } = useCakeFeatures();\n  return \u003cp\u003eMotion: {String(motion)}\u003c/p\u003e;\n};\n\nexport default function Page() {\n  return (\n    \u003cCakeProvider\n      config={{ watchtower: { enabled: true, sensitivity: \"medium\", targets: [\"hero\", \"gallery\"] } }}\n    \u003e\n      \u003cCakeWatch /\u003e\n      \u003cmain\u003e\n        \u003cCakeLayer minTier=\"rich\" watchKey=\"hero\" fallback={\u003cdiv\u003eStatic hero\u003c/div\u003e}\u003e\n          \u003cdiv\u003eAnimated hero\u003c/div\u003e\n        \u003c/CakeLayer\u003e\n\n        \u003cCakeUpgrade\n          strategy=\"idle\"\n          minTier=\"rich\"\n          watchKey=\"gallery\"\n          loader={() =\u003e import(\"./rich-gallery\")}\n          fallback={\u003cdiv\u003eStatic gallery\u003c/div\u003e}\n        /\u003e\n\n        \u003cMotionStatus /\u003e\n      \u003c/main\u003e\n    \u003c/CakeProvider\u003e\n  );\n}\n```\n\n## ✨ Key Features\n\n| Feature | What you get | Why it matters |\n| --- | --- | --- |\n| Tiering (`base → ultra`) | Signal-driven capability buckets | Predictable, conservative upgrades |\n| Feature flags | `motion`, `richImages`, `audio`, etc. | Easy gating without bespoke logic |\n| SSR/Client Hints | `@shiftbloom-studio/birthday-cake-loading/server` helpers | Fast first paint, consistent tiering |\n| `CakeLayer` + `CakeUpgrade` | Render/lazy-load by tier | Smooth progressive enhancement |\n| Overrides + DevTools | Session override + in-app panel | QA and demos become trivial |\n\n## 🆚 Comparison\n\n| Approach | Bundle impact | Accessibility | Progressive enhancement | Server-first |\n| --- | --- | --- | --- | --- |\n| BCL | **Tiny** | **Built-in** | **Automatic** | **Yes** |\n| Manual feature flags | Medium | Manual | Manual | Optional |\n| Device sniffing | Medium | Inconsistent | Risky | Optional |\n| “Everything on” | Large | Often skipped | None | No |\n\n## 🧠 How tiering decides\n\n```mermaid\nflowchart TD\n  A[Signals: data saver, memory, CPU, network] --\u003e B{Save-Data or very low memory?}\n  B -- yes --\u003e C[base]\n  B -- no --\u003e D{Low memory/cores or constrained network?}\n  D -- yes --\u003e E[lite]\n  D -- no --\u003e F{High memory + high cores?}\n  F -- yes --\u003e G[ultra]\n  F -- no --\u003e H[rich]\n```\n\n## 📡 Signal flow\n\n```mermaid\nflowchart LR\n  Headers[Client Hints / Headers] --\u003e Server[server helpers]\n  Server --\u003e Provider[CakeProvider bootstrap]\n  Provider --\u003e Tiering[Tier + Features]\n  Tiering --\u003e UI[Layered UI]\n```\n\n## 🧩 Optional Signal Matrix (privacy-safe tuning)\n\nFor known device/browser quirks (ex: animation issues on certain mobile setups), BCL can apply\nan **optional, coarse signal matrix** that nudges tiers without invasive fingerprinting.\n\n```tsx\n\u003cCakeProvider\n  config={{\n    advanced: {\n      signalMatrix: true,\n      signalMatrixRules: [\n        {\n          id: \"custom-low-memory-mobile\",\n          when: { userAgentMobile: true, maxDeviceMemoryGB: 3 },\n          adjust: { maxTier: \"lite\" }\n        }\n      ]\n    }\n  }}\n\u003e\n  {children}\n\u003c/CakeProvider\u003e\n```\n\nThe built-in matrix uses only **non-unique** signals (reduced motion/data, coarse\nmemory/CPU, mobile hint, and network class) and can be overridden by ID.\n\n## 🔌 Server bootstrap (Next.js)\n\n```ts\nimport { getServerCakeBootstrapFromHeaders } from \"@shiftbloom-studio/birthday-cake-loading/server\";\n\nconst bootstrap = getServerCakeBootstrapFromHeaders(headers());\n```\n\n## 🛰️ CakeWatchtower (runtime jank guard)\n\n`CakeWatch` is an opt-in component that listens for frame drops + long tasks. When jank is\ndetected, it can temporarily downgrade specific rich layers to their static fallbacks (no layout\nflicker by default thanks to opacity swaps).\n\n```tsx\nimport { CakeProvider, CakeWatch, CakeLayer } from \"@shiftbloom-studio/birthday-cake-loading\";\n\nexport default function App() {\n  return (\n    \u003cCakeProvider config={{ watchtower: { enabled: true, sensitivity: \"medium\" } }}\u003e\n      \u003cCakeWatch /\u003e\n      \u003cCakeLayer watchKey=\"particles\" fallback={\u003cdiv\u003eStatic background\u003c/div\u003e}\u003e\n        \u003cdiv\u003eParticles + motion\u003c/div\u003e\n      \u003c/CakeLayer\u003e\n    \u003c/CakeProvider\u003e\n  );\n}\n```\n\n```tsx\n// app/layout.tsx\nimport { headers } from \"next/headers\";\nimport { getServerCakeBootstrapFromHeaders } from \"@shiftbloom-studio/birthday-cake-loading/server\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  const bootstrap = getServerCakeBootstrapFromHeaders(headers());\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e{children}\u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n## 🧪 Testing\n\n```bash\nnpm test\n```\n\n## 📜 License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiftbloom-studio%2Fbirthday-cake-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshiftbloom-studio%2Fbirthday-cake-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiftbloom-studio%2Fbirthday-cake-loading/lists"}