动画

数值 / 代码

曲线                         名字（时长）            用在
cubic-bezier(.2,.8,.2,1)     通用缓出（140–260ms）   刷刷FLIP补位240、按压按下150；岗岗灯箱开260关200；本站切页进场260
cubic-bezier(.22,1,.36,1)    plan缓出（220ms）       plan对勾、计数跳动、FLIP（--motion-base）
cubic-bezier(.32,.72,0,1)    苹果ease（240–380ms）   card Cover Flow切卡380；plan详情对话框240
cubic-bezier(.4,0,.2,1)      标准（240–500ms）       刷刷标签删除240；小屋主题交叉淡化500
cubic-bezier(.4,0,1,1)       缓入（200–550ms）       离场：本站跨页旧页淡出200；小屋换房间旧页退后550
cubic-bezier(.34,1.56,.64,1) 过冲（420ms）           刷刷按压松手；linear()不认时弹簧的退路
linear(0,.06,.208,…,1.002,1) 弹簧（700ms）           card按压松手（阻尼比.5，过冲约16%）
cubic-bezier(.25,.5,.3,1)    揭开（420ms）           本站切明暗的圆形揭开
cubic-bezier(.2,.7,.3,1)     小屋入场（440ms）       小屋页面入场 viewin
cubic-bezier(.3,0,.16,1)     洇纸（550ms）           小屋换房间纸色洇开
cubic-bezier(.34,.06,.42,1)  写字（1750ms）          小屋开场手写

plan 时长令牌  --motion-fast 140ms / --motion-base 220ms / --motion-slow 320ms；减弱动效时三个全归0

用在哪

本页每条演示的时长和曲线都取自这张表。交互页的按压倾斜、筛选让位、六种弹窗就是这些曲线用在真东西上的样子。

为什么

曲线说的是动作的物理：冒出来的东西一开始最快、落定时最慢；离开的东西慢慢起步、加速走掉；只有手松开的东西才会弹回来。时长跟路程走：按钮的反馈140ms就够，切页要盖住整屏，长一档；超过半秒的只留给不常发生、本身就是仪式的东西（开场写字、走进小屋）。plan把三档时长做成令牌，减弱动效时一处归零。

数值 / 代码

function flipMove(items, mutate) {
  var before = items.map(function (el) { return el.getBoundingClientRect(); });  // 1、量旧位置：含上一轮没走完的位移
  items.forEach(function (el) { var a = running.get(el); if (a) a.cancel(); });  //    量完先撤掉上一轮
  mutate();                                                                     // 2、改 DOM：布局一次到位
  if (reduced()) return;                                                        //    减弱动效：只改不动
  items.forEach(function (el, i) {                                              // 3、量新位置
    var now = el.getBoundingClientRect();
    var dx = before[i].left - now.left, dy = before[i].top - now.top;
    if (Math.abs(dx) < .5 && Math.abs(dy) < .5) return;
    running.set(el, el.animate(                                                 // 4、从旧位置滑回0
      [{ transform: "translate(" + dx + "px," + dy + "px)" }, { transform: "translate(0,0)" }],
      { duration: 240, easing: "cubic-bezier(.2,.8,.2,1)" }));
  });
}
依次补位  plan：容器挂 data-flip-stagger，按文档顺序依次晚30ms（封顶8个）
嵌套      标签里的字按「相对最近一层 data-flip 祖先」算，不然父子各补一遍
收缩      框变矮用 scaleY 只缩边框那一层，字不在那个元素里、不变形
快照      在点击的事件里拍，不在每次渲染里拍：窗口改宽引起的位移不该滑

用在哪

刷刷搜索标签删掉后的补位；plan全部任务的状态筛选让位、笔记标签。交互页筛选标签、可删除标签两条演示就是它。本站收藏页类型单选的让位、搜索框里标签删掉后的补位也是这一套。

为什么

过渡width、left，每一帧都要重新排版，整排跟着重算；FLIP只在开头量两次，中间全是合成器上的transform。「让位」本来就是布局变了，让它一次到位，眼睛看到的连续交给反向位移。

数值 / 代码

/* 反例：每一帧重画一整圈模糊 */
.card { box-shadow: 0 1px 2px rgba(20,30,60,.1); transition: box-shadow .3s, transform .3s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -12px rgba(20,30,60,.4); }

/* 现行：大投影画好放在伪元素上，只动它的 opacity（模糊只画一次） */
.card { position: relative; box-shadow: 0 1px 2px rgba(20,30,60,.1); transition: transform .3s; }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
               box-shadow: 0 18px 36px -12px rgba(20,30,60,.4); opacity: 0; transition: opacity .3s; }
.card:hover { transform: translateY(-4px); }
.card:hover::after { opacity: 1; }

/* 小屋门厅：挂画投影跟着卡片倾斜挪，画在 .set::before 上，动它的 translate3d */
.set::before { box-shadow: 0 16px 34px -14px rgba(74,77,53,.22);
               transform: translate3d(calc(var(--hall-tilt-x, 0) * -9px), calc(var(--hall-tilt-y, 0) * 5px), 0); }

不动    width / height / top / left / clip-path / border-radius / box-shadow
例外    先在屋主台式机那档（2040×1019@1.25、软件渲染）做改前 / 改后帧率 A/B：
        中位 ≤ ×1.15、P95 ≤ ×1.25、长帧（>25ms）≤ 改前 + 2；不过就换写法

用在哪

四个工具都写进了规矩：岗岗「动效口径」、plan第34节、card的CLAUDE.md。小屋门厅挂画的大投影在.set::before上，跟着倾斜挪的是transform。破例的只有两枚进度圆环：刷刷结算分数圈、岗岗材料小圆环，动的是stroke-dashoffset，都先在没显卡那档量过帧率才放行。本站的按压倾斜、复制气泡、弹层也只动这两样；长代码下拉展开动height是写明了的例外（交互页下拉展开）。

为什么

合成器挪一张画好的图几乎不花钱；box-shadow每变一帧，浏览器就要把那一圈模糊重画一遍。屋主台式机没显卡，这一画全落在CPU上。小屋门厅的注释写得直白：动box-shadow本身等于每帧重画一大片模糊，实测掉帧就掉在这；挪到伪元素上用transform移，模糊只画一次。

本页实测（2026-10-08，无头Chrome，左右各12张卡反复浮沉3秒，跑两轮）：A每一帧都在重画，Paint约2500次；光栅在2040×1019@1.25软件渲染下花了277–307ms，有显卡的1440档只花9–10ms；B的Paint约100次、光栅3–12ms。两边的帧间隔都是16.7ms：光栅在别的线程上，这么小的卡还压不垮帧；卡一大、一多（小屋门厅那张整卡、整页的投影），这笔账就落到帧上了。

数值 / 代码

/* 第一道：写在所有 @layer 之外、样式表最末，!important 压得住各处的 transition / animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;       /* 0.01ms不是0：animationend / transitionend 照样来 */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
// 第二道：组件自己判，命中就整段不渲染
if (matchMedia("(prefers-reduced-motion: reduce)").matches) return null;
// CSS 管不到的要自己判：scrollTo({ behavior: "smooth" })、WAAPI、rAF、View Transition
各家    小屋0.01ms；plan 0.01ms + --motion-* 归0；刷刷、本站 animation / transition: none；
        岗岗 transition: none，再点名关几处 animation
        写 none 的，收尾不能只等 animationend：本站每处都是「事件 + 兜底计时器」
按压    不倾斜、不缩放，只原地淡入淡出（本站约定 data-rm="fade" 留住 opacity 过渡）

用在哪

小屋globals.css末尾那一条，开场、门厅倾斜各自再判一道（门厅那道写着「不依赖脚本的那一道」）。刷刷、岗岗、plan、card各写一条全站规则，JS里的FLIP、WAAPI、平滑滚动再各自判。本站在star.css第12节，要原地淡入淡出的元素挂data-rm="fade"。

为什么

一道不够：CSS兜底管不到JS里的动画，组件自判又难免漏掉某个角落的transition。0.01ms和none差在收尾事件上：靠animationend拆遮罩、还滚动的组件，写none就永远等不到，遮罩一直盖着。不渲染和渲染后隐藏差在首帧：后者会先闪一下全屏的白块。

数值 / 代码

打断   关闭中再关 → 立即到终态，不开第二段动画
       打开动画进行中被关 → 直接到终态（关掉）；不做「从半路倒着缩回去」：状态机要多一倍，
       换来的只是0.26秒里的一点连贯（岗岗灯箱）
       走进小屋播放中往上 → 从这一帧原路倒放（在0.447处反向，2.27秒回到顶 = 0.447 × 5秒）
收尾   领头那段动画的 finish 事件，或兜底计时器（时长 + 120ms），谁先到算谁：
       后台标签页里动画时钟可能停着，事件不来
代数   var gen = 0;
       function play() {
         var my = ++gen;                                    // 每次清场换一代
         var done = function () { if (my !== gen) return;  // 旧代的收尾一律作废
                                  … };
         anim.finished.then(done, done);                    // cancel() 会让 finished 走 reject，照样会跑 done
         setTimeout(done, ms + 120);
       }
走完再排  刷刷标签增删后自动重搜：延到补位动画走完再重排结果区（结果卡带磨砂，压在动画上会掉帧）

用在哪

岗岗灯箱、复制气泡、速查卡抽屉；刷刷标签补位；小屋走进小屋的倒放。本站套件里的灯箱（收藏页截图放大）和交互页灯箱演示都加了代数守卫。交互页六种弹窗每一种都走这套收尾。

为什么

倒着走回去，要把动画当成可逆的状态机：每个中间态都得能往两个方向走，代码多一倍。开合只有零点几秒，用户几乎看不见那点连贯，直接到终态就好。走进小屋不一样：5秒、方向由用户自己的滚动决定，走到一半猛地跳回顶上像出了错，所以它值得倒放。

数值 / 代码

// 换类的那一下包进 View Transition；回调里同步把类翻到位
var vt = document.startViewTransition(function () { root.classList.toggle("dark"); });
vt.ready.catch(function () {});        // 被跳过或中止（页面在后台、连点第二下）时会 reject，要接住
vt.finished.catch(function () {});

/* 小屋：切明暗0.5s */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 本站：换强调色260ms（只在换色那一下挂 vt-fade，跨页过渡的时长不受影响） */
html.vt-fade::view-transition-group(root),
html.vt-fade::view-transition-old(root),
html.vt-fade::view-transition-new(root) { animation-duration: 260ms; }
不支持 / 减弱动效   直接切

用在哪

小屋顶栏的墙壁开关切明暗（开关本身见交互页墙壁开关）；本站换强调色。本站切明暗另做了圆形揭开，见下一组「切明暗」。

为什么

一页几百个元素，各自写的transition时长、曲线、属性都不一样，还有根本没写过渡的，换主题时有的先到有的后到、有的直接跳。快照淡化只动两张图的opacity，时长统一、一次到位，也不用回头给每个元素补transition。

数值 / 代码

// card 查看器：一个量 a 驱动倾角、缩放、光团（0静止，1压到底）
var down = press.target > 0;
var k = down ? 900 : 219;                          // 按下要快；松手 ω = √219 ≈ 14.8 rad/s
var c = down || reduced ? 2 * Math.sqrt(k) : 14.8; // 按下与减弱动效：临界阻尼不回弹；松手阻尼比 c / (2√k) = .5
for (var left = dt; left > 0; left -= 1 / 240) {    // 一帧最长 .06s，直接一步积，ω = 30那档会发散
  var h = Math.min(left, 1 / 240);
  press.v += (k * (press.target - press.a) - c * press.v) * h;
  press.a += press.v * h;
}
过冲   e^(−πζ / √(1 − ζ²))：ζ = .5 → 16.3%
CSS    同一条弹簧在 .7s 里等分取29个点：
       transition: transform .7s cubic-bezier(.34,1.56,.64,1);   /* 不认 linear() 的退路，写在前面 */
       transition: transform .7s linear(0,.06,.208,.4,.6,.784,.935,1.047,1.119,1.155,1.163,1.149,
         1.123,1.091,1.059,1.03,1.007,.99,.979,.974,.974,.976,.981,.986,.991,.996,1,1.002,1);

用在哪

card画廊正中那张与查看器里的卡，按压松手。交互页按压倾斜的演示、本站总览章节目录和收藏卡片的松手，都是这条linear()。小屋漂浮叶子被推开后回位也挂在弹簧上：刚度5.8、阻尼比.85，回位不来回晃。

为什么

弹簧的两个数比曲线的四个控制点好说话：刚度定快慢（周期2π/√k），阻尼比定弹几下。按下要快、不能抖，用临界阻尼；松手要有弹回来的手感，阻尼比.5只过冲一次、约16%。JS里那份和CSS里那份是同一组参数，画廊和查看器手感一样。本页核过：k=219、c=14.8在0.7秒里等分取29个点，和card那条linear()逐点最大差0.001。

数值 / 代码

var vt = document.startViewTransition(function () { setMode(next); });
vt.ready.then(function () {
  var r = Math.ceil(Math.hypot(Math.max(x, w - x), Math.max(y, h - y)));   // 到最远那个角
  var at = " at " + x + "px " + y + "px)";
  document.documentElement.animate(
    { clipPath: ["circle(0px" + at, "circle(" + r + "px" + at] },
    { duration: 420, easing: "cubic-bezier(.25,.5,.3,1)", pseudoElement: "::view-transition-new(root)" });
});
/* 关掉默认的交叉淡入：新画面整张盖在旧画面上 */
html.vt-reveal::view-transition-old(root),
html.vt-reveal::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
圆心   鼠标、触摸取点击点；键盘（click 的 detail 为0）取控件中心
连点   上一个还没走完就 skipTransition()，新的从头来
接住   ready / finished / updateCallbackDone 三个 promise 都接，跳过时会 reject

用在哪

本站侧栏底部和「更多」面板里的「浅色 / 深色 / 自动」。只在模糊档位full、没开减弱动效、页面看得见时做，其余直接切（下一条）。

为什么

圆盖住的面积随半径的平方涨：半径匀速涨，看起来是越铺越快、最后一下猛地盖满，所以半径要前快后慢。太陡也不行，(.32,.72,0,1)一半时长半径已到95%，剩下一半时间几乎不动。420ms：圆要跨过整条视口对角线（2040的屏上约2300px），比260ms的局部过渡长一档，又不到半秒、不拖手。

数值 / 代码

/* 每页都有：正文进场，侧栏不动。fill 只取 backwards：走完不留 transform（不然 .page 一直是 fixed 后代的参照） */
.page { animation: page-in 260ms cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
html.jump-in .page { animation-name: page-fade; }              /* 带 #锚点：只淡入，落点不偏8px */

/* 跨页：两页都写了才生效（file:// 同目录也行） */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
html.vt-nav .side { view-transition-name: star-side; }         /* 只在跨页那一下起名 */
html.vt-nav .page { animation: none; }                         /* 别两套进场叠在一起 */
html.vt-nav::view-transition-old(root) { animation: vt-out 200ms cubic-bezier(.4,0,1,1) both; }
html.vt-nav::view-transition-new(root) { animation: vt-in 260ms cubic-bezier(.2,.8,.2,1) both; }

// boot.js（<head> 里同步执行）：file:// 下开关再挂一份构造样式表
var s = new CSSStyleSheet();
s.replaceSync("@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }");
document.adoptedStyleSheets = document.adoptedStyleSheets.concat([s]);
// full 档、没开减弱动效时再挂 <link rel="expect" href="#main" blocking="render">：新页首帧等到 #main
// 旧页 pageswap、新页 pagereveal：不是 full 或开了减弱动效 → vt.skipTransition()

用在哪

本站每一页：点侧栏换一页就看得到，这一页里任何指向别页的链接也是。

为什么

侧栏是「同一个地方」，换的只是正文；侧栏跟着闪一下，像整个应用重开了一遍。8px、260ms是「换了一页」最小的提示，不拖手。屋主是双击打开的，Chrome在file://同目录也做跨文档过渡，所以照开，只是开关要可靠。

数值 / 代码

function canVT() {
  return typeof document.startViewTransition === "function"
    && !matchMedia("(prefers-reduced-motion: reduce)").matches
    && blurTier() === "full"              // 自动：有显卡 full、没显卡 lite；没测过先按 lite
    && !document.hidden;
}
function transition(kind, origin, change) {
  if (!canVT()) { change(); return null; } // 直接切：换色照样发生，只是不拍快照
  …
}
// 跨页两侧同一个判据：旧页 pageswap、新页 pagereveal 里不满足就 vt.skipTransition()，三个 promise 先接住

用在哪

本站外观里的「背景模糊：自动 / 开 / 关」决定档位；自动按WebGL的failIfMajorPerformanceCaveat判有没有显卡。切明暗、换强调色、跨页三种过渡都走这一个判据。

为什么

屋主台式机没显卡，整屏快照再合成在那台上就是一次长帧。误判成full，代价是没显卡那台每切一下卡一下；误判成lite，只是少一个圆。往后果轻的那边错，所以没测过也先按lite。页面在后台时浏览器本来就会跳过，还会让ready走reject，干脆先判。

数值 / 代码

<svg viewBox="0 0 720 260">
  <defs><mask id="hwSweep" maskUnits="userSpaceOnUse" x="-200" y="-200" width="1200" height="700">
    <rect class="mask"/></mask></defs>
  <text class="text font-hand" x="360" y="178" text-anchor="middle" mask="url(#hwSweep)">Hey, Ysevan!</text>
</svg>
.text { font-size: 132px; fill: rgba(74,77,53,0); stroke: var(--xw-olive-deep); stroke-width: 1.15;
        stroke-dasharray: 900; stroke-dashoffset: 900; }
.mask { x: var(--sx, 6px); y: -140px; height: 460px; width: 0; fill: #fff; }
.isPlay .mask { animation: sweep 1.75s cubic-bezier(.34,.06,.42,1) .12s forwards; }  /* 同时长、同延迟、同缓动 */
.isPlay .text { animation: draw 1.75s cubic-bezier(.34,.06,.42,1) .12s forwards, settle .4s ease-out 1.87s forwards; }
@keyframes sweep  { to { width: var(--sw, 700px); } }
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes settle { to { fill: rgba(74,77,53,1); stroke-width: .5; } }
// 量字：等 document.fonts.ready（1200ms 兜底）再 getBBox()，抛错就用 CSS 默认值
mask.style.setProperty("--sx", (b.x - 10) + "px");      // 起笔余量
mask.style.setProperty("--sw", (b.width + 34) + "px");  // 盖住感叹号与收笔
len = (b.width + b.height) * 2.2;                       // dasharray / dashoffset
时序  第0.12秒起笔 → 1.87写完 → 2.27填色定格 → 2.35起淡出（opacity、translateY(-22px)，.5s cubic-bezier(.4,0,.2,1)）→ 2.80收起
跳过  点击 / Esc / Enter / Space / 滚动意图（wheel、touchmove 全 passive，绝不 preventDefault），走 .26s 快速淡出

用在哪

小屋门厅，每次回门厅都播（2026-09-01起不再每会话只播一次）。遮罩起淡出那一刻给<html>盖data-intro-leaving，门厅跟着掀开的纸浮上来落定（0.75秒，opacity .35→1、上移18px、缩放.986→1）。

为什么

描边写字其实是两条动画：draw把dashoffset收到0让笔画显形，sweep把遮罩从左往右拉开让字依次出现；三个参数不一致，就会看到笔画在遮罩外提前露头，或者整段字一起描。字体子集没加载完时量到的是回退字体的宽度，遮罩会太窄、或者dasharray算错让笔画一次蹦出来，所以要等fonts.ready。第五种跳过（滚动意图）修的是「进门厅第一件事滑滚轮，什么都不会发生」：页面锁着，滚动又不在跳过方式里。

数值 / 代码

.xw-veil { position: fixed; inset: 0; z-index: 30; }            /* 盖住 main，藏在顶栏40下 */
.xw-veil__wash, .xw-veil__rim {                                 /* 两个超尺寸圆盘，以视口中心为原点缩放 */
  position: absolute; left: 50%; top: 45%; width: 250vmax; height: 250vmax;
  margin-left: -125vmax; margin-top: -125vmax; border-radius: 50%; }
.xw-veil__wash { background: radial-gradient(circle,                    /* 软边画在渐变里 */
  hsl(var(--background)) 0%, hsl(var(--background)) 62%, hsl(var(--background) / .92) 72%, hsl(var(--background) / 0) 86%); }
.xw-veil__rim  { background: radial-gradient(circle,
  transparent 58%, hsl(var(--xw-olive-2) / .1) 68%, hsl(var(--xw-olive-2) / .05) 76%, transparent 84%); }
[data-phase="in"] .xw-veil__wash  { animation: xwveilin .55s cubic-bezier(.3,0,.16,1) both; }
[data-phase="in"] .xw-veil__rim   { animation: xwveilin .55s cubic-bezier(.34,0,.22,1) .05s both; }  /* 水推着颜料走 */
[data-phase="out"] .xw-veil__wash,
[data-phase="out"] .xw-veil__rim  { animation: xwveilout .6s cubic-bezier(.3,.1,.3,1) both; }
@keyframes xwveilin  { from { transform: scale(.01); } to { transform: scale(1); } }
@keyframes xwveilout { from { transform: scale(1); opacity: 1; } to { transform: scale(1.06); opacity: 0; } }
html[data-room-leaving] main { animation: roomexit .55s cubic-bezier(.4,0,1,1) both; }   /* 旧页退后 */
@keyframes roomexit { to { opacity: .45; transform: scale(.985); } }
序列  洇开550ms → 路由在纸下切换 → 路由真的变了才干去600ms；首次加载、前进后退、减弱动效不播

用在哪

小屋顶栏「小屋 / 工具 / 随笔」之间换页。

为什么

前两版是「门」：先是色块那种材质的双开门板（合门0.45秒、开门0.75秒带透视外摆），再是纸色格心门，都被屋主裁定不够优雅。当时查过一圈主流转场（错列色块、方向扫屏、交叉淡化），都偏科技作品集的气质，放进水彩小屋里违和。转场不该造一个新物件，该说站点自己的语言：水彩。加载的那一瞬藏在纸下面，原来换页时那一下空白也没有了。

数值 / 代码

playMs = 5000;  progress = head / playMs      // 播放头匀速：每帧按夹过的时长推进
放大：0    → 0.17  0 → 0.85s   rush(p / .17) = (1 − e^(−3t)) / (1 − e^(−3))，指数插值；起步就有速度
推近：0.17 → 0.30  → 1.50s    匀速，画最多再大18%（3.4 → 4.0倍）；纸从门那一点洇开，power1.in（尾巴加速）
穿门：0.30 → 0.31  → 1.55s    纸底下50ms
干去：0.31 → 0.39  → 1.95s    power1.out（一上来就见光）
屋里：0.31 → 1     → 5.00s    sine.out：纸掀开时1.57倍均速在走，到墙角速度归零
打断  播放中再往下：不理；播放中往上：从这一帧原路倒放；顶上往上、墙角往下：交给原生滚动
锁    播放的5秒锁 <body> 的 overflow-y（不锁 <html>）；一次 preventDefault 都没有
硬要求  整条播放里除了两端，没有一段速度是0

用在哪

小屋门厅：首屏仍是那张名片、一像素不变，第一次往下滚才起播；静态档（无脚本、减弱动效、≤900、WebGL不可用）没有跑道。

为什么

原来是擦洗：进度＝scrollY÷跑道长。一格滚轮约100px，整条跑道1170px只有十来格，触控板惯性又忽快忽慢，节奏被输入设备定死了。5秒是屋主给的4–6秒取中间：再快洇纸看不清，再慢屋里成了走不完的走廊。屋主原话要「ease-in-out」，可两层缓动相乘会让起播0.45秒、倒放0.8秒内看不出在动（「我滚了没反应」），所以ease-in-out由节拍给、播放头匀速，这是那一轮唯一没照字面做的地方，理由写进了文档。

数值 / 代码

smoothstep(t) = t² (3 − 2t)     两端速度为0：跟着手走
ease-out                        起点速度最大：一碰滚轮内容就往前窜一下
linear                          匀速：到头一下刹住
窗口  上一段在交接点 b 之前淡完、下一段在 b 之后才淡入，首尾相接
      （梯形窗，触及半径 = 中心间距的一半）
工具页  文案窗22svh：两套字只在交接正中4svh里同时出现，那时两边都 < .025
        右栏图窗32svh、重叠24svh：图允许交叠，正中两边各剩 .32，任何一刻都至少有一件东西看得见

用在哪

小屋工具页那条sticky轨道（五层叠在同一格里交接）、随笔页门面退场、走进小屋里画、洇纸、屋子三样东西的交接。门厅那段已删的四幕文案是栽跟头的地方，结论留下来给后面所有页用。

为什么

窗口交叠时两段字各以约1/3的不透明度同时画出来，一个字都读不清。ease-out的速度峰在起点：手指刚一动，内容已经窜出去一大截，像被推了一把，不像跟着手走。

数值 / 代码

.hall { perspective: 900px; perspective-origin: 50% 42%; }
.set  { transform-style: preserve-3d;
        transform: rotateY(calc(var(--hall-tilt-x, 0) * 2.8deg)) rotateX(calc(var(--hall-tilt-y, 0) * -1.9deg)); }
.pot  { transform: translate3d(calc(var(--hall-tilt-x, 0) * -8px), calc(var(--hall-tilt-y, 0) * -5px), 70px); }  /* 近 */
.vine { transform: translate3d(calc(var(--hall-tilt-x, 0) * 6px), calc(var(--hall-tilt-y, 0) * 3px), 0); }      /* 远 */
.set::before { transform: translate3d(calc(var(--hall-tilt-x, 0) * -9px), calc(var(--hall-tilt-y, 0) * 5px), 0); } /* 挂画投影 */
// hall-depth：只写两个变量；阻尼在 JS 里，按真实帧间隔算（高刷屏和60Hz手感一致）
cur += (target - cur) * (1 - Math.exp(-dt / 55));   // tau 55ms
差值 < .0008 → 停 rAF；只在 (hover: hover) and (pointer: fine) 上做；减弱动效不做
实测摆幅  垂柳 +10、卡片 −11、盆栽 −27 px（1440视口、卡宽710）

用在哪

小屋门厅那张一体卡片（色块＋水彩画）；工具页门面、随笔页门面是同一张卡。

为什么

第一版1.6°/1.1°配1200的透视，卡片四角全程只挪5.7px，静态截图前后几乎分不出来：克制过头就是等于没做。方向第一版写反过：垂柳比卡片走得还多，看起来像挂在卡片前面。阻尼不用CSS transition：transition每一帧都被新值打断重来，跟指针连续移动叠在一起是一种说不清的黏滞感；55ms是跟得紧又有重量的一档。

数值 / 代码

漂   driftX = (6 + 6·近) · (sin(.48t + p) + .4 · sin(.79t + 2p))    周期约13s、8s
     driftY = (4 + 4·近) · sin(.57t + 1.7p)                         约11s
     sway   = .07 rad · sin(.67t + p)                               约9s
     p = 序号 × 2.399（黄金角撒开，免得一起摆）；远的幅度小、漂得慢至多40%
推   距离170px以内斥力800 · (1 − .5·远近) · (1 − d/170)² px/s²
     弹簧 k = 5.8（周期约2.6s）、阻尼比 .85（回位不来回晃）；横向位移顺带转 .004 rad/px
停   指针停7s后「风」以 .6s 时间常数停下；速度与合力都近0 → 不再请求下一帧
     标签页隐藏、离开视口、这一层已经淡出也停
长度 都乘「卡宽 / 708.08」；角度和时间不乘

用在哪

小屋门厅、工具架门面、随笔门面三页（2026-09-21扩到三页）。永远在卡片之下，不压画和字。夜里叶子怎么画见色彩页夜里的画。

为什么

像屋外的风带着几片叶子：不是粒子、不是光晕，数量个位数到十几。几个周期互不成整数倍，相位又撒开，十几片永远不会一起摆。装饰的东西不能一直在画：没显卡那台每一帧都是CPU的活，风停了画面就静止、不出帧，指针一动再接着漂，相位接着上次、不跳。

数值 / 代码

/* 片元着色器：入夜 = 压暗偏冷 + 门窗里的暖光 + 8秒极缓呼吸 */
float breath = 1.0 + 0.05 * sin(uTime * 0.785);        // 2π / 0.785 ≈ 8s
vec3 night = dusk + lit * warm * (glow * 1.45 * breath) + warm * glow * glow * 0.20 * breath;

// 走进小屋 render()：返回 true = 下一帧还要画
var breathing = detail !== "soft" && night > 0.001;    // 精简档不呼吸
if (progress === posed && !breathing && !nightMoving) return false;   // 停稳：循环退出
…
return breathing || nightMoving;
白天  静止不画；夜里只要 night > 0 → 每帧都走（rAF 在后台自动暂停）

用在哪

门厅画内景深与走进小屋的场景，都只在夜里。

为什么

夜里的配方是「压暗偏冷＋门窗里的暖光＋8秒呼吸」：灯是活的，屋子才像有人。精简档砍它不是为了省那一点帧，是「停稳」能不能成立的前提：软件渲染上停在墙角后要按325万像素重画一张清楚的；呼吸留着，这一帧没机会发生，画出来也会被下一帧按走动密度盖掉，一块铺满视口的画布还会一直画下去。