KQ-1254 · PRIVACY/BLINDS

Privacy Blinds

A Public / Private toggle drawn as a window with venetian blinds. Going private, each slat tilts shut from the top down on springs.snap in a short cascade, the bands of daylight the window throws across the button thin out until a last sliver stripes the label, and the bottom rail folds into a padlock whose shackle rises on snap; going public, the lock lets go, the slats open from the bottom up and a soft beam sweeps the face on a tween. It is a toggle button with aria-pressed under one constant name: Space and Enter press it, and hovering peeks the slats a few degrees.

KQ-1254 · PRIVACY/BLINDS

Q4 launch plan

Fieldline Docs · edited 2 h ago

public · anyone with the link can view

Open it on the Studio stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/privacy-blinds

Props

pressed / defaultPressed: boolean; default false; Controlled and initial state; true is Private, the blinds shut.
onPressedChange: (pressed: boolean) => void; default —; Fires from the press that changed it, with the new state.
publicLabel: string; default "Public"; The word shown while open.
privateLabel: string; default "Private"; The word shown while shut.
label: string; default privateLabel; The accessible name, the same in both states; aria-pressed carries the state.
compact: boolean; default false; Icon only; the accessible name stays.
slats: number; default 5; How many slats hang in the window, 3 to 8.
tilt: number; default 15; The open slats' angle in degrees: 0 is edge-on and all daylight, 45 is half shut.
peek: number; default 14; How far hovering tips the slats, in degrees: open a crack when private, toward shut when public.
beam: number; default 0.6; Strength of the light, 0 to 1: the daylight bands, the sweep when it opens, the last sliver as it shuts.
stagger: number; default 45; Milliseconds between one slat and the next, tightened by cascade() so the fall stays under 600ms.
lock: boolean; default true; Form a padlock out of the bottom rail while private.
size: "sm" | "md" | "lg"; default "md"; Pill height 32, 36 or 44px with a 20, 24 or 28px window.
light: string; default oklch(from var(--warn) 0.84 0.13 h); Daylight colour, any CSS colour.
shade: string; default var(--ink-2); Slat colour, any CSS colour.
accent: string; default var(--accent-bright); Padlock colour, any CSS colour.
sound: boolean; default false; A swish as the slats move, a soft click as each one seats, a firmer click for the lock. Only after a press.
disabled: boolean; default false; Greys the toggle out and ignores presses and hover.
className: string; default —; Extra classes for the button.

Prop	Type	Default	Description
pressed / defaultPressed	boolean	false	Controlled and initial state; true is Private, the blinds shut.
onPressedChange	(pressed: boolean) => void	—	Fires from the press that changed it, with the new state.
publicLabel	string	"Public"	The word shown while open.
privateLabel	string	"Private"	The word shown while shut.
label	string	privateLabel	The accessible name, the same in both states; aria-pressed carries the state.
compact	boolean	false	Icon only; the accessible name stays.
slats	number	5	How many slats hang in the window, 3 to 8.
tilt	number	15	The open slats' angle in degrees: 0 is edge-on and all daylight, 45 is half shut.
peek	number	14	How far hovering tips the slats, in degrees: open a crack when private, toward shut when public.
beam	number	0.6	Strength of the light, 0 to 1: the daylight bands, the sweep when it opens, the last sliver as it shuts.
stagger	number	45	Milliseconds between one slat and the next, tightened by cascade() so the fall stays under 600ms.
lock	boolean	true	Form a padlock out of the bottom rail while private.
size	"sm" \| "md" \| "lg"	"md"	Pill height 32, 36 or 44px with a 20, 24 or 28px window.
light	string	oklch(from var(--warn) 0.84 0.13 h)	Daylight colour, any CSS colour.
shade	string	var(--ink-2)	Slat colour, any CSS colour.
accent	string	var(--accent-bright)	Padlock colour, any CSS colour.
sound	boolean	false	A swish as the slats move, a soft click as each one seats, a firmer click for the lock. Only after a press.
disabled	boolean	false	Greys the toggle out and ignores presses and hover.
className	string	—	Extra classes for the button.