import { Children, type CSSProperties, type ReactNode } from "react"; /** * DeviceFrame draws a phone bezel, and the stage it stands on, for putting * product screenshots into a page. * * Two problems, both of which look trivial and are not. * * 1. LIGHT AND DARK. The frame is never told which theme it is in. Every value * it draws, meaning the bezel, both hairlines and the stage ground, is mixed * out of `currentColor`, the ink of whatever surface it lands on. On a dark * page the ink is light, so the bezel resolves to a highlight. On a light * page the ink is dark, so the same declaration resolves to an edge. No * theme prop, no `dark:` variants, no second palette to keep in sync. * * 2. SCALE. The corner radius is a share of the frame, not a pixel value. A * 30px corner that reads right on a 160px phone is a blob at 80px, which is * what happens the first time three frames share a row at 375 wide. * * No dependencies, no Tailwind, no design tokens. Inline styles only, so it * runs the moment it is pasted into another project. Every derived value has a * CSS variable escape hatch if you would rather drive it from your own palette: * * --frame-bezel, --frame-line, --frame-shadow * --frame-stage, --frame-stage-line, --frame-radius, --frame-screen-radius * --frame-bezel-width, --frame-gap * * Take it. */ /** 390/844, an iPhone. Feeds both the frame's aspect and the row's fit math. */ const PHONE_RATIO = 390 / 844; /** * Two-value radii, so the horizontal radius is a share of WIDTH and the * vertical a share of HEIGHT. That is the only way a corner stays circular on a * box this far from square; a single percentage gives an ellipse. The numbers * are tuned so both axes resolve to the same pixel radius at 390/844. */ const RADIUS = "8.7% / 4%"; const SCREEN_RADIUS = "8.15% / 3.75%"; /** * The bezel stays a fixed hairline on purpose. Percentage padding resolves * against the containing block's WIDTH, not the element's own box, so a * percentage here measures the wrong thing and blows the edge out. */ const BEZEL_WIDTH = "3px"; /** Ink mixes. One number each, so the whole frame warms or cools together. */ const ink = (pct: number) => `color-mix(in srgb, currentColor ${pct}%, transparent)`; const BEZEL = `linear-gradient(180deg, ${ink(16)}, ${ink(3)})`; const SCREEN_LINE = ink(8); const STAGE = ink(4); const STAGE_LINE = ink(10); /** * The shadow is the one value that is NOT derived. A shadow is an absence of * light, not a tint of the ink: mixed from a light `currentColor` it would come * out as a glow. Black at a middling alpha disappears politely on a dark ground * and does the lifting on a light one. */ const SHADOW = "0 24px 60px -24px rgba(0, 0, 0, 0.45)"; /** Children fill the screen. Scoped by class; duplicate copies are inert. */ const FILL_CSS = ".dvf-screen>*{width:100%;height:100%;object-fit:cover;display:block}"; export function DeviceFrame({ children, ratio = PHONE_RATIO, style, }: { children?: ReactNode; /** width / height. Change it and the stage's fit math follows. */ ratio?: number; style?: CSSProperties; }) { return (

{children}

); } export function DeviceStage({ children, aspect = 16 / 10, ratio = PHONE_RATIO, style, }: { /** One to three s. */ children: ReactNode; /** The stage's own box. */ aspect?: number; /** The frames' aspect, so the row can fit them. Match your DeviceFrame. */ ratio?: number; style?: CSSProperties; }) { const n = Math.max(1, Children.count(children)); return (

{children}

); }

Phone frames