KQ-914 · HIDE/VEIL

Hide Veil

A message a host has hidden, covered by a hatched bar that carries the reason. Revealing wipes the veil rather than fading it — the clip's left inset walks from 0% to 100% on a base tween on the move ease, so the message is uncovered left to right — and an IntersectionObserver rooted on the thread's own scroll box wipes the veil back when the message leaves the box, unless focus is still inside it. Show and Hide again hand focus to each other, so no key is stranded on a clipped control.

KQ-914 · HIDE/VEIL

Ines Moreau, 07:40.
Dock two is loaded. Pallet 4471 still held.
Rui Baptista, 08:12, hidden by a host.
Coldbrook room rule 3: keep it civil.
Marta Ferreira, 08:31.
Waylight Pay cleared it a minute ago.
Ines Moreau, 08:33.
Good. Paperwork is on the desk by the hook.
Rui Baptista, 08:40.
Taking dock three from nine then.
Marta Ferreira, 08:44.
Coldbrook closes Thursday from noon.
Ines Moreau, 08:51.
Nothing leaves the yard after eleven.

1 hidden · 1 veil up

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/hide-veil

Props

messages: VeilMessage[]; default —; The thread, oldest first; a message with a hiddenReason is veiled.
revealed / defaultRevealed: string[]; default []; Controlled or initial revealed ids.
onRevealedChange: (ids: string[]) => void; default —; Fires with the next set from any change.
onRevealChange: (id: string, revealed: boolean, cause: "press" | "scroll") => void; default —; Fires once per change, saying which message moved and whether a press or a scroll moved it.
reVeilOnScroll: boolean; default true; Whether a revealed message re-veils when it leaves the scroll box.
maxHeight: number; default 240; Tallest the thread grows before it scrolls inside its own box.
scrollRef: (node: HTMLDivElement | null) => void; default —; A callback ref for the scroll box, so a host can jump the thread from outside it.
showLabel: string; default "Show"; The veil's control.
hideLabel: string; default "Hide again"; The revealed message's control, which lives in the meta row.
label: string; default —; Names the thread for assistive technology.

Prop	Type	Default	Description
messages	VeilMessage[]	—	The thread, oldest first; a message with a hiddenReason is veiled.
revealed / defaultRevealed	string[]	[]	Controlled or initial revealed ids.
onRevealedChange	(ids: string[]) => void	—	Fires with the next set from any change.
onRevealChange	(id: string, revealed: boolean, cause: "press" \| "scroll") => void	—	Fires once per change, saying which message moved and whether a press or a scroll moved it.
reVeilOnScroll	boolean	true	Whether a revealed message re-veils when it leaves the scroll box.
maxHeight	number	240	Tallest the thread grows before it scrolls inside its own box.
scrollRef	(node: HTMLDivElement \| null) => void	—	A callback ref for the scroll box, so a host can jump the thread from outside it.
showLabel	string	"Show"	The veil's control.
hideLabel	string	"Hide again"	The revealed message's control, which lives in the meta row.
label	string	—	Names the thread for assistive technology.