@elyri/motion 0.0.0-stage → 0.0.1

package/src/components/animations/Spotlight/Spotlight.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from 'react';
+import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from 'react';
+
+import { cn } from '../../../core';
+
+import './Spotlight.css';
+
+export interface SpotlightProps {
+  children: ReactNode;
+  className?: string;
+  /** 光斑颜色 */
+  color?: string;
+  /** 光斑半径（像素） */
+  size?: number;
+  /** 是否显示卡片内部跟随指针的径向光晕 */
+  glow?: boolean;
+  /** 是否显示指针附近的边框光晕 */
+  borderGlow?: boolean;
+  /** 卡片圆角（像素） */
+  radius?: number;
+}
+
+/** 聚光卡片：指针位置泛起径向高光，可选择性地点亮边框；内部元素加 elyri-spotlight__item 可获得同款边框光晕 */
+export function Spotlight({
+  children,
+  className,
+  color = '#7c8cff',
+  size = 240,
+  glow = true,
+  borderGlow = true,
+  radius = 16,
+}: SpotlightProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const frameRef = useRef(0);
+  const pointerRef = useRef<{ x: number; y: number } | null>(null);
+  const itemsRef = useRef<HTMLElement[]>([]);
+
+  useEffect(
+    () => () => {
+      cancelAnimationFrame(frameRef.current);
+    },
+    [],
+  );
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    pointerRef.current = { x: event.clientX, y: event.clientY };
+
+    if (frameRef.current) return;
+
+    frameRef.current = requestAnimationFrame(() => {
+      frameRef.current = 0;
+
+      const element = elementRef.current;
+      const pointer = pointerRef.current;
+      if (!element || !pointer) return;
+
+      const rect = element.getBoundingClientRect();
+      element.style.setProperty('--elyri-spotlight-x', `${pointer.x - rect.left}px`);
+      element.style.setProperty('--elyri-spotlight-y', `${pointer.y - rect.top}px`);
+
+      // 内部组件以自己的边框呈现光晕，需要相对自身的指针坐标
+      for (const item of itemsRef.current) {
+        const itemRect = item.getBoundingClientRect();
+        item.style.setProperty('--elyri-spotlight-x', `${pointer.x - itemRect.left}px`);
+        item.style.setProperty('--elyri-spotlight-y', `${pointer.y - itemRect.top}px`);
+      }
+    });
+  };
+
+  const handlePointerEnter = (event: ReactPointerEvent<HTMLDivElement>) => {
+    // 悬停期间缓存内部光晕项，避免每帧查询 DOM
+    itemsRef.current = Array.from(
+      event.currentTarget.querySelectorAll<HTMLElement>('.elyri-spotlight__item'),
+    );
+    handlePointerMove(event);
+  };
+
+  const style = {
+    '--elyri-spotlight-color': color,
+    '--elyri-spotlight-size': `${size}px`,
+    '--elyri-spotlight-radius': `${radius}px`,
+  } as CSSProperties;
+
+  return (
+    <div
+      ref={elementRef}
+      className={cn(
+        'elyri-spotlight',
+        glow && 'elyri-spotlight--glow',
+        borderGlow && 'elyri-spotlight--border',
+        className,
+      )}
+      style={style}
+      onPointerEnter={handlePointerEnter}
+      onPointerMove={handlePointerMove}
+    >
+      <div className="elyri-spotlight__content">{children}</div>
+    </div>
+  );
+}

package/src/components/animations/Spotlight/index.ts

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

package/src/components/animations/Tilt/Tilt.css

@@ -0,0 +1,35 @@
+.elyri-tilt {
+  position: relative;
+  transform: perspective(var(--elyri-tilt-perspective, 800px)) rotateX(var(--elyri-tilt-rotate-x, 0deg))
+    rotateY(var(--elyri-tilt-rotate-y, 0deg));
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+.elyri-tilt__glare {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle at var(--elyri-tilt-glare-x, 50%) var(--elyri-tilt-glare-y, 50%),
+    rgba(255, 255, 255, 0.4),
+    transparent 55%
+  );
+  opacity: 0;
+  transition: opacity var(--elyri-duration-base) var(--elyri-ease-out);
+  pointer-events: none;
+}
+
+.elyri-tilt--active .elyri-tilt__glare {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .elyri-tilt {
+    transform: none;
+  }
+
+  .elyri-tilt__glare {
+    display: none;
+  }
+}

package/src/components/animations/Tilt/Tilt.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from 'react';
+import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from 'react';
+
+import { cn, usePrefersReducedMotion } from '../../../core';
+
+import './Tilt.css';
+
+/** 指针离开后回正所用的时长（毫秒） */
+const RESET_DURATION = 400;
+
+const easeOutCubic = (progress: number) => 1 - (1 - progress) ** 3;
+
+export interface TiltProps {
+  children: ReactNode;
+  className?: string;
+  /** 最大倾斜角度（度） */
+  max?: number;
+  /** 透视距离（像素） */
+  perspective?: number;
+  /** 是否显示跟随指针的高光 */
+  glare?: boolean;
+}
+
+/** 指针跟随倾斜：根据指针在元素内的位置计算 3D 旋转 */
+export function Tilt({ children, className, max = 10, perspective = 800, glare = true }: TiltProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const moveFrameRef = useRef(0);
+  const resetFrameRef = useRef(0);
+  const rotationRef = useRef({ x: 0, y: 0 });
+  const pointerRef = useRef<{ x: number; y: number } | null>(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(
+    () => () => {
+      cancelAnimationFrame(moveFrameRef.current);
+      cancelAnimationFrame(resetFrameRef.current);
+    },
+    [],
+  );
+
+  const setRotation = (x: number, y: number) => {
+    rotationRef.current = { x, y };
+
+    const element = elementRef.current;
+    if (!element) return;
+
+    element.style.setProperty('--elyri-tilt-rotate-x', `${x}deg`);
+    element.style.setProperty('--elyri-tilt-rotate-y', `${y}deg`);
+  };
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (prefersReducedMotion) return;
+
+    // 指针重新进入时打断尚未结束的回正
+    cancelAnimationFrame(resetFrameRef.current);
+    resetFrameRef.current = 0;
+
+    pointerRef.current = { x: event.clientX, y: event.clientY };
+    setIsActive(true);
+
+    if (moveFrameRef.current) return;
+
+    moveFrameRef.current = requestAnimationFrame(() => {
+      moveFrameRef.current = 0;
+
+      const element = elementRef.current;
+      const pointer = pointerRef.current;
+      if (!element || !pointer) return;
+
+      const rect = element.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+
+      const ratioX = (pointer.x - rect.left) / rect.width;
+      const ratioY = (pointer.y - rect.top) / rect.height;
+
+      setRotation((0.5 - ratioY) * 2 * max, (ratioX - 0.5) * 2 * max);
+      element.style.setProperty('--elyri-tilt-glare-x', `${ratioX * 100}%`);
+      element.style.setProperty('--elyri-tilt-glare-y', `${ratioY * 100}%`);
+    });
+  };
+
+  const handlePointerEnd = () => {
+    cancelAnimationFrame(moveFrameRef.current);
+    moveFrameRef.current = 0;
+    cancelAnimationFrame(resetFrameRef.current);
+    resetFrameRef.current = 0;
+
+    pointerRef.current = null;
+    setIsActive(false);
+
+    const from = { ...rotationRef.current };
+    if (prefersReducedMotion || (!from.x && !from.y)) return;
+
+    // 缓动补间回正，避免指针离开时角度瞬间归零
+    const startedAt = performance.now();
+
+    const step = (now: number) => {
+      const progress = Math.min((now - startedAt) / RESET_DURATION, 1);
+      const remaining = 1 - easeOutCubic(progress);
+
+      setRotation(from.x * remaining, from.y * remaining);
+
+      if (progress < 1) resetFrameRef.current = requestAnimationFrame(step);
+    };
+
+    resetFrameRef.current = requestAnimationFrame(step);
+  };
+
+  return (
+    <div
+      ref={elementRef}
+      className={cn('elyri-tilt', isActive && 'elyri-tilt--active', className)}
+      style={{ '--elyri-tilt-perspective': `${perspective}px` } as CSSProperties}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerEnd}
+      onPointerCancel={handlePointerEnd}
+    >
+      {children}
+      {glare && <span className="elyri-tilt__glare" aria-hidden="true" />}
+    </div>
+  );
+}

package/src/components/animations/Tilt/index.ts

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

package/src/components/animations/index.ts

@@ -0,0 +1,12 @@
+export { CountUp } from './CountUp';
+export type { CountUpProps } from './CountUp';
+export { FadeIn } from './FadeIn';
+export type { FadeInDirection, FadeInProps } from './FadeIn';
+export { Magnetic } from './Magnetic';
+export type { MagneticProps } from './Magnetic';
+export { ScaleIn } from './ScaleIn';
+export type { ScaleInProps } from './ScaleIn';
+export { Spotlight } from './Spotlight';
+export type { SpotlightProps } from './Spotlight';
+export { Tilt } from './Tilt';
+export type { TiltProps } from './Tilt';

package/src/components/backgrounds/Aurora/Aurora.css

@@ -0,0 +1,33 @@
+.elyri-aurora {
+  --elyri-aurora-color: #3cffb0;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色 */
+  background:
+    radial-gradient(90% 60% at 50% 55%, color-mix(in srgb, var(--elyri-aurora-color) 14%, transparent), transparent),
+    linear-gradient(#020409, #05091a);
+}
+
+.elyri-aurora__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-aurora__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-aurora__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

package/src/components/backgrounds/Aurora/Aurora.tsx

@@ -0,0 +1,147 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useShaderCanvas } from '../../../core';
+
+import './Aurora.css';
+
+export interface AuroraProps {
+  children?: ReactNode;
+  className?: string;
+  /** 三段渐变色：帘底、中段、帘顶（hex） */
+  colors?: [string, string, string];
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 极光亮度倍率 */
+  intensity?: number;
+  /** 是否显示星空 */
+  stars?: boolean;
+  /** 指针附近的极光是否增亮 */
+  interactive?: boolean;
+}
+
+const DEFAULT_COLORS: [string, string, string] = ['#3cffb0', '#2a8cff', '#c04dff'];
+
+// 多层极光帘幕：每层是一条被 fbm 扭动的曲线，下缘锐利、向上柔和衰减，
+// 叠加沿水平方向的高频竖向光束，颜色随高度从帘底色过渡到帘顶色。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform float uIntensity;
+uniform float uStars;
+
+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;
+  for (int i = 0; i < 4; i++) {
+    v += a * noise(p);
+    p = p * 2.03 + vec2(17.1, 9.2);
+    a *= 0.5;
+  }
+  return v;
+}
+
+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 uv = gl_FragCoord.xy / uResolution.y;
+  vec2 pointer = vec2(uPointer.x, uResolution.y - uPointer.y) / uResolution.y;
+  float t = uTime;
+
+  // 夜空底色：地平线附近略带帘底色的微光
+  vec3 color = mix(vec3(0.002, 0.004, 0.012), vec3(0.006, 0.01, 0.03), uv.y);
+  color += uColor1 * 0.025 * exp(-uv.y * 5.0);
+
+  // 星空
+  vec2 grid = uv * 55.0;
+  vec2 cell = floor(grid);
+  float rnd = hash(cell);
+  vec2 offset = vec2(hash(cell + 3.1), hash(cell + 7.7)) - 0.5;
+  float starDist = length(fract(grid) - 0.5 - offset * 0.7);
+  float twinkle = 0.6 + 0.4 * sin(t * (1.5 + rnd * 3.0) + rnd * 40.0);
+  float star = step(0.93, rnd) * exp(-starDist * starDist * 180.0) * twinkle * smoothstep(0.1, 0.6, uv.y);
+  color += vec3(0.8, 0.85, 1.0) * star * uStars;
+
+  vec3 aurora = vec3(0.0);
+  for (int i = 0; i < 4; i++) {
+    float fi = float(i);
+    float x = uv.x * (0.6 + fi * 0.15) + fi * 3.7;
+    float curve = 0.42 + fi * 0.09 + (fbm(vec2(x * 1.2 - t * 0.05 * (1.0 + fi * 0.3), fi * 5.3 + t * 0.03)) - 0.5) * 0.45;
+    float d = uv.y - curve;
+    float body = d > 0.0 ? exp(-d * (3.5 + fi)) : exp(d * 40.0);
+    float rays = fbm(vec2(x * 28.0 + curve * 6.0, t * 0.35 + fi));
+    rays = 0.25 + 1.5 * rays * rays;
+    float flow = 0.6 + 0.4 * sin(x * 3.0 - t * 0.4 + fi * 1.7);
+    vec3 c = mix(uColor1, uColor2, smoothstep(0.0, 0.3, d));
+    c = mix(c, uColor3, smoothstep(0.12, 0.55, d) * (0.55 + 0.45 * sin(fi * 2.1 + x * 0.8 + t * 0.1)));
+    aurora += c * body * rays * flow * (0.5 - fi * 0.08);
+  }
+
+  vec2 dp = uv - pointer;
+  aurora *= 1.0 + 0.7 * exp(-dot(dp, dp) * 6.0);
+  color += aurora * uIntensity;
+
+  vec2 vc = gl_FragCoord.xy / uResolution - 0.5;
+  color *= 1.0 - dot(vc, vc) * 0.9;
+  color = pow(aces(color * 1.2), vec3(1.0 / 2.2));
+  color += (hash(gl_FragCoord.xy + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function Aurora({
+  children,
+  className,
+  colors = DEFAULT_COLORS,
+  speed = 1,
+  intensity = 1,
+  stars = true,
+  interactive = true,
+}: AuroraProps) {
+  const [bottom = DEFAULT_COLORS[0], middle = DEFAULT_COLORS[1], top = DEFAULT_COLORS[2]] = colors;
+
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform('uColor1'), hexToLinearRgb(bottom));
+      gl.uniform3fv(uniform('uColor2'), hexToLinearRgb(middle));
+      gl.uniform3fv(uniform('uColor3'), hexToLinearRgb(top));
+      gl.uniform1f(uniform('uIntensity'), Math.max(0, intensity));
+      gl.uniform1f(uniform('uStars'), stars ? 1 : 0);
+    },
+  });
+
+  return (
+    <div className={cn('elyri-aurora', className)} style={{ '--elyri-aurora-color': bottom } as CSSProperties}>
+      <canvas ref={canvasRef} className="elyri-aurora__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-aurora__content">{children}</div>}
+    </div>
+  );
+}

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

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

package/src/components/backgrounds/Caustics/Caustics.css

@@ -0,0 +1,34 @@
+.elyri-caustics {
+  --elyri-caustics-color: #0a6fa8;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色 */
+  background: linear-gradient(
+    color-mix(in srgb, var(--elyri-caustics-color) 60%, #000),
+    color-mix(in srgb, var(--elyri-caustics-color) 12%, #000)
+  );
+}
+
+.elyri-caustics__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-caustics__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-caustics__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

package/src/components/backgrounds/Caustics/Caustics.tsx

@@ -0,0 +1,142 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useShaderCanvas } from '../../../core';
+
+import './Caustics.css';
+
+export interface CausticsProps {
+  children?: ReactNode;
+  className?: string;
+  /** 水体颜色（hex） */
+  color?: string;
+  /** 焦散光色（hex） */
+  highlightColor?: string;
+  /** 光纹密度倍率 */
+  density?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 指针处是否荡开水波并聚光 */
+  interactive?: boolean;
+}
+
+// 水下焦散：两层运动 Voronoi 的细胞边缘构成光网，交汇处叠加增亮；
+// RGB 三通道轻微错位模拟色散，再加顶部斜射的光束与随深度变暗的水体。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uBase;
+uniform vec3 uHighlight;
+uniform float uDensity;
+uniform float uRipple;
+
+float hash(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32);
+  return fract(p.x * p.y);
+}
+
+vec2 hash2(vec2 p) {
+  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
+  return fract(sin(p) * 43758.5453);
+}
+
+float cellEdge(vec2 p, float t) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float f1 = 8.0;
+  float f2 = 8.0;
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 g = vec2(float(x), float(y));
+      vec2 o = 0.5 + 0.4 * sin(t * 0.8 + 6.2831 * hash2(i + g));
+      float d = length(g + o - f);
+      if (d < f1) {
+        f2 = f1;
+        f1 = d;
+      } else if (d < f2) {
+        f2 = d;
+      }
+    }
+  }
+  return f2 - f1;
+}
+
+float caustic(vec2 p, float t) {
+  p += 0.25 * vec2(sin(p.y * 1.3 + t * 0.7), cos(p.x * 1.1 - t * 0.6));
+  float a = exp(-cellEdge(p, t) * 9.0);
+  float b = exp(-cellEdge(p * 1.7 + vec2(3.1, 7.4), t * 1.3) * 9.0);
+  return a * 0.7 + b * 0.45 + a * b * 1.5;
+}
+
+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 minRes = min(uResolution.x, uResolution.y);
+  float t = uTime;
+  vec2 p = frag / minRes * 4.0 * uDensity;
+
+  // 指针处荡开的水波
+  vec2 dp = (frag - uPointer) / minRes;
+  float r = length(dp);
+  p += dp / (r + 1e-4) * sin(r * 38.0 - t * 4.0) * 0.06 * exp(-r * 5.0) * uRipple;
+
+  vec3 caus = vec3(
+    caustic(p + vec2(0.014, 0.0), t),
+    caustic(p, t),
+    caustic(p - vec2(0.014, 0.0), t)
+  );
+
+  float depth = frag.y / uResolution.y;
+  vec3 color = mix(uBase * 0.35, uBase * 0.025, depth);
+
+  // 斜射光束
+  float x = frag.x / minRes + depth * 0.35;
+  float rays = (0.5 + 0.5 * sin(x * 9.0 + sin(x * 3.1 + t * 0.3) * 2.0 + t * 0.2)) * (0.5 + 0.5 * sin(x * 17.0 - t * 0.35));
+  color += uHighlight * 0.12 * rays * rays * (1.0 - depth) * (1.0 - depth);
+
+  float focus = 0.6 + 0.8 * exp(-dot(dp, dp) * 3.0) * uRipple;
+  color += uHighlight * caus * 0.5 * mix(1.0, 0.3, depth) * focus;
+
+  vec2 vc = frag / uResolution - 0.5;
+  color *= 1.0 - dot(vc, vc) * 1.1;
+  color = pow(aces(color * 1.2), vec3(1.0 / 2.2));
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function Caustics({
+  children,
+  className,
+  color = '#0a6fa8',
+  highlightColor = '#c8fbff',
+  density = 1,
+  speed = 1,
+  interactive = true,
+}: CausticsProps) {
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform }) => {
+      gl.uniform3fv(uniform('uBase'), hexToLinearRgb(color));
+      gl.uniform3fv(uniform('uHighlight'), hexToLinearRgb(highlightColor));
+      gl.uniform1f(uniform('uDensity'), Math.max(0.2, density));
+      gl.uniform1f(uniform('uRipple'), interactive ? 1 : 0);
+    },
+  });
+
+  return (
+    <div className={cn('elyri-caustics', className)} style={{ '--elyri-caustics-color': color } as CSSProperties}>
+      <canvas ref={canvasRef} className="elyri-caustics__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-caustics__content">{children}</div>}
+    </div>
+  );
+}

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

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

package/src/components/backgrounds/Contours/Contours.css

@@ -0,0 +1,42 @@
+.elyri-contours {
+  --elyri-contours-color: #8a90a6;
+  --elyri-contours-bg: #0a0b0f;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色：同心细环近似等高线 */
+  background:
+    repeating-radial-gradient(
+      circle at 62% 38%,
+      transparent 0 26px,
+      color-mix(in srgb, var(--elyri-contours-color) 30%, transparent) 26px 27px
+    ),
+    var(--elyri-contours-bg);
+}
+
+.elyri-contours[data-scheme='light'] {
+  --elyri-contours-bg: #f9f9f7;
+}
+
+.elyri-contours__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-contours__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-contours__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}