跳到正文

CRAFT

工艺

这里放的是效果的「证据」，不是效果本身。每个都标注了用了什么、为什么留， 以及为什么大部分动效被拒绝了。

SoftAurora

WebGL 片元着色器。/me 首屏用，空闲后才挂载，滚出首屏就随组件卸载。 减少动效偏好下直接换成静态渐变，不加载着色器。

移过它，就解出来

DecryptedText

逐字用 Canvas 度量字形宽度，避免解密过程中字距跳动。 首页只用它解一个词，每 7 秒一次——整句闪烁会变成噪音。

GradientWaves

2D Canvas 叠加正弦波。全站只用在一处：404 页。 一个一年见一次的效果，才配得上常驻。

ScrollExpand 需要一个很长的滚动距离才能演示完整过程， 在展位里跑只会得到一帧。所以这里不嵌入 —— 想看完整效果请到首页首屏。

ScrollExpand（未嵌入）

把滚动进度映射成 `width / height / border-radius` 的插值。 「不为了展示而展示」也是这条工艺的一部分。

3D TILT

把指针移上来

倾斜量跟随指针位置，越靠边缘转得越多。

TiltCard

指针位置映射成 `rotateX` / `rotateY`，写进 CSS 变量直接改 style —— 每帧 setState 在低端机上会把 pointermove 拖成掉帧。悬停时过渡 120ms 跟手， 离开时 400ms expo 回弹：同一段 transform，两段手感，靠一个 `:hover` 覆盖时长就够。

MagneticButton

感应区比按钮本身大一圈，位移是「指针到中心的距离 × 0.34」—— 越靠边缘拉力越大， 所以它是磁吸而不是跟随。回弹完全交给 expo 曲线，不用 JS 写 spring： 物理感来自曲线形状，不来自逐帧积分。

GLOW BORDER

光沿边缘匀速走一圈

GlowBorder

边框是一维的，用不着 SVG 或 canvas。把角度注册成 `@property` 可插值变量， conic-gradient 的旋转就整段跑在合成器上，主线程零成本。渐变里留两段透明， 光才有头和尾 —— 匀速旋转也因此带上了速度感。

Dock

指针距离驱动的弹性放大。它原本是全站导航，现在只是展品： Dock 的隐喻是「应用切换」，而阅读站需要的是「检索」。

设计系统

下面这些不是文档，是真的在跑的那套令牌。切换右上角主题，色板会跟着变。

色彩 · 语义命名

bg
页面底色
surface
卡片
line
分隔
fg
正文
muted
次要
brand
可交互
decision
决策
warn
注意
unverified
待验证

组件里只允许出现语义名，不允许出现 indigo-500 这类色板名 —— 换主题时不需要改任何组件。

字阶 · 只有 400 / 500 两个字重

  • display可读性49px
  • h1可读性31px
  • h2可读性25px
  • h3可读性20px
  • body可读性17px
  • meta可读性13px
  • label可读性11px

动效 · 三档时长，可点播

hover / focus
主题、展开
入场 / 切页

时长写进 `--motion-*` 变量，组件不许自己编。 `prefers-reduced-motion` 下退化为静态首帧，而不是把速度调快。

栅格 · 两个容器宽度

  • 1280px列表 / 工艺
  • 760px阅读列（笔记 / 复盘 / 留言）
为什么是 760：推导过程