企业官网建设流程全解析

让文字『活』起来：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} className="text-5xl font-bold" />

📄 源码：registry/ui/text/text-reveal.tsx ｜ 注册元数据：registry/ui/text-reveal.json

组件二：character-stagger — 逐字弹簧弹跳（节奏感最强）

效果：文字被拆成单个字符，每个字符以**弹簧物理（spring）**方式从下方小一号的位置弹出——默认stiffness: 300, damping: 18，带轻微过冲回弹，俏皮又有生命力。

适用场景：短标语、Logo 字样、"Welcome" 类欢迎语。

<CharacterStagger text="Amicro" staggerDelay={0.04} />

💡新手提示：文字越长，staggerDelay要越小心，总时长 ≈ 字符数 × 间隔，建议控制在 1.5 秒内以免拖沓。

📄 源码：registry/ui/text/character-stagger.tsx

组件三：blur-text — 模糊渐显（电影级聚焦感）

效果：每个字符初始为 8px 高斯模糊 + 透明，随后像镜头对焦一样逐字由虚变实，easeOut收尾。这是 4 个组件中"高级感"最强的一个，特别适合深色背景。

适用场景：品牌 Slogan、AI 产品宣传语、"科技感"页面开场。

<BlurText text="From blur to focus." initialBlur="8px" />

📄 源码：registry/ui/text/blur-text.tsx

组件四：word-reveal — 逐词浮起（长文案最实用）

效果：以"词"为单元，每个词带scale 0.9 → 1的轻微放大 + 上浮 15px，用easeOutCubic缓动，词与词之间自动保留空格并支持自动换行。

适用场景：长段落导语、副标题、需要保留自然换行的整句文案。

<WordReveal text="Motion makes interfaces memorable." />

选型口诀：行数固定 → text-reveal；短而酷 → character-stagger；要高级 → blur-text；句子长 → word-reveal。

📄 源码：registry/ui/text/word-reveal.tsx

4 个文字动效组件一张表速查

进阶：让文字动效更专业的 3 个小技巧

1. 🎞️ 善用滚动触发：4 个组件都内置whileInView（进入视口才播放一次），把动效文字放在折叠线下方，用户滚到再"亮剑"，比首屏全放完更有效。
2. 🌗 深色/浅色自适应：组件本身不含颜色，直接在className中传text-white/text-black或你的品牌色即可。
3. ⚡️ 性能无忧：动画只操作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-