• Y AnimationPlayground
研究工作台
  • 实验总览
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

动画示例库

按媒介和运行时索引可执行 Demo;已有多个作品的类型使用独立 Tab 集合,单作品达到规模后再升级。

可运行

每个条目都必须能在本地直接播放、交互或逐帧检查。

按类型归档

已有多个作品的类型维护集合页和 Tab;单作品先进入总览,避免为尚未形成的分类制造空壳页面。

保留结论

示例不仅展示效果,还要说明原理、运行成本、适用范围与失败边界。

3 套实现
交互动效对照
用同一套产品叙事比较原生 CSS/SVG、Motion 与 GSAP 的编排方式。

DOM · SVG

  • CSS + SVG
  • Motion
  • GSAP
打开分类
1 个旗舰作品
数据与矢量叙事
观察 D3 几何、矢量运行时与 Canvas 如何在同一个交互故事中分工。

D3 · Canvas · Vector

  • Living Data Story
打开分类
2 个示例
Three.js 与 ThreeUI
把空间界面、社区组件和完整 WebGL 页面放进独立 Tab,逐项验证运行边界。

Three.js · DOM · WebGL

  • Sylva / Living Green
  • Character Carousel
打开分类
4 个示例
Shader 与 GPU
从无状态像素函数到多 Pass 反馈和方言适配,在同一页面按 Tab 切换工作台。

WebGL 2 · GLSL

  • 像素函数
  • 粒子架构
  • 状态与反馈
  • 方言适配
打开分类
2 个示例
代码视频
集中审阅可 seek 的纯 HTML 动画与 HyperFrames、Remotion 时间模型对照。

HTML · CSS · SVG · GSAP

  • Campaign Agent
  • HyperFrames vs Remotion
打开分类