Step 01 · Pick One Signal
每个页面先定义一个主要反馈信号，不做“全动效”。
MOTION COLLECTION · PREVIEW FIRST
像素材库一样浏览前端动效
这次把它改成完全独立的动效站入口：先看真实动态预览，再看模板与方法，最后再决定要不要迁移到真实项目。
MOTION BLOCKS
6
CATEGORIES
5
AVERAGE SIGNAL
81/100
LIVE PREVIEW GALLERY
FILTER TAGSNarrativeLandingSystemShowcaseExperimental
Narrative2.8s chain
Cinematic Flow
滚动推进章节，高亮当前叙事帧，适合作品故事线。
Motion Pack · Pin + Scrub + Chapter Snap
GSAP-like rhythmChapter progressPinned panel
SIGNAL SCORE86
OPEN PREVIEW
Landing1.6s enter
Immersive Hero Orbit
首屏建立空间感，用轻量层次建立“进入体验”。
Motion Pack · Parallax + Halo + Reveal
Depth ringLayered headlineHover drift
SIGNAL SCORE79
OPEN PREVIEW
System220ms state
System Card Deck
偏工程感模板，卡片状态变化清晰、可读性高。
Motion Pack · State Change + Card Focus
Data cardStatus motionReadable feedback
SIGNAL SCORE92
OPEN PREVIEW
Showcase180ms hover
Grid Signal Wall
多案例并列展示，快速浏览每种动效能力点。
Motion Pack · Stagger + Hover Spotlight
Portfolio wallTag browsePreview first
SIGNAL SCORE88
OPEN PREVIEW
Showcase120ms micro
Editorial Lite
阅读优先模板，动效节奏克制，适配招聘场景。
Motion Pack · Typography Reveal
Content firstCalm rhythmRecruiter friendly
SIGNAL SCORE74
OPEN PREVIEW
ExperimentalReal-time
Shader Playground
实验向模块，用于验证视觉上限与降级策略。
Motion Pack · Gradient Warp + Cursor Halo
Progressive enhanceGPU heavyFallback required
SIGNAL SCORE67
OPEN PREVIEW
BUILD PLAYBOOK
Step 02 · Tokenize Timing
统一 enter / hover / state-change 时长，避免节奏碎裂。
Step 03 · Add Preview Evidence
每个动效模板都要有可见预览，先看效果再看代码。
STANDARDS & PRINCIPLES
Google Material Motion
Motion 是空间与层级沟通工具
应用方式 · 定义页面元素“从哪来、到哪去、为什么动”
SOURCEApple Human Interface Guidelines
保持连贯与可预测
应用方式 · 交互反馈优先自然，避免突兀跳变
SOURCEVal Head · UI Animation Principles
动效优先服务理解与可用性
应用方式 · 把复杂状态变化转为可感知过程
SOURCEPaul Lewis · High Performance Animations
优先 transform / opacity
应用方式 · 保障 60fps，减少 layout / paint 压力
SOURCENEXT ACTION
Preview → Template → Real Project
你可以先在本页挑一个预览风格，再进入对应模板链接复用结构。确认风格后，再把真实项目内容按同节奏替换进去，确保上线风险低、迭代快。