KQ-1232 · LID/LAPTOP

Lid Laptop

A laptop in real CSS 3D that holds any screen on its lid: the first time it is mostly in view the lid opens on the drift spring, a click opens or shuts it, and a vertical drag turns the hinge with the finger, rubber-bands past its stop and commits by projection on the glide spring with the release velocity. As the lid passes 60° the screen wakes from black; shutting is a landing, a glide fall that strikes the deck and bounces off it on the recoil spring with a thock at each contact, while a sheen slides along the deck after the pointer on drift and the screen's light spills onto it. A real button over the laptop is the keyboard's lid: Enter or Space toggles it, ArrowUp or End opens and ArrowDown or Home shuts.

KQ-1232 · LID/LAPTOP

lid closed · tap or drag to open

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/lid-laptop

Props

children: ReactNode; default —; The screen's content, laid out in a size container the shape of the screen.
label: string; default "Laptop"; The device's accessible name; the lid control is named after it ("Laptop lid").
open / defaultOpen: boolean; default false; Controlled or initial lid state.
onOpenChange: (open: boolean) => void; default —; Fires from a tap, a drag, a key, or the laptop coming into view, with the state asked for.
openOnView: boolean; default true; Open a shut lid the first time the laptop is mostly on screen, silently.
angle: number; default 110; Where the lid rests open, in degrees from the deck, 90 to 130.
finish: "space" | "silver" | "midnight"; default "space"; The aluminium of the deck, lip and lid shell.
wake: boolean; default true; The screen wakes from black as the lid rises past 60° and sleeps below 40°; off, it is always lit.
sound: boolean; default false; Play the latch and the landing thocks. Only the visitor's own taps, drags and keys make a sound; the open on view never does.
disabled: boolean; default false; Disables the lid, its keys and its gestures, and dims the laptop.
className: string; default —; Merged onto the root; the default box is aspect-[4/3] at full width.

Prop	Type	Default	Description
children	ReactNode	—	The screen's content, laid out in a size container the shape of the screen.
label	string	"Laptop"	The device's accessible name; the lid control is named after it ("Laptop lid").
open / defaultOpen	boolean	false	Controlled or initial lid state.
onOpenChange	(open: boolean) => void	—	Fires from a tap, a drag, a key, or the laptop coming into view, with the state asked for.
openOnView	boolean	true	Open a shut lid the first time the laptop is mostly on screen, silently.
angle	number	110	Where the lid rests open, in degrees from the deck, 90 to 130.
finish	"space" \| "silver" \| "midnight"	"space"	The aluminium of the deck, lip and lid shell.
wake	boolean	true	The screen wakes from black as the lid rises past 60° and sleeps below 40°; off, it is always lit.
sound	boolean	false	Play the latch and the landing thocks. Only the visitor's own taps, drags and keys make a sound; the open on view never does.
disabled	boolean	false	Disables the lid, its keys and its gestures, and dims the laptop.
className	string	—	Merged onto the root; the default box is aspect-[4/3] at full width.