一根文件 · 十个模块 · 无依赖

滚动、指针、折叠、过场,一层接住。

按需生效:页面上没有对应标记的模块自己退出,不会多跑一毫秒。全程尊重 prefers-reduced-motion,关掉 JS 就是一张静态页。

看场看折叠

计数器与错峰

进入视口才起跑,离开不重跑。

0个模块

0个运行时依赖

0根文件

0帧预算(ms/帧)

过程轨道

丢进容器

标好 data-reveal / data-process,别的不用管。

共享一条滚动帧

所有滚动监听合并进同一个 rAF,不各扫一遍。

进视口才动

IntersectionObserver 优先,顺手补一次视口预扫。

倾斜 · 磁吸 · 漂移

TILT

±6°/±8° 上限,两个 CSS 变量喂给 ::after 的径向光。

MAGNETIC

按中心偏移算 ±7px,离开即复位,不抢原生 focus。

PARALLAX

按卡片中心到视口的距离,写一个 --py 给图片。

折叠

关掉 JS 会怎样?

整层是渐进增强:html 上没有 js-motion / motion-ready,所有动效规则都不命中,页面就是静态排版;折叠退回原生 details/summary。

会不会影响首屏?

一条 script defer 即可;场只有一块 2D canvas,粒子数按面积夹在 26–88,离开视口与切后台都停帧。

怎么接自己的主题切换?

把「应用主题」的函数挂到 window.motionKit.applyTheme,切换按钮点一下就会走圆形揭示的 View Transition。