Scroll Text — `<mv-scroll-text>`

Paragraph whose words (or letters) light up progressively as you scroll, from dim and blurred to sharp; scroll-driven CSS animations, JS fallback.

Category	Animated text
Type	Web Component (`<mv-scroll-text>`)
Status	stable
Keywords	scroll, reveal, scroll-driven, view-timeline, words, storytelling, manifesto

When to use

A manifesto or storytelling paragraph should light up word by word as the user scrolls
Reading pace should follow scroll position on a long-form landing page

Avoid when

The text should animate in once when it appears, independently of scroll progress → use Text Reveal instead
The paragraph contains links or rich markup; inner markup is flattened to plain text
Whole blocks or cards, not text, should appear on scroll → use Scroll Reveal instead

Install

node scripts/add.mjs scroll-text --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["scroll-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/observe.js, components/scroll-text/scroll-text.js, components/scroll-text/scroll-text.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div id="scroll-text-demo" style="height:340px;width:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin">
  <div style="max-width:40rem;margin:0 auto;padding:2.5rem 1.5rem 20rem">
    <p style="margin:0 0 7rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mv-fg-subtle)">Scroll ↓</p>
    <mv-scroll-text style="font:600 clamp(1.4rem,3.2vw,2rem)/1.35 var(--mv-font-sans);letter-spacing:-.02em">
      We designed every detail to disappear. Fewer settings, less friction, more time for what really matters: building products your customers love to use.
    </mv-scroll-text>
    <mv-scroll-text by="chars" effect="float" start="20" end="60" style="margin-top:3rem;font:800 clamp(2rem,5vw,3rem)/1.1 var(--mv-font-sans);letter-spacing:-.04em;color:var(--mv-accent-fg)">
      Simple. Fast. Beautiful.
    </mv-scroll-text>
  </div>
</div>

API

Attributes

Name	Type	Default	Description
`by`	words \| chars	`words`	Animated unit.
`effect`	blur \| fade \| float	`blur`	blur: opacity + blur; fade: opacity only; float: units also rise.
`start`	number (%)	`10`	Start of the reveal, as a % of the trip across the viewport (0 = the top of the block enters from the bottom).
`end`	number (%)	`55`	When the last unit starts lighting up (50 ≈ block centered).

CSS variables

Name	Default	Description
`--mv-scroll-text-opacity`	`0.16`	Opacity of words not reached yet.
`--mv-scroll-text-blur`	`0.08em`	Initial blur (effect=blur / float).
`--mv-scroll-text-rise`	`0.45em`	Initial vertical offset (effect=float).

Accessibility

The sentence is exposed once via a visually hidden copy; the animated units are aria-hidden. The text stays readable even before it’s revealed (adjustable opacity). Reduced motion: the paragraph is fully revealed. Inner markup (links, bold) is flattened: use it for plain text only.