Frontend / Motion

Motion Atlas

前端动效合集。先看预览，再选模板，落地到项目。

返回项目打开线上产品
角色
前端动效合集 / 预览优先
时间
持续迭代 · 2026-06-26
平台
Web

前端动效合集 / 预览优先

01 / Background

为什么做

动效讨论常常停在概念层，看不到实质。这个目录让你先预览再决定，不用猜。
Motion Atlas current product surface
当前产品界面

Motion Atlas 当前公开展示界面。

01

02 / Scenario

应用场景

  • 招聘/作品展示：快速展示你能做哪类动效。
  • 项目改版前评审：先挑风格，再确定实现路径。
  • 团队复用：把高价值动效模式沉淀成模板资产。
01预览型合集首页
02脱敏模板库
03动效规范与性能清单
项目事实

项目当前最重要的交付与判断。

02

03 / Delivery

实现了什么

  • Motion Gallery：分类卡片 + 可见预览 + 信号评分。
  • Template Index：每个模板可独立访问与复用。
  • Guidelines：设计原则、性能约束与实施清单。
01Preview
02Select
03Adapt
04Ship
产品流程

从输入到结果的核心使用路径。

03

04 / Design

设计要点

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

05 / Tech

技术实现

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