Pro
Scroll words
A paragraph that brightens word by word as it is scrolled through, so a statement is read at the pace of the scroll. Scrolling back dims it again.
pnpm dlx shadcn@latest add @caliper/scroll-wordsWhen to use
Use it for
- One strong statement on a landing or about page.
- Story pages where the next sentence should wait for the reader.
Skip it when
- Body copy, instructions and anything people must read before acting.
- More than two or three on a page.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- A soft ramp
- Each word fades in over the span of about four words, so the bright edge is a gradient rather than a cursor.
- Whatever scrolls it
- Progress is measured against the nearest scrolling container, or the window, so it works inside panels too.
- Ordinary text
- The words are real text, so it reads, selects and translates as written; under reduced motion it is simply shown.
Installation
pnpm dlx shadcn@latest add @caliper/scroll-words
Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { ScrollWords } from "@/components/ui/scroll-words"
The worked example comes with Pro
The 14-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
ScrollWords
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements, so roles and focus come from the browser.
No custom key handling; Tab and the native activation keys do the work.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.
Related
- Text motionText reveals, morphs and shimmer.
- Scroll storySections that change as you scroll.
- Reading progressWhere you are in a long page, in a small pill that appears once you start scrolling: a ring that fills as you read, the section you are in and how far through you are. Press it to jump to another section.