Scroll Text Highlight
文字隨滾動進度逐字（或逐詞）由淡灰轉為前景實色的閱讀高亮。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<ScrollTextHighlight />
安裝
npx shadcn@latest add https://webberui.com/r/scroll-text-highlight.json或在 components.json 設定 registries 後，改用 @webberui/scroll-text-highlight 安裝。
安裝依賴後，從 registry JSON（/r/scroll-text-highlight.json 的 files[0].content）複製 scroll-text-highlight.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
放在巢狀捲動容器內時，把容器的 ref 傳給 container：
import * as React from "react";
import { ScrollTextHighlight } from "@/components/ui/scroll-text-highlight";
export function Example() {
const scrollerRef = React.useRef<HTMLDivElement>(null);
return (
<div ref={scrollerRef} className="h-[300px] overflow-y-auto">
<div className="py-40">
<ScrollTextHighlight
container={scrollerRef}
text="隨著滾動逐字點亮的文字。"
className="text-xl font-semibold"
/>
</div>
</div>
);
}以整個視窗為捲動容器時，可省略 container：
<ScrollTextHighlight
by="word"
text="Scroll to reveal."
className="text-4xl font-bold"
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要隨滾動高亮的文字 |
by | "char" | "word" | "char" | 高亮的最小單位 |
container | RefObject<HTMLElement> | — | 巢狀捲動容器的 ref；省略則以視窗為捲動容器 |
className | string | — | 附加樣式（建議在此設定字級與字色） |
細節
- 以
useScroll({ target, container, offset: ["start end", "end start"] })取得目標文字在容器內從進入底部到離開頂部的捲動進度scrollYProgress - 每個字（或詞）依索引分配到
[start, end]的子區間，透過useTransform把進度映射成opacity，逐一由淡灰轉為前景實色 - 逐字模式以字素（grapheme）切割，emoji 與組合字不會被拆壞
- 文字沿用
currentColor（前景色），淡出時自然呈現淺灰；請透過className指定字級與字色
可及性
- 完整文字以
sr-only呈現供輔助科技朗讀，逐字動畫層標記aria-hidden，不會被重複朗讀 - 使用者系統開啟「減少動態效果」時，直接渲染全部前景實色的靜態文字