让文字『活』起来Amicro文字动效4组件text-reveal/character-stagger/blur-text完整教程【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-Amicro是一个由Motion驱动的开源 React 微交互组件库其中的文字动效组件text-reveal、character-stagger、blur-text、word-reveal可以让页面标题、宣传语逐行滑入、逐字弹出、由模糊变清晰用 4 个组件、零配置成本让文字「活」起来。本教程面向新手带你 5 分钟上手全部 4 个组件。为什么你的页面需要文字动效静态文字是信息动态文字才是体验。想象一下落地页首屏主标题逐行滑入抓住第一眼注意力营销文案大字逐个弹跳出现制造节奏感产品展示标语从雾中浮现blur 淡入像电影镜头一样聚焦Amicro 的 4 个文字动效组件全部基于硬件加速的motion动画复制到代码即拥有copy-to-code没有运行时依赖负担且自带进入视口才播放的滚动触发能力。30 秒快速开始一行命令安装文字动效组件Amicro 深度集成了shadcn/ui Registry推荐通过命名空间方式安装任选其一npx shadcn add amicro/text-reveal npx shadcn add amicro/character-stagger npx shadcn add amicro/blur-text npx shadcn add amicro/word-reveal安装前需在components.json中配置amicro命名空间详见 README.md 的 shadcn/ui Registry Integration 章节。环境要求Node.js ≥ 18、React 18/19、Tailwind CSS 3/4、已安装motion或framer-motion。如果你想在本地运行完整演示站点可以克隆仓库后启动开发服务git clone https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions- cd Amicro--Micro-transitions- npm install npm run dev上图这种雾气渐散、山景显影的画面正是 blur-text 组件的视觉效果原型——从失焦到清晰如同镜头缓缓推近。组件一text-reveal — 逐行滑入揭示大标题首选效果文字按行\n换行从下方overflow-hidden的遮罩中依次升起使用easeOutExpo缓动曲线收尾干脆利落是高端落地页大标题的标配。适用场景多行 Hero 标题、章节标题、宣传语分段展示。TextReveal text{Make your site\nfeel alive.} duration{0.8} staggerDelay{0.15} classNametext-5xl font-bold /参数默认值说明text必填传入字符串\n处自动分行duration0.8每行滑入时长秒staggerDelay0.15行与行之间的间隔秒 源码registry/ui/text/text-reveal.tsx 注册元数据registry/ui/text-reveal.json组件二character-stagger — 逐字弹簧弹跳节奏感最强效果文字被拆成单个字符每个字符以**弹簧物理spring**方式从下方小一号的位置弹出——默认stiffness: 300, damping: 18带轻微过冲回弹俏皮又有生命力。适用场景短标语、Logo 字样、Welcome 类欢迎语。CharacterStagger textAmicro staggerDelay{0.04} /参数默认值说明staggerDelay0.015字间间隔调大如 0.04~0.1打字机感更强yOffset15字符升起的高度pxduration0.4弹簧结算时长上限新手提示文字越长staggerDelay要越小心总时长 ≈ 字符数 × 间隔建议控制在 1.5 秒内以免拖沓。 源码registry/ui/text/character-stagger.tsx组件三blur-text — 模糊渐显电影级聚焦感效果每个字符初始为 8px 高斯模糊 透明随后像镜头对焦一样逐字由虚变实easeOut收尾。这是 4 个组件中高级感最强的一个特别适合深色背景。适用场景品牌 Slogan、AI 产品宣传语、科技感页面开场。BlurText textFrom blur to focus. initialBlur8px /参数默认值说明initialBlur8px初始模糊半径调大更有雾散开的感觉staggerDelay0.02字间间隔duration0.5单字清晰化时长 源码registry/ui/text/blur-text.tsx组件四word-reveal — 逐词浮起长文案最实用效果以词为单元每个词带scale 0.9 → 1的轻微放大 上浮 15px用easeOutCubic缓动词与词之间自动保留空格并支持自动换行。适用场景长段落导语、副标题、需要保留自然换行的整句文案。WordReveal textMotion makes interfaces memorable. /选型口诀行数固定 → text-reveal短而酷 → character-stagger要高级 → blur-text句子长 → word-reveal。 源码registry/ui/text/word-reveal.tsx4 个文字动效组件一张表速查组件拆分粒度动画风格默认时长最佳场景text-reveal按行遮罩中滑入0.8s/行多行大标题character-stagger按字符弹簧弹跳0.4s/字短标语、Logoblur-text按字符模糊聚焦0.5s/字科技感、深色页word-reveal按词放大上浮0.5s/词长句、副标题进阶让文字动效更专业的 3 个小技巧️ 善用滚动触发4 个组件都内置whileInView进入视口才播放一次把动效文字放在折叠线下方用户滚到再亮剑比首屏全放完更有效。 深色/浅色自适应组件本身不含颜色直接在className中传text-white/text-black或你的品牌色即可。⚡️ 性能无忧动画只操作transform、opacity、filter等可硬件加速属性且源码极短单文件约 60 行复制后想改缓动曲线、换弹性参数都一目了然。 想看看更多文字动画的灵感演示站的文字动画目录数据含 shimmer、typewriter、3D 翻转等 50 种效果在 src/data/textAnimations.ts其预览渲染逻辑见 src/components/text/AnimatedText.tsx。写在最后让文字「活」起来只需要 4 个组件✅ text-reveal逐行揭示稳重大方✅ character-stagger逐字弹跳活泼俏皮✅ blur-text模糊聚焦电影质感✅ word-reveal逐词浮起长文友好一行npx shadcn add命令你的下一个页面标题就能开始呼吸了 【免费下载链接】Amicro--Micro-transitions-项目地址: https://gitcode.com/gh_mirrors/am/Amicro--Micro-transitions-创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考