# Photoreal iPhone app mockup > A pixel-honest iPhone 15 Pro hardware frame — titanium rail, Dynamic Island, physical buttons, iOS status bar and home indicator — with a real ChatGPT-for-iOS chat screen dropped inside. Drop any screen in and it scales crisply from one width prop. - **Category:** Marketing - **Source (best-in-class):** [ChatGPT for iOS](https://openai.com/chatgpt/mobile/) - **Tags:** iphone, mockup, device-frame, mobile, chatgpt, ios, dynamic-island, hero, marketing, svg - **Dependencies:** react - **Status:** stable - **Live demo:** https://eito.me/ui/iphone-mock ## Problem Screenshots of a mobile app look flat and un-shippable in a hero or a pitch; the credibility comes from the phone around them — the titanium edge, the Dynamic Island, the 9:41 status bar. Maintaining that chrome as a bitmap means re-exporting every time the screen changes. This mock authors the whole device once in a fixed logical iOS-point canvas and scales it as a single CSS transform, so every corner radius, button and status glyph stays 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 mobile app to look like it's really running on a phone. - You want the device chrome (frame, Dynamic Island, status bar) 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"; /** * IPhoneMock — a photoreal iPhone 15 Pro hardware frame you can drop any screen * into, shipped with a pixel-honest ChatGPT-for-iOS chat screen as the sample * payload. * * The whole device is authored once in a fixed logical resolution (a 430 × 920 * "point" canvas that mirrors an iPhone 15 Pro's proportions) and then scaled as * a single unit with a CSS transform. That is the trick that keeps it crisp and * simple: corner radii, the titanium rail, the Dynamic Island, the status-bar * glyphs and every message bubble are laid out in real iOS points, so nothing * has to be re-tuned when you change `width` — you set one number and the entire * phone scales with sub-pixel fidelity. * * Realism lives in the details that read subconsciously: * - a brushed-titanium rail drawn with a horizontal metal gradient plus an * inner hairline and a bright top edge (not a flat grey border), * - a true pill Dynamic Island with the front-camera lens sunk into it, * - the four physical buttons (Action, Volume +/−, Side) as metal nubs, * - the exact iOS status bar (9:41, signal, Wi-Fi, battery) and home indicator, * - ChatGPT's real chat idiom: user turns as right-aligned grey bubbles, * assistant turns as full-width unbubbled text, and a pill composer. * * Deps: react only. Everything is inline SVG + inline styles, so the snippet is * self-contained and theme-swaps (light/dark) from a single token object. */ /* ---- device geometry (logical iOS points) --------------------------------- */ const DEVICE_W = 430; const DEVICE_H = 920; const DEVICE_RADIUS = 68; const FRAME = 14; // titanium rail + bezel, uniform const SCREEN_RADIUS = 55; const BEZEL_RING = 3; // black glass ring between the titanium frame and the screen const SCREEN_W = DEVICE_W - (FRAME + BEZEL_RING) * 2; // 396 — the actual visible viewport const SCREEN_H = DEVICE_H - (FRAME + BEZEL_RING) * 2; // 886 /* ---- app colour tokens ----------------------------------------------------- */ export type Scheme = "light" | "dark"; interface AppTokens { canvas: string; // screen background ink: string; // primary text sub: string; // secondary text / icons faint: string; // hairlines bubble: string; // user bubble fill bubbleInk: string; // user bubble text composer: string; // composer pill fill composerBorder: string; accent: string; // send / active statusInk: string; // status-bar glyphs (over canvas) } const TOKENS: Record = { light: { canvas: "#ffffff", ink: "#0d0d0d", sub: "#8e8ea0", faint: "#ececf1", bubble: "#f4f4f4", bubbleInk: "#0d0d0d", composer: "#ffffff", composerBorder: "#e5e5e5", accent: "#0d0d0d", statusInk: "#0d0d0d", }, dark: { canvas: "#212121", ink: "#ececec", sub: "#9a9a9a", faint: "#ffffff1a", bubble: "#303030", bubbleInk: "#ececec", composer: "#2f2f2f", composerBorder: "#ffffff14", accent: "#ffffff", statusInk: "#ffffff", }, }; /* ---- conversation model ---------------------------------------------------- */ export interface Turn { role: "user" | "assistant"; 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: "Explain quantum entanglement like I'm five 🧠" }, { role: "assistant", text: "Imagine two magic coins. You flip them into separate boxes and mail one to the Moon. The instant you peek at yours and see heads, you *know* the other is tails — no matter how far apart they are. The coins were linked from the start. That linked-ness is entanglement.", }, { role: "user", text: "Whoa. So can it send messages faster than light? 🚀" }, { role: "assistant", text: "Nope — and that's the beautiful catch. You only get a random result until you compare notes over a normal (slower-than-light) channel. So the universe stays safe, but the correlation is still spooky.", }, { role: "assistant", text: "", typing: true }, ]; /* ---- brand + system glyphs (inline SVG, no assets) ------------------------- */ /** OpenAI "blossom" knot — stylised so the snippet ships with no external asset. */ function ChatGPTMark({ size = 22, color = "currentColor" }: { size?: number; color?: string }) { return ( ); } /* iOS status-bar glyphs, drawn to the real proportions. */ function SignalGlyph({ color }: { color: string }) { // Four ascending cellular bars. return ( ); } function WifiGlyph({ color }: { color: string }) { return ( ); } function BatteryGlyph({ color }: { color: string }) { return ( ); } /* Nav + composer glyphs. */ function SidebarGlyph({ color }: { color: string }) { return ( ); } function ComposeGlyph({ color }: { color: string }) { return ( ); } function ChevronDown({ color }: { color: string }) { return ( ); } function PlusGlyph({ color }: { color: string }) { return ( ); } function MicGlyph({ color }: { color: string }) { return ( ); } function WaveformGlyph({ color }: { color: string }) { // The "voice mode" audio button — stacked bars inside a filled disc. return ( ); } /* ---- screen: ChatGPT for iOS ---------------------------------------------- */ export interface ChatGPTScreenProps { scheme?: Scheme; conversation?: Turn[]; /** Header model label, e.g. "ChatGPT 5" or "ChatGPT 4o". */ model?: string; /** Status-bar clock. iOS marketing shots always read 9:41. */ time?: string; } /** * A faithful ChatGPT-for-iOS screen: iOS status bar, the model-name nav bar, * a full-width assistant / right-bubbled user thread, and the pill composer. * Sized to the phone's inner screen (402 × 892 pt) so it drops straight into * IPhoneMock, but it renders standalone too. */ export function ChatGPTScreen({ scheme = "light", conversation = sampleConversation, model = "ChatGPT 5", time = "9:41", }: ChatGPTScreenProps) { const t = TOKENS[scheme]; const styleId = useId().replace(/[:]/g, ""); return (
{/* Status bar — 9:41 · signal · Wi-Fi · battery */}
{time}
{/* Nav bar — sidebar · model name (tappable) · new chat */}
{/* Thread */}
{conversation.map((turn, i) => turn.role === "user" ? (
{turn.text}
) : (
{turn.typing ? (
{[0, 1, 2].map((d) => ( ))}
) : (
{renderRich(turn.text)}
)}
), )}
{/* Composer — plus · placeholder · mic · voice */}
Ask anything
{/* Home indicator */}
); } /** Minimal *italic* renderer so the sample copy can carry light emphasis. */ function renderRich(text: string): ReactNode { return text.split(/(\*[^*]+\*)/g).map((chunk, i) => chunk.startsWith("*") && chunk.endsWith("*") ? ( {chunk.slice(1, -1)} ) : ( {chunk} ), ); } /* ---- hardware: the iPhone 15 Pro frame ------------------------------------ */ /** A physical side button drawn as a titanium nub. */ function SideButton({ side, top, height, }: { side: "left" | "right"; top: number; height: number; }) { return (
); } export interface IPhoneMockProps { /** Rendered width in CSS px. The whole device scales from here. Default 300. */ width?: number; /** Screen payload. Defaults to the bundled ChatGPT screen. */ children?: ReactNode; /** Which titanium finish the frame reads as. */ titanium?: "natural" | "black" | "blue"; style?: CSSProperties; } const RAILS: Record, string> = { // Horizontal metal gradient: dark edge → bright specular → dark edge. natural: "linear-gradient(90deg,#2c2c2e 0%,#8b8b90 12%,#5a5a5f 30%,#3d3d40 50%,#5a5a5f 70%,#9a9a9f 88%,#2c2c2e 100%)", black: "linear-gradient(90deg,#141416 0%,#4a4a4d 12%,#2a2a2c 30%,#151517 50%,#2a2a2c 70%,#525256 88%,#131315 100%)", blue: "linear-gradient(90deg,#2a3340 0%,#7d8a9c 12%,#495260 30%,#333c48 50%,#495260 70%,#8792a4 88%,#28313d 100%)", }; /** * The device frame. Everything inside is authored in the 430 × 920 logical * canvas and scaled together via a single transform, so the phone stays crisp * at any `width` and the caller only ever thinks in one number. */ export default function IPhoneMock({ width = 300, children, titanium = "natural", style, }: IPhoneMockProps) { const scale = width / DEVICE_W; return (
{/* Physical buttons — behind the metal so they read as extrusions */} {/* Action button */} {/* Volume up */} {/* Volume down */} {/* Side button */} {/* Titanium frame */}
{/* Black bezel ring — the sliver of glass surround before the screen */}
{/* Screen — clips the app content */}
{children ?? } {/* Dynamic Island — sits above the app, with a sunken lens */}
{/* Screen glare — a soft diagonal sheen over the glass */}
); } ``` ## 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