KQ-1374 · WORD/BRACKET

Word Bracket

True-focus text: four corner brackets frame one sharp, full-ink word while the rest of the sentence sits blurred and dimmed, and on a timer the frame hops on like an inchworm — the leading edge leaves on springs.snap and bites the next word with one crisp overshoot, the trailing edge follows a beat later on springs.glide, and a hop to another line glides the whole frame. Hovering or tapping a word takes the frame there and holds the cycle; with the sentence focused, Left and Right move it a word, Home and End jump to the ends.

KQ-1374 · WORD/BRACKET

Waylight · trip planner

Pick a seat, pack light, and leave the rest to us.

frame on “Pick” · word 1 of 11 · hover a word to hold it

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/word-bracket

Props

text: string; default —; The sentence. Read once by assistive technology, and copied as written.
as: "h1" | "h2" | "h3" | "h4" | "p" | "span" | "div"; default "p"; The element the sentence renders as.
interval: number; default 1600; How long the frame rests on each word, ms.
blur: number; default 3; How soft the words outside the frame are, px of blur.
dim: number; default 0.4; The opacity of the words outside the frame, 0 to 1.
frame: string; default "var(--accent-bright)"; The brackets' colour, any CSS colour.
lag: number; default 0.5; How far the frame's trailing edge lags its leading edge on a hop, 0 (rigid) to 1 (a long stretch).
cornerSize: number; default 0.3; Each bracket's arm, em.
thickness: number; default 2; Each bracket's stroke, px.
padding: number; default 0.14; Room between the word and its frame, em.
minLength: number; default 1; The shortest word, in letters, the cycle lands on; hover and keys reach any word.
index / defaultIndex: number; default —; The focused word as its index among the sentence's words, controlled or initial; defaults to the first word the cycle lands on.
onIndexChange: (index: number) => void; default —; The frame moved to a word: the cycle, the pointer or a key chose it. Also reported on arrival.
paused: boolean; default false; Hold the frame where it is.
loop: boolean; default true; Wrap from the last word back to the first.
hoverControl: boolean; default true; Hovering a word, tapping it or the arrow keys take the frame; the cycle resumes after.
onComplete: () => void; default —; The cycle reached the last word (only without loop).
className: string; default —; Classes for the sentence element; size, weight and colour are inherited.

Prop	Type	Default	Description
text	string	—	The sentence. Read once by assistive technology, and copied as written.
as	"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "span" \| "div"	"p"	The element the sentence renders as.
interval	number	1600	How long the frame rests on each word, ms.
blur	number	3	How soft the words outside the frame are, px of blur.
dim	number	0.4	The opacity of the words outside the frame, 0 to 1.
frame	string	"var(--accent-bright)"	The brackets' colour, any CSS colour.
lag	number	0.5	How far the frame's trailing edge lags its leading edge on a hop, 0 (rigid) to 1 (a long stretch).
cornerSize	number	0.3	Each bracket's arm, em.
thickness	number	2	Each bracket's stroke, px.
padding	number	0.14	Room between the word and its frame, em.
minLength	number	1	The shortest word, in letters, the cycle lands on; hover and keys reach any word.
index / defaultIndex	number	—	The focused word as its index among the sentence's words, controlled or initial; defaults to the first word the cycle lands on.
onIndexChange	(index: number) => void	—	The frame moved to a word: the cycle, the pointer or a key chose it. Also reported on arrival.
paused	boolean	false	Hold the frame where it is.
loop	boolean	true	Wrap from the last word back to the first.
hoverControl	boolean	true	Hovering a word, tapping it or the arrow keys take the frame; the cycle resumes after.
onComplete	() => void	—	The cycle reached the last word (only without loop).
className	string	—	Classes for the sentence element; size, weight and colour are inherited.