动效
滚动动画、hover 效果、磁性按钮、页面过渡、视差滚动、动态排版、shader 渐变、卡片堆栈
滚动动画
Fade Up、Fade Scale、Stagger List
向下滚动查看动画效果，滚回来可重复触发
↓ 向下滚动
Fade Up
从下方淡入，滚动进入视口时触发
Fade In + Scale
从小到大淡入，视觉层次递进
Stagger List
列表项 1 — 延迟 0ms 依次出现
列表项 2 — 延迟 100ms 依次出现
列表项 3 — 延迟 200ms 依次出现
列表项 4 — 延迟 300ms 依次出现
列表项 5 — 延迟 400ms 依次出现
Hover 效果
渐变流光、弹性放大、3D 倾斜、光标高光
边框渐变流光
Hover 显示渐变边框
弹性放大
Spring 物理弹性缩放
3D 倾斜
鼠标跟随的 3D 透视效果
光标跟随高光
鼠标位置的径向渐变光斑
磁性按钮
鼠标靠近时向光标方向偏移跟随
→
页面过渡
AnimatePresence 的 fade / slide / scale 切换
切换效果：
概览
这是概览页面。展示产品的核心功能和关键指标摘要。
视差滚动
多层元素以不同速度移动，创造深度感
视差滚动
多层元素以不同速度移动，创造深度感
滚动页面查看视差效果
动态排版
逐字出现、打字机效果、单词高亮轮播
字母逐个出现
StyleVault 样式展示库
打字机效果
单词高亮轮播
让产品开发 更快
Shader Gradient
参考 2026 年初 shader/animated gradient 趋势的动态背景
Shader-driven Surface
Aurora Gradient
Animated gradient fields
Soft particle haze
Interactive hero backdrop
Card Stack
近期常见的堆叠卡片叙事与可拖拽切换交互
Interaction
Swipe the top layer
Intentional Density
Stack, then reveal
Narrative Layer
Scroll into the signal
把关键结论先抬到最上层，再把细节折叠进后续卡片，适合首页 hero 或产品故事流。
拖拽卡片或点击切换
1 / 4
Stacked Storytelling
卡片堆栈交互
近期社区里很常见的 pattern：用分层卡片制造节奏，再让顶层承担交互。