A pinned quote that fills with light letter by letter as you scroll, like karaoke lyrics. Phrases wrapped in asterisks take the accent and get a marker stroke once read, and a counter tracks the words.
We stopped counting releases and started measuring how it felt to use. Support tickets fell by half.
npx shadcn@latest add https://hyperblur.dev/r/motion-karaoke-paragraph.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-karaoke-paragraph.tsx.
import { MotionKaraokeParagraph } from "@/components/hyperblur/motion-karaoke-paragraph"
<MotionKaraokeParagraph text="Good tools *disappear*. You only notice the work." author="Jun Park, Studio Lead" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | A customer quote | Paragraph to read. Wrap phrases in *asterisks* to emphasize them. |
| eyebrow | string | "Field notes · Chapter 04" | Label above the paragraph. |
| author | string | "Mara Ellison, Head of Product at Tessel" | Attribution under the paragraph, next to the progress bar. Empty string hides it. |
| accent | string | "#2f7bff" | Accent color for highlights, rails and glows. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress by itself, forward, hold, then back. Use it for previews where nobody scrolls. |
| duration | number | 7 | Seconds for one forward pass of the autoplay loop. |
| length | number | 3 | Scroll distance in stage heights while the section is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the section lives inside a scrolling container. |