设计原则
作品集的交互价值在于帮助用户判断作者能力：项目选择、视觉细节、案例跳转和上下文过渡要比装饰动画更重要。
大理论
作品集不是普通画廊，它同时承担身份展示、作品索引、能力证明和联系转化。动效应让用户更快理解作品之间的差异和作者的设计控制力。
小知识点
- hover 用来解释可点击、预览或状态变化，不要只改变颜色。
- project card 进入详情时保留上下文，避免突然换场。
- 图片、标题、年份、角色和行业标签要形成稳定扫描顺序。
- 安静动效适合 transform/opacity/clip，不适合大量 blur、旋转和延迟。
设计判断
如果动效减少了用户比较项目的努力，它就是有效的；如果它让用户等动画结束才能进入案例，它就是阻力。
实现建议
给项目列表建立统一的 card ratio、焦点状态和 keyboard 入口。hover/focus 的预览可以轻微上移、显露 metadata 或切换一帧关键图，但必须保持布局稳定。
反例/风险
每张作品卡都有不同动效、移动端缺少替代交互、键盘焦点不可见、项目图被遮罩到无法辨认。
案例分析
CSS Design Awards 对 Mark Woodland 的案例描述强调 refined UI、quiet motion 和 sharp interactions，并给出 8.43 的 final judge score。可学习点不是复制它的视觉风格，而是把运动控制在作品选择和精密反馈上，让 UI 本身成为能力证明。
来源链接
CSS Design Awards Mark Woodland: https://www.cssdesignawards.com/sites/mark-woodland/47890/
Agent 指令
作品集动效先服务项目选择和案例进入；实现时同时覆盖 hover、focus-visible、touch 和 reduced-motion。