Interactions Library

10 个可复用交互动效组件，点击各区域的按钮触发演示。
适用于所有风格系统。
01 — Number Counter
animateNumber(el, from, to, duration, format)
0
Issues Closed
$0
Revenue
0%
Accuracy
counter(el, 0, 2847, 1500, v => Math.round(v).toLocaleString())
02 — Progress Bar
4 variants: gradient / solid / green / striped-animated
Gradient87%
Purple65%
Green92%
Striped (animated)Loading...
03 — Card Flip (3D)
perspective:600px + rotateY(180deg)
Token 成本对比
点击翻转查看答案
← Click to flip
-85%
Advisor 策略省下的成本
04 — Typewriter Effect
char-by-char with cursor blink
05 — Gradient Shift (Auto)
background-size:400% + animation:6s infinite
✦ Living Background
06 — Staggered Entry
translateY(16px) + scale(0.95) with delay per card
🎨
Design
Stripe
⚡
Ship
Linear
🔥
Scale
Bold
📐
Refine
Clean
07 — Hover Effects
scale(1.05) + glow shadow on hover
08 — Ring / Donut Chart
SVG circle + stroke-dashoffset animation
0%
Completion
0%
Accuracy
0%
Budget
09 — Glitch Text (Auto)
clip-path + pseudo-element offset animation
DESIGN.SYSTEM
10 — Hover Comparison
flex:1 → flex:1.5 on hover, smooth expand
Before
硬编码颜色值
无动画过渡
单一设计风格
手动截图
After
5 套设计系统
10+ 交互组件
一键切换风格
自动化流水线