Scroll Highlight Text
A paragraph whose words light from dim to ink as it scrolls through its container, with key phrases in ember.
Preview
A letter to new customers
We started Pebble notes because every team we worked with kept the same document in five places. Decisions lived in chat, owners lived in someone's head, and the why was gone by Friday. So we built one quiet place for plans, where the owner is never a guess and the history stays readable years later.
Scroll inside the card; words light as they pass.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Paragraph text; wrap key phrases in *asterisks* to light them in ember. |
| container | RefObject<HTMLElement> | page | Scroll container; give it position: relative. |
| offset | [string, string] | ["start 0.8", "end 0.5"] | When lighting starts and ends (useScroll offsets). |
| dim | number | 0.22 | Opacity of unlit words. |
| as | "p" | "div" | "blockquote" | "h2" | "h3" | "p" | Element to render. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.