iPhone frame

Overview

Iphone renders an iPhone 15 Pro device frame: rounded body, side buttons, Dynamic Island, and camera lens. The screen is filled with the Pulp iris gradient and a centered wordmark, so the frame is fully self-contained and needs no screenshot or network image.

The screen geometry is expressed as percentages of the phone box, so the gradient overlay stays glued to the SVG bezel at any rendered width. The frame fills its container through width: 100% with a fixed aspect ratio, so it scales cleanly inside any column.

Installation

Import the pattern from loosethreads:

import { Iphone } from "@pulp/loosethreads/patterns"

Usage

Render it inside a container that sets the width you want. The frame fills that width and keeps its own aspect ratio:

import { Iphone } from "@pulp/loosethreads/patterns"

function DevicePreview() {
  return (
    <div style={{ width: "100%", maxWidth: 320 }}>
      <Iphone />
    </div>
  )
}

Configuration

Iphone takes no props. The screen fill, wordmark, and device colors are baked in from Pulp tokens, so the only thing you control is the rendered width of the wrapping element.

Sizing lives on the parent. The frame is width: 100% with a fixed aspect ratio, so wrap it in a box that caps its width (for example maxWidth: 320) rather than styling the component directly.

Anatomy

The frame is an absolutely positioned SVG over a screen-fill div. The outer body renders on --color-surface-elevated, the inner bezel on --color-surface, and the rail edges, screen well, and camera lens on --color-border. An SVG mask punches the rounded screen rect so the iris gradient div shows through the bezel, with the EB Garamond wordmark centered on top.

Accessibility

• Role and label. The wrapper carries role="img" with a descriptive aria-label naming the device, so it is announced as a single image.
• Decorative fill. The gradient screen layer is marked aria-hidden, so the wordmark and washes are not read out separately from the frame label.
• Motion. Nothing animates, so no prefers-reduced-motion gate is needed.