KQ-1237 · POCKET/CONSOLE

Pocket Console

A handheld console frame whose keys travel: each cap goes down into its well on the flick spring as its side wall disappears, and the dome pushes it back up on snap with one crisp overshoot; the d-pad is one cross on a pivot that rocks toward the arm under the thumb, and sliding a finger round it rolls through all eight directions. Every press reaches the screen as a real keydown and keyup, so content written for a keyboard runs unchanged, while the LCD shows a pixel grid and backlight and the power light breathes on a slow tween only while it is on and on screen. From any key the arrow keys press the d-pad and A and B press A and B for as long as they are held, and Enter or Space hold the focused key.

KQ-1237 · POCKET/CONSOLE

1 of 6 in bloom · at 5,4 · facing up

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-console

Props

children: React.ReactNode; default —; The screen: any content, in a size container the shape of the LCD. It receives every press as a key event.
label: string; default "Handheld console"; The console's accessible name.
power / defaultPower: boolean; default true; Whether the console is switched on; the content is inert while it is off.
onPowerChange: (power: boolean) => void; default —; Fires from the power switch with the state asked for.
onPress: (button: PocketConsoleButton) => void; default —; A key went down (pointer, keyboard or assistive technology) while the console is on.
onRelease: (button: PocketConsoleButton) => void; default —; A key came back up.
keyMap: Partial<Record<PocketConsoleButton, string>>; default { up: "ArrowUp", …, a: "a", b: "b", start: "Enter", select: "Shift" }; The key each button sends into the screen. Escape is never sent.
shell: "grey" | "teal" | "clear"; default "grey"; The plastic: warm grey, teal, or a smoked clear shell that shows the board inside.
grid: number; default 0.5; How strongly the LCD's pixel grid shows, 0 to 1.
backlight: number; default 0.8; How lit the LCD is, 0 (unlit, under a dark film) to 1 (glowing).
sound: boolean; default false; Each key clicks going down and, quieter, coming up. Nothing plays on its own.
disabled: boolean; default false; Keys take no presses and anything held is let go.
className: string; default —; Classes for the 5:8 root; size it by width.

Prop	Type	Default	Description
children	React.ReactNode	—	The screen: any content, in a size container the shape of the LCD. It receives every press as a key event.
label	string	"Handheld console"	The console's accessible name.
power / defaultPower	boolean	true	Whether the console is switched on; the content is inert while it is off.
onPowerChange	(power: boolean) => void	—	Fires from the power switch with the state asked for.
onPress	(button: PocketConsoleButton) => void	—	A key went down (pointer, keyboard or assistive technology) while the console is on.
onRelease	(button: PocketConsoleButton) => void	—	A key came back up.
keyMap	Partial<Record<PocketConsoleButton, string>>	{ up: "ArrowUp", …, a: "a", b: "b", start: "Enter", select: "Shift" }	The key each button sends into the screen. Escape is never sent.
shell	"grey" \| "teal" \| "clear"	"grey"	The plastic: warm grey, teal, or a smoked clear shell that shows the board inside.
grid	number	0.5	How strongly the LCD's pixel grid shows, 0 to 1.
backlight	number	0.8	How lit the LCD is, 0 (unlit, under a dark film) to 1 (glowing).
sound	boolean	false	Each key clicks going down and, quieter, coming up. Nothing plays on its own.
disabled	boolean	false	Keys take no presses and anything held is let go.
className	string	—	Classes for the 5:8 root; size it by width.