Frontend / MotionSelected

Motion Atlas

前端动效合集 / 预览优先

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

  • Motion
  • Preview
  • Templates
  • Guidelines
SelectedWeb AppLiveWebCreated 2026-03-08Updated 2026-04-05
Motion Atlas cover

Open the product

Start with the live surface

Motion Atlas cover

Live preview

部分站点可能因为安全策略无法被嵌入;遇到空白时请用上面的 Open live。

Access

For this type of entry, the strongest content is the live product itself. The notes below are there to frame what matters, not to replace the real experience.

Visual history

Latest state first, previous interface states preserved underneath

This timeline keeps a readable visual memory of the surface, so the newest cover can stay on the project card without erasing what came before.

Project notes

What to know before opening the live product

01

Background

为什么做

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

02

Scenario

应用场景

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

03

Delivery

实现了什么

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

04

Design

设计要点

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

05

Tech

技术实现

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

Flow

The path from entry to completion

This version is best understood as a living product: entry points, feedback loops, and completion states matter as much as the surface design.

Preview / Select / Adapt / Ship

Motion Atlas flowPreviewSelectAdaptShip