kernel · dprevoznik · May 4, 2026
diff --git a/bun.lock b/bun.lock
diff --git a/packages/netflix-demo/README.md b/packages/netflix-demo/README.md
@@ -0,0 +1,49 @@
+# `@onkernel/managed-auth-react-netflix-demo`
+
+Netflix-skinned demo of [`@onkernel/managed-auth-react`](../managed-auth-react). Drops `<KernelManagedAuth />` onto a Netflix-style backdrop (red bloom, black gradient, Bebas-Neue wordmark) so you can see the customization API in action against a recognizable brand.
+
+## Run it
+
+From the repo root:
+
+```bash
+bun install
+bun run --filter @onkernel/managed-auth-react-netflix-demo dev
+```
+
+Opens at `http://localhost:5174`.
+
+## Two modes
+
+### Preview mode (default)
+
+The page loads in preview mode — no backend required. A state picker below the auth card lets you scrub through every UI step (`prime`, `discovering`, `awaiting_input`, `success`, `error`, etc.) so you can audit the Netflix theming against every state.
+
+### Live mode
+
+Pass a real session ID and handoff code via URL params and the page renders the all-in-one `<KernelManagedAuth>` component instead:
+
+```
+http://localhost:5174/?session=<connectionId>&code=<handoffCode>
+```
+
+Generate those on your backend with the Kernel SDK:
+
+```ts
+import Kernel from "@onkernel/sdk";
+
+const kernel = new Kernel({ apiKey: process.env.KERNEL_API_KEY });
+
+const connection = await kernel.auth.connections.create({
+  domain: "netflix.com",
+  profile_name: "demo-user",
+});
+const { id, handoff_code } = await kernel.auth.connections.login(connection.id);
+
+// Open the demo with these in the URL:
+console.log(`http://localhost:5174/?session=${id}&code=${handoff_code}`);
+```
+
+## Where the theming lives
+
+`src/netflixAppearance.ts` — exports `netflixAppearance` and `netflixLocalization`. Pure data; no component logic. Lift it into your own app to reproduce the look.
diff --git a/packages/netflix-demo/index.html b/packages/netflix-demo/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kernel Managed Auth — Netflix demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/netflix-demo/package.json b/packages/netflix-demo/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@onkernel/managed-auth-react-netflix-demo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@onkernel/managed-auth-react": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0"
+  }
+}