Atelier UI

搜索组件…

搜索组件…

Word Reveal

标题文字滚动进入视野后逐词模糊、位移淡入,可重播。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

WordRevealProps

同时支持以下类型的全部属性: Omit<React.ComponentProps<"p">, "children">

属性类型默认值说明
text* 必填string—The sentence to reveal
staggernumber70Delay between words in ms
durationnumber700Duration of each word's transition in ms
blurnumber8Blur radius in px before a word appears
offsetnumber14Vertical offset in px before a word appears
replayKeynumber | string—Change this value to hide the words and play the reveal again
thresholdnumber0.4Fraction of the element that must be visible to start
oncebooleantrueOnly play once. If false the words hide again when scrolled out of view

安装

$ npx shadcn@latest add https://chromotion.dev/r/word-reveal.json

同类组件