# Photoreal MacBook app mockup > A pixel-honest 14" MacBook Pro hardware frame — brushed-aluminium lid, camera notch, tapered base with the finger-groove, and a soft contact shadow — with a real Claude-for-desktop chat screen dropped inside. Drop any screen in and it scales crisply from one width prop. - **Category:** Marketing - **Source (best-in-class):** [Claude for Mac](https://claude.ai/download) - **Tags:** macbook, mockup, device-frame, laptop, desktop, claude, macos, notch, hero, marketing, svg - **Dependencies:** react - **Status:** stable - **Live demo:** https://eito.me/ui/macbook-mock ## Problem A desktop app screenshot looks flat in a hero or a pitch; the credibility comes from the machine around it — the aluminium lid, the notch, the traffic-light window chrome. Maintaining that chrome as a bitmap means re-exporting every time the screen changes. This mock authors the whole laptop once in a fixed logical-point canvas and scales it as a single CSS transform, so every corner radius, the notch and the base taper stay pixel-crisp at any size and the app screen is live React you can restyle, theme, or animate. ## When to use - A landing hero or pitch deck needs a web/desktop app to look like it's really running on a Mac. - You want the device chrome (lid, notch, base, window traffic lights) crisp at any width from a single number, not a fixed-resolution PNG. - The screen inside should be live, themeable UI (light/dark, real text, typing indicator) rather than a flat screenshot. ## Code — snippet.tsx ```tsx import type { CSSProperties, ReactNode } from "react"; import { useId } from "react"; /** * MacBookMock — a photoreal MacBook Pro hardware frame you can drop any screen * into, shipped with a pixel-honest Claude-desktop chat screen as the sample * payload. * * Same trick as its iPhone sibling: the whole laptop is authored once in a * fixed logical canvas (a 1118 × 704 "point" space that mirrors a 14" MacBook * Pro seen head-on) and then scaled as a single unit with one CSS transform. * The aluminium lid, the black-glass bezel, the camera notch, the tapered base * with its finger-groove and every pixel of the app are laid out in real * points, so nothing is re-tuned when you change `width` — you set one number * and the entire machine scales with sub-pixel fidelity. * * Realism lives in the details that read subconsciously: * - a brushed-aluminium lid rim and a vertically-lit tapered base (not a flat * grey box), with a soft contact shadow on the ground beneath it, * - the real MacBook Pro camera notch dipping into the top of the display, * - a macOS window shell: traffic-light buttons, a warm sidebar, a model * selector, and the exact Claude chat idiom (right-aligned user bubbles, * full-width Claude turns behind the sunburst mark, and the pill composer), * - two chassis finishes (Silver / Space Black) and a light/dark app theme, * both live React — no bitmaps. * * Deps: react only. Everything is inline SVG + inline styles, so the snippet is * self-contained and theme-swaps from a single token object. */ /* ---- device geometry (logical points, 14" MacBook Pro head-on) ------------ */ const DISPLAY_W = 1000; const DISPLAY_H = 640; // ~16:10.24 const BEZEL = 13; // black-glass border around the display const RIM = 6; // thin aluminium edge outside the glass const INSET = BEZEL + RIM; // 19 const LID_W = DISPLAY_W + INSET * 2; // 1038 const LID_H = DISPLAY_H + INSET * 2; // 678 const LID_RADIUS = 26; const SCREEN_RADIUS = 8; const NOTCH_W = 190; const NOTCH_H = 20; const BASE_H = 26; const BASE_OVERHANG = 40; // base flares this far past the lid on each side const BASE_W = LID_W + BASE_OVERHANG * 2; // 1118 const DEVICE_W = BASE_W; // 1118 const DEVICE_H = LID_H + BASE_H; // 704 /* ---- app colour tokens (Claude desktop) ----------------------------------- */ export type Scheme = "light" | "dark"; interface AppTokens { canvas: string; // main chat background sidebar: string; // sidebar fill ink: string; // primary text sub: string; // secondary text / icons faint: string; // hairlines / borders active: string; // active sidebar row bubble: string; // user bubble fill bubbleInk: string; composer: string; // composer surface composerBorder: string; accent: string; // Claude clay / send button accentInk: string; // glyph on the accent } const TOKENS: Record = { light: { canvas: "#faf9f5", sidebar: "#f2f0e9", ink: "#262624", sub: "#8a897f", faint: "#e7e3d8", active: "#e7e2d5", bubble: "#f0e8d9", bubbleInk: "#33322d", composer: "#ffffff", composerBorder: "#e5e0d3", accent: "#d97757", accentInk: "#ffffff", }, dark: { canvas: "#262624", sidebar: "#1f1e1d", ink: "#f5f4ee", sub: "#9d9b90", faint: "#ffffff14", active: "#35332e", bubble: "#37342e", bubbleInk: "#f0ede4", composer: "#30302e", composerBorder: "#ffffff1f", accent: "#d97757", accentInk: "#fdf6f1", }, }; /* ---- conversation model ---------------------------------------------------- */ export interface Turn { role: "user" | "assistant"; /** Supports **bold**, *italic*, and blank-line paragraphs / single newlines. */ text: string; /** Render the assistant turn as an animated typing indicator. */ typing?: boolean; } /** The sample script shown in the demo — swap freely, the shell renders any. */ export const sampleConversation: Turn[] = [ { role: "user", text: "Draft a warm but concise out-of-office reply — I'm away Aug 27 – Sep 8. ✈️", }, { role: "assistant", text: "Here's one that stays friendly without over-explaining:\n\n**Subject:** Out of office until Sep 8\n\nThanks for your note! I'm away until **September 8** with limited access to email, so I may be slow to reply. I'll get back to you as soon as I'm back at my desk.\n\nFor anything urgent, please reach out to my team at *team@example.com*.\n\nBest,\nEito", }, { role: "user", text: "Love it. Make the tone a touch more formal." }, { role: "assistant", text: "", typing: true }, ]; const RECENTS = [ "Out-of-office reply", "Refactor auth middleware", "Kyoto trip itinerary", "Explain diffusion models", "Weekly newsletter draft", ]; /* ---- brand + system glyphs (inline SVG, no assets) ------------------------- */ /** Claude "sunburst" mark — radiating rounded rays, drawn from a single loop. */ function ClaudeBurst({ size = 20, color = "#d97757" }: { size?: number; color?: string }) { const rays = 12; return ( ); } function EditGlyph({ color }: { color: string }) { return ( ); } function SidebarGlyph({ color }: { color: string }) { return ( ); } function SearchGlyph({ color }: { color: string }) { return ( ); } function ChevronDown({ color, size = 14 }: { color: string; size?: number }) { return ( ); } function PlusGlyph({ color }: { color: string }) { return ( ); } function ArrowUp({ color }: { color: string }) { return ( ); } function ShareGlyph({ color }: { color: string }) { return ( ); } /* ---- screen: Claude for desktop ------------------------------------------- */ export interface ClaudeScreenProps { scheme?: Scheme; conversation?: Turn[]; /** Model label shown in the header + composer, e.g. "Claude Opus 4.5". */ model?: string; /** Signed-in display name, shown in the sidebar footer. */ user?: string; } /** * A faithful Claude-desktop screen: the macOS traffic lights, a warm sidebar * with recents and an account footer, a model-selector header, the centred * chat column (right-bubbled user turns, full-width Claude turns behind the * sunburst), and the pill composer. Sized to the laptop's inner display * (1000 × 640 pt) so it drops straight into MacBookMock, but renders standalone. */ export function ClaudeScreen({ scheme = "light", conversation = sampleConversation, model = "Claude Opus 4.5", user = "Eito Miyamura", }: ClaudeScreenProps) { const t = TOKENS[scheme]; const styleId = useId().replace(/[:]/g, ""); return (
{/* ---- Sidebar ---- */} {/* ---- Main ---- */}
{/* header — model selector + share */}
{/* thread — centred column */}
{conversation.map((turn, i) => turn.role === "user" ? (
{turn.text}
) : (
{turn.typing ? (
{[0, 1, 2].map((d) => ( ))}
) : (
{renderRich(turn.text)}
)}
), )}
{/* composer */}
Reply to Claude…
{model.replace("Claude ", "")}
Claude can make mistakes. Please double-check responses.
); } /** Minimal renderer: blank-line paragraphs, single newlines, **bold**, *italic*. */ function renderRich(text: string): ReactNode { return text.split("\n\n").map((block, bi) => (

{block.split("\n").map((line, li) => ( {li > 0 &&
} {renderInline(line, `${bi}-${li}`)} ))}

)); } function renderInline(text: string, keyBase: string): ReactNode[] { return text .split(/(\*\*[^*]+\*\*|\*[^*]+\*)/g) .filter(Boolean) .map((chunk, i) => { const key = `${keyBase}-${i}`; if (chunk.startsWith("**") && chunk.endsWith("**")) return {chunk.slice(2, -2)}; if (chunk.startsWith("*") && chunk.endsWith("*")) return {chunk.slice(1, -1)}; return {chunk}; }); } /* ---- hardware: the MacBook Pro frame -------------------------------------- */ export interface MacBookMockProps { /** Rendered width in CSS px. The whole laptop scales from here. Default 720. */ width?: number; /** Screen payload. Defaults to the bundled Claude screen. */ children?: ReactNode; /** Aluminium finish the chassis reads as. */ chassis?: "silver" | "spaceblack"; style?: CSSProperties; } interface ChassisTokens { lid: string; // lid rim gradient baseTop: string; // base gradient top stop baseMid: string; baseBot: string; edge: string; // hairline edge } const CHASSIS: Record, ChassisTokens> = { silver: { lid: "linear-gradient(180deg,#e2e2e5,#c6c6ca 55%,#b4b4b8)", baseTop: "#ececed", baseMid: "#cfcfd3", baseBot: "#a8a8ad", edge: "rgba(255,255,255,0.6)", }, spaceblack: { lid: "linear-gradient(180deg,#48484b,#37373a 55%,#2c2c2e)", baseTop: "#54545a", baseMid: "#3c3c40", baseBot: "#242427", edge: "rgba(255,255,255,0.14)", }, }; /** * The device frame. Everything inside is authored in the 1118 × 704 logical * canvas and scaled together via a single transform, so the laptop stays crisp * at any `width` and the caller only ever thinks in one number. */ export default function MacBookMock({ width = 720, children, chassis = "silver", style, }: MacBookMockProps) { const scale = width / DEVICE_W; const gid = useId().replace(/[:]/g, ""); const c = CHASSIS[chassis]; // Base outline: a shallow tapered wedge with rounded bottom corners and a // finger-groove scooped from the top-centre front edge. const bw = BASE_W; const cx = bw / 2; const notchR = 54; const notchDepth = 11; const topInset = 46; const br = 11; const basePath = [ `M ${topInset} 1`, `L ${cx - notchR} 1`, `Q ${cx} ${1 + notchDepth} ${cx + notchR} 1`, `L ${bw - topInset} 1`, `L ${bw - 1} ${BASE_H - br}`, `Q ${bw - 1} ${BASE_H} ${bw - 1 - br} ${BASE_H}`, `L ${br + 1} ${BASE_H}`, `Q 1 ${BASE_H} 1 ${BASE_H - br}`, "Z", ].join(" "); return (
{/* contact shadow on the ground */} ); } ``` ## Related - Machine-readable index (all patterns, with code): https://eito.me/ui/manifest.json - Plain-HTML mirror: https://eito.me/ui/all.html - Interactive gallery: https://eito.me/ui