01
先定力，再定形
先把交互的物理性定下来——阻尼、弹性、引力半径——再去画视觉。做反了，就只剩特效。
01主张
屏幕不是海报
我们不追求"看起来动起来"。每一次移动、每一次悬停、每一次点击，都应该回应你的手：光标有重量，滚动有惯性，文字可以被搅动。屏幕不是海报，而是一个可以被推、被拉、被搅动的场。
02
一屏一个记忆点
每个区块只留一个能被记住的动作，其余全部让位。散落各处的微交互，最后谁也记不住。
03
能被关掉才算好
所有位移与缩放都遵守系统的"减少动态效果"。看得见效果，也留得住晕动症用户的体验。
02工坊
五件拿手活
横向滚动 · 每一张卡都带着活的演示
01
GLSL
手写着色器
没有 Three.js，没有框架。只有一块全屏三角和一段自己写的域扭曲噪声：光标在片元里就是引力源，点击会推开一圈涟漪。
移动光标本卡 · 场会被扰动
02
CANVAS 2D
粒子重组
把字形采样成粒子云。指针推开它，松手弹簧归位，点击制造一次冲击波。
推一把
03
SVG 滤镜
液态文字
feTurbulence 做位移场，让字形像被搅动的墨。
悬停加压
04
SCROLL
滚动编排
滚动进度驱动横向位移、字重与倾斜。下面这个表盘跟着你的滚动角速度转。
0px/s
05
MOTION
磁吸微交互
按钮知道自己被靠近了多少，靠得越近，跟得越紧。
03粒子实验室
字形还没成形
粒子从字形的采样点里生出来。换一个词，它们会重新排队。
选一个词
移动光标推开粒子 · 点击制造冲击波 · 粒子会被光标"吸住"再弹回
04液态文字
让字先融化一次
把指针移上去，字会随着位移场变形；拉动滑杆可以手动加力。
05控制台
背景不是图片，是参数
整页的文字浮在一块实时计算的流体场上。下面三个滑杆直接改写片元着色器。
调色板
片元输出
u_warp = 0.55 u_speed = 0.42 u_hue = 0.50 palette = acid frames = --
改动即时生效，不需要刷新。
06档案
实验档案
内部实验编号。把指针放在某一行上，右上会浮出它的纹理标记。
- M-001 引力光标 交互原型 2025
- M-002 流体场 片元着色器 2025
- M-003 粒子字形 Canvas 2D 2024
- M-004 液态排版 SVG 滤镜 2024
- M-005 滚动乐谱 滚动驱动 2023
- M-006 磁吸组件 微交互 2023