@elyri/motion 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,2 @@
+export { Planet } from './Planet';
+export type { PlanetKind, PlanetProps } from './Planet';

package/src/components/backgrounds/SilkWaves/SilkWaves.css

@@ -0,0 +1,44 @@
+.elyri-silk-waves {
+  --elyri-silk-waves-color: #9a6424;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色 */
+  background: radial-gradient(
+    120% 90% at 40% 30%,
+    color-mix(in srgb, var(--elyri-silk-waves-color) 45%, #000),
+    #070503 75%
+  );
+}
+
+/* 浅色主题：兜底底色同步翻转为浅色，避免就绪前闪深色 */
+.elyri-silk-waves[data-scheme='light'] {
+  background: radial-gradient(
+    120% 90% at 40% 30%,
+    #ffffff,
+    color-mix(in srgb, var(--elyri-silk-waves-color) 18%, #ffffff) 75%
+  );
+}
+
+.elyri-silk-waves__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-silk-waves__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-silk-waves__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

package/src/components/backgrounds/SilkWaves/SilkWaves.tsx

@@ -0,0 +1,144 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useColorScheme, useShaderCanvas } from '../../../core';
+
+import './SilkWaves.css';
+
+export interface SilkWavesProps {
+  children?: ReactNode;
+  className?: string;
+  /** 丝绸本体色（hex） */
+  color?: string;
+  /** 光泽高光色（hex） */
+  highlightColor?: string;
+  /** 褶皱密度倍率 */
+  folds?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 光源是否跟随指针 */
+  interactive?: boolean;
+}
+
+// 丝绸：多组正弦波经过域扭曲叠成连续起伏的高度场，
+// 用柔和漫反射 + 锐利高光 + 线形灯带反射模拟缎面光泽，褶皱谷底做遮蔽。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uBase;
+uniform vec3 uHighlight;
+uniform float uFolds;
+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);
+}
+
+float silk(vec2 p, float t) {
+  vec2 q = p;
+  q.x += 0.55 * sin(q.y * 1.3 + t * 0.3);
+  q.y += 0.45 * sin(q.x * 1.1 - t * 0.25);
+  q.x += 0.2 * sin(q.y * 2.3 - t * 0.2);
+  return sin(q.x * 1.6 + q.y * 0.9 + t * 0.2) * 0.5
+    + sin(q.x * 0.7 - q.y * 1.9 - t * 0.15) * 0.35
+    + sin((q.x + q.y) * 2.7 + t * 0.35) * 0.12;
+}
+
+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);
+  vec2 p = frag / minRes * 2.6 * uFolds;
+  float t = uTime;
+
+  float e = 0.01;
+  float h = silk(p, t);
+  vec2 grad = vec2(silk(p + vec2(e, 0.0), t) - silk(p - vec2(e, 0.0), t), silk(p + vec2(0.0, e), t) - silk(p - vec2(0.0, e), t)) / (2.0 * e);
+  vec3 n = normalize(vec3(-grad * 0.55, 1.0));
+
+  vec3 V = vec3(0.0, 0.0, 1.0);
+  vec3 toLight = vec3(uPointer - frag, minRes * 0.7);
+  float dist = length(toLight);
+  vec3 L = toLight / dist;
+  vec3 H = normalize(L + V);
+  float atten = 1.0 / (1.0 + 1.2 * pow(dist / minRes, 2.0));
+  float NdotL = max(dot(n, L), 0.0);
+  float NdotH = max(dot(n, H), 0.0);
+  float NdotV = max(n.z, 0.0);
+  float fres = pow(1.0 - NdotV, 3.0);
+
+  // 褶皱谷底更暗
+  float cavity = mix(0.35, 1.0, smoothstep(-1.0, 0.8, h));
+
+  vec3 color = uBase * (0.015 + 0.45 * NdotL * NdotL * atten) * cavity;
+  color += mix(uBase, uHighlight, 0.5) * pow(NdotH, 14.0) * 0.45 * atten * cavity;
+  color += uHighlight * pow(NdotH, 90.0) * 1.1 * atten;
+
+  // 线形灯带在褶皱上形成的缎面亮线
+  vec3 Rf = reflect(-V, n);
+  vec2 toL = (uPointer - frag) / minRes;
+  float a = -0.5 + 0.3 * sin(t * 0.13);
+  vec2 dir = vec2(cos(a), sin(a));
+  float s = dot(Rf.xy, dir) - dot(toL, dir) * 1.1;
+  color += uHighlight * (exp(-s * s / 0.004) * 0.9 + exp(-s * s / 0.08) * 0.12) * (0.4 + atten) * cavity;
+  color += mix(uBase, uHighlight, 0.3) * fres * 0.25 * cavity;
+
+  vec2 vc = frag / uResolution - 0.5;
+  float vig = dot(vc, vc);
+
+  if (uScheme > 0.5) {
+    // 浅色：先色调映射，再做亮暗镜像，保留色相 —— 深底亮纹翻转为浅底深纹
+    vec3 c = pow(aces(color * 1.1), 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.2;
+    color = pow(aces(color * 1.1), vec3(1.0 / 2.2));
+  }
+
+  color += (hash(frag + fract(t)) - 0.5) / 255.0;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export function SilkWaves({
+  children,
+  className,
+  color = '#9a6424',
+  highlightColor = '#ffe3b0',
+  folds = 1,
+  speed = 1,
+  interactive = true,
+}: SilkWavesProps) {
+  const scheme = useColorScheme();
+  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('uFolds'), Math.max(0.2, folds));
+      gl.uniform1f(uniform('uScheme'), scheme === 'light' ? 1 : 0);
+    },
+  });
+
+  return (
+    <div
+      className={cn('elyri-silk-waves', className)}
+      data-scheme={scheme}
+      style={{ '--elyri-silk-waves-color': color } as CSSProperties}
+    >
+      <canvas ref={canvasRef} className="elyri-silk-waves__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-silk-waves__content">{children}</div>}
+    </div>
+  );
+}

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

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

package/src/components/backgrounds/Velvet/Velvet.css

@@ -0,0 +1,35 @@
+.elyri-velvet {
+  --elyri-velvet-color: #6a1230;
+
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* WebGL 不可用或尚未绘制时的底色 */
+  background: radial-gradient(
+    ellipse at 60% 30%,
+    color-mix(in srgb, var(--elyri-velvet-color) 70%, #000),
+    color-mix(in srgb, var(--elyri-velvet-color) 15%, #000)
+  );
+}
+
+.elyri-velvet__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-velvet__canvas[data-ready] {
+  opacity: 1;
+}
+
+.elyri-velvet__content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}

package/src/components/backgrounds/Velvet/Velvet.tsx

@@ -0,0 +1,246 @@
+import { useEffect, useRef } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+import { cn, hexToLinearRgb, useShaderCanvas } from '../../../core';
+
+import './Velvet.css';
+
+export interface VelvetProps {
+  children?: ReactNode;
+  className?: string;
+  /** 丝绒本体色（hex） */
+  color?: string;
+  /** 绒面光晕色（hex） */
+  sheenColor?: string;
+  /** 褶皱密度倍率 */
+  folds?: number;
+  /** 绒毛质感强度，0 为光洁、1 为明显的毛绒颗粒 */
+  fuzz?: number;
+  /** 四周暗角强度，0 为无暗角 */
+  vignette?: number;
+  /** 动画速度倍率 */
+  speed?: number;
+  /** 光源是否跟随指针，指针划过是否留下渐消的压痕 */
+  interactive?: boolean;
+}
+
+/** 压痕轨迹点数与消退时长 */
+const TRAIL = 24;
+const TRAIL_STEP_MS = 40;
+const TRAIL_FADE_S = 1.6;
+const trailData = new Float32Array(TRAIL * 3);
+
+// 丝绒：圆背窄谷的斜向垂坠褶皱缓慢摆动。用 Charlie 绒面分布着色——正对视线处吸光发暗，
+// 褶皱侧面因绒毛掠射散射而泛起柔光；绒光上叠加可调强度的像素级纤维亮点与碎绒明暗。
+// 指针轨迹以线段形式传入，被压倒的绒毛光晕消失、略显光亮，随时间回弹。
+const FRAGMENT_SHADER = `
+precision highp float;
+
+#define TRAIL ${TRAIL}
+#define PI 3.14159265
+
+uniform vec2 uResolution;
+uniform float uTime;
+uniform vec2 uPointer;
+uniform vec3 uBase;
+uniform vec3 uSheen;
+uniform float uFolds;
+uniform float uFuzz;
+uniform float uVignette;
+uniform vec3 uTrail[TRAIL];
+
+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
+  );
+}
+
+// 圆润的褶背 + 收紧的折痕：|sin| 在零点处形成 V 形谷，k 控制谷底锐度
+float fold(float s, float k) {
+  return sqrt(s * s + k);
+}
+
+float drape(vec2 p, float t) {
+  // 褶皱沿 x 分布、顺 y 垂下，并随高度缓慢摆动
+  float sway = 0.28 * sin(p.y * 0.5 + t * 0.3) + 0.12 * sin(p.y * 1.15 - t * 0.23 + p.x * 0.3);
+  float x = p.x + sway;
+  float s1 = sin(x * 1.35 + 0.6 * sin(x * 0.37 + t * 0.08));
+  float s2 = sin(x * 2.7 + p.y * 0.28 - t * 0.18 + 1.3);
+  float h = 0.62 * fold(s1, 0.012) + 0.26 * fold(s2, 0.03);
+  // 褶背上的斜向细皱
+  h += 0.05 * sin(p.x * 4.0 - p.y * 5.5 + t * 0.25) * s1 * s1;
+  h += 0.25 * noise(p * 0.5 + vec2(t * 0.04, -t * 0.03));
+  return h;
+}
+
+float pressAt(vec2 frag, float minRes) {
+  float s = 0.0;
+  for (int i = 0; i < TRAIL - 1; i++) {
+    vec3 a = uTrail[i];
+    vec3 b = uTrail[i + 1];
+    float w = min(a.z, b.z);
+    if (w <= 0.0) continue;
+    vec2 pa = frag - a.xy;
+    vec2 ba = b.xy - a.xy;
+    float k = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-3), 0.0, 1.0);
+    vec2 d = (pa - ba * k) / minRes;
+    s = max(s, w * exp(-dot(d, d) * 600.0));
+  }
+  return s;
+}
+
+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);
+  vec2 uv = frag / minRes;
+  float t = uTime;
+
+  // 斜向约 16° 的垂坠
+  mat2 rot = mat2(0.96, 0.28, -0.28, 0.96);
+  vec2 p = rot * uv * 2.2 * uFolds;
+
+  // 中心差分求法线，步长足够小以保留折痕的锐利边缘
+  float e = 0.004;
+  vec2 ex = vec2(e, 0.0);
+  vec2 ey = vec2(0.0, e);
+  float h = drape(p, t);
+  vec2 grad = vec2(drape(p + ex, t) - drape(p - ex, t), drape(p + ey, t) - drape(p - ey, t)) / (2.0 * e);
+  // 梯度转回屏幕坐标系
+  grad = grad * rot;
+  vec3 n = normalize(vec3(-grad * 0.75, 1.0));
+  float NdotV = max(n.z, 1e-3);
+
+  float pressed = pressAt(frag, minRes);
+  // 绒毛：像素级的纤维亮点，沿垂坠方向略拉长；大块碎绒明暗与之同步受 uFuzz 控制
+  vec2 fp = rot * frag;
+  float fiber = 0.55 * hash(floor(fp)) + 0.45 * hash(floor(vec2(fp.x * 0.5, fp.y * 0.2)) + 31.0);
+  float nap = 1.0 + (noise(p * 0.9 + 3.1) - 0.5) * 0.7 * uFuzz;
+  float fuzz = mix(1.0, 0.45 + 1.1 * fiber, uFuzz);
+  float ao = mix(0.4, 1.0, smoothstep(0.1, 0.8, h));
+
+  // 主光：左上方固定柔光，保证形体稳定可读；辅光：跟随指针的点光
+  vec2 ptr = uPointer / minRes;
+  vec2 toPtr = ptr - uv;
+  vec3 lights[2];
+  lights[0] = normalize(vec3(-0.45, -0.55, 0.7));
+  lights[1] = normalize(vec3(toPtr, 0.55));
+  float power[2];
+  power[0] = 1.5;
+  power[1] = 1.6 / (1.0 + 3.0 * dot(toPtr, toPtr));
+
+  // Charlie 绒面分布：正对光处吸光，掠射角散射出柔光
+  const float INV_A = 1.0 / 0.38;
+  vec3 color = uBase * 0.03 * ao;
+  for (int i = 0; i < 2; i++) {
+    vec3 L = lights[i];
+    vec3 H = normalize(L + vec3(0.0, 0.0, 1.0));
+    float NdotL = max(dot(n, L), 0.0);
+    float NdotH = max(dot(n, H), 0.0);
+    float sin2 = max(1.0 - NdotH * NdotH, 0.0078125);
+    float D = (2.0 + INV_A) * pow(sin2, INV_A * 0.5) / (2.0 * PI);
+    float vis = 1.0 / (4.0 * (NdotL + NdotV - NdotL * NdotV) + 1e-3);
+    vec3 diffuse = uBase * (0.08 + 0.55 * NdotL) * ao;
+    vec3 sheen = uSheen * D * vis * NdotL * nap * mix(fuzz, 1.0, pressed) * (1.0 - 0.85 * pressed);
+    // 压倒的绒毛：顺毛方向出现一点缎面般的光泽
+    vec3 gloss = mix(uBase, uSheen, 0.6) * pow(NdotH, 40.0) * 0.35 * pressed;
+    color += (diffuse * (1.0 - 0.3 * pressed) + sheen + gloss) * power[i];
+  }
+
+  vec2 vc = frag / uResolution - 0.5;
+  color *= max(1.0 - dot(vc, vc) * 1.2 * uVignette, 0.0);
+  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);
+}
+`;
+
+interface TrailPoint {
+  x: number;
+  y: number;
+  t: number;
+}
+
+export function Velvet({
+  children,
+  className,
+  color = '#6a1230',
+  sheenColor = '#ffb3c8',
+  folds = 1,
+  fuzz = 0.4,
+  vignette = 0.5,
+  speed = 1,
+  interactive = true,
+}: VelvetProps) {
+  const trailRef = useRef<TrailPoint[]>([]);
+
+  const canvasRef = useShaderCanvas({
+    fragmentShader: FRAGMENT_SHADER,
+    speed,
+    interactive,
+    onDraw: ({ gl, uniform, dpr }) => {
+      const now = performance.now();
+      trailData.fill(0);
+      trailRef.current.forEach((point, i) => {
+        const life = Math.max(0, 1 - (now - point.t) / 1000 / TRAIL_FADE_S);
+        trailData[i * 3] = point.x * dpr;
+        trailData[i * 3 + 1] = point.y * dpr;
+        trailData[i * 3 + 2] = life * life;
+      });
+      gl.uniform3fv(uniform('uBase'), hexToLinearRgb(color));
+      gl.uniform3fv(uniform('uSheen'), hexToLinearRgb(sheenColor));
+      gl.uniform1f(uniform('uFolds'), Math.max(0.2, folds));
+      gl.uniform1f(uniform('uFuzz'), Math.min(1, Math.max(0, fuzz)));
+      gl.uniform1f(uniform('uVignette'), Math.min(1, Math.max(0, vignette)));
+      gl.uniform3fv(uniform('uTrail'), trailData);
+    },
+  });
+
+  useEffect(() => {
+    trailRef.current = [];
+    if (!interactive) return;
+
+    // 记录相对画布的轨迹：每 40ms 落一个点，期间只更新末端位置，保证笔触连贯
+    const handlePointerMove = (event: PointerEvent) => {
+      const rect = canvasRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const trail = trailRef.current;
+      const now = performance.now();
+      const last = trail[trail.length - 1];
+      if (last && now - last.t < TRAIL_STEP_MS) {
+        last.x = x;
+        last.y = y;
+        return;
+      }
+      trail.push({ x, y, t: now });
+      if (trail.length > TRAIL) trail.shift();
+    };
+
+    window.addEventListener('pointermove', handlePointerMove, { passive: true });
+    return () => window.removeEventListener('pointermove', handlePointerMove);
+  }, [interactive, canvasRef]);
+
+  return (
+    <div className={cn('elyri-velvet', className)} style={{ '--elyri-velvet-color': color } as CSSProperties}>
+      <canvas ref={canvasRef} className="elyri-velvet__canvas" aria-hidden="true" />
+      {children != null && <div className="elyri-velvet__content">{children}</div>}
+    </div>
+  );
+}

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

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

package/src/components/backgrounds/index.ts

@@ -0,0 +1,26 @@
+export { Aurora } from './Aurora';
+export type { AuroraProps } from './Aurora';
+export { Caustics } from './Caustics';
+export type { CausticsProps } from './Caustics';
+export { Contours } from './Contours';
+export type { ContoursProps } from './Contours';
+export { DotField } from './DotField';
+export type { DotFieldProps } from './DotField';
+export { DragonScales } from './DragonScales';
+export type { DragonScalesProps } from './DragonScales';
+export { Filaments } from './Filaments';
+export type { FilamentsProps } from './Filaments';
+export { FlipTiles } from './FlipTiles';
+export type { FlipTilesPattern, FlipTilesProps } from './FlipTiles';
+export { Halo } from './Halo';
+export type { HaloProps } from './Halo';
+export { MeshGradient } from './MeshGradient';
+export type { MeshGradientProps } from './MeshGradient';
+export { PixelVortex } from './PixelVortex';
+export type { PixelVortexProps } from './PixelVortex';
+export { Planet } from './Planet';
+export type { PlanetKind, PlanetProps } from './Planet';
+export { SilkWaves } from './SilkWaves';
+export type { SilkWavesProps } from './SilkWaves';
+export { Velvet } from './Velvet';
+export type { VelvetProps } from './Velvet';

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './animations';
+export * from './backgrounds';
+export * from './media';
+export * from './text';

package/src/components/media/AsciiImage/AsciiImage.css

@@ -0,0 +1,16 @@
+.elyri-ascii-image {
+  display: block;
+  width: 100%;
+  font-family: var(--elyri-ascii-font, ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);
+  font-weight: 600;
+}
+
+.elyri-ascii-image__canvas,
+.elyri-ascii-image__fallback {
+  display: block;
+  width: 100%;
+}
+
+.elyri-ascii-image__fallback {
+  height: auto;
+}