Android frame

Overview

Android draws an Android device frame as a single inline SVG: a rounded body, side buttons, and a hole-punch camera. The screen is filled with the Pulp iris gradient over a bg to surface base plus a centered wordmark, so the frame is self-contained and needs no screenshot or network image.

The SVG keeps its native 433 by 882 viewBox so the silhouette stays faithful, and scales fluidly through width: 100% / height: auto. Every surface and edge is wired to a Pulp design token rather than a hardcoded color.

Installation

Import the pattern from loosethreads:

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

Usage

The frame is prop-less aside from standard SVG attributes. Because the root is an svg, pass a style or className to size it:

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

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

Props

Anatomy

The outer body renders on --color-surface-elevated, the inner bezel on --color-surface, and the side buttons, screen outline, and camera detail on --color-border. The screen is a clipped path filled with a bg to surface base, an iris gradient wash over it, and a centered EB Garamond wordmark.

Accessibility

• Role and label. The frame is a single role="img" with an aria-label describing the mockup, so the decorative screen content is announced as one image rather than a set of paths.
• Motion. Nothing animates. The frame is static, so no prefers-reduced-motion gate is needed.