站内示例
55 个GSAP
时间轴编排与倒放
GSAP 时间轴串起四个阶段，拖动播放头查看任意进度，支持暂停、倒放与缓动切换。
Motion
共享布局过渡
用 Motion 的 layoutId 让同一个元素在两个容器之间连续变形，过渡期间由 Motion 接管真实布局计算。
React Spring
弹簧参数与错峰
调整张力与摩擦系数，React Spring 按真实弹簧方程收敛，多个元素用 useSprings 错峰触发。
Three.js
实例化网格与光照
用 InstancedMesh 绘制数千个实例，配合方向光与环境光渲染，并可拖动改变观察视角。
PixiJS
精灵批处理与混合模式
PixiJS 绘制共享纹理的数千个精灵，可调整数量、纹理和混合模式，观察叠色与帧间耗时。
Matter.js
刚体碰撞与约束
Matter.js 实时解算刚体碰撞、堆叠与重力，鼠标可直接拖拽物体，约束器构成单摆。
Paper.js
矢量布尔运算
对 Paper.js 路径做相交、并集、差集与排除运算，实时看到运算后的真实路径结果。
Anime.js
SVG 路径变形
Anime.js v4 时间轴驱动真实 SVG 属性：路径变形、描边绘出与元素错峰入场。
Lottie Web
矢量动画播放控制
Lottie 播放六图层矢量动画，展示路径描边与错峰关键帧，可逐帧查看、分段播放和倒放。
Swiper
触摸分页轮播
Swiper 处理真实触摸滑动与分页吸附，示例读取实例当前的 realIndex，支持循环与自动播放开关。
Embla Carousel
吸附与滚动吸附点
Embla 计算真实滚动吸附点，切换对齐方式后落点随之改变，并可把幻灯片拖拽重新排序。
dnd-kit
多列拖拽与键盘排序
dnd-kit 驱动多列看板的拖拽排序，支持列内与跨列移动，并可用键盘完成同样的操作。
AutoAnimate
DOM 变更自动补间
点击增删与重排列表元素，AutoAnimate 在 React 更新后接管真实 DOM 差异并补间，无需手写动画。
Moveable
拖拽缩放旋转
Moveable 给元素加上真实的拖动、缩放与旋转手柄，数值随指针实时更新，并可吸附到网格。
ECharts
数据集联动与缩放
ECharts 用一份 dataset 驱动多条系列，图例开关与 dataZoom 缩放会同步作用于同一份数据。
D3
数据连接与比例尺
D3 用 enter/update/exit 三段式真正连接数据，配合线性与分段比例尺和坐标轴，切换数据可看到增删更新计数。
Chart.js
混合图表与交互
Chart.js 在同一画布上组合柱状与折线双坐标轴，并切换图表类型，悬停读取真实数据点。
Recharts
刷选联动图表
Recharts 的 Brush 拖出时间区间后，主图表与其他图表同步筛选，联动的是同一份数据源。
Observable Plot
分箱统计图
Observable Plot 对真实样本做分箱计数并绘制直方图，可切换分箱数量与阈值分布方式。
uPlot
高频时序缩放
uPlot 绘制两万点级别的密集时序，拖动光标选区可真实缩放区间，并支持继续追加数据。
AntV G6
图布局与邻居查看
G6 对真实关系图运行力导向布局，可拖动节点，点击后高亮该节点的全部邻居。
AntV X6
端口连线编辑
X6 节点带真实连接端口，从端口拖到另一节点即可连线，可删除连线并导出当前图结构。
Mermaid
文本转图表
Mermaid 把图表文本解析为 SVG，可在多种图类型间切换，写错语法时显示真实解析错误。
React Flow
节点流程画布
React Flow 提供可拖拽节点与端口连线，并按真实拓扑顺序对节点重新分层排序。
Leaflet
地理图层与缩放
Leaflet 渲染 Natural Earth 真实国界 GeoJSON，图层可切换，填充色随人口属性变化，支持真实地理缩放。
MapLibre GL JS
WebGL 地图图层
MapLibre 用 WebGL 渲染真实国家边界，按洲或人口属性着色，可筛选、定位、缩放与旋转。
Zod
结构校验与错误路径
Zod 用 safeParse 校验嵌套表单，逐个字段展示真实的 issue 路径与错误码。
TanStack Query
缓存去重与失效
TanStack Query 对同一 key 的并发请求真正去重为一次，可手动失效重取，并演示真实 503 后的重试。
SWR
旧数据保留与重验证
SWR 在切换 key 时保留上一份数据直到新数据到达，并区分首次加载与后台重验证。
Zustand
选择器与订阅
Zustand 用选择器订阅状态切片，只有依赖该切片的组件会重渲染，并记录订阅触发的真实次数。
Redux Toolkit
实体适配器与派生
Redux Toolkit 用 entityAdapter 管理大量实体，派生选择器做记忆化统计，并记录真实派发的 action。
Jotai
原子化派生状态
Jotai 由基础原子派生出过滤结果与汇总值，任意基础原子变化都会沿依赖链重算。
htmx
HTML 片段替换
htmx 自行发起请求并把服务端返回的 HTML 片段替换进页面，示例配置禁止求值与脚本标签。
Radix UI
焦点管理与键盘可达
Radix UI 的无样式原语实现真实焦点陷阱、Esc 关闭与关闭后焦点回到触发元素，标签页可用方向键切换。
Ant Design
表格多维筛选
Ant Design 表格同时提供多列筛选、排序与分页，筛选结果与行数由组件真实计算。
Mantine
分步表单校验
Mantine 用 Stepper 组织分步表单，每步校验通过后才能进入下一步，最后汇总提交内容。
Tiptap
结构化文档 JSON
Tiptap 把编辑内容表示为结构化 JSON 文档，实时导出当前文档结构而不只是 HTML。
Lexical
不可变状态与撤销
Lexical 以不可变 EditorState 保存每次编辑，撤销栈记录真实历史深度，可逐步回退。
ProseMirror
事务与步骤
ProseMirror 的每次编辑都是一个真实事务，可展开查看该事务产生的步骤结构。
Quill
Delta 文档模型
Quill 用 Delta 描述文档的全部变更，示例实时展示 ops，并可通过程序组合成新的 Delta。
CodeMirror
代码折叠与补全
CodeMirror 提供真实的语法高亮、代码折叠、搜索与补全，可切换语言与自动换行。
markdown-it
解析器驱动安全渲染
markdown-it 解析 Markdown 后按 token 逐个渲染成安全元素，脚本标签只会被当作文本转义。
Shiki
语法高亮与主题
Shiki 用 TextMate 语法真实着色代码，可切换主题与语言，并展示真实的高亮 token 数量。
KaTeX
公式排版
KaTeX 实时排版数学公式，公式写错时显示真实的 TeX 解析错误而不是静默失败。
remark
Markdown 语法树
Remark 解析出真实的 Markdown 语法树，经净化插件后再转成 HTML，脚本与危险属性会被移除。
Culori
色彩空间插值
Culori 在不同色彩空间间做真实插值，切换空间会得到明显不同的过渡色，并给出对比度读数。
Color.js
色域映射与色差
Color.js 判断颜色是否超出 sRGB 色域并映射回可用范围，同时用 ΔE2000 计算真实色差。
Prettier
独立版格式化
Prettier 的 standalone 版在浏览器里真实格式化代码，切换选项会改变输出，语法错误显示原始报错。
TypeScript
真实类型诊断
TypeScript 编译器在内存中检查虚拟工程，输出真实的错误码、消息与行列位置。
esbuild
WASM 实时编译
esbuild-wasm 在浏览器里编译 TypeScript 与 JSX，可切换压缩与目标版本，并显示真实编译耗时。
D1
固定模板查询与窗口函数
请求本站真实 D1 接口，展示服务端实际执行的 SQL、绑定参数、结果与耗时；数据为虚构示例订单。
Drizzle ORM
关系查询生成的 SQL
本站 Drizzle 接口返回由关系查询真实生成的 SQL 与结果，包含订单与客户的连接与可选条件。
Kysely
组合聚合与编译结果
本站 Kysely 接口编译可组合的聚合查询后交给 D1 执行，门槛变化会真实改变返回结果。
Hono
路由参数与中间件追踪
请求本站 Hono 路由，展示真实响应头、路由参数与两层中间件的执行顺序，并可触发真实 404。
R2
条件读取与分段读取
本站 R2 接口返回对象真实元数据，可用 ETag 条件请求与 Range 字节范围读取，包含 304 与 416 状态。