Animation Lab

Animation Lab 是一个很小的前端工作台，用来研究 logo 和 mascot 动画。

它不是一个包装完整的动画产品。它更像一个实验台：把静态图形拆成可以控制的部分，然后测试 motion 到底有没有用，包括节奏、入场方式、replay 行为，以及一个 asset 在变得吵之前能带出多少性格。

它具体做什么

现在的版本是一个简单的 preview UI。可以选择不同的 animation study，调整播放速度，然后 replay timeline。

真正有用的是它背后的项目结构。每个 study 都拥有自己的 markup、timeline 和 source material。这样实验可以很容易被丢掉，但如果某个动画真的成立，也能比较干净地复用。

为什么做这个

Logo animation 很容易做过头。一点点运动可以让产品更有生命力；但动作一多，就会变成挡路的装饰。

我想要一个小地方专门测试这条边界。这个 lab 让我直接面对 SVG parts、GSAP timelines 和真实项目素材，而不是只靠静态设计去猜。

工程上长什么样

这个 app 用 Vite、TypeScript 和 GSAP 搭起来，没有 backend。生产环境就是一组静态文件，部署在 Vercel 上。

关键约束是 timeline 必须可以被反复 restart。每个 example 都应该能被加载、重放、调整，而不是依赖页面里藏着的状态。这样它才是一个可重复使用的 animation bench，而不是一次性 demo。