Skip to content
Site volume
Colourway

Components

PhoneFrame

A generic phone body around an untouched screenshot or a paused, muted video.

Import from@maxgrits/overprint-react/phone-frame
On this page

Example#

Look of this example
Fernlight on a phone
Live render of examples/phone-frame/basic.tsx

Usage#

Use a phone frame to show a site or an app at phone size: a generic slab body with a pill island, no brand hardware, and the screen untouched. The caption names what is shown.

  • Sizes. s 240, m 320 and l 380 px wide; the radius scales with it.
  • Video in the screen is muted and starts paused, with a play and pause key at the frame's bottom end. It never autoplays a loop (D-E3).
  • Never tilted at rest; the screen holds words.

Anatomy#

Fernlight on a phone
The parts of examples/phone-frame/basic.tsx, numbered:
  1. Bodydata-mk-part="body"
  2. Screendata-mk-part="screen"
  3. CaptionNames what the phone shows..mk-phone-frame-caption

Volume#

Reading layer: identical at every volume.

  • Quiet

    Fernlight on a phone

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    Fernlight on a phone

    The site default. Art on its own plates, one display moment per view.

  • Press

    Fernlight on a phone

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Fernlight on a phone

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Caption: the site and the screen, "Fernlight on a phone: the price list".
  • Video gets a caption that says what happens in it, since many will not press play.

Do and don't#

Do

Fernlight on a phone

Still until someone presses play.

Don't

A video in a phone frame that plays in a loop as soon as the page loads.

A loop nobody asked for.

Ambient loops on a reading page pull the eye and cost battery. Video waits for a press (D-E3).

Accessibility#

  • The frame is decoration; the caption names what it shows.
  • Video is muted, plays inline and starts paused (no autoplay loops, D-E3). The play and pause key at the frame's bottom end is a real button named "Play" or "Pause" and the video's label, so it is reachable by keyboard and announced.
KeysWhat happens
Tab,EnterorSpacePlays or pauses the video (the key at its bottom end)

Props#

PropTypeDefaultDescription
screenReactNodenoneAn image element, or use `video`.
video{ src: string; poster?: string; label: string; type?: string; }noneA video source: muted, inline and paused, with a play and pause key at the frame's bottom end.
captionReactNodenone
size"l" | "m" | "s"none240 / 320 (default) / 380 px wide.

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from PhoneFrameProps in packages/overprint-react/src/reading/phone-frame/phone-frame.tsx.

Tokens#

System tokens (6)

Its own properties (2)

  • --mk-phone-r
  • --mk-phone-w

Scanned from its CSS at build and checked against its registry entry; 2 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.9.024 October 2026

  • Patchreactphone-frame: video in a PhoneFrame starts paused with a play and pause key at the frame's bottom end (the client leaf PhoneVideo, on IconButton's markup, named "Play {label}" and "Pause {label}"), instead of the platform's controls (DF-33, supersedes D-N78). The video stays muted and inline and never autoplays (D-E3).

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry