"use client"; import { useId, type HTMLAttributes, type ReactNode } from "react"; // Frame geometry — Apple iPhone 14/15 Pro proportions, kept exactly so the // rounded corners and Dynamic Island line up like the real hardware. const PHONE_WIDTH = 433; const PHONE_HEIGHT = 882; const SCREEN_X = 21.25; const SCREEN_Y = 19.25; const SCREEN_WIDTH = 389.5; const SCREEN_HEIGHT = 843.5; const SCREEN_RADIUS = 55.75; // Screen-area percentages (drive the HTML media layer's positioning). const LEFT_PCT = (SCREEN_X / PHONE_WIDTH) * 100; const TOP_PCT = (SCREEN_Y / PHONE_HEIGHT) * 100; const WIDTH_PCT = (SCREEN_WIDTH / PHONE_WIDTH) * 100; const HEIGHT_PCT = (SCREEN_HEIGHT / PHONE_HEIGHT) * 100; const RADIUS_H = (SCREEN_RADIUS / SCREEN_WIDTH) * 100; const RADIUS_V = (SCREEN_RADIUS / SCREEN_HEIGHT) * 100; // Lock-screen chrome positions in the SVG's user-space units. const LOCK_BUTTON_R = 28; const LOCK_BUTTON_Y = 808; const LOCK_LEFT_X = 78; const LOCK_RIGHT_X = 354; const HOME_INDICATOR_Y = 853; const HOME_INDICATOR_W = 134; // Status-bar right cluster anchor — items lay out right-to-left so any // missing icon naturally collapses without leaving a gap. const STATUS_RIGHT_EDGE = 372; const STATUS_ICON_GAP = 7; const STATUS_ICON_WIDTH = { signal: 16, wifi: 16, battery: 27 } as const; // Pre-computed percentages for the HTML lock-button overlays (needed because // SVG can't host backdrop-filter; the glass blur is HTML-only). const LOCK_BUTTON_SIZE_PCT = ((LOCK_BUTTON_R * 2) / PHONE_WIDTH) * 100; const LOCK_BUTTON_TOP_PCT = ((LOCK_BUTTON_Y - LOCK_BUTTON_R) / PHONE_HEIGHT) * 100; const LOCK_LEFT_PCT = ((LOCK_LEFT_X - LOCK_BUTTON_R) / PHONE_WIDTH) * 100; const LOCK_RIGHT_PCT = ((LOCK_RIGHT_X - LOCK_BUTTON_R) / PHONE_WIDTH) * 100; /** * Liquid-glass displacement map. Two linear gradients (R horizontally, * G vertically) screen-blended over black define the rim refraction * direction; a blurred neutral-gray inner rect zeros out displacement in * the centre so only the rim bends light. Static data-URI — no per-render * regeneration, no resize observers, no chromatic-channel split. */ const GLASS_MAP_URI = "data:image/svg+xml;utf8," + encodeURIComponent( "", ); export type IphoneSignal = 0 | 1 | 2 | 3 | 4; export interface IphoneProps extends HTMLAttributes { /** Image src shown in the screen area. */ src?: string; /** Video src shown in the screen area (autoplay, muted, loop). */ videoSrc?: string; /** Custom screen content. Wins over `src` / `videoSrc`. */ children?: ReactNode; /** Show the status bar row (time, signal, wifi, battery). @default true */ statusBar?: boolean; /** Time label rendered in the status bar. @default "9:41" */ time?: string; /** Filled signal bars (0–4). @default 4 */ signal?: IphoneSignal; /** Show the wifi glyph. @default true */ wifi?: boolean; /** Battery percentage (0–100, auto-clamped). @default 100 */ battery?: number; /** Render the percentage number inside the battery glyph. @default false */ batteryText?: boolean; /** Show the flashlight + camera lock-screen shortcuts. @default true */ lockButtons?: boolean; /** Show the bottom home-indicator pill. @default true */ homeIndicator?: boolean; /** Color of the outer phone frame and the side buttons. Inner screen * bezel stays black regardless. @default "#de7343" */ bezelColor?: string; /** Extra class merged onto the screen wrapper (the rounded mask layer). */ screenClassName?: string; } export function Iphone({ src, videoSrc, children, statusBar = true, time = "9:41", signal = 4, wifi = true, battery = 100, batteryText = false, lockButtons = true, homeIndicator = true, bezelColor = "#de7343", className, screenClassName, style, ...props }: IphoneProps) { const hasVideo = !!videoSrc; const hasChildren = children !== undefined && children !== null && children !== false; const hasMedia = hasVideo || !!src || hasChildren; const batteryPct = clamp(Math.round(battery), 0, 100); const batteryFill = (batteryPct / 100) * 23; // inner rect max width is 23 // Unique-per-instance ID for the SVG filter so multiple Iphones on the // page don't share the same . const reactId = useId(); const glassFilterId = `iphone-glass-${reactId.replace(/[:]/g, "")}`; // Right-anchored status-bar layout: walk the cluster right→left, skip any // hidden item, and X positions just slide to fill the gap. const statusIcons: Array<"signal" | "wifi" | "battery"> = [ "signal", ...(wifi ? (["wifi"] as const) : []), "battery", ]; const statusX = {} as Record<"signal" | "wifi" | "battery", number>; { let cursor = STATUS_RIGHT_EDGE; for (let i = statusIcons.length - 1; i >= 0; i--) { const key = statusIcons[i]; cursor -= STATUS_ICON_WIDTH[key]; statusX[key] = cursor; cursor -= STATUS_ICON_GAP; } } return (

{hasMedia && (

{hasChildren ? ( children ) : hasVideo ? (

)} {/* Liquid-glass SVG filter for the lock buttons. Defs only — the filter is referenced via CSS backdrop-filter url(). */} {lockButtons && } {/* Lock-screen shortcuts — rendered as HTML so they can host real backdrop-filter glass refraction (SVG circles can't). */} {lockButtons && ( <> )}

); } interface LockButtonProps { leftPct: number; topPct: number; sizePct: number; icon: "flashlight" | "camera"; /** SVG filter ID (without `url(#...)` wrapping). */ glassFilterId: string; } function LockButton({ leftPct, topPct, sizePct, icon, glassFilterId, }: LockButtonProps) { // url(#...) gives rim refraction (in browsers that support it); // blur+saturate provides the frosted base layer and is also the graceful // fallback when the url() filter isn't supported. const backdrop = `url(#${glassFilterId}) blur(3px) saturate(180%)`; const fallbackBackdrop = "blur(8px) saturate(180%)"; return (

); } /** * Filter defs for the liquid-glass refraction. Hidden SVG container — only * the `` is consumed (referenced from CSS `backdrop-filter: * url(#id)`). */ function LiquidGlassDefs({ id }: { id: string }) { return ( ); } Iphone.displayName = "Iphone"; function clamp(v: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, v)); } function cx(...parts: Array) { return parts.filter(Boolean).join(" "); }

iPhone

Customize

Usage