About
Candidate A focuses on product thinking, interaction detail, and frontend execution. This template keeps density low and clarity high.
BACK TO LIBRARY
EDITORIAL LITE
Candidate A
Product Narrative / Interaction Design / Frontend Delivery
Case Snapshot
Problem → Decision → Impact. Each case uses one concise metric and one concrete design/engineering tradeoff.
Work Style
Ships iteratively, validates with data, and treats motion as reading rhythm rather than decorative layer.
MOTION CONTRACTS
阅读型页面常用的四种 motion signal。
Headline、reading card、section rhythm、CTA confirmation。
Headline Reveal
When
首屏进入视口，候选人标题区开始被看到时。
Then
标题与副标题先后淡入，先建立身份，再建立能力方向。
Duration
220ms enter / 70ms stagger
Easing
cubic-bezier(0.22, 1, 0.36, 1)
Reduced Motion
移除位移，只保留 opacity 渐显。
Reading Card Focus
When
鼠标悬停或键盘 focus 到内容卡片时。
Then
当前卡片轻微抬升，边框更清楚，帮助招聘者确认阅读焦点。
Duration
140ms translate / border tint
Easing
ease-out
Reduced Motion
去掉位移，只保留边框和对比度变化。
Section Rhythm
When
用户从 About 切到 Case Snapshot 或 Work Style 时。
Then
内容块之间靠留白和轻微进场节奏维持阅读连续性，不做背景级持续动画。
Duration
180ms section settle
Easing
ease-out
Reduced Motion
直接显示目标块，不做过渡。
CTA Confirmation
When
点击或 focus 到规则链接时。
Then
链接提高对比度，明确这是一个继续阅读动作，而不是装饰性文字。
Duration
120ms color shift
Easing
linear
Reduced Motion
保留颜色变化，不引入任何位移。
MOTION PROFILE
Subtle reveal only. No aggressive parallax, no persistent ambient animations. Suitable for interview sharing and recruiter reading.
MATCH GUIDELINES