Sidenotes
Numbered references whose notes sit in the margin beside their line, and fold into inline disclosures on narrow containers.
Typography & Text · React / CSS / Tailwind
Content & Reading
Reading is the oldest interface. These components support it rather than compete with it: notes that sit beside the text instead of interrupting it, progress you can glance at, headers that step aside while you read, and emphasis that arrives at reading pace — all of it legible to assistive technology.
Numbered references whose notes sit in the margin beside their line, and fold into inline disclosures on narrow containers.
Typography & Text · React / CSS / Tailwind
Line-clamped text that expands to its measured height, with a fade at the clamp and a button only when it overflows.
Typography & Text · React / CSS / Tailwind
A table of contents that tracks the section you are reading with a sliding indicator and per-section progress.
Navigation & Menus · React / Motion / Tailwind
A header that tightens and gains a surface as you scroll, with a reading progress bar.
Navigation & Menus · React / Motion / Tailwind
A sticky header that slides away as you scroll down and springs back the moment you scroll up.
Navigation & Menus · React / Motion / Tailwind
A paragraph whose words take on an accent gradient as you scroll it into place.
Typography & Text · React / Motion / Tailwind
Hand-drawn annotations — marker swipes, underlines, circles, boxes — that draw in on view.
Typography & Text · React / SVG / CSS / Tailwind
Inline links with refined hover and focus underlines — slide, grow, double, highlight, arrow and wave — that follow line wraps.
Typography & Text · React / CSS / SVG / Tailwind
Text hidden under shimmering particle noise that dissolves outward from where you click.
Typography & Text · React / Canvas / Tailwind
A back-to-top button with a scroll-progress ring that appears after a threshold, for the window or any scroll box.
Navigation & Menus · React / Motion / SVG / Tailwind
Find-in-text for any content block: every match highlighted, a "3 of 12" counter, and Enter / Shift+Enter to step through them.
Typography & Text · React / CSS / Tailwind
A Medium-style toolbar that floats above a text selection inside one container, keeps the selection intact and is reachable with Alt+F10.
Navigation & Menus · React / CSS / Tailwind
A presentation-style code walkthrough: each step highlights a line range, lines grow and collapse between steps, and captions explain.
Typography & Text · React / Motion / Tailwind
Everything this set needs, combined. Each component remains a separate, self-contained file.
npm install motion