feat(display): falling snow in three depth layers with wind, mouse and bullet time; appearance panel; dark glass tinted from the background [CI SKIP]

web/display/src/parallax.ts

@@ -1,9 +1,12 @@
 import { useEffect, type RefObject } from 'react'
+import { getAppearance } from './appearance'
 
 /** 指针在窗口里的位置带来的偏移上限（像素）：鼠标停在窗口边缘时背景偏这么多。 */
 const POSITION_SHIFT = 30
 /** 鼠标移动时额外的晃动上限（像素）：移得越快晃得越多，停下来就慢慢回到位置对应的偏移。两项加起来不能超过 display.css 里背景层向外多出来的边距（130px）。 */
 const SWAY_MAX = 90
+/** 背景最多偏移多少像素（要比 display.css 里背景层向外多出来的边距 130px 小，否则会露边；设置里把幅度调大时靠它兜底）。 */
+const MAX_OFFSET = 125
 /** 每移动 1 像素，晃动增加多少像素。 */
 const SWAY_GAIN = 0.8
 /** 晃动每一帧衰减到多少：越接近 1，晃得越久。 */
@@ -40,7 +43,7 @@ export function useBackgroundParallax(layer: RefObject<HTMLElement | null>) {
       const targetY = baseY + swayY
       x += (targetX - x) * EASE
       y += (targetY - y) * EASE
-      element.style.transform = `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0)`
+      element.style.transform = `translate3d(${Math.max(-MAX_OFFSET, Math.min(MAX_OFFSET, x)).toFixed(2)}px, ${Math.max(-MAX_OFFSET, Math.min(MAX_OFFSET, y)).toFixed(2)}px, 0)`
       const moving = Math.abs(targetX - x) > 0.05 || Math.abs(targetY - y) > 0.05 || Math.abs(swayX) > 0.05 || Math.abs(swayY) > 0.05
       frame = moving ? requestAnimationFrame(step) : 0
     }
@@ -50,12 +53,13 @@ export function useBackgroundParallax(layer: RefObject<HTMLElement | null>) {
     const clamp = (value: number) => Math.max(-SWAY_MAX, Math.min(SWAY_MAX, value))
     const move = (event: PointerEvent) => {
       // 位置：指针在窗口里的位置换成 -1 到 1（背景朝同一个方向偏移，想要反方向就把符号取反）
-      baseX = ((event.clientX / window.innerWidth) * 2 - 1) * POSITION_SHIFT
-      baseY = ((event.clientY / window.innerHeight) * 2 - 1) * POSITION_SHIFT
+      const amount = getAppearance().parallax
+      baseX = ((event.clientX / window.innerWidth) * 2 - 1) * POSITION_SHIFT * amount
+      baseY = ((event.clientY / window.innerHeight) * 2 - 1) * POSITION_SHIFT * amount
       // 晃动：这一次移动了多远，就再推背景一把
       if (lastX !== null && lastY !== null) {
-        swayX = clamp(swayX + (event.clientX - lastX) * SWAY_GAIN)
-        swayY = clamp(swayY + (event.clientY - lastY) * SWAY_GAIN)
+        swayX = clamp(swayX + (event.clientX - lastX) * SWAY_GAIN * amount)
+        swayY = clamp(swayY + (event.clientY - lastY) * SWAY_GAIN * amount)
       }
       lastX = event.clientX
       lastY = event.clientY