@elyri/motion 0.0.0-stage → 0.0.1

package/src/components/backgrounds/Halo/Halo.tsx

@@ -0,0 +1,122 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useColorScheme, useShaderCanvas } from '../../../core';
+
+import './Halo.css';
+
+export interface HaloProps {
+  children?: ReactNode;
+  className?: string;
+  /** 光环的两种渐变色（hex），沿圆周缓慢流转 */
+  colors?: [string, string];
+  /** 光环半径，相对画面高度的倍率 */
+  size?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 光环中心是否轻微偏向指针 */
+  interactive?: boolean;
+}
+
+const DEFAULT_COLORS: [string, string] = ['#8fb4ff', '#e7c6ff'];
+
+// 画面中央一圈极细的光环：半径随角度轻微起伏，两束高光沿圆周流动，
+// 外侧只有很淡的辉光，其余区域保持近黑，留白克制。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform float uSize;
+uniform float uInteractive;
+uniform vec3 uBg;
+uniform float uScheme;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+// 深色下光线叠加发亮；浅色下改为按色相吸收底色，像墨色细线落在纸面上
+vec3 shade(vec3 bg, vec3 light) {
+  if (uScheme > 0.5) {
+    float amount = max(max(light.r, light.g), light.b);
+    vec3 tint = light / max(amount, 1e-4);
+    return bg * exp(-amount * 1.6 * (1.0 - tint * 0.8));
+  }
+  return bg + 1.0 - exp(-light * 1.4);
+}
+
+void main() {
+  vec2 res = uResolution;
+  vec2 p = (gl_FragCoord.xy - 0.5 * res) / res.y;
+  vec2 pointer = (vec2(uPointer.x, res.y - uPointer.y) - 0.5 * res) / res.y;
+  p -= pointer * 0.06 * uInteractive;
+  float t = uTime;
+
+  float r = length(p);
+  float a = atan(p.y, p.x);
+
+  float radius = 0.3 * uSize;
+  radius += 0.010 * sin(a * 3.0 + t * 0.5) + 0.006 * sin(a * 5.0 - t * 0.8);
+  float d = abs(r - radius);
+
+  float line = exp(-d * d * 60000.0);
+  float glow = exp(-d * 22.0) * 0.28 + exp(-d * 6.0) * 0.05;
+
+  // 两束高光沿圆周以不同速度流动
+  float f1 = pow(0.5 + 0.5 * cos(a - t * 0.45), 6.0);
+  float f2 = pow(0.5 + 0.5 * cos(a + 2.4 + t * 0.28), 10.0);
+  float flow = 0.12 + f1 + 0.6 * f2;
+
+  vec3 tint = mix(uColor1, uColor2, 0.5 + 0.5 * sin(a + t * 0.2));
+  vec3 light = tint * (line * 1.1 + glow) * flow;
+  // 圈内极淡的雾光
+  light += uColor1 * 0.015 * exp(-r * r / (radius * radius) * 1.5);
+
+  vec3 color = pow(clamp(shade(uBg, light), 0.0, 1.0), vec3(1.0 / 2.2));
+  color += (hash(gl_FragCoord.xy + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function Halo({
+  children,
+  className,
+  colors = DEFAULT_COLORS,
+  size = 1,
+  speed = 1,
+  interactive = true,
+}: HaloProps) {
+  const [first = DEFAULT_COLORS[0], second = DEFAULT_COLORS[1]] = colors;
+  const scheme = useColorScheme();
+
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform('uColor1'), hexToLinearRgb(first));
+      gl.uniform3fv(uniform('uColor2'), hexToLinearRgb(second));
+      gl.uniform1f(uniform('uSize'), Math.max(0.1, size));
+      gl.uniform1f(uniform('uInteractive'), interactive ? 1 : 0);
+      gl.uniform3fv(uniform('uBg'), hexToLinearRgb(scheme === 'light' ? '#f8f8fa' : '#010102'));
+      gl.uniform1f(uniform('uScheme'), scheme === 'light' ? 1 : 0);
+    },
+  });
+
+  return (
+    <div
+      className={cn('elyri-halo', className)}
+      data-scheme={scheme}
+      style={{ '--elyri-halo-color': first } as CSSProperties}
+    >
+      <canvas ref={canvasRef} className="elyri-halo__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-halo__content">{children}</div>}
+    </div>
+  );
+}

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

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

package/src/components/backgrounds/MeshGradient/MeshGradient.css

@@ -0,0 +1,43 @@
+.elyri-mesh-gradient {
+  --elyri-mesh-gradient-c0: #6e6af0;
+  --elyri-mesh-gradient-c1: #f472b6;
+  --elyri-mesh-gradient-c2: #fbbf77;
+  --elyri-mesh-gradient-c3: #38bdf8;
+  --elyri-mesh-gradient-base: #0b0b12;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色：四角色团的静态近似 */
+  background:
+    radial-gradient(60% 70% at 18% 22%, var(--elyri-mesh-gradient-c0), transparent 70%),
+    radial-gradient(60% 70% at 82% 28%, var(--elyri-mesh-gradient-c1), transparent 70%),
+    radial-gradient(60% 70% at 78% 82%, var(--elyri-mesh-gradient-c2), transparent 70%),
+    radial-gradient(60% 70% at 22% 78%, var(--elyri-mesh-gradient-c3), transparent 70%), var(--elyri-mesh-gradient-base);
+}
+
+.elyri-mesh-gradient[data-scheme='light'] {
+  --elyri-mesh-gradient-base: #f7f7fa;
+}
+
+.elyri-mesh-gradient__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-mesh-gradient__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-mesh-gradient__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

package/src/components/backgrounds/MeshGradient/MeshGradient.tsx

@@ -0,0 +1,195 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useColorScheme, useShaderCanvas } from '../../../core';
+
+import './MeshGradient.css';
+
+export interface MeshGradientProps {
+  children?: ReactNode;
+  className?: string;
+  /** 自定义内联样式，可用于控制尺寸 */
+  style?: CSSProperties;
+  /** 四个色团的颜色（hex） */
+  colors?: [string, string, string, string];
+  /** 胶片颗粒强度，0 为关闭 */
+  grain?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 指针处的色彩漩涡是否跟随指针 */
+  interactive?: boolean;
+}
+
+const DEFAULT_COLORS: [string, string, string, string] = ['#6e6af0', '#f472b6', '#fbbf77', '#38bdf8'];
+
+// 流光渐变：四个色团沿互不相关的缓慢轨迹漂移，定位坐标先经过两级
+// 分形噪声域扭曲（q → r），色团边界被拉成缓缓流淌、相互卷入的彩色丝带；
+// 颜色在 Oklab 空间混合（过渡不发灰）。沿流场等值线叠一层缎面光泽，
+// 暗部轻微压低，形成丝绸般的起伏与流光。指针处色彩被轻轻卷成漩涡。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor0;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform vec3 uBase;
+uniform float uGrain;
+
+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);
+}
+
+vec3 toOklab(vec3 c) {
+  float l = 0.4122214708 * c.r + 0.5363325363 * c.g + 0.0514459929 * c.b;
+  float m = 0.2119034982 * c.r + 0.6806995451 * c.g + 0.1073969566 * c.b;
+  float s = 0.0883024619 * c.r + 0.2817188376 * c.g + 0.6299787005 * c.b;
+  l = pow(max(l, 0.0), 1.0 / 3.0);
+  m = pow(max(m, 0.0), 1.0 / 3.0);
+  s = pow(max(s, 0.0), 1.0 / 3.0);
+  return vec3(
+    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s
+  );
+}
+
+vec3 fromOklab(vec3 c) {
+  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;
+  float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;
+  float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;
+  l = l * l * l;
+  m = m * m * m;
+  s = s * s * s;
+  return vec3(
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s
+  );
+}
+
+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(1.6, 1.2, -1.2, 1.6);
+  for (int i = 0; i < 4; i++) {
+    v += a * noise(p);
+    p = rot * p + vec2(11.3, 7.9);
+    a *= 0.5;
+  }
+  return v;
+}
+
+float blob(vec2 uv, vec2 center) {
+  vec2 d = uv - center;
+  return exp(-dot(d, d) * 3.2);
+}
+
+void main() {
+  vec2 frag = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y);
+  float minRes = min(uResolution.x, uResolution.y);
+  vec2 half_ = 0.5 * uResolution / minRes;
+  vec2 uv = (frag - 0.5 * uResolution) / minRes;
+  vec2 pointer = (uPointer - 0.5 * uResolution) / minRes;
+  float t = uTime * 0.1;
+
+  // 指针漩涡：绕指针旋转采样坐标，越靠近转得越多，色彩被卷进去
+  vec2 dm = uv - pointer;
+  float swirl = exp(-dot(dm, dm) / 0.07);
+  float angle = swirl * 1.1;
+  uv = pointer + mat2(cos(angle), sin(angle), -sin(angle), cos(angle)) * dm * (1.0 - swirl * 0.12);
+
+  // 两级域扭曲的流场：q 缓慢漂移，r 在 q 的基础上再扭一次，得到液体般的卷流
+  vec2 p = uv * 1.5;
+  vec2 q = vec2(fbm(p + vec2(0.0, t)), fbm(p + vec2(5.2, 1.3) - t * 0.8));
+  vec2 r = vec2(fbm(p + 2.6 * q + vec2(1.7, 9.2) + t * 1.2), fbm(p + 2.6 * q + vec2(8.3, 2.8) - t));
+  vec2 w = uv + (r - 0.5) * 0.9 + (q - 0.5) * 0.3;
+
+  float tb = uTime * 0.12;
+  vec2 p0 = half_ * vec2(-0.55 + 0.35 * sin(tb * 0.63), -0.45 + 0.35 * cos(tb * 0.51));
+  vec2 p1 = half_ * vec2(0.55 + 0.30 * cos(tb * 0.57 + 1.0), -0.35 + 0.40 * sin(tb * 0.71 + 2.0));
+  vec2 p2 = half_ * vec2(0.45 + 0.35 * sin(tb * 0.49 + 3.0), 0.50 + 0.30 * cos(tb * 0.61 + 1.5));
+  vec2 p3 = half_ * vec2(-0.50 + 0.35 * cos(tb * 0.67 + 4.0), 0.45 + 0.35 * sin(tb * 0.53 + 0.5));
+
+  float w0 = blob(w, p0);
+  float w1 = blob(w, p1);
+  float w2 = blob(w, p2);
+  float w3 = blob(w, p3);
+  float wb = 0.05;
+
+  vec3 lab = (toOklab(uColor0) * w0 + toOklab(uColor1) * w1 + toOklab(uColor2) * w2 + toOklab(uColor3) * w3 + toOklab(uBase) * wb)
+    / (w0 + w1 + w2 + w3 + wb);
+
+  // 缎面流光：沿流场等值线的柔和亮带随时间滑过，谷底微暗，带出丝绸般的层次
+  float band = sin((r.x * 1.4 - r.y + q.x * 0.6) * 11.0 + t * 3.0);
+  float gloss = smoothstep(0.15, 1.0, band);
+  lab.x += gloss * gloss * 0.06 - (1.0 - smoothstep(-1.0, 0.1, band)) * 0.025;
+  lab.x += swirl * 0.025;
+  // 高光处略降饱和，像光打在织物表面
+  lab.yz *= 1.0 - gloss * gloss * 0.12;
+
+  vec3 color = pow(clamp(fromOklab(lab), 0.0, 1.0), vec3(1.0 / 2.2));
+
+  // 胶片颗粒 + 抖动，消除大面积渐变的色带
+  float n = hash(frag + fract(uTime * 7.31) * 113.0) - 0.5;
+  color += n * (uGrain * 0.07 + 1.0 / 255.0);
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function MeshGradient({
+  children,
+  className,
+  style,
+  colors = DEFAULT_COLORS,
+  grain = 0.35,
+  speed = 1,
+  interactive = true,
+}: MeshGradientProps) {
+  const scheme = useColorScheme();
+  const [c0 = DEFAULT_COLORS[0], c1 = DEFAULT_COLORS[1], c2 = DEFAULT_COLORS[2], c3 = DEFAULT_COLORS[3]] = colors;
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform('uColor0'), hexToLinearRgb(c0));
+      gl.uniform3fv(uniform('uColor1'), hexToLinearRgb(c1));
+      gl.uniform3fv(uniform('uColor2'), hexToLinearRgb(c2));
+      gl.uniform3fv(uniform('uColor3'), hexToLinearRgb(c3));
+      gl.uniform3fv(uniform('uBase'), hexToLinearRgb(scheme === 'light' ? '#f7f7fa' : '#0b0b12'));
+      gl.uniform1f(uniform('uGrain'), Math.max(0, grain));
+    },
+  });
+
+  return (
+    <div
+      className={cn('elyri-mesh-gradient', className)}
+      data-scheme={scheme}
+      style={
+        {
+          '--elyri-mesh-gradient-c0': c0,
+          '--elyri-mesh-gradient-c1': c1,
+          '--elyri-mesh-gradient-c2': c2,
+          '--elyri-mesh-gradient-c3': c3,
+          ...style,
+        } as CSSProperties
+      }
+    >
+      <canvas ref={canvasRef} className="elyri-mesh-gradient__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-mesh-gradient__content">{children}</div>}
+    </div>
+  );
+}

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

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

package/src/components/backgrounds/PixelVortex/PixelVortex.css

@@ -0,0 +1,44 @@
+.elyri-pixel-vortex {
+  --elyri-pixel-vortex-color: #ff4d12;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色 */
+  background: radial-gradient(
+    circle at 50% 45%,
+    color-mix(in srgb, var(--elyri-pixel-vortex-color) 45%, #000),
+    #0a0706 70%
+  );
+}
+
+/* 浅色主题：兜底底色同步翻转为浅色，避免就绪前闪深色 */
+.elyri-pixel-vortex[data-scheme='light'] {
+  background: radial-gradient(
+    circle at 50% 45%,
+    color-mix(in srgb, var(--elyri-pixel-vortex-color) 18%, #ffffff),
+    #f6f5f4 70%
+  );
+}
+
+.elyri-pixel-vortex__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-pixel-vortex__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-pixel-vortex__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

package/src/components/backgrounds/PixelVortex/PixelVortex.tsx

@@ -0,0 +1,278 @@
+import { useEffect, useRef, useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useColorScheme, useShaderCanvas } from '../../../core';
+
+import './PixelVortex.css';
+
+export interface PixelVortexProps {
+  children?: ReactNode;
+  className?: string;
+  /**
+   * 在 LED 屏上播放的视频地址。跨域视频需服务端允许 CORS；服务端还需支持 Range 请求，
+   * 否则大视频会整段下载而无法边下边播。未提供或加载失败时显示火焰流动效果。
+   */
+  videoSrc?: string;
+  /** 火焰主色（hex） */
+  color?: string;
+  /** 最亮处的高光色（hex） */
+  highlightColor?: string;
+  /** 单颗灯珠尺寸（CSS 像素） */
+  cellSize?: number;
+  /** 是否显示拼接屏接缝（每 16×10 颗灯珠一块） */
+  seams?: boolean;
+  /** 接缝宽度（CSS 像素） */
+  seamWidth?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 光晕中心是否跟随指针 */
+  interactive?: boolean;
+}
+
+// LED 屏：按灯珠网格对画面降采样，每颗灯珠带亮度抖动与色阶量化，再叠加灯珠间隙与可选的拼接缝。
+// 画面来源为视频（cover 方式铺满），没有视频时为缓慢流动的火焰，亮区跟随指针；浅色主题下底板为浅色。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor;
+uniform vec3 uHighlight;
+uniform float uCell;
+uniform float uFollow;
+uniform sampler2D uVideo;
+uniform float uHasVideo;
+uniform vec2 uVideoSize;
+uniform float uScheme;
+uniform float uSeam;
+
+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 noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(
+    mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
+    mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
+    u.y
+  );
+}
+
+float fbm(vec2 p) {
+  float v = 0.0;
+  float a = 0.5;
+  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
+  for (int i = 0; i < 5; i++) {
+    v += a * noise(p);
+    p = m * p;
+    a *= 0.5;
+  }
+  return v;
+}
+
+// 火焰热度场：域扭曲的噪声缓慢上升，靠近焦点处更亮
+float heat(vec2 p, vec2 focus, float t) {
+  vec2 q = vec2(
+    fbm(p * 1.4 + vec2(0.0, t * 0.18)),
+    fbm(p * 1.4 + vec2(5.2, 1.3) - t * 0.12)
+  );
+  float n = fbm(p * 2.0 + q * 1.7 + vec2(0.0, t * 0.3));
+  vec2 d = p - focus;
+  float glow = exp(-dot(d, d) * 1.6);
+  return n * n * 1.8 * (0.3 + 0.9 * glow);
+}
+
+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);
+  float cell = max(uCell, 2.0);
+  float minRes = min(uResolution.x, uResolution.y);
+  float t = uTime;
+
+  // 以灯珠中心采样，整颗灯珠同色
+  vec2 id = floor(frag / cell);
+  vec2 center = (id + 0.5) * cell;
+  vec2 vc = frag / uResolution - 0.5;
+  float grain = (0.86 + 0.2 * hash(id)) * (0.95 + 0.1 * hash(id + floor(t * 10.0) * vec2(7.13, 3.71)));
+  vec3 color;
+
+  if (uHasVideo > 0.5) {
+    // cover 铺满：按宽高比裁切视频
+    vec2 uv = center / uResolution - 0.5;
+    float screenAspect = uResolution.x / uResolution.y;
+    float videoAspect = uVideoSize.x / max(uVideoSize.y, 1.0);
+    if (screenAspect > videoAspect) uv.y *= videoAspect / screenAspect;
+    else uv.x *= screenAspect / videoAspect;
+    color = texture2D(uVideo, uv + 0.5).rgb * grain * 1.1;
+    // 深色压暗四角，浅色提亮四角
+    color = mix(color * (1.0 - dot(vc, vc) * 0.6), mix(color, vec3(1.0), dot(vc, vc) * 0.8), uScheme);
+  } else {
+    vec2 p = (center - 0.5 * uResolution) / minRes;
+    vec2 focus = mix(vec2(0.0, 0.1), (uPointer - 0.5 * uResolution) / minRes, 0.5 * uFollow);
+    float h = heat(p, focus, t) * grain;
+    color = uColor * h * 1.3 + uHighlight * pow(max(h - 0.55, 0.0), 2.0) * 2.2;
+    color += uColor * 0.012;
+    color *= 1.0 - dot(vc, vc) * 0.9;
+    color = pow(aces(color), vec3(1.0 / 2.2));
+    if (uScheme > 0.5) {
+      // 浅色：亮暗镜像并保留色相 —— 深底亮焰翻转为浅底深焰
+      float lum = dot(color, vec3(0.2126, 0.7152, 0.0722));
+      color = clamp(color + (1.0 - 2.0 * lum), 0.0, 1.0);
+    }
+  }
+
+  // 色阶量化，模拟 LED 驱动的有限灰度
+  color = floor(color * 14.0 + hash(id + 3.1)) / 14.0;
+
+  // 灯珠形状：方形发光点；间隙深色时保留少许漏光，浅色时为浅灰底板
+  vec2 f = fract(frag / cell) - 0.5;
+  float d = max(abs(f.x), abs(f.y));
+  vec3 gap = mix(color * 0.2, mix(color, vec3(0.96), 0.7), uScheme);
+  color = mix(gap, color, smoothstep(0.5, 0.28, d));
+
+  // 拼接屏接缝：每 16×10 颗灯珠一块，接缝 + 缝下方的阴影
+  if (uSeam > 0.0) {
+    vec2 pp = mod(frag, vec2(16.0, 10.0) * cell);
+    float seam = max(1.0 - smoothstep(uSeam - 1.0, uSeam + 1.0, pp.x), 1.0 - smoothstep(uSeam - 1.0, uSeam + 1.0, pp.y));
+    float shade = max(1.0 - smoothstep(uSeam, uSeam + cell * 1.5, pp.x), 1.0 - smoothstep(uSeam, uSeam + cell * 1.5, pp.y));
+    color *= 1.0 - mix(0.45, 0.15, uScheme) * shade;
+    vec3 seamColor = mix(vec3(0.018, 0.016, 0.015), vec3(0.86, 0.855, 0.85), uScheme) + color * 0.06;
+    color = mix(color, seamColor, seam);
+  }
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function PixelVortex({
+  children,
+  className,
+  videoSrc,
+  color = '#ff4d12',
+  highlightColor = '#ffd9b0',
+  cellSize = 4,
+  seams = false,
+  seamWidth = 5,
+  speed = 1,
+  interactive = true,
+}: PixelVortexProps) {
+  const scheme = useColorScheme();
+  const [video, setVideo] = useState<HTMLVideoElement | null>(null);
+  // 一旦出过帧就锁定为「有视频」：大视频中途缓冲时保留上一帧，不回退到火焰
+  const [videoReady, setVideoReady] = useState(false);
+  const textureRef = useRef<{ gl: WebGLRenderingContext; texture: WebGLTexture | null } | null>(null);
+
+  // 视频不挂到 DOM 中，仅作为纹理来源；可以播放后才切换到视频画面。
+  // 大视频依赖服务端支持 Range 请求做流式播放：边下边播，只缓冲播放位置附近的数据。
+  useEffect(() => {
+    if (!videoSrc) return;
+    const el = document.createElement('video');
+    el.crossOrigin = 'anonymous';
+    el.muted = true;
+    el.loop = true;
+    el.playsInline = true;
+    el.preload = 'auto';
+
+    let disposed = false;
+    const tryPlay = () => {
+      // 页面不可见时暂停，避免大视频在后台持续缓冲
+      if (disposed || document.hidden) return;
+      el.play().catch(() => {});
+    };
+    const handleReady = () => {
+      if (disposed) return;
+      setVideo(el);
+      setVideoReady(true);
+    };
+    const handleError = () => {
+      if (disposed) return;
+      setVideoReady(false);
+      setVideo(null);
+    };
+    // 大视频会周期性卡顿而暂停，恢复可播/可见时继续自动播放
+    const handlePause = () => tryPlay();
+    const handleVisibility = () => {
+      if (document.hidden) el.pause();
+      else tryPlay();
+    };
+
+    el.addEventListener('loadeddata', handleReady);
+    el.addEventListener('canplay', handleReady);
+    el.addEventListener('error', handleError);
+    el.addEventListener('pause', handlePause);
+    document.addEventListener('visibilitychange', handleVisibility);
+    el.src = videoSrc;
+    tryPlay();
+
+    return () => {
+      disposed = true;
+      el.removeEventListener('loadeddata', handleReady);
+      el.removeEventListener('canplay', handleReady);
+      el.removeEventListener('error', handleError);
+      el.removeEventListener('pause', handlePause);
+      document.removeEventListener('visibilitychange', handleVisibility);
+      el.pause();
+      el.removeAttribute('src');
+      el.load();
+      setVideoReady(false);
+      setVideo(null);
+    };
+  }, [videoSrc]);
+
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      gl.uniform3fv(uniform('uColor'), hexToLinearRgb(color));
+      gl.uniform3fv(uniform('uHighlight'), hexToLinearRgb(highlightColor));
+      gl.uniform1f(uniform('uCell'), Math.max(2, cellSize) * dpr);
+      gl.uniform1f(uniform('uFollow'), interactive ? 1 : 0);
+      gl.uniform1f(uniform('uScheme'), scheme === 'light' ? 1 : 0);
+      gl.uniform1f(uniform('uSeam'), seams ? Math.max(0.5, seamWidth) * dpr : 0);
+
+      // 用锁定状态判断是否已切到视频；缓冲中 readyState 会掉，但画面保留上一帧
+      const hasVideo = video != null && videoReady;
+      gl.uniform1f(uniform('uHasVideo'), hasVideo ? 1 : 0);
+      if (!hasVideo || !video) return;
+
+      if (textureRef.current?.gl !== gl) {
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        textureRef.current = { gl, texture };
+      }
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, textureRef.current.texture);
+      // 只在拿到当前帧时上传；缓冲中沿用上一帧纹理
+      if (video.readyState >= video.HAVE_CURRENT_DATA && video.videoWidth > 0) {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, video);
+      }
+      gl.uniform1i(uniform('uVideo'), 0);
+      gl.uniform2f(uniform('uVideoSize'), video.videoWidth, video.videoHeight);
+    },
+  });
+
+  return (
+    <div
+      className={cn('elyri-pixel-vortex', className)}
+      data-scheme={scheme}
+      style={{ '--elyri-pixel-vortex-color': color } as CSSProperties}
+    >
+      <canvas ref={canvasRef} className="elyri-pixel-vortex__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-pixel-vortex__content">{children}</div>}
+    </div>
+  );
+}

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

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