DOM Gravity Field / 可拖拽背景倾斜

把文档流
变成重力玩具

这不是 Canvas 截图，也不是假动画。页面里的标题、段落、按钮和卡片都被映射成真实物理刚体。 按住页面空白处拖动，整张网页会倾斜；倾斜足够猛烈时，没有被钉住的 DOM 会从边缘逃逸。

玩法

鼠标或触控板：在页面背景按下并拖拽，拖动方向就是“低处”。松开后重力会慢慢归零。 移动设备：点击右下角按钮授权陀螺仪后，直接倾斜手机。

元素之间会碰撞、旋转、摩擦、互相挤压。绿色“钉住”的区域是静态刚体，其它内容会像一堆散落的纸片。

Matter.js physics Real DOM nodes DeviceOrientation Break the flow
当倾斜强度超过 78% 时，最低处的屏幕边界会打开，元素就可能真的“掉出屏幕”。
🧲

重力方向

拖拽向量被转换为 Matter.js 的 gravity.x / gravity.y，并驱动物体滑动。

📦

DOM 刚体

每个元素先按正常文档流排版，再被抽离到物理层，保留原始尺寸。

🧷

固定锚点

带“钉住”的元素是 static body，它们会变成其它元素堆叠的地形。

🌊

逃逸边界

倾斜过大时，低处墙壁临时消失，于是按钮、卡片和标签会被甩出视口。

这个页面仍然是 HTML

你看到的所有盒子、文字、按钮都是可以被开发者工具选中的 DOM。 物理引擎只负责计算位置和角度，最终仍然用 CSS transform 更新元素。

我被钉住了
0g松手时接近无重力漂浮
78%开启逃逸边界阈值
∞可以掉出屏幕外的距离
DOM不是位图，不是截图