动态字体Kinetic Typography
文字本身即主角：逐字入场、可变字重、渐变填充、跟随滚动的位移。冲击力强，需保证 reduced-motion 下静态可读。
典型场景品牌片头 · 活动页 · 音乐视觉
编号48
年代2020s Modern
复杂度High
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
文字本身即主角：逐字入场、可变字重、渐变填充、跟随滚动的位移。冲击力强，需保证 reduced-motion 下静态可读。
关键词
Motion textanimated typemoving lettersdynamictyping effectmorphingscroll-triggered text
效果与动效
@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text
设计系统变量
--text-animation-duration1s--letter-delay0.05s--typing-speed100ms--gradient-textlinear-gradient(90deg, #color1, #color2)--morph-duration0.5s配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette
辅色 / Secondary
Accent colors for emphasis, transition colors, gradient text fills
强调色在页面底色上的对比度约 5.6:1，可用于正文与图标。
适用场景
适合 / Best For
- Hero sections
- marketing sites
- video platforms
- storytelling
- creative portfolios
- landing pages
避开 / Do Not Use For
- Long-form content
- accessibility-critical
- data interfaces
- forms
- elderly users
框架兼容
gsapframer-motion
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向极强Very High
渲染成本中animation / blur
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Text animations smooth,
- Prefers-reduced-motion respected,
- Fallback for no-JS,
- Mobile performance ok,
- Typing effect timed,
- Scroll triggers work
CSS / 技术关键词
@keyframes for text animation, background-clip: text, GSAP SplitText, typing effect (steps()), transform on letters, scroll-triggered (Intersection Observer), variable fonts for morphing
AI 提示词
Design with kinetic typography. Use: animated text, scroll-triggered reveals, typing effects, letter-by-letter animations, morphing text, gradient text fills, oversized hero text, text as the main visual element.