Scroll Highlighter

v1.0.0

FreeTextScrollInteractiveReduced Motion

A premium typography scroll-highlighter that highlights text word-by-word with solid, wavy, or dotted styles based on page scroll or custom motion values.

Scroll Highlighter

Go fullscreen to customize props

Installation

npx vectorvesper add scroll-highlighter

Run npx vectorvesper init once first to set up your project.

Dependencies

npm install framer-motion

framer-motion

Usage

Import

import { ScrollHighlighter } from "@/components/vv/scroll-highlighter";

Usage

<ScrollHighlighter />

Client-only component — disable SSR

This component requires browser APIs and must be rendered client-side only.

import dynamic from "next/dynamic";

const ScrollHighlighter = dynamic(
  () => import("@/components/vv/scroll-highlighter"),
  { ssr: false }
);

This component respects prefers-reduced-motion and provides a graceful fallback.

Props

An advanced typography highlighter driven by scroll position. It splits a paragraph into individual words, revealing their highlight stroke and active text color as they scroll into view. Supports spring physics smoothing, font-morphing, and custom SVG underline patterns.

<ScrollHighlighter />

The core text highlighting engine.

Prop	Type	Default	Description
`text*`	`string`	`—`	The paragraph text to split and highlight.
`variant`	`"solid" \| "wavy" \| "dotted"`	`"solid"`	Style of the highlight stroke underneath the text: solid (marker marker streak), wavy (animated bezier SVG), or dotted (dashed underline).
`sticky`	`boolean`	`false`	If true, intercepts wheel/touch events to advance words in-place rather than letting the page scroll past.
`fullscreen`	`boolean`	`false`	Wraps the paragraph in a full-viewport center flex container. Requires `sticky` to be true.
`scrollSpeed`	`number`	`0.001`	Scroll sensitivity multiplier in sticky mode.
`customProgress`	`MotionValue<number>`	`—`	Explicit Framer Motion value (0 to 1) to override scroll tracking and drive highlight manually.
`offset`	`[string, string]`	`["start 0.85", "end 0.35"]`	Framer Motion useScroll viewport offsets targeting when to start and end the highlight sequence.
`textColor`	`string`	`"#646973"`	Initial color of the words before scroll reveal.
`activeTextColor`	`string`	`"#FFFFFF"`	Color of the words once fully highlighted.
`baseFontOpacity`	`number`	`1.0`	Starting opacity of unhighlighted text (reaches 1.0 upon scroll).
`activeFont`	`"default" \| "dramatic"`	`"default"`	If 'dramatic', cross-fades unhighlighted words into a secondary style class (e.g. serif italic).
`baseFontClass`	`string`	`""`	CSS classes applied to unhighlighted words.
`dramaticFontClass`	`string`	`"font-cormorant italic"`	Secondary CSS font classes applied on active words in 'dramatic' mode.
`highlightColor`	`string`	`— (per variant)`	Stroke color. Fallbacks: solid uses 'rgba(224,254,0,0.2)', wavy/dotted use '#E0FE00'.
`gradientColors`	`[string, string]`	`—`	A two-color linear gradient array to fill the highlight stroke. Overrides `highlightColor`.
`highlightOpacity`	`number`	`1.0`	Opacity coefficient of the highlight stroke.
`highlightHeight`	`number`	`— (per variant)`	Height multiplier of the stroke relative to line height (solid=0.55, wavy=0.28, dotted=0.18).
`highlightY`	`number`	`— (per variant)`	Vertical position offset relative to text baseline (0=top, 1=bottom; solid=0.38, wavy=0.68, dotted=0.82).
`overlap`	`number`	`1.5`	Word-reveal overlap factor. Higher values make adjacent words transition simultaneously.
`smooth`	`boolean`	`true`	Applies Framer Motion spring physics to the scroll progress.
`physicsProfile`	`"gentle" \| "buttery" \| "snappy" \| "bouncy"`	`"gentle"`	Named spring configuration preset for progress smoothing.
`springConfig`	`SpringConfig`	`—`	Direct spring parameters ({ damping, stiffness, mass }) overriding `physicsProfile`.
`hoverGlow`	`boolean`	`true`	Enables interactive word hover (words tilt/lift and glow subtly on mouseover).

Examples

Solid Highlighter

<ScrollHighlighter
  text="This is a solid highlighter that reveals as you scroll."
  variant="solid"
/>

Wavy underline with dramatic font

<ScrollHighlighter
  text="Experience a dramatic typography reveal with animated SVG wave underlines."
  variant="wavy"
  activeFont="dramatic"
  dramaticFontClass="font-serif italic text-emerald-400"
/>

Dotted Underline

<ScrollHighlighter
  text="Dotted underlines trace themselves cleanly below each word."
  variant="dotted"
  highlightColor="#EC4899"
/>

Client component. Uses Framer Motion's useScroll hooks and DOM measurement.

Automatically disables spring smoothing and active font transitions when the user's OS has 'Reduce Motion' enabled.

Source

export { default } from "./ScrollHighlighter";
export * from "./ScrollHighlighter";

View on GitHub →Report an issue