"use client"; /** * A 16-inch MacBook Pro in Space Black, built out of CSS 3D. * * Every dimension here is the real machine divided by its own width, so the * whole thing scales off one number (`--mb-w`) and still has the proportions * you'd measure off a desk: 355.7 × 248.1 × 16.8 mm closed, a 16.2-inch display * with 3.6 mm of bezel, a 160 × 100 mm trackpad. `1u` below is 1% of the * machine's width, which makes millimetres readable as numbers. * * Two knobs drive it, both CSS variables so they can be animated from outside: * `--lid` is the hinge (-90deg shut, +12deg open — a real laptop sits a little * past vertical) and `--cam` is the camera, which rises from looking down at a * closed slab to eye level with the screen. `--wake` fades the display on. * * The same component draws the machine on the homepage and inside the wake * overlay, which is the only reason the hand-off between them is seamless. */ import type { CSSProperties } from "react"; /** Proportions in `u`, where 1u = 1% of the machine's width. */ export const MB = { /** 248.1 mm deep / 355.7 mm wide. Lid and base share it. */ depth: 69.75, /** Active display area — 16.2-inch panel, 3456 × 2234. */ screenW: 96.8, screenH: 62.6, /** Hinge line → middle of the display, with the lid straightened. */ screenCenter: 34.85, } as const; /** * Key widths per row, as flex ratios: function row, numbers, QWERTY, home row, * shift row, then the space bar row. Rows stretch to fill, so the ratios only * have to be right relative to each other. */ const KEY_ROWS = [ [1.5, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1.1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1.7], [1.6, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1.1], [1.9, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1.9], [2.4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2.4], ]; /** The bottom row, where the space bar and the arrow cluster live. */ const BOTTOM_ROW = [1, 1.1, 1.1, 1.3, 6.2, 1.3, 1.1]; export default function MacBookFrame({ anchored = false, className, style, frameRef, }: { /** * Anchored machines hang from their hinge line at the parent's origin — how * the overlay flies one around. Unanchored ones sit in normal page flow. */ anchored?: boolean; className?: string; style?: CSSProperties; /** The homepage measures the machine through this before handing it over. */ frameRef?: React.RefObject; }) { return (

{/* React 19 hoists and de-dupes this, so both machines share one sheet. */}

{/* Base: a horizontal plane hinged at the far edge. */}

{KEY_ROWS.map((row, r) => (

{row.map((w, k) => ( ))}

))}

{BOTTOM_ROW.map((w, k) => ( ))} {/* Inverted-T arrows: full-height sides, two halves stacked. */}

{/* Light thrown back onto the deck once the display is lit. */}

{/* The machined front lip, with the finger recess cut into it. */}

{/* The hinge barrel, standing between deck and display. */}

{/* Lid: display on the front, anodised shell on the back. */}

{/* The camera housing sits in the bezel rather than biting into the panel — anything inside the panel would still be on screen when the push-in has made the panel the window. */}

{/* Boot, drawn to the same proportions as the real one, so the zoom lands on a screen that is already the destination. */}

wahabOS

); } /* -------------------------------------------------------------------------- */ const NOISE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E\")"; const CSS_TEXT = ` /* * Registered so the three knobs can be inherited from an ancestor — that is * how the overlay drives a machine it doesn't own — and so the homepage can * transition them on hover. */ @property --lid { syntax: ""; inherits: true; initial-value: -90deg; } @property --cam { syntax: ""; inherits: true; initial-value: -34deg; } @property --wake { syntax: ""; inherits: true; initial-value: 0; } .mb { /* 1u = 1% of the machine's width; everything below is millimetres in disguise. */ --u: calc(var(--mb-w) / 100); --hinge-y: 4; --box: 56; position: relative; width: calc(100 * var(--u)); height: calc(var(--box) * var(--u)); perspective: calc(560 * var(--u)); perspective-origin: 50% calc(var(--hinge-y) * var(--u)); } .mb--anchored { position: absolute; top: 0; left: calc(-50 * var(--u)); height: 0; --hinge-y: 0; perspective-origin: 50% calc(-1 * ${MB.screenCenter} * var(--u)); } .mb-body { position: absolute; left: 0; top: calc(var(--hinge-y) * var(--u)); width: 100%; height: 0; transform-style: preserve-3d; /* Zero height, so the camera pivots on the hinge line itself. */ transform: rotateX(var(--cam)); } /* ------------------------------------------------------------------- base */ .mb-base { position: absolute; left: 0; top: 0; width: 100%; height: calc(${MB.depth} * var(--u)); transform-origin: 50% 0; transform: rotateX(90deg); transform-style: preserve-3d; } .mb-deck { position: absolute; inset: 0; border-radius: calc(1.2 * var(--u)) calc(1.2 * var(--u)) calc(3.4 * var(--u)) calc(3.4 * var(--u)); background: linear-gradient(184deg, #17161a 0%, #232227 16%, #2b2a30 58%, #34333a 100%); box-shadow: inset 0 0 0 calc(0.16 * var(--u)) rgba(255, 255, 255, 0.07), inset 0 calc(-0.5 * var(--u)) calc(1.4 * var(--u)) rgba(255, 255, 255, 0.05); overflow: hidden; } .mb-deck::after { content: ""; position: absolute; inset: 0; background-image: ${NOISE}; background-size: calc(24 * var(--u)); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; } /* The shadowed strip the hinge sits in. */ .mb-hinge-well { position: absolute; left: 0; right: 0; top: 0; height: calc(4.2 * var(--u)); background: linear-gradient(#0a090c, rgba(10, 9, 12, 0)); } .mb-keywell { position: absolute; left: 9%; right: 9%; top: calc(5.6 * var(--u)); height: calc(33 * var(--u)); display: flex; flex-direction: column; gap: calc(0.42 * var(--u)); padding: calc(0.5 * var(--u)); border-radius: calc(0.9 * var(--u)); background: #0c0b0e; box-shadow: inset 0 calc(0.35 * var(--u)) calc(0.9 * var(--u)) rgba(0, 0, 0, 0.85), 0 0 0 calc(0.14 * var(--u)) rgba(255, 255, 255, 0.045); } .mb-krow { display: flex; flex: 1; gap: calc(0.42 * var(--u)); } .mb-krow--fn { flex: 0.62; } .mb-key { border-radius: calc(0.32 * var(--u)); background: linear-gradient(#242329, #131217); /* Last shadow is the backlight, up only once the machine is awake. */ box-shadow: inset 0 calc(0.1 * var(--u)) 0 rgba(255, 255, 255, 0.06), 0 calc(0.1 * var(--u)) calc(0.2 * var(--u)) rgba(0, 0, 0, 0.6), 0 0 calc(0.5 * var(--u)) rgba(255, 238, 210, calc(0.6 * var(--wake))); } .mb-arrows { display: flex; flex-grow: 3; gap: calc(0.42 * var(--u)); } .mb-arrows > .mb-key { flex: 1; } .mb-arrow-stack { display: flex; flex: 1; flex-direction: column; gap: calc(0.42 * var(--u)); } .mb-arrow-stack > .mb-key { flex: 1; } /* Speaker grilles flanking the keys — perforated aluminium. */ .mb-speaker { position: absolute; top: calc(6.4 * var(--u)); width: 5.4%; height: calc(31 * var(--u)); border-radius: calc(0.6 * var(--u)); background-image: radial-gradient( circle at center, rgba(0, 0, 0, 0.85) 30%, transparent 32% ); background-size: calc(0.85 * var(--u)) calc(0.85 * var(--u)); opacity: 0.85; } .mb-speaker--l { left: 2.4%; } .mb-speaker--r { right: 2.4%; } .mb-trackpad { position: absolute; left: 50%; transform: translateX(-50%); top: calc(42 * var(--u)); width: 45%; height: calc(23.5 * var(--u)); border-radius: calc(0.7 * var(--u)); background: linear-gradient(178deg, #1b1a1f, #232227); box-shadow: inset 0 0 0 calc(0.12 * var(--u)) rgba(0, 0, 0, 0.65), inset 0 calc(0.2 * var(--u)) calc(0.5 * var(--u)) rgba(255, 255, 255, 0.05); } .mb-deckglow { position: absolute; left: 6%; right: 6%; top: 0; height: calc(34 * var(--u)); background: radial-gradient( 70% 100% at 50% 0%, rgba(150, 180, 235, 0.16), transparent 70% ); opacity: var(--wake); transition: opacity 0.5s ease; pointer-events: none; } /* The front lip: chassis thickness, stood back up at the near edge. */ .mb-lip { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(2.9 * var(--u)); transform-origin: 50% 100%; transform: rotateX(90deg); border-radius: 0 0 calc(1 * var(--u)) calc(1 * var(--u)); background: linear-gradient(#26252a, #1a191d 62%, #100f12); box-shadow: inset 0 calc(0.14 * var(--u)) 0 rgba(255, 255, 255, 0.12); overflow: hidden; } /* The crescent you hook a finger into to lift the lid. */ .mb-notch { position: absolute; left: 50%; top: calc(-0.7 * var(--u)); width: 13%; height: calc(2.4 * var(--u)); transform: translateX(-50%); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: #08080a; } /* The barrel between deck and display. */ .mb-hinge { position: absolute; left: 10%; top: 0; width: 80%; height: calc(1.2 * var(--u)); transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(#050506, #141316); } /* -------------------------------------------------------------------- lid */ .mb-lid { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(${MB.depth} * var(--u)); transform-origin: 50% 100%; transform: rotateX(var(--lid)); transform-style: preserve-3d; } .mb-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: calc(1.1 * var(--u)) calc(1.1 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)); } /* * The hinge axis runs along the glass, the way it does on the real machine — * so shutting the lid lays the glass a hair above the deck rather than through * it, and the shell ends up a lid's thickness above that. */ .mb-front { transform: translateZ(calc(-0.5 * var(--u))); } /* Mirrored by the flip, then turned so the badge reads right way up when shut. */ .mb-back { transform: rotateY(180deg) translateZ(calc(2.33 * var(--u))); } /* The top rim of the lid — thickness, visible as a hairline when open. */ .mb-lid-edge { position: absolute; left: 0; top: 0; width: 100%; height: calc(1.83 * var(--u)); transform-origin: 50% 0; transform: translateZ(calc(-0.5 * var(--u))) rotateX(-90deg); border-radius: calc(0.9 * var(--u)) calc(0.9 * var(--u)) 0 0; background: linear-gradient(#2e2c33, #17161a); } .mb-shell { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: linear-gradient(101deg, transparent 30%, rgba(255, 255, 255, 0.05) 45%, transparent 58%), radial-gradient(90% 120% at 24% 0%, rgba(220, 228, 245, 0.13), transparent 60%), linear-gradient(177deg, #3b393f 0%, #2e2c32 34%, #232227 70%, #1a191d 100%); box-shadow: inset 0 0 0 calc(0.2 * var(--u)) rgba(255, 255, 255, 0.09), inset 0 calc(-0.4 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, 0.5); overflow: hidden; } .mb-shell::after { content: ""; position: absolute; inset: 0; background-image: ${NOISE}; background-size: calc(26 * var(--u)); opacity: 0.05; } /* * A shut lid points its own "up" at whoever is standing over it, so the badge * is turned to read from there — the only angle it is ever seen from. */ .mb-badge { width: calc(15 * var(--u)); transform: rotate(180deg); opacity: 0.95; } /* ----------------------------------------------------------------- screen */ .mb-glass { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #0b0b0d, #050506 60%, #08080a); box-shadow: inset 0 0 0 calc(0.18 * var(--u)) rgba(255, 255, 255, 0.06); overflow: hidden; } .mb-display { position: absolute; left: 50%; transform: translateX(-50%); top: calc(3.6 * var(--u)); width: ${MB.screenW}%; height: calc(${MB.screenH} * var(--u)); border-radius: calc(0.25 * var(--u)); background: #000; box-shadow: 0 0 0 calc(0.1 * var(--u)) rgba(255, 255, 255, 0.05), 0 0 calc(9 * var(--u)) calc(1.5 * var(--u)) rgba(150, 170, 210, calc(0.2 * var(--wake))); overflow: hidden; } /* * The camera. Only the lens reads at this size, and keeping the housing out of * the panel means nothing of the machine is left on screen once the push-in * has made the panel the window. */ .mb-camera { position: absolute; left: 0; right: 0; top: calc(1.5 * var(--u)); display: flex; justify-content: center; } .mb-lens { width: calc(0.55 * var(--u)); height: calc(0.55 * var(--u)); border-radius: 50%; background: radial-gradient(circle, #333a4a, #0b0c10 70%); box-shadow: 0 0 0 calc(0.12 * var(--u)) rgba(255, 255, 255, 0.04); } /* * Boot, laid out exactly like the real one in (skins)/os/../BootScreen: mark * above centre, progress track 70pt under it. The defaults are proportional so * a small machine looks right; the overlay overrides them with the pixel sizes * the destination will use, which is what makes the landing seamless. */ .mb-boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: var(--wake); transition: opacity 0.45s ease; } .mb-boot-group { display: flex; flex-direction: column; align-items: center; margin-top: var(--boot-rise, -6%); } .mb-mark { height: var(--mark-h, 9.8%); } /* * Empty on purpose: a Mac shows the track before it shows any progress, so * landing on the real boot screen picks the bar up at zero rather than * snapping it backwards. */ .mb-progress { margin-top: var(--bar-gap, 7.8%); width: var(--bar-w, 15%); height: var(--bar-h, 0.5%); min-height: 1px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); overflow: hidden; } .mb-wordmark { position: absolute; left: 0; right: 0; bottom: calc(1 * var(--u)); text-align: center; font-size: calc(1.5 * var(--u)); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.16); } /* Glass reflection — strongest on a dark screen, washed out once it's lit. */ .mb-sheen { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 26%, transparent 46%, transparent 100% ); opacity: calc(1 - 0.75 * var(--wake)); transition: opacity 0.5s ease; pointer-events: none; } /* ----------------------------------------------------------------- shadow */ .mb-shadow { position: absolute; left: 50%; top: calc((var(--hinge-y) + 16) * var(--u)); width: calc(104 * var(--u)); height: calc(26 * var(--u)); transform: translateX(-50%); border-radius: 50%; background: radial-gradient( closest-side, rgba(24, 18, 8, 0.5), rgba(24, 18, 8, 0.16) 58%, transparent 100% ); filter: blur(calc(1.8 * var(--u))); pointer-events: none; } .mb--anchored .mb-shadow { opacity: 0.5; } /* -------------------------------------------------------------- the invite */ /* * On the page, the machine is shut. Coming near it cracks the hinge and drops * the camera a few degrees — enough to read as "this opens", not as an * animation. The overlay's machine never gets this class, so nothing here can * fight the transition. */ .mb-invite { --lid: -90deg; --cam: -34deg; transition: --lid 0.6s cubic-bezier(0.22, 1, 0.36, 1), --cam 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .mb-invite:hover, .mb-invite:focus-visible { --lid: -79deg; --cam: -30deg; } .mb-invite:active { --lid: -84deg; } @media (prefers-reduced-motion: reduce) { .mb-key, .mb-boot, .mb-sheen, .mb-deckglow { transition: none; } } `;