Motion Atlas

• Motion Gallery：分类卡片 + 可见预览 + 信号评分。
• Template Index：每个模板可独立访问与复用。
• Guidelines：设计原则、性能约束与实施清单。

• Motion Gallery：分类卡片 + 可见预览 + 信号评分。
• Template Index：每个模板可独立访问与复用。
• Guidelines：设计原则、性能约束与实施清单。

• 基于 Next.js App Router 构建，组件化组织动效模板页面。
• 使用统一 token 约束 enter/hover/state-change 节奏。
• 兼顾展示动效与性能：强调 transform / opacity 优先。

• 前端动效合集 / 预览优先

• 动效讨论常常只停留在“概念层面”，缺少可直接查看的落地形式。这个项目把动效能力做成“可预览目录”，降低决策成本。
• 招聘/作品展示：快速展示你能做哪类动效。
• 项目改版前评审：先挑风格，再确定实现路径。

• Format: Web App
• Status: Live

动效讨论常常只停留在“概念层面”，缺少可直接查看的落地形式。这个项目把动效能力做成“可预览目录”，降低决策成本。

• 招聘/作品展示：快速展示你能做哪类动效。
• 项目改版前评审：先挑风格，再确定实现路径。
• 团队复用：把高价值动效模式沉淀成模板资产。

• Motion Gallery：分类卡片 + 可见预览 + 信号评分。
• Template Index：每个模板可独立访问与复用。
• Guidelines：设计原则、性能约束与实施清单。

• Preview first：默认先看效果，不让用户先读长文。
• 结构化信息：每张卡片都带类别、时长、动效包与标签。
• 可迁移：模板全部脱敏，方便替换成真实内容。

• 基于 Next.js App Router 构建，组件化组织动效模板页面。
• 使用统一 token 约束 enter/hover/state-change 节奏。
• 兼顾展示动效与性能：强调 transform / opacity 优先。