Focus Sweep Text React component
A paragraph with a moving point of focus: a few words stay sharp while the rest soften into blur, drifting along by itself or following the pointer.
About the Focus Sweep Text component
Focus Sweep Text gives a paragraph a point of attention. A few words stay sharp while everything else softens into blur, and the focus drifts along the text like the eye reading it.
Put the pointer on any word and the focus moves there, so people can read it at their own pace. Screen readers get the plain paragraph.
When to use it
Use it for manifesto lines, about pages and quotes, where you want people to slow down and read.
Keep it for a short passage. Long copy and anything people need to scan should stay plain.
Installation
Add the Focus Sweep Text component to your project with the shadcn CLI. It lands in components/focus-sweep-text.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/focus-sweep-textProps
<FocusSweepText /> accepts 4 props, all optional. It also accepts the usual <p> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text | string | "Reading is a small act of attention. Everything outside the line you are on falls away, … |
| blur Blur at the far end of the text, in px. | number | 5 |
| band Words either side of the focus that stay sharp. | number | 5 |
| seconds Seconds for the focus to travel across and back. | number | 6 |
- textstringDefault: "Reading is a small act of attention. Everything outside the line you are on falls away, …
- blur
Blur at the far end of the text, in px.
numberDefault: 5 - band
Words either side of the focus that stay sharp.
numberDefault: 5 - seconds
Seconds for the focus to travel across and back.
numberDefault: 6
Focus Sweep Text FAQ
- How wide is the sharp area?
- band sets how many words either side of the focus stay sharp.
- Can people read all of it?
- Yes. The focus moves through the whole text, and following the pointer puts it anywhere.
- Is it heavy?
- It only runs while on screen, and only writes to the words directly. Keep passages to a few dozen words.
- What about reduced motion?
- All the text stays sharp and still.
