Spell UI 10个文本动画组件实战：Shimmer、Blur Reveal、Words Stagger让页面惊艳

【免费下载链接】spell-uiA large collection of high-quality React components that you can copy and paste into any project.项目地址https://gitcode.com/gh_mirrors/sp/spell-ui点击查看免费下载Spell UI 是一个面向 React 开发者的开源组件库内置了多个可直接拷贝使用的高品质文本动画组件包括 Shimmer 微光文字、Blur Reveal 模糊显现、Words Stagger 逐词交错等。无需自己编写复杂的 CSS 动画也无需深入学习 Motion 动画库的高级 API——把组件源码复制进项目调整两个参数就能让页面标题瞬间活起来。本文带你实战这 10 个 React 文字动画组件并分享速度、延迟、视口触发等常用参数的调优技巧。快速上手一条命令引入文本动画组件Spell UI 的组件源码统一放在 registry/spell-ui/ 目录遵循 shadcn/ui 的注册表规范引入非常简单# 使用 shadcn CLI 一键安装将地址换成对应组件的文档地址 npx shadcnlatest add 组件文档地址也可以直接复制源码文件到项目的components目录。所有组件基于Tailwind CSS Motion实现项目里装好这两个依赖即可使用。每个组件的完整说明位于 docs/ 目录例如 docs/words-stagger/doc.mdx。10 个文本动画组件速览清单#组件动画效果典型场景1ShimmerText高光扫过文字CTA 按钮、强调文案2BlurReveal模糊逐字显现首屏大标题3WordsStagger逐词交错浮现Hero 区标题4SlideUpText逐词/逐字上滑标题、副标题5SpecialText打字机式逐字显现品牌标语6RandomizedText随机字符翻牌定格科技感标题7GradientWaveText渐变波浪持续流动Slogan、水印文字8HighlightedText荧光笔划过重点正文关键词9Signature手写笔迹书写签名、落款10TextMarquee跑马灯滚动文字公告、资讯条 建议先浏览表格按自己的场景挑 2~3 个组件再回到下文看对应用法避免信息过载。逐个实战每个组件的核心用法1. ShimmerText微光扫过的标题文字让文字表面有一道高光循环扫过适合 CTA 和强调文案。核心参数variant20 种颜色如purple、amber、duration动画时长默认 1.5s。ShimmerText variantpurple duration{2}Just ship things./ShimmerText 源码registry/spell-ui/shimmer-text.tsx 文档docs/shimmer-text/doc.mdx2. BlurReveal模糊逐字显现文字先模糊再逐字变清晰是最有高级感的首屏标题动画。核心参数speedReveal整体显现速度、speedSegment单字动画速度、trigger控制是否播放。BlurReveal inView speedReveal{1}Hello, World!/BlurReveal 源码registry/spell-ui/blur-reveal.tsx 文档docs/blur-reveal/doc.mdx3. WordsStagger逐词交错浮现标题按单词依次淡入位移节奏感强。核心参数stagger词间隔默认 0.1s、speed每词动画时长、delay整体延迟。WordsStagger classNametext-3xl font-semibold stagger{0.15} Your complete platform for Design. /WordsStagger 源码registry/spell-ui/words-stagger.tsx 文档docs/words-stagger/doc.mdx4. SlideUpText上滑式文字揭示支持按词、按字符、按行上滑进入split可选words/characters/linesfrom可控制从第一个词、最后一个词还是中间开始还能通过transition自定义缓动曲线。SlideUpText splitcharacters fromcenterYour text here/SlideUpText 源码registry/spell-ui/slide-up-text.tsx 文档docs/slide-up-text/doc.mdx5. SpecialText逐字显现的标语像被逐字打出来一样speed以毫秒计默认 20ms越小越快适合节奏明快的品牌 Slogan。SpecialText speed{30}SPELL UI/SpecialText 源码registry/spell-ui/special-text.tsx 文档docs/special-text/doc.mdx6. RandomizedText随机字符翻牌定格每个词先由一堆随机字符乱跳再依次定格成最终文本科技感十足。split可选words或chars。RandomizedText splitcharsYou can just ship things./RandomizedText 源码registry/spell-ui/randomized-text.tsx 文档docs/randomized-text/doc.mdx7. GradientWaveText渐变波浪流动文字文字上持续流动着径向渐变光带是氛围感最强的常驻动画。参数非常丰富repeat是否无限循环、radial径向/线性渐变、bandCount光带数量、customColors自定义色板。GradientWaveText repeat classNametext-4xl font-medium Just ship things. /GradientWaveText 源码registry/spell-ui/gradient-wave-text.tsx 文档docs/gradient-wave-text/doc.mdx8. HighlightedText荧光笔划重点背景像荧光笔一样从某个方向滑入把关键词划出来。from支持left/right/top/bottom四个方向默认从底部。pBuild your product with HighlightedText frombottomSpell UI/HighlightedText./p 源码registry/spell-ui/highlighted-text.tsx 文档docs/highlighted-text/doc.mdx9. Signature手写签名逐笔书写把文字转成 SVG 路径模拟手写笔迹逐字书写适合签名和落款。使用前需要把手写体字体文件 LastoriaBoldRegular.otf 放到项目的public目录。Signature textSpell Studio fontSize{16} color#000 / 源码registry/spell-ui/signature.tsx 文档docs/signature/doc.mdx10. TextMarquee文字跑马灯多条文字垂直滚动循环播放speed控制滚动速度height控制容器高度适合公告栏和资讯条。TextMarquee speed{1.5} height{240} pTomato/p pApple/p pCarrot/p /TextMarquee 源码registry/spell-ui/text-marquee.tsx 文档docs/text-marquee/doc.mdx3 个通用调参技巧让动画更高级用inView做视口触发大多数组件都支持inView属性默认false。设为true后动画只在元素滚入视口时播放长页面中每个区块首次可见时才动一次观感更专业。节奏靠三个参数delay整体延迟、stagger/speed每个单元的速度或间隔、duration单次时长。经验值Hero 标题stagger0.1~0.2s 最耐看太快的文字动画单字 0.2s会显得赶。注意性能与可访问性组件动画基于 Motion 的 transform/opacity 实现天然对 60fps 友好但常驻循环动画如 GradientWaveText建议只用在首屏一处并用paused提供暂停能力。写在最后Spell UI 的 10 个文本动画组件覆盖了从标题浮现Blur Reveal、Words Stagger到氛围强调ShimmerText、GradientWaveText再到趣味点缀Signature、TextMarquee的完整场景。建议从 Words Stagger ShimmerText 组合入手一个负责首屏标题一个负责 CTA 按钮几行代码就能让 Landing Page 惊艳度上一个台阶。更多组件与参数说明可查阅 docs/ 目录下的对应文档。赞分享【免费下载链接】spell-uiA large collection of high-quality React components that you can copy and paste into any project.项目地址https://gitcode.com/gh_mirrors/sp/spell-ui点击查看免费下载相关推荐Inspira UI动画效果实战10个惊艳的文本与背景动画Inspira UI动画效果实战10个惊艳的文本与背景动画 想要为你的网站添加令人惊叹的视觉体验吗Inspira UI动画效果集合为Vue和Nuxt开发者提前端UI组件10个惊艳的Animate Plus网页动画实战案例让你的网站动起来10个惊艳的Animate Plus网页动画实战案例让你的网站动起来 Animate Plus是一款专注于性能和创作灵活性的JavaScript动画库它致力前端SPIRE插件系统完全指南扩展你的身份验证能力SPIRE插件系统完全指南扩展你的身份验证能力 SPIRESPIFFE Runtime Environment是一个功能强大的开源项目它通过插件系统提供认证鉴权云原生网络安全创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考