{/* contact shadow under the device */}

{/* matte stylus resting diagonally against the right edge of the device. Tapered tip pointing down-left, eraser cap at the upper-right. Same finish as the device so it reads as a kit. */} {/* device body */}

{/* matte grain */}

\")", opacity: 0.6, mixBlendMode: "overlay", pointerEvents: "none", }} /> {/* top edge highlight — gives it weight */}

{/* power button on right edge — shorter to suit the slimmer body */}

{/* tiny power LED */}

{/* etched wordmark on lower bezel */}

ZEEB

{/* screen */}

{/* faint screen ambient — the device "on but idle" feel */}

{/* Notes interface — the device looks like a study tool by default. A small panic shortcut sits in the corner. */} {/* glass reflection */}

); } /* Stylus — slim, matte, premium note-taking pen. Sits at the device's right edge, tilted slightly so it reads as "resting" against the bezel rather than clipped through it. Length scales with the device. */ function Stylus({ deviceWidth, deviceHeight }) { const len = Math.round(deviceHeight * 0.92); const tipW = 5; const barrelW = 9; const angle = 14; // degrees, tilted top-right -> bottom-left of contact // anchor the visual center of the stylus just past the device's right edge const offsetRight = -Math.round(barrelW * 0.55); const topOffset = Math.round((deviceHeight - len) / 2) - 6; return (

{/* eraser cap at the top */}

{/* small ring detail */}

{/* barrel — matte gradient matching the device body */}

{/* matte grain on barrel */}

\")", opacity: 0.55, mixBlendMode: "overlay", }} /> {/* taper into the tip */}

{/* metallic tip */}

); } /* Split-personality notes screen. Left two-thirds: a clean, real-looking notes app — what a teacher sees when they glance over. Right one-third: a thin strip of a TikTok feed peeking in from the side, like one swipe away. Top-right: PANIC mode shield with a soft pulse. Bottom-right of the notes column: zeeb. brand mark. */ function NotesScreen({ width, height }) { const peekW = Math.round(width * 0.32); // right-side TikTok strip const notesW = width - peekW; return (

{/* ── Left: Notes app ── */}

{/* app header — minimal, like Apple Notes. No status bar — the device is its own thing; clocks and signal bars don't belong. */}

Notes

{/* note title — the lockup the teacher sees */}

AP Bio — Period 3

Tue · Mar 11 · 9:14 am

{/* lined paper area */}

{/* faint ruled lines — spacing matches the Caveat line-height */}

{/* margin rule */}

{/* handwritten notes — Caveat is a real handwriting font, sized up so each line is clearly legible at a glance */}

Cellular respiration

glucose → pyruvate · cytoplasm

2 ATP net · anaerobic step

Krebs cycle — mito. matrix

NADH, FADH₂ → ETC

{/* zeeb. brand mark — bottom-right of the notes column */}

zeeb

{/* ── Right: TikTok peek strip (one swipe away) ── */} {/* PANIC MODE shield — top-right of the whole screen, with pulse. Sits over the peek strip; reads as a "kill switch" the student can hit instantly. */}

); } /* The TikTok strip — uses the actual @thegrubfather ramen screenshot as the background image (full bleed, object-fit:cover), with just a slim left-edge handle and the existing HIDE panic button overlaid. */ function TikTokPeek({ width, height }) { return (

{/* the real screenshot, filling the right side */} TikTok ramen video

{/* swipe handle — vertical line at the left edge, hinting "swipe me" */}

); } /* PANIC MODE — large, unmistakable red pill in the top-right of the TikTok side. Pulses softly so the eye lands on it instantly as a "kill switch." Twice the size of the previous version. */ function PanicShield() { return (

{/* outer glow halo (separate so it pulses behind the pill) */}

{/* shield with slash — white on red */} HIDE

); } /* (Legacy home-screen grid \u2014 no longer rendered, kept for reference) */ function HomeScreen({ width, height }) { return (

{/* status bar */}

9:41 {/* signal-style bars */} {/* battery */}

{/* app grid — 3 columns × 2 rows */}

{/* zeeb branding — bottom corner */}

zeeb

{/* home indicator pill, like iOS */}

); } function HomeAppCell({ kind, label }) { return (

{label}

); } /* App icon — rounded square, real brand color, simple recognizable mark. Designed to read at 56px with the same visual language as the floating apps in the hero, so the device feels like the same product family. */ function HomeAppIcon({ kind, size = 56 }) { const r = size * 0.235; const base = { width: size, height: size, borderRadius: r, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", overflow: "hidden", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.20), 0 4px 10px rgba(0,0,0,0.35)", }; switch (kind) { case "tiktok": return (

); case "snap": return (

); case "youtube": return (

); case "instagram": return (

); case "spotify": return (

); case "whatsapp": return (

); default: return

; } } /* (legacy TikTok feed left for reference, no longer used) */ function TikTokFeed({ width, height }) { return (

{/* "video" — warm portrait gradient */}

{/* status bar */}

9:41

{/* top tabs */}

Following For You

{/* right rail */}

24K

891

{/* caption */}

@itsmasha

back at it 🌊 #fyp

{/* bottom nav */}

{["Home", "Friends", "+", "Inbox", "Profile"].map((label, i) => ( {label} ))}

); } window.ZeebDevice = ZeebDevice;