@elyri/motion 0.0.0-stage → 0.0.1

package/src/components/backgrounds/Contours/Contours.tsx

@@ -0,0 +1,147 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useColorScheme, useShaderCanvas } from '../../../core';
+
+import './Contours.css';
+
+export interface ContoursProps {
+  children?: ReactNode;
+  className?: string;
+  /** 等高线颜色（hex） */
+  color?: string;
+  /** 指针附近等高线的强调色（hex） */
+  highlightColor?: string;
+  /** 等高线密度倍率 */
+  density?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 指针处是否隆起一座小山 */
+  interactive?: boolean;
+}
+
+// 等高线：域扭曲的分形噪声作为缓慢演化的地形，按固定高程间隔取等值线。
+// 用有限差分求像素级梯度，把「到最近等值线的高程差」换算成像素距离，
+// 从而得到处处等宽、抗锯齿的细线；每五条加粗一条计曲线，线过密处自动淡出防摩尔纹。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uLine;
+uniform vec3 uHighlight;
+uniform vec3 uBg;
+uniform float uLevels;
+uniform float uDpr;
+
+const float SCALE = 2.4;
+
+float hash(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + 1.0), u.x), u.y);
+}
+
+float fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  mat2 rot = mat2(0.8, -0.6, 0.6, 0.8);
+  for (int i = 0; i < 3; i++) {
+    v += a * noise(p);
+    p = rot * p * 2.03 + 17.1;
+    a *= 0.5;
+  }
+  return v;
+}
+
+float terrain(vec2 p, vec2 hill, float t) {
+  vec2 warp = vec2(noise(p * 0.55 + vec2(t * 0.08, 3.1)), noise(p * 0.55 + vec2(7.7, -t * 0.07)));
+  float h = fbm(p + warp * 1.3 + vec2(t * 0.035, -t * 0.025));
+  vec2 d = p - hill;
+  return h + 0.2 * exp(-dot(d, d) * 1.6);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float minRes = min(uResolution.x, uResolution.y);
+  float px = SCALE / minRes;
+  vec2 p = frag * px;
+  vec2 hill = uPointer * px;
+  float t = uTime;
+
+  float h = terrain(p, hill, t);
+  float hx = terrain(p + vec2(px, 0.0), hill, t);
+  float hy = terrain(p + vec2(0.0, px), hill, t);
+
+  float f = h * uLevels;
+  float slope = max(length(vec2(hx - h, hy - h)) * uLevels, 1e-5);
+  float fr = fract(f);
+  float dist = min(fr, 1.0 - fr) / slope;
+
+  float index = floor(f + 0.5);
+  float major = 1.0 - step(0.5, abs(mod(index, 5.0)));
+  float halfWidth = mix(0.5, 0.95, major) * uDpr;
+  float line = 1.0 - smoothstep(halfWidth - 0.6, halfWidth + 0.6, dist);
+
+  // 线间距小于数像素时淡出，避免陡坡处糊成一片
+  line *= smoothstep(2.5 * uDpr, 6.0 * uDpr, 1.0 / slope);
+
+  float radius = 240.0 * uDpr;
+  vec2 dp = frag - uPointer;
+  float near = exp(-dot(dp, dp) / (radius * radius));
+
+  vec2 q = (frag - 0.5 * uResolution) / (0.5 * uResolution);
+  float mask = mix(0.4, 1.0, 1.0 - smoothstep(0.45, 1.4, length(q)));
+
+  float alpha = line * mix(0.32, 0.7, major) * (1.0 + 0.9 * near) * mask;
+  vec3 lineColor = mix(uLine, uHighlight, clamp(near * 1.2, 0.0, 1.0));
+  vec3 color = mix(uBg, lineColor, clamp(alpha, 0.0, 1.0));
+
+  color = pow(color, vec3(1.0 / 2.2));
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function Contours({
+  children,
+  className,
+  color = '#8a90a6',
+  highlightColor = '#f08a4b',
+  density = 1,
+  speed = 1,
+  interactive = true,
+}: ContoursProps) {
+  const scheme = useColorScheme();
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform3fv(uniform('uLine'), hexToLinearRgb(color));
+      gl.uniform3fv(uniform('uHighlight'), hexToLinearRgb(highlightColor));
+      gl.uniform3fv(uniform('uBg'), hexToLinearRgb(scheme === 'light' ? '#f9f9f7' : '#0a0b0f'));
+      gl.uniform1f(uniform('uLevels'), 18 * Math.max(0.2, density));
+      gl.uniform1f(uniform('uDpr'), dpr);
+    },
+  });
+
+  return (
+    <div
+      className={cn('elyri-contours', className)}
+      data-scheme={scheme}
+      style={{ '--elyri-contours-color': color } as CSSProperties}
+    >
+      <canvas ref={canvasRef} className="elyri-contours__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-contours__content">{children}</div>}
+    </div>
+  );
+}

package/src/components/backgrounds/Contours/index.ts

@@ -0,0 +1,2 @@
+export { Contours } from './Contours';
+export type { ContoursProps } from './Contours';

package/src/components/backgrounds/DotField/DotField.css

@@ -0,0 +1,44 @@
+.elyri-dot-field {
+  --elyri-dot-field-color: #8a90a6;
+  --elyri-dot-field-gap: 22px;
+  --elyri-dot-field-bg: #0a0a0e;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色：静态点阵 */
+  background:
+    radial-gradient(
+        circle at center,
+        color-mix(in srgb, var(--elyri-dot-field-color) 55%, transparent) 1px,
+        transparent 1.6px
+      )
+      0 0 / var(--elyri-dot-field-gap) var(--elyri-dot-field-gap),
+    var(--elyri-dot-field-bg);
+}
+
+.elyri-dot-field[data-scheme='light'] {
+  --elyri-dot-field-bg: #fafafb;
+}
+
+.elyri-dot-field__canvas {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--elyri-duration-slow) var(--elyri-ease-out);
+}
+
+.elyri-dot-field__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-dot-field__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

package/src/components/backgrounds/DotField/DotField.tsx

@@ -0,0 +1,135 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useColorScheme, useShaderCanvas } from '../../../core';
+
+import './DotField.css';
+
+export interface DotFieldProps {
+  children?: ReactNode;
+  className?: string;
+  /** 点的底色（hex） */
+  color?: string;
+  /** 波峰与指针附近的点所用的强调色（hex） */
+  highlightColor?: string;
+  /** 点阵间距（CSS 像素） */
+  gap?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 指针附近的点是否被放大、推开 */
+  interactive?: boolean;
+}
+
+// 呼吸点阵：规整网格上的细点，被两层缓慢漂移的噪声调制大小与亮度，
+// 像一阵阵微风掠过；指针处形成一片透镜，点被放大、向外轻推并染上强调色。
+// 每个像素检查 3×3 邻格，保证被推开的点不会被格子边界裁掉。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uDot;
+uniform vec3 uHighlight;
+uniform vec3 uBg;
+uniform float uGap;
+uniform float uDpr;
+
+float hash(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+  return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x), mix(hash(i + vec2(0.0, 1.0)), hash(i + 1.0), u.x), u.y);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float gap = uGap * uDpr;
+  float radius = 170.0 * uDpr;
+  float t = uTime;
+  vec2 cell = floor(frag / gap);
+
+  float best = 0.0;
+  float bestTint = 0.0;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 id = cell + vec2(float(i), float(j));
+      vec2 center = (id + 0.5) * gap;
+
+      vec2 away = center - uPointer;
+      float d = length(away);
+      float lens = exp(-d * d / (radius * radius));
+      center += away / max(d, 1.0) * lens * gap * 0.32;
+
+      // 两层噪声：大尺度的「风」+ 小尺度的细碎起伏
+      float wave = noise(id * 0.075 + vec2(t * 0.11, -t * 0.07)) * 0.65
+        + noise(id * 0.21 - vec2(t * 0.05, t * 0.09)) * 0.35;
+      wave = smoothstep(0.3, 0.85, wave);
+
+      float r = max(gap * (0.055 + 0.075 * wave + 0.1 * lens), 0.7 * uDpr);
+      float cover = 1.0 - smoothstep(r - 0.8, r + 0.8, length(frag - center));
+      float alpha = cover * clamp(0.22 + 0.5 * wave + 0.55 * lens, 0.0, 1.0);
+      if (alpha > best) {
+        best = alpha;
+        bestTint = clamp(wave * wave * 0.55 + lens * 0.95, 0.0, 1.0);
+      }
+    }
+  }
+
+  // 四周渐隐，视线聚焦在中央
+  vec2 q = (frag - 0.5 * uResolution) / (0.5 * uResolution);
+  float mask = mix(0.18, 1.0, 1.0 - smoothstep(0.3, 1.3, length(q)));
+
+  vec3 dotColor = mix(uDot, uHighlight, bestTint);
+  vec3 color = mix(uBg, dotColor, best * mask);
+
+  // 指针下方极淡的光晕
+  float glow = exp(-dot(frag - uPointer, frag - uPointer) / (radius * radius * 2.5));
+  color += uHighlight * glow * 0.035;
+
+  color = pow(color, vec3(1.0 / 2.2));
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function DotField({
+  children,
+  className,
+  color = '#8a90a6',
+  highlightColor = '#7c6cff',
+  gap = 22,
+  speed = 1,
+  interactive = true,
+}: DotFieldProps) {
+  const scheme = useColorScheme();
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform3fv(uniform('uDot'), hexToLinearRgb(color));
+      gl.uniform3fv(uniform('uHighlight'), hexToLinearRgb(highlightColor));
+      gl.uniform3fv(uniform('uBg'), hexToLinearRgb(scheme === 'light' ? '#fafafb' : '#0a0a0e'));
+      gl.uniform1f(uniform('uGap'), Math.max(8, gap));
+      gl.uniform1f(uniform('uDpr'), dpr);
+    },
+  });
+
+  return (
+    <div
+      className={cn('elyri-dot-field', className)}
+      data-scheme={scheme}
+      style={{ '--elyri-dot-field-color': color, '--elyri-dot-field-gap': `${Math.max(8, gap)}px` } as CSSProperties}
+    >
+      <canvas ref={canvasRef} className="elyri-dot-field__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-dot-field__content">{children}</div>}
+    </div>
+  );
+}

package/src/components/backgrounds/DotField/index.ts

@@ -0,0 +1,2 @@
+export { DotField } from './DotField';
+export type { DotFieldProps } from './DotField';

package/src/components/backgrounds/DragonScales/DragonScales.css

@@ -0,0 +1,44 @@
+.elyri-dragon-scales {
+  --elyri-dragon-scales-color: #7b3fe4;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色 */
+  background: radial-gradient(
+    120% 90% at 50% 30%,
+    color-mix(in srgb, var(--elyri-dragon-scales-color) 30%, #000),
+    #030206 75%
+  );
+}
+
+/* 浅色主题：兜底底色同步翻转为浅色，避免就绪前闪深色 */
+.elyri-dragon-scales[data-scheme='light'] {
+  background: radial-gradient(
+    120% 90% at 50% 30%,
+    #ffffff,
+    color-mix(in srgb, var(--elyri-dragon-scales-color) 12%, #ffffff) 75%
+  );
+}
+
+.elyri-dragon-scales__canvas {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--elyri-duration-slow) var(--elyri-ease-out);
+}
+
+.elyri-dragon-scales__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-dragon-scales__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

package/src/components/backgrounds/DragonScales/DragonScales.tsx

@@ -0,0 +1,250 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import type { ColorScheme } from '../../../core';
+import { cn, hexToLinearRgb, useColorScheme, useShaderCanvas } from '../../../core';
+
+import './DragonScales.css';
+
+export interface DragonScalesProps {
+  children?: ReactNode;
+  className?: string;
+  /** 鳞片本体色（hex） */
+  color?: string;
+  /** 反光条与鳞缘高光色（hex） */
+  highlightColor?: string;
+  /** 单片鳞宽度（px） */
+  scaleSize?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 鳞片开合幅度 0-1，0 为关闭 */
+  flare?: number;
+  /** 光源是否跟随指针 */
+  interactive?: boolean;
+  /** 强制明暗方案，默认跟随页面主题 */
+  scheme?: ColorScheme;
+}
+
+// 鳞片为尖头鱼鳞形（vesica），侧向排列：鳞尖朝右，左侧鳞片压住右侧。
+// 表面是黑曜石般的高光釉面：窄倒角 + 平缓鼓面，反射一组线形灯带，
+// 灯带在曲面上被拉成贴着轮廓的弧形亮线，鳞缘再勾一道细亮边。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform float uScale;
+uniform vec3 uBase;
+uniform vec3 uHighlight;
+uniform float uFlare;
+uniform float uScheme;
+
+const float R = 0.92;
+const float D = 0.30;
+const float B = 0.8697;
+const float ROW = 0.5;
+const float BEVEL = 0.075;
+const float TAU = 6.28318;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+float sdScale(vec2 p) {
+  p = abs(p);
+  return ((p.y - B) * D > p.x * B) ? length(p - vec2(0.0, B)) : length(p - vec2(-D, 0.0)) - R;
+}
+
+float scaleHeight(vec2 q) {
+  float inner = clamp(-sdScale(q) / BEVEL, 0.0, 1.0);
+  float bevel = sqrt(1.0 - (1.0 - inner) * (1.0 - inner));
+  vec2 d = vec2(q.x / 0.62, (q.y - 0.35) / 0.75);
+  float dome = 0.14 * (1.0 - dot(d, d));
+  float keel = 0.035 * exp(-q.x * q.x / 0.03) * smoothstep(-0.1, B, q.y);
+  return bevel * (0.07 + dome + keel);
+}
+
+// 开合：一道波沿身体方向推进，经过的鳞片依次张开再合拢
+float openAmount(vec2 c) {
+  return uFlare * smoothstep(0.15, 1.0, sin(c.y * 0.45 - uTime * 1.3 + c.x * 0.3));
+}
+
+// 张开时鳞片绕根部翘起，透视上表现为鳞尖伸长、略微变宽
+vec2 warp(vec2 q, float o) {
+  return vec2(q.x / (1.0 + 0.05 * o), (q.y + 0.2) / (1.0 + 0.2 * o) - 0.2);
+}
+
+vec3 aces(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  // 形状空间的 y（鳞尖方向）对应屏幕 x，实现侧向排列
+  vec2 p = frag.yx / uScale;
+  float px = 1.0 / uScale;
+  float t = uTime;
+
+  // 从左到右查找第一片覆盖当前像素的鳞，并记录到压在上面的鳞片边缘的距离。
+  // 阴影与缝隙散光按每片上方鳞分别计算后取最大值，避免在两片张开程度不同的鳞之间出现接缝
+  float j0 = floor(p.y / ROW);
+  vec2 center = vec2(0.0);
+  vec2 cell = vec2(0.0);
+  float sd = -1.0;
+  float cover = 1.0;
+  float shade = 0.0;
+  float gap = 0.0;
+  float open = 0.0;
+  float above = 1.0;
+  float aboveShade = 0.0;
+  float aboveGap = 0.0;
+  float found = 0.0;
+  for (int dj = -2; dj <= 2; dj++) {
+    float j = j0 + float(dj);
+    float offset = mod(j, 2.0) * 0.5;
+    float i0 = floor(p.x - offset + 0.5);
+    float rowMin = 1.0;
+    float rowShade = 0.0;
+    float rowGap = 0.0;
+    for (int di = -1; di <= 1; di++) {
+      vec2 id = vec2(i0 + float(di), j);
+      vec2 c = vec2(id.x + offset, j * ROW);
+      float o = openAmount(c);
+      float d = sdScale(warp(p - c, o));
+      if (found < 0.5 && d < 0.0) {
+        found = 1.0;
+        center = c;
+        cell = id;
+        sd = d;
+        open = o;
+        cover = above;
+        shade = aboveShade;
+        gap = aboveGap;
+      }
+      rowMin = min(rowMin, d);
+      // 上方鳞片张开时投下更宽的阴影，下方透出散射光
+      rowShade = max(rowShade, 1.0 - smoothstep(0.0, 0.16 + 0.3 * o, d));
+      rowGap = max(rowGap, (1.0 - smoothstep(0.0, 0.1 + 0.25 * o, d)) * o);
+    }
+    if (found < 0.5) {
+      above = min(above, rowMin);
+      aboveShade = max(aboveShade, rowShade);
+      aboveGap = max(aboveGap, rowGap);
+    }
+  }
+
+  vec2 q = warp(p - center, open);
+  float seed = hash(cell);
+  float seed2 = hash(cell + 17.31);
+
+  float e = 0.006;
+  vec2 grad = vec2(
+    scaleHeight(q + vec2(e, 0.0)) - scaleHeight(q - vec2(e, 0.0)),
+    scaleHeight(q + vec2(0.0, e)) - scaleHeight(q - vec2(0.0, e))
+  ) / (2.0 * e);
+  vec3 ns = normalize(vec3(-grad, 1.0));
+
+  // 每片鳞各自略微倾斜，再叠一道沿身体方向滚动的起伏，让反光条在鳞间流动
+  float wave = sin(center.y * 0.35 - t * 0.9 + sin(center.x * 0.2 + t * 0.25) * 1.2);
+  ns = normalize(ns + vec3((seed - 0.5) * 0.22, (seed2 - 0.5) * 0.22 + wave * 0.1 - open * 0.45, 0.0));
+  vec3 n = vec3(ns.y, ns.x, ns.z);
+
+  float minRes = min(uResolution.x, uResolution.y);
+  vec3 V = vec3(0.0, 0.0, 1.0);
+  vec3 toLight = vec3(uPointer - frag, minRes * 0.6);
+  float dist = length(toLight);
+  vec3 L = toLight / dist;
+  float atten = 1.0 / (1.0 + 1.5 * pow(dist / minRes, 2.0));
+  float NdotH = max(dot(n, normalize(L + V)), 0.0);
+  float NdotV = max(n.z, 0.0);
+  float soft = pow(NdotH, 24.0) * atten;
+  float ao = mix(0.04, 1.0, 1.0 - shade);
+  float fres = 0.35 + 0.65 * pow(1.0 - NdotV, 2.0);
+
+  // 线形灯带：主灯带穿过光源位置并缓慢转动，副灯带只落在朝向一侧的倒角上
+  vec3 Rf = reflect(-V, n);
+  vec2 toL = (uPointer - frag) / minRes;
+  float a = 0.7 + 0.45 * sin(t * 0.17);
+  vec2 dir = vec2(cos(a), sin(a));
+  float s1 = dot(Rf.xy, dir) - dot(toL, dir) * 1.3 + 0.12 * sin(t * 0.5 + seed * TAU);
+  float line1 = exp(-s1 * s1 / 0.0022);
+  float band1 = exp(-s1 * s1 / 0.09);
+  float s2 = dot(Rf.xy, vec2(-dir.y, dir.x)) - 0.85 - 0.15 * sin(t * 0.33);
+  float line2 = exp(-s2 * s2 / 0.01);
+
+  // 本体近黑，只在朝向光源的区域泛出一层柔和的底色，亮度主要来自反光条
+  vec3 bloom = mix(uBase, uHighlight, 0.35);
+  vec3 color = uBase * (0.006 + 0.5 * soft * mix(0.6, 1.1, seed)) * ao;
+  color += bloom * band1 * 0.3 * atten * ao;
+  color += uHighlight * line1 * 1.4 * fres * (0.3 + atten) * ao;
+  color += uHighlight * line2 * 0.18 * fres * ao;
+
+  // 双线鳞缘：上层鳞的边与被压住的下层鳞的边各一道细亮线，中间留一条暗缝
+  float rimLight = (0.07 + 0.6 * soft + band1 * 0.9) * (1.0 + 1.2 * open);
+  float r1 = (sd + 1.6 * px) / (1.4 * px);
+  float r2 = (cover - 1.8 * px) / (1.4 * px);
+  color += uHighlight * exp(-r1 * r1) * rimLight * 0.9;
+  color += uHighlight * exp(-r2 * r2) * rimLight * 0.35;
+
+  color += mix(uBase, uHighlight, 0.2) * gap * 0.35 * (0.3 + atten + band1);
+
+  color += uHighlight * 0.03 * exp(-pow(length(frag - uPointer) / (minRes * 0.4), 2.0));
+
+  vec2 vc = frag / uResolution - 0.5;
+  float vig = dot(vc, vc);
+
+  if (uScheme > 0.5) {
+    // 浅色：先色调映射，再做亮暗镜像，保留色相 —— 黑曜石鳞面翻转成浅色鳞面，反光条转为深色鳞缘
+    vec3 c = pow(aces(color * 1.3), vec3(1.0 / 2.2));
+    float lum = dot(c, vec3(0.2126, 0.7152, 0.0722));
+    color = clamp(c + (1.0 - 2.0 * lum), 0.0, 1.0) * (1.0 - vig * 0.35);
+  } else {
+    color *= 1.0 - vig * 1.5;
+    color = pow(aces(color * 1.3), vec3(1.0 / 2.2));
+  }
+
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function DragonScales({
+  children,
+  className,
+  color = '#7b3fe4',
+  highlightColor = '#e7a6ff',
+  scaleSize = 110,
+  speed = 1,
+  flare = 0,
+  interactive = true,
+  scheme: forcedScheme,
+}: DragonScalesProps) {
+  const detectedScheme = useColorScheme();
+  const scheme = forcedScheme ?? detectedScheme;
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform1f(uniform('uScale'), Math.max(8, scaleSize) * dpr);
+      gl.uniform3fv(uniform('uBase'), hexToLinearRgb(color));
+      gl.uniform3fv(uniform('uHighlight'), hexToLinearRgb(highlightColor));
+      gl.uniform1f(uniform('uFlare'), Math.min(Math.max(flare, 0), 1));
+      gl.uniform1f(uniform('uScheme'), scheme === 'light' ? 1 : 0);
+    },
+  });
+
+  return (
+    <div
+      className={cn('elyri-dragon-scales', className)}
+      data-scheme={scheme}
+      style={{ '--elyri-dragon-scales-color': color } as CSSProperties}
+    >
+      <canvas ref={canvasRef} className="elyri-dragon-scales__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-dragon-scales__content">{children}</div>}
+    </div>
+  );
+}

package/src/components/backgrounds/DragonScales/index.ts

@@ -0,0 +1,2 @@
+export { DragonScales } from './DragonScales';
+export type { DragonScalesProps } from './DragonScales';

package/src/components/backgrounds/Filaments/Filaments.css

@@ -0,0 +1,38 @@
+.elyri-filaments {
+  --elyri-filaments-color: #5b8cff;
+  --elyri-filaments-bg: #06060a;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色：中央一道柔光 */
+  background:
+    radial-gradient(60% 14% at 50% 50%, color-mix(in srgb, var(--elyri-filaments-color) 30%, transparent), transparent),
+    var(--elyri-filaments-bg);
+}
+
+.elyri-filaments[data-scheme='light'] {
+  --elyri-filaments-bg: #f7f7fa;
+}
+
+.elyri-filaments__canvas {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--elyri-duration-slow) var(--elyri-ease-out);
+}
+
+.elyri-filaments__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-filaments__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}