DOM·GRAVITY
A Playable Document
当文档流
失去重力时
这是一个普通的网页：标题、段落、按钮、卡片。但是它的世界有一个隐藏的开关—— 抓住背景拖一下，整个页面就会倾斜，所有元素会顺着重力滑落、堆挤，甚至掉出屏幕。 在手机上倾斜你的设备也可以触发同样的效果。
拖拽 把鼠标按在页面空白的网格背景上，朝任意方向拖动。世界会倾斜， DOM 元素会脱离它们原本的位置，开始受到对应方向的"重力"作用。
堆叠 它们会撞到屏幕的边界、撞到彼此，像桌面上的卡牌一样向"低处"挤压堆叠。 只有标记为 钉住 的元素会留在原地。
排版即物体
每一个 div、每一段文字，都是一个有质量的刚体。它们有真实的边界，可以碰撞。
PHYSICS倾斜即重力
页面的旋转角度即重力方向。倾斜得越狠，加速度越大，世界越混乱。
GRAVITY钉死的卡片
这张卡被标记为 pinned，无论你怎么倾斜世界，它都纹丝不动。
FIXED逃逸的元素
如果某个元素被甩出屏幕足够远，它就会被认定为"逃逸"——按重置可让它回家。
ESCAPE传统的网页里，CSS 决定一切布局，元素安分守己地排列在文档流中。 这个实验把"文档流"本身变成一种可以被打破的状态——一旦你倾斜世界， 排版规则瞬间失效，元素变成桌面上散落的物件。
你可以试试点击右上角的「震一下」按钮，给世界一个剧烈的横向冲击； 或者切到「零重力」，让所有元素静静悬浮，再慢慢倾斜，看它们如何缓缓滑动。