文字动画合集：SmoothUI 23 种文字动效组件全盘点

文字动画合集SmoothUI 23 种文字动效组件全盘点【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothui想让网页标题活起来SmoothUI 这套基于 React、Tailwind CSS、Shadcn/ui 与 Motion 构建的开源组件库内置了 23 种开箱即用的文字动画组件从打字机到波浪文字、从乱码解码到视差滚动覆盖了几乎所有常见的文字动效场景。本文为你逐一盘点这些文字动效组件的玩法与适用场景帮你快速找到最适合自己项目的那一款。SmoothUI 文字动画组件是什么SmoothUI 是一个专门收集高颜值 丝滑动画组件的开源项目组件全部基于 MotionFramer Motion驱动天然支持prefers-reduced-motion无障碍降级对性能与可访问性都很友好。文字动效组件大多集中在 packages/smoothui/components 目录下每个组件都是独立目录内部包含源码与配置可以按需引入不会拖累整体包体积。23 种文字动效组件全盘点我把这 23 个组件按动效类型分成四类方便你按场景快速对号入座。一、逐字逐词入场类让标题有仪式感这类组件最适合做页面首屏的主标题、Landing 页大标题字符逐个浮现会带来强烈的视觉节奏。组件效果亮点PerCharacterRise字符从下方无模糊上升Apple tvOS 风格缓动适合 40px 大标题BottomUpLetters字母自下而上依次入场活泼的入场节奏TopDownLetters字母自上而下依次入场与 BottomUp 形成反差StaggerFromCenter从中心向两侧交错展开庄重、聚焦StaggerFromEdges从两侧向中心交错汇合有聚拢的戏剧感PerWordCrossfade逐词交叉淡入淡出适合段落式文案LineByLineSlide逐行滑入适合多行标语FadeThrough淡出 位移组合通用性最强的入场ShortSlideDown短距离下滑入克制、精致ShortSlideRight短距离右滑入横向节奏例如 PerCharacterRise 通过逐字符motion.span配合交错延迟实现源码在 per-character-rise/index.tsx支持stagger、delay、triggerOnView等参数滚动到可视区域才触发播放非常适合长页面。二、循环动态文字类让品牌词活起来这类组件不需要用户交互会自己持续播放很适合品牌 Slogan、Banner 中的点缀文字。WaveText波浪文字每个字符像水面波浪一样上下起伏支持amplitude、staggerDelay参数调节波幅与节奏源码见 wave-text/index.tsx。TypewriterText打字机经典的逐字敲出效果支持speed调速与loop循环播放适合终端风、对话风场景。ShineText闪耀文字一道金属光泽在文字表面反复扫过适合高级感的关键词强调代码在 shine-text/index.tsx。ShimmerSweep微光扫过与 ShineText 类似但更柔和常作为加载提示或价格高亮。ScrambleHover乱码解码鼠标悬停时文字先变成随机乱码再逐帧解码成原文科技感拉满源码见 scramble-hover/index.tsx官方还配套了教程文章。三、滚动与视差类跟随滚动讲故事滚动驱动的文字动画能让长页面阅读体验大幅升级也是当前大厂官网最爱用的手法。ScrollRevealParagraph滚动揭示段落段落中的每个词跟随页面滚动进度逐词点亮利用useScroll与useTransform把滚动进度映射到每个词的透明度上实现丝滑的逐词显影效果源码见 scroll-reveal-paragraph/index.tsx。DepthParallaxWords深度视差文字字符带有纵深视差滚动时产生 3D 错落感。RevealText文字揭示支持上下左右四个方向的位移 淡入可配置triggerOnView滚动触发是最灵活的通用揭示组件。MaskRevealUp遮罩上移揭示利用遮罩裁剪实现文字被擦出的效果很有质感。四、缩放与模糊过渡类营造氛围感当你想让文字温柔地出现而不是冲进来时用这组组件准没错。MicroScaleFade微缩放淡入极小幅度的缩放 淡入几乎察觉不到动画却足够精致。SoftBlurIn柔和模糊进入文字从模糊逐渐变清晰电影感十足。SpringScaleIn弹簧缩放进入借助 Motion 的弹簧物理文字带一点弹性地弹入活泼俏皮。BlurOutUp模糊上移文字模糊并向上淡出常用于过渡衔接。如何快速上手这些文字动效组件上手成本极低无需从零手写动画逻辑。克隆项目后进入组件目录即可查看每个组件的完整源码与配置项git clone https://gitcode.com/gh_mirrors/sm/smoothui然后参考 packages/smoothui/components/index.ts 的统一导出按需引入你需要的文字动画组件即可。所有组件都封装好了 Motion 动画细节你只需要传入文案和少量参数几行代码就能得到一套专业级的文字动效。总结SmoothUI 的这 23 种文字动效组件覆盖了入场、循环、滚动、过渡四大主流场景全部基于 Motion 实现兼顾性能与无障碍。无论你是做产品官网、营销落地页还是个人作品集都能在这里找到合适的文字动画方案。建议先收藏这份盘点做项目时按类型快速检索效率直接翻倍 【免费下载链接】smoothuiSmoothUI is a collection of beautifully designed components with smooth animations built with React, Tailwind CSS, Shadcn/ui and Motion项目地址: https://gitcode.com/gh_mirrors/sm/smoothui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考