new with temp demo

src/components/nook/FeatureBreakdowns.tsx

@@ -764,8 +764,12 @@ function CameraDemo() {
     });
   });
   createEffect(() => {
-    if (phase() === "live") videoRef?.play();
-    else videoRef?.pause();
+    if (phase() === "live" && videoRef) {
+      videoRef.currentTime = 0;
+      videoRef.play();
+    } else {
+      videoRef?.pause();
+    }
   });
   return (
     <ModuleCard class="relative mx-auto w-full max-w-[300px]">
@@ -809,9 +813,9 @@ function CameraDemo() {
             ref={videoRef}
             src="/nook/cam-recording.mp4"
             muted
-            loop
             playsinline
             preload="metadata"
+            onEnded={() => setPhase("idle")}
             class="absolute inset-0 h-full w-full object-cover transition-opacity duration-700"
             style={{ opacity: phase() === "live" ? 1 : 0 }}
           />
@@ -1027,7 +1031,7 @@ export default function FeatureBreakdowns() {
         body="Gated tool calls hold right in the panel. Allow, deny, or demand a reason. Walking away? The same request lands on your phone and your tap flies back to the agent."
         bullets={[
           "Permission and question cards pin above the session list",
-          "Push-to-phone over your own network — no cloud middleman",
+          "Push-to-phone over your own network — no cloud middleman (coming soon)",
           "Works across every hooked agent, local or remote"
         ]}
         reversed

src/components/nook/FeatureCollage.tsx

@@ -46,7 +46,10 @@ function CollageCell(props: {
  */
 function InkStage(props: { children: JSX.Element; class?: string }) {
   return (
-    <div class={`flex justify-center rounded-xl py-5 ${props.class ?? ""}`} style={{ background: "#0d0d0f" }}>
+    <div
+      class={`flex justify-center rounded-xl py-5 ${props.class ?? ""}`}
+      style={{ background: "#0d0d0f" }}
+    >
       {props.children}
     </div>
   );
@@ -153,7 +156,10 @@ function RemoteMock() {
     <div class="space-y-1.5">
       <div
         class="rounded-[10px] p-2.5"
-        style={{ background: "rgba(255,255,255,0.055)", "box-shadow": "inset 0 0 0 1px rgba(255,255,255,0.07)" }}
+        style={{
+          background: "rgba(255,255,255,0.055)",
+          "box-shadow": "inset 0 0 0 1px rgba(255,255,255,0.07)"
+        }}
       >
         <div class="flex items-center gap-2">
           <span
@@ -172,7 +178,10 @@ function RemoteMock() {
       </div>
       <div
         class="rounded-[10px] p-2.5"
-        style={{ background: "rgba(255,255,255,0.055)", "box-shadow": "inset 0 0 0 1px rgba(255,255,255,0.07)" }}
+        style={{
+          background: "rgba(255,255,255,0.055)",
+          "box-shadow": "inset 0 0 0 1px rgba(255,255,255,0.07)"
+        }}
       >
         <div class="flex items-center gap-2">
           <span
@@ -237,7 +246,7 @@ function GaugesMock() {
 export default function FeatureCollage() {
   return (
     <section
-      class="bg-base relative z-20 -mt-28 px-4 pb-16 pt-40 md:px-8"
+      class="bg-base relative z-20 px-4 pt-40 pb-16 md:px-8"
       id="feature-collage"
     >
       <div class="mx-auto max-w-5xl">
@@ -250,9 +259,7 @@ export default function FeatureCollage() {
 
         <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
           {/* Hero: real collapsed pill on the island surface */}
-          <div
-            class="border-overlay1 bg-surface1 relative col-span-1 flex flex-col items-center overflow-hidden rounded-2xl border p-6 md:col-span-2"
-          >
+          <div class="border-overlay1 bg-surface1 relative col-span-1 flex flex-col items-center overflow-hidden rounded-2xl border p-6 md:col-span-2">
             <div class="mb-5 self-start">
               <p class="text-subtext1 mb-3 text-[11px] font-semibold tracking-[0.14em] uppercase">
                 The island
@@ -261,9 +268,9 @@ export default function FeatureCollage() {
                 Every agent, one glance
               </h3>
               <p class="text-subtext0 max-w-sm text-sm leading-relaxed">
-                A pill tucked into your notch — a campfire for your whole
-                fleet on the left, live data on the right. Blue running,
-                green ready, amber needs you.
+                A pill tucked into your notch — a campfire for your whole fleet
+                on the left, live data on the right. Blue running, green ready,
+                amber needs you.
               </p>
             </div>
             <div class="my-10 flex w-full justify-center">
@@ -304,7 +311,7 @@ export default function FeatureCollage() {
           <CollageCell
             kicker="Approvals"
             title="Unblock agents, anywhere"
-            body="Permission prompts surface as cards in the panel — Allow once, always, or deny. Away from the desk, push them to your phone and answer from there."
+            body="Permission prompts surface as cards in the panel — Allow once, always, or deny. Away from the desk, push them to your phone and answer from there (coming soon)."
           >
             <InkStage>
               <div class="w-full max-w-sm px-3">

src/routes/index.tsx

@@ -3,6 +3,7 @@ import { PageHead } from "~/components/PageHead";
 import { DarkModeToggle } from "~/components/DarkModeToggle";
 import { Typewriter } from "~/components/Typewriter";
 import { useSite } from "~/context/SiteContext";
+import { buildSubdomainUrl } from "~/lib/site-context";
 import NessaLanding from "./nessa";
 import LineageLanding from "./lineage";
 import GazeLanding from "./gaze";
@@ -101,6 +102,32 @@ function MainHome(): JSX.Element {
           </Typewriter>
           <div class="pt-8 text-center">
             <div class="pb-4">Some of my recent projects:</div>
+            {/* The Nook */}
+            <div class="border-surface0 mb-2 flex w-full flex-col gap-2 rounded-md border-2 p-4 text-center">
+              <div>My macOS notch utility:</div>
+              <a
+                href={buildSubdomainUrl("nook")}
+                class="text-blue hover-underline-animation mx-auto w-fit"
+              >
+                The Nook
+              </a>
+              <div class="mx-auto w-full max-w-2xl overflow-hidden rounded-lg">
+                <video
+                  src="/nook/demo-expansion.mp4"
+                  class="h-full w-full object-cover"
+                  autoplay
+                  loop
+                  muted
+                  playsinline
+                />
+              </div>
+              <div class="pt-2 text-left text-sm">
+                A native macOS island that lives in the notch: orchestration
+                for a fleet of coding agents, fan curve control, thermal
+                gauges, calendar and camera modules. One-time purchase - no
+                subscription, ever.
+              </div>
+            </div>
             <div class="flex flex-col items-center gap-2 xl:flex-row xl:items-start xl:justify-center">
               {/* FlexLöve */}
               <div class="border-surface0 flex w-full flex-col rounded-md border-2 p-4 text-center">
@@ -213,6 +240,7 @@ function MainHome(): JSX.Element {
                   one.
                 </div>
               </div>
+
             </div>
           </div>
           <div class="flex justify-between pb-8 text-center">

src/routes/nook/index.tsx

@@ -68,8 +68,9 @@ export default function NookLanding() {
       <SubdomainHeader />
 
       {/* ── Hero ─────────────────────────────────────────────────────── */}
-      {/* min-h = viewport − sticky header (h-14), so it ends at the fold */}
-      <div class="relative flex min-h-[calc(100svh-3.5rem)] flex-col overflow-hidden">
+      {/* -mt-14 pulls the hero under the sticky header; pt-14 re-clears
+          content, so the gradient fills the full viewport incl. the bar */}
+      <div class="relative -mt-14 flex min-h-svh flex-col overflow-hidden pt-14">
         <div
           class="fixed inset-0 z-0"
           style={{