Turn long-form reading into a guided experience. Scrold colors your text in as the reader scrolls, turns [1]-style markers into inline citation chips, and reveals sources as cards — on hover, on scroll, or both. Native to Framer, no external libraries.
- Scroll-scrubbed reading — words color in progressively, anchoring the reader's eye.
- Citation chips — [1] markers become inline chips, right in the text flow.
- Source cards — a chip opens its card as a popover with a caret pointing at it.
- Reveal modes — Hover, Scroll, or Both. On scroll, each card presents itself as the reading reaches its chip, then hands off to the next.
- Phrase highlights — wrap words in ==double equals== for a selection-style highlight.
- Bring your own UI — connect your icon and card frames; they stay fully editable. Fill, radius, shadow, CMS binding — just Framer layers.
- Full controls — unread/read/highlight colors, size, weight, line height, chip size, caret, and the scroll window the scrub runs over.
- Canvas-safe — built on Framer's static renderer API; the editor stays fast.
1. Code Component — drop it in, paste your text, fill the chips array.
2. Slot Component — connect your own text, icon, and popover layers. Zero code.
3. Code Override — apply to a frame that already holds your text and cards; it finds them by layer name.
1. Insert the slot component.
2. Type [1], [2] where you want chips — in Text or a connected text layer.
3. Connect icon frames to Icons, card frames to Popovers — chip n pairs with popover n.
4. Pick a Reveal mode, then preview.
The scrub and cards run in preview and on your published site; the canvas shows a static preview with numbered chip markers, so nothing animates while you design.
Questions? Reach out via the support link — feedback shapes the roadmap.
Turn long-form reading into a guided experience. Scrold colors your text in as the reader scrolls, turns [1]-style markers into inline citation chips, and reveals sources as cards — on hover, on scroll, or both. Native to Framer, no external libraries.
- Scroll-scrubbed reading — words color in progressively, anchoring the reader's eye.
- Citation chips — [1] markers become inline chips, right in the text flow.
- Source cards — a chip opens its card as a popover with a caret pointing at it.
- Reveal modes — Hover, Scroll, or Both. On scroll, each card presents itself as the reading reaches its chip, then hands off to the next.
- Phrase highlights — wrap words in ==double equals== for a selection-style highlight.
- Bring your own UI — connect your icon and card frames; they stay fully editable. Fill, radius, shadow, CMS binding — just Framer layers.
- Full controls — unread/read/highlight colors, size, weight, line height, chip size, caret, and the scroll window the scrub runs over.
- Canvas-safe — built on Framer's static renderer API; the editor stays fast.
1. Code Component — drop it in, paste your text, fill the chips array.
2. Slot Component — connect your own text, icon, and popover layers. Zero code.
3. Code Override — apply to a frame that already holds your text and cards; it finds them by layer name.
1. Insert the slot component.
2. Type [1], [2] where you want chips — in Text or a connected text layer.
3. Connect icon frames to Icons, card frames to Popovers — chip n pairs with popover n.
4. Pick a Reveal mode, then preview.
The scrub and cards run in preview and on your published site; the canvas shows a static preview with numbered chip markers, so nothing animates while you design.
Questions? Reach out via the support link — feedback shapes the roadmap.
