KQ-1231 · POCKET/PHONE

Pocket Phone

A phone frame that holds any screen and leans toward the pointer under a sheet of glass glare on the glide spring. A corner toggle turns it to landscape on glide while the screen counter-rotates and re-lays its content out in real pixels; its keys sink into the frame on flick, the volume keys raise a level on the glass that slides out on snap, the side key sleeps and wakes the screen, and the island opens on snap into a live activity. Every key is a real button reached by Tab and pressed with Enter or Space (Enter repeats on the volume keys), the island is a disclosure that Escape closes, and keyboard focus tilts the phone toward the key it is on.

KQ-1231 · POCKET/PHONE

Waylight Pay

Balance

£2,480.16

+£24.00 today

SendRequest

Today

Coldbrook Coffee08:12−£3.40
Fieldline Rail08:31−£12.80
BasinworksRefund+£24.00

portrait · volume 8 of 16 · screen on

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/pocket-phone

Props

children: ReactNode; default —; The screen's content, laid out in a size container the shape of the screen; use @container (orientation: landscape) for the turned layout.
label: string; default "Phone"; The device's accessible name.
island: ReactNode; default —; What the island shows when it opens. Without it the island is only the camera and is not a control.
islandLabel: string; default "Live activity"; The island button's accessible name.
time: string; default "9:41"; The clock in the status bar.
orientation / defaultOrientation: "portrait" | "landscape"; default "portrait"; Controlled or initial orientation.
onOrientationChange: (orientation: "portrait" | "landscape") => void; default —; Fires from the turn toggle with the orientation asked for.
volume / defaultVolume: number; default 0.5; Controlled or initial volume, 0 to 1 in sixteenths.
onVolumeChange: (volume: number) => void; default —; Fires from the volume keys with the new level.
awake / defaultAwake: boolean; default true; Controlled or initial screen state.
onAwakeChange: (awake: boolean) => void; default —; Fires from the side key, or a tap on the dark glass, with the new state.
islandOpen / defaultIslandOpen: boolean; default false; Controlled or initial island state.
onIslandOpenChange: (open: boolean) => void; default —; Fires from a tap on the island, Escape, or a press outside it.
tilt: number; default 8; How far the phone leans toward the pointer, in degrees, 0 to 15; 0 holds it flat.
finish: "graphite" | "silver" | "sand"; default "graphite"; The metal band and keys.
glare: boolean; default true; Light across the glass that moves with the tilt.
sound: boolean; default false; Play the keys' clicks. Nothing plays, and no audio context exists, unless this is on; sounds only answer the visitor.
disabled: boolean; default false; Disables every key and the lean, and dims the phone.
className: string; default —; Merged onto the root; the default box is aspect-[3/5] at full width.

Prop	Type	Default	Description
children	ReactNode	—	The screen's content, laid out in a size container the shape of the screen; use @container (orientation: landscape) for the turned layout.
label	string	"Phone"	The device's accessible name.
island	ReactNode	—	What the island shows when it opens. Without it the island is only the camera and is not a control.
islandLabel	string	"Live activity"	The island button's accessible name.
time	string	"9:41"	The clock in the status bar.
orientation / defaultOrientation	"portrait" \| "landscape"	"portrait"	Controlled or initial orientation.
onOrientationChange	(orientation: "portrait" \| "landscape") => void	—	Fires from the turn toggle with the orientation asked for.
volume / defaultVolume	number	0.5	Controlled or initial volume, 0 to 1 in sixteenths.
onVolumeChange	(volume: number) => void	—	Fires from the volume keys with the new level.
awake / defaultAwake	boolean	true	Controlled or initial screen state.
onAwakeChange	(awake: boolean) => void	—	Fires from the side key, or a tap on the dark glass, with the new state.
islandOpen / defaultIslandOpen	boolean	false	Controlled or initial island state.
onIslandOpenChange	(open: boolean) => void	—	Fires from a tap on the island, Escape, or a press outside it.
tilt	number	8	How far the phone leans toward the pointer, in degrees, 0 to 15; 0 holds it flat.
finish	"graphite" \| "silver" \| "sand"	"graphite"	The metal band and keys.
glare	boolean	true	Light across the glass that moves with the tilt.
sound	boolean	false	Play the keys' clicks. Nothing plays, and no audio context exists, unless this is on; sounds only answer the visitor.
disabled	boolean	false	Disables every key and the lean, and dims the phone.
className	string	—	Merged onto the root; the default box is aspect-[3/5] at full width.