Frontend / Motion相关项目

Motion Atlas

前端动效合集 / 预览优先

把前端动效做成可浏览的合集:先看预览,再选模板,再落地到真实项目。

  • Motion
  • Preview
  • Templates
  • Guidelines
相关项目Web 应用在线可用Web创建于 2026-03-08更新于 2026-04-05
Motion Atlas cover

打开产品

先从线上界面开始

Motion Atlas cover

在线预览

有些站点会因为安全策略拒绝 iframe 嵌入;如果这里是空白,请直接使用上面的“打开线上版本”。

访问方式

对这类项目来说,最强的信息仍然在线上产品本身。下面的说明只负责帮你抓重点,不是替代真实体验。

视觉历史

先看最新状态,旧版本继续保留在下面

这条时间线保留了界面的可读记忆,所以卡片可以展示最新封面,同时不抹掉更早的状态。

项目说明

在打开线上产品前,先看这些

01

背景

为什么做

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

02

场景

应用场景

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

03

交付

实现了什么

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

04

设计

设计要点

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

05

技术

技术实现

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

流程

从进入到完成的路径

这类项目最适合按“真实产品”去理解:入口、反馈循环和完成状态,与表层界面同样重要。

Preview / Select / Adapt / Ship

Motion Atlas flowPreviewSelectAdaptShip