KQ-918 · FILTER/MASK

Filter Mask

Words a room filter caught, kept in place under opaque hatched blocks so uncovering one never reflows the line. Each cover is a motion span with its origin on the right whose scaleX runs to zero on snap, so it retreats rightward and the word appears in reading order; revealing everything runs the same wipe in a cascade, and masking again grows the covers back on glide. Every block is a real button with a whole-sentence label, and the count above the bubble reads as a pluralised sentence that cross-fades in one grid cell.

KQ-918 · FILTER/MASK

3 of 3 words masked by the Coldbrook filter.

Ines Rocha · 14:02

The last two Waylight Pay boxes turned up , the tape was , and the courier was about all of it.

Coldbrook filter · 0 of 0 masked · all shown

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/filter-mask

Props

text: string; default —; The message. Caught words are matched inside it.
terms: string[]; default —; The words the room filter catches, matched whole-word and case-insensitively.
author: string; default "Ines Rocha"; The sender, shown above the bubble.
time: string; default "14:02"; A plain string: the component never reads a clock.
filterName: string; default "Coldbrook filter"; Who masked the words; named in the header sentence.
revealed / defaultRevealed: boolean; default false; Controlled or initial reveal-all state.
onRevealedChange: (revealed: boolean) => void; default —; Fires from the header toggle.
onWordReveal: (word: string, index: number) => void; default —; Fires when a single block is uncovered.
onMaskedCountChange: (masked: number, total: number) => void; default —; Fires from an effect whenever the masked count changes.
disabled: boolean; default false; Holds the toggle and every block.
className: string; default —; Extra classes on the wrapper.

Prop	Type	Default	Description
text	string	—	The message. Caught words are matched inside it.
terms	string[]	—	The words the room filter catches, matched whole-word and case-insensitively.
author	string	"Ines Rocha"	The sender, shown above the bubble.
time	string	"14:02"	A plain string: the component never reads a clock.
filterName	string	"Coldbrook filter"	Who masked the words; named in the header sentence.
revealed / defaultRevealed	boolean	false	Controlled or initial reveal-all state.
onRevealedChange	(revealed: boolean) => void	—	Fires from the header toggle.
onWordReveal	(word: string, index: number) => void	—	Fires when a single block is uncovered.
onMaskedCountChange	(masked: number, total: number) => void	—	Fires from an effect whenever the masked count changes.
disabled	boolean	false	Holds the toggle and every block.
className	string	—	Extra classes on the wrapper.