Landing
Interactive Hero
Ready
BACK TO LIBRARY
GRID SIGNAL
Frontend Showcase Wall
适合“多个前端能力点并列展示”的场景。重点不是让所有卡片一起发光，而是让标签、状态和 hover 焦点保持足够清楚，方便横向查阅。
Product
Feature Walkthrough
Draft
Case Study
Problem → Impact Story
Ready
Dashboard
Signal Summary Cards
Ready
Playground
Shader Experiment
Testing
Docs
Motion Token Handbook
Ready
MOTION CONTRACTS
案例墙最常用的四种 browse signal。
Grid enter、hover spotlight、filter change、status chip。
Grid Enter
When
案例墙第一次进入视口时。
Then
卡片按列或按行轻微错峰出现，让用户先扫到整体结构，再开始局部阅读。
Duration
260ms enter / 40ms stagger
Easing
cubic-bezier(0.22, 1, 0.36, 1)
Reduced Motion
取消错峰和位移，只保留整体淡入。
Hover Spotlight
When
鼠标悬停或键盘 focus 到某张案例卡时。
Then
当前卡片边框更清楚，其余卡片维持安静，不让整面墙一起争抢注意力。
Duration
120ms border / opacity settle
Easing
ease-out
Reduced Motion
只保留边框变化，不做缩放或位移。
Filter Change
When
标签筛选切换或分组变化时。
Then
符合条件的卡片重新组织位置，帮助用户理解“列表变了什么”。
Duration
180ms opacity / reorder
Easing
cubic-bezier(0.2, 0, 0, 1)
Reduced Motion
直接更新集合，不做连续重排动画。
Status Chip
When
卡片状态从 Draft / Ready / Testing 变化时。
Then
状态标签更新颜色与文案，明确告知成熟度，而不额外制造动效噪音。
Duration
100ms color shift
Easing
linear
Reduced Motion
保持静态替换，无附加动画。
MOTION PROFILE
Recommended motion: card hover focus, stagger enter, filtered transitions for tag change. Keep each card interaction under 260ms.
OPEN GUIDELINES