Project Overview
这个系统研究的是:在暗色产品页面里,怎样的动效会让页面“活着”,但不会损失信任感。
Problem
很多技术网站动效太多,看起来很炫但不稳;另一些又太静,完全没有产品正在运转的感觉。
Approach
我把范围限制在几个模式里:入场淡入上移、卡片轻微上浮、首屏缓慢漂移,以及对 reduced motion 的尊重。
Design System
动效不应该是补丁,而应该是系统的一部分。它需要有统一的时长、节奏和边界。
Tech Stack
Motion、Tailwind、CSS 变量,以及一组可复用的组件级交互模式。
Result
最终效果是页面有生命感,但不会抢走内容本身的注意力。
Next Step
继续做和滚动状态联动的 section-level 动效。