Scroll Text `<mv-scroll-text>`

随滚动逐步点亮单词（或字母）的段落，从暗淡模糊到清晰锐利；滚动驱动的 CSS 动画，带 JS 降级方案。

分类	动画文字
类型	Web Component（`<mv-scroll-text>`）
状态	稳定版
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

安装

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

使用 Marvelous UI MCP 服务器的 AI 智能体：install_components({ slugs: ["scroll-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

复制的文件（含依赖）：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。

用法

标准标记，可在此基础上通过属性、data-* 和 CSS 变量进行定制：

<div id="scroll-text-demo" tabindex="0" role="region" aria-label="Product manifesto, scroll to reveal" 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	类型	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 and forced colors: the paragraph is fully revealed. Inner markup (links, bold) is flattened: use it for plain text only.