@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/animation-background/lumina-shaders.js

@@ -1,181 +1 @@
-const VS_SOURCE = `
-  attribute vec4 aVertexPosition;
-  void main() {
-    gl_Position = aVertexPosition;
-  }
-`;
-const FS_MESH_FLOW = `
-  precision highp float;
-  uniform vec2 uResolution;
-  uniform float uTime;
-  uniform vec3 uColors[5];
-  uniform float uSpeed;
-  uniform float uSoftness;
-  uniform float uZoom;
-  void main() {
-      vec2 uv = gl_FragCoord.xy / uResolution.xy;
-      float aspect = uResolution.x / uResolution.y;
-      vec2 p = (uv - 0.5) / max(0.25, uZoom) + 0.5;
-      p.x *= aspect;
-      float t = uTime * uSpeed * 0.1;
-      vec3 col = mix(uColors[0], uColors[4], uv.y * 0.6 + 0.2);
-      for(int i = 1; i < 4; i++) {
-          float fi = float(i);
-          float offset = fi * 4.0;
-          vec2 q = p;
-          q.x += sin(q.y * 1.5 + t + offset) * 0.2;
-          q.y += cos(q.x * 0.8 - t + offset) * 0.1;
-          float waveCenterY = 0.5 + 0.3 * sin(q.x * 1.0 + t * 0.8 + offset);
-          float thickness = 0.15 + 0.15 * sin(q.x * 2.5 + t * 1.2 + offset);
-          float w = thickness * (1.0 + uSoftness * 3.0);
-          float dist = abs(q.y - waveCenterY);
-          float blurAmount = 0.1 + uSoftness * 0.4;
-          float intensity = smoothstep(w + blurAmount, w - blurAmount, dist);
-          intensity *= 0.7;
-          vec3 bandColor = uColors[i];
-          bandColor = mix(bandColor, uColors[i+1], sin(p.x + t)*0.2 + 0.2);
-          col = mix(col, bandColor, intensity);
-      }
-      float noise = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);
-      col += (noise - 0.5) * 0.03;
-      gl_FragColor = vec4(col, 1.0);
-  }
-`;
-const FS_FLUID = `
-  precision highp float;
-  uniform vec2 uResolution;
-  uniform float uTime;
-  uniform vec3 uColors[5];
-  uniform float uNoiseStrength;
-  uniform float uSoftness;
-  uniform float uZoom;
-  float random(vec2 st) {
-      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
-  }
-  void main() {
-    vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / min(uResolution.y, uResolution.x);
-    float t = uTime * 0.2;
-    float scale = mix(1.8, 0.45, uSoftness) / max(0.25, uZoom);
-    vec2 p = uv * scale;
-    for(float i = 1.0; i <= 4.0; i++){
-        p.x += 0.6 / i * sin(i * 3.0 * p.y + t);
-        p.y += 0.6 / i * cos(i * 3.0 * p.x + t);
-    }
-    float w1 = 0.5 + 0.5 * sin(p.x + t);
-    float w2 = 0.5 + 0.5 * sin(p.y + t * 0.8);
-    float w3 = 0.5 + 0.5 * sin(p.x + p.y);
-    vec3 col = uColors[0];
-    col = mix(col, uColors[1], smoothstep(0.1, 0.9, w1));
-    col = mix(col, uColors[2], smoothstep(0.1, 0.9, w2));
-    col = mix(col, uColors[3], smoothstep(0.1, 0.9, w3));
-    float w4 = w1 * w2 * w3;
-    col = mix(col, uColors[4], w4);
-    float grain = random(gl_FragCoord.xy + uTime);
-    col += (grain - 0.5) * uNoiseStrength;
-    gl_FragColor = vec4(col, 1.0);
-  }
-`;
-const FS_RADIANT = `
-  precision highp float;
-  uniform vec2 uResolution;
-  uniform float uTime;
-  uniform vec3 uColors[5];
-  uniform float uNoiseStrength;
-  uniform float uSoftness;
-  uniform float uZoom;
-  float random(vec2 st) {
-      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
-  }
-  void main() {
-    vec2 uv = gl_FragCoord.xy / uResolution.xy;
-    float aspect = uResolution.x / uResolution.y;
-    uv = (uv - 0.5) / max(0.25, uZoom) + 0.5;
-    uv.x *= aspect;
-    float t = uTime * 0.15;
-    vec3 col = uColors[0];
-    for(int i = 1; i < 5; i++) {
-        float fi = float(i);
-        vec2 pos = vec2(
-            0.5 * aspect + 0.4 * sin(t * (0.5 + fi * 0.2) + fi * 1.5),
-            0.5 + 0.4 * cos(t * (0.4 + fi * 0.15) + fi)
-        );
-        float d = length(uv - pos);
-        float radius = 0.6 + uSoftness * 1.0;
-        float intensity = smoothstep(radius, 0.0, d);
-        col = mix(col, uColors[i], intensity * 0.7);
-    }
-    float grain = random(gl_FragCoord.xy + uTime);
-    col += (grain - 0.5) * uNoiseStrength;
-    gl_FragColor = vec4(col, 1.0);
-  }
-`;
-const FS_ETHEREAL = `
-  precision highp float;
-  uniform vec2 uResolution;
-  uniform float uTime;
-  uniform vec3 uColors[5];
-  uniform float uNoiseStrength;
-  uniform float uSoftness;
-  uniform float uZoom;
-  float random (in vec2 st) {
-      return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
-  }
-  float noise (in vec2 st) {
-      vec2 i = floor(st);
-      vec2 f = fract(st);
-      vec2 u = f*f*(3.0-2.0*f);
-      return mix( mix( random( i + vec2(0.0,0.0) ),
-                       random( i + vec2(1.0,0.0) ), u.x),
-                  mix( random( i + vec2(0.0,1.0) ),
-                       random( i + vec2(1.0,1.0) ), u.x), u.y);
-  }
-  #define OCTAVES 5
-  float fbm (in vec2 st) {
-      float value = 0.0;
-      float amplitude = 0.5;
-      for (int i = 0; i < OCTAVES; i++) {
-          value += amplitude * noise(st);
-          st *= 2.0;
-          amplitude *= 0.5;
-      }
-      return value;
-  }
-  void main() {
-      vec2 uv = gl_FragCoord.xy/uResolution.xy;
-      float aspect = uResolution.x/uResolution.y;
-      uv = (uv - 0.5) / max(0.25, uZoom) + 0.5;
-      uv.x *= aspect;
-      float t = uTime * 0.8;
-      float scale = 5.0 - uSoftness * 3.0;
-      vec2 st = uv * scale;
-      vec2 q = vec2(0.);
-      q.x = fbm( st + 0.12*t );
-      q.y = fbm( st + vec2(1.0) + 0.10*t );
-      vec2 r = vec2(0.);
-      r.x = fbm( st + 1.0*q + vec2(1.7,9.2)+ 0.30*t );
-      r.y = fbm( st + 1.0*q + vec2(8.3,2.8)+ 0.26*t );
-      float f = fbm(st + r);
-      vec3 color = mix(uColors[0], uColors[1], clamp((f*f)*4.0,0.0,1.0));
-      color = mix(color, uColors[2], clamp(length(q),0.0,1.0));
-      color = mix(color, uColors[3], clamp(length(r.x),0.0,1.0));
-      color = mix(color, uColors[4], clamp(r.y*r.y, 0.0, 1.0));
-      float grain = random(gl_FragCoord.xy + uTime);
-      color += (grain - 0.5) * uNoiseStrength;
-      gl_FragColor = vec4(color,1.0);
-  }
-`;
-function getLuminaFragmentShader(variant) {
-    switch (variant) {
-        case 'mesh-flow':
-            return FS_MESH_FLOW;
-        case 'radiant':
-            return FS_RADIANT;
-        case 'ethereal':
-            return FS_ETHEREAL;
-        case 'fluid':
-        default:
-            return FS_FLUID;
-    }
-}
-
-export { VS_SOURCE, getLuminaFragmentShader };
+const o="\n  attribute vec4 aVertexPosition;\n  void main() {\n    gl_Position = aVertexPosition;\n  }\n";function getLuminaFragmentShader(o){switch(o){case"mesh-flow":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uSpeed;\n  uniform float uSoftness;\n  uniform float uZoom;\n  void main() {\n      vec2 uv = gl_FragCoord.xy / uResolution.xy;\n      float aspect = uResolution.x / uResolution.y;\n      vec2 p = (uv - 0.5) / max(0.25, uZoom) + 0.5;\n      p.x *= aspect;\n      float t = uTime * uSpeed * 0.1;\n      vec3 col = mix(uColors[0], uColors[4], uv.y * 0.6 + 0.2);\n      for(int i = 1; i < 4; i++) {\n          float fi = float(i);\n          float offset = fi * 4.0;\n          vec2 q = p;\n          q.x += sin(q.y * 1.5 + t + offset) * 0.2;\n          q.y += cos(q.x * 0.8 - t + offset) * 0.1;\n          float waveCenterY = 0.5 + 0.3 * sin(q.x * 1.0 + t * 0.8 + offset);\n          float thickness = 0.15 + 0.15 * sin(q.x * 2.5 + t * 1.2 + offset);\n          float w = thickness * (1.0 + uSoftness * 3.0);\n          float dist = abs(q.y - waveCenterY);\n          float blurAmount = 0.1 + uSoftness * 0.4;\n          float intensity = smoothstep(w + blurAmount, w - blurAmount, dist);\n          intensity *= 0.7;\n          vec3 bandColor = uColors[i];\n          bandColor = mix(bandColor, uColors[i+1], sin(p.x + t)*0.2 + 0.2);\n          col = mix(col, bandColor, intensity);\n      }\n      float noise = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);\n      col += (noise - 0.5) * 0.03;\n      gl_FragColor = vec4(col, 1.0);\n  }\n";case"radiant":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  uniform float uZoom;\n  float random(vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n  }\n  void main() {\n    vec2 uv = gl_FragCoord.xy / uResolution.xy;\n    float aspect = uResolution.x / uResolution.y;\n    uv = (uv - 0.5) / max(0.25, uZoom) + 0.5;\n    uv.x *= aspect;\n    float t = uTime * 0.15;\n    vec3 col = uColors[0];\n    for(int i = 1; i < 5; i++) {\n        float fi = float(i);\n        vec2 pos = vec2(\n            0.5 * aspect + 0.4 * sin(t * (0.5 + fi * 0.2) + fi * 1.5),\n            0.5 + 0.4 * cos(t * (0.4 + fi * 0.15) + fi)\n        );\n        float d = length(uv - pos);\n        float radius = 0.6 + uSoftness * 1.0;\n        float intensity = smoothstep(radius, 0.0, d);\n        col = mix(col, uColors[i], intensity * 0.7);\n    }\n    float grain = random(gl_FragCoord.xy + uTime);\n    col += (grain - 0.5) * uNoiseStrength;\n    gl_FragColor = vec4(col, 1.0);\n  }\n";case"ethereal":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  uniform float uZoom;\n  float random (in vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);\n  }\n  float noise (in vec2 st) {\n      vec2 i = floor(st);\n      vec2 f = fract(st);\n      vec2 u = f*f*(3.0-2.0*f);\n      return mix( mix( random( i + vec2(0.0,0.0) ),\n                       random( i + vec2(1.0,0.0) ), u.x),\n                  mix( random( i + vec2(0.0,1.0) ),\n                       random( i + vec2(1.0,1.0) ), u.x), u.y);\n  }\n  #define OCTAVES 5\n  float fbm (in vec2 st) {\n      float value = 0.0;\n      float amplitude = 0.5;\n      for (int i = 0; i < OCTAVES; i++) {\n          value += amplitude * noise(st);\n          st *= 2.0;\n          amplitude *= 0.5;\n      }\n      return value;\n  }\n  void main() {\n      vec2 uv = gl_FragCoord.xy/uResolution.xy;\n      float aspect = uResolution.x/uResolution.y;\n      uv = (uv - 0.5) / max(0.25, uZoom) + 0.5;\n      uv.x *= aspect;\n      float t = uTime * 0.8;\n      float scale = 5.0 - uSoftness * 3.0;\n      vec2 st = uv * scale;\n      vec2 q = vec2(0.);\n      q.x = fbm( st + 0.12*t );\n      q.y = fbm( st + vec2(1.0) + 0.10*t );\n      vec2 r = vec2(0.);\n      r.x = fbm( st + 1.0*q + vec2(1.7,9.2)+ 0.30*t );\n      r.y = fbm( st + 1.0*q + vec2(8.3,2.8)+ 0.26*t );\n      float f = fbm(st + r);\n      vec3 color = mix(uColors[0], uColors[1], clamp((f*f)*4.0,0.0,1.0));\n      color = mix(color, uColors[2], clamp(length(q),0.0,1.0));\n      color = mix(color, uColors[3], clamp(length(r.x),0.0,1.0));\n      color = mix(color, uColors[4], clamp(r.y*r.y, 0.0, 1.0));\n      float grain = random(gl_FragCoord.xy + uTime);\n      color += (grain - 0.5) * uNoiseStrength;\n      gl_FragColor = vec4(color,1.0);\n  }\n";default:return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  uniform float uZoom;\n  float random(vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n  }\n  void main() {\n    vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / min(uResolution.y, uResolution.x);\n    float t = uTime * 0.2;\n    float scale = mix(1.8, 0.45, uSoftness) / max(0.25, uZoom);\n    vec2 p = uv * scale;\n    for(float i = 1.0; i <= 4.0; i++){\n        p.x += 0.6 / i * sin(i * 3.0 * p.y + t);\n        p.y += 0.6 / i * cos(i * 3.0 * p.x + t);\n    }\n    float w1 = 0.5 + 0.5 * sin(p.x + t);\n    float w2 = 0.5 + 0.5 * sin(p.y + t * 0.8);\n    float w3 = 0.5 + 0.5 * sin(p.x + p.y);\n    vec3 col = uColors[0];\n    col = mix(col, uColors[1], smoothstep(0.1, 0.9, w1));\n    col = mix(col, uColors[2], smoothstep(0.1, 0.9, w2));\n    col = mix(col, uColors[3], smoothstep(0.1, 0.9, w3));\n    float w4 = w1 * w2 * w3;\n    col = mix(col, uColors[4], w4);\n    float grain = random(gl_FragCoord.xy + uTime);\n    col += (grain - 0.5) * uNoiseStrength;\n    gl_FragColor = vec4(col, 1.0);\n  }\n"}}export{o as VS_SOURCE,getLuminaFragmentShader};

package/dist/esm/components/animation-background/lumina-utils.js

@@ -1,60 +1 @@
-/** Lumina Loop 기본 루프 주기 (초) */
-const LUMINA_ANIMATION_DURATION_SEC = 60;
-const LUMINA_ANIMATION_TYPES = [
-    'plasma',
-    'mesh-flow',
-    'fluid',
-    'radiant',
-    'ethereal',
-];
-function isLuminaType(type) {
-    return LUMINA_ANIMATION_TYPES.includes(type);
-}
-/** speed(ms) → Lumina speed 배율 (기본 3000ms = 1.0). 슬라이더 오른쪽일수록 빠름 */
-function toLuminaSpeed(speedMs) {
-    return Math.max(0.1, speedMs / 3000);
-}
-/** 슬라이더 속도(ms) → 애니메이션 배율. 왼쪽=느림, 오른쪽=빠름 (3000ms = 1.0) */
-function toSpeedRate(speedMs) {
-    return Math.max(0.1, speedMs / 3000);
-}
-/** CSS keyframe duration(초). speedMs가 클수록 짧은 duration = 빠른 애니메이션 */
-function toAnimationDurationSec(speedMs, baseSec = 3, minSec = 0.75) {
-    const duration = (baseSec * 3000) / Math.max(500, speedMs);
-    return Math.max(minSec, duration);
-}
-/** blur(px) → Lumina softness (0–1) */
-function toLuminaSoftness(blur) {
-    return Math.min(1, blur / 200);
-}
-/** zoom 배율 클램프 (0.25–4, 1 = 기본) */
-function clampZoom(zoom) {
-    return Math.min(4, Math.max(0.25, zoom));
-}
-function hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-        ? [
-            parseInt(result[1], 16) / 255,
-            parseInt(result[2], 16) / 255,
-            parseInt(result[3], 16) / 255,
-        ]
-        : [0, 0, 0];
-}
-function padColors(colors, count = 5) {
-    if (colors.length === 0) {
-        return ['#7000FF', '#FF00AA', '#3300FF', '#FFCC00', '#00FFFF'];
-    }
-    return Array.from({ length: count }, (_, i) => colors[i % colors.length]);
-}
-/** fluid 타입 기본 팔레트 (딥 바이올렛 → 로즈 → 스카이) */
-const FLUID_DEFAULT_COLORS = [
-    '#0d0221',
-    '#5b21b6',
-    '#db2777',
-    '#38bdf8',
-    '#e9d5ff',
-];
-const LUMINA_NOISE_SVG = "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E";
-
-export { FLUID_DEFAULT_COLORS, LUMINA_ANIMATION_DURATION_SEC, LUMINA_ANIMATION_TYPES, LUMINA_NOISE_SVG, clampZoom, hexToRgb, isLuminaType, padColors, toAnimationDurationSec, toLuminaSoftness, toLuminaSpeed, toSpeedRate };
+const t=60,e=["plasma","mesh-flow","fluid","radiant","ethereal"];function isLuminaType(t){return e.includes(t)}function toLuminaSpeed(t){return Math.max(.1,t/3e3)}function toSpeedRate(t){return Math.max(.1,t/3e3)}function toAnimationDurationSec(t,e=3,n=.75){const a=3e3*e/Math.max(500,t);return Math.max(n,a)}function toLuminaSoftness(t){return Math.min(1,t/200)}function clampZoom(t){return Math.min(4,Math.max(.25,t))}function hexToRgb(t){const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?[parseInt(e[1],16)/255,parseInt(e[2],16)/255,parseInt(e[3],16)/255]:[0,0,0]}function padColors(t,e=5){return 0===t.length?["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"]:Array.from({length:e},(e,n)=>t[n%t.length])}const n=["#0d0221","#5b21b6","#db2777","#38bdf8","#e9d5ff"],a="data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E";export{n as FLUID_DEFAULT_COLORS,t as LUMINA_ANIMATION_DURATION_SEC,e as LUMINA_ANIMATION_TYPES,a as LUMINA_NOISE_SVG,clampZoom,hexToRgb,isLuminaType,padColors,toAnimationDurationSec,toLuminaSoftness,toLuminaSpeed,toSpeedRate};

package/dist/esm/components/animation-background/particle-defaults.js

@@ -1,36 +1 @@
-const SNOW_DEFAULT_COLORS = ['#ffffff', '#f0f9ff', '#e0f2fe'];
-const FLOWERS_DEFAULT_COLORS = [
-    '#ffb7c5',
-    '#ff91a4',
-    '#f8c8dc',
-    '#ffc0cb',
-    '#fda4af',
-];
-const CONFETTI_DEFAULT_COLORS = [
-    '#f44336',
-    '#e91e63',
-    '#9c27b0',
-    '#673ab7',
-    '#3f51b5',
-    '#2196f3',
-    '#03a9f4',
-    '#00bcd4',
-    '#4caf50',
-    '#ffeb3b',
-    '#ffc107',
-    '#ff9800',
-];
-function getFallingParticleDefaults(type) {
-    switch (type) {
-        case 'snow':
-            return SNOW_DEFAULT_COLORS;
-        case 'flowers':
-            return FLOWERS_DEFAULT_COLORS;
-        case 'confetti':
-            return CONFETTI_DEFAULT_COLORS;
-        default:
-            return SNOW_DEFAULT_COLORS;
-    }
-}
-
-export { CONFETTI_DEFAULT_COLORS, FLOWERS_DEFAULT_COLORS, SNOW_DEFAULT_COLORS, getFallingParticleDefaults };
+const f=["#ffffff","#f0f9ff","#e0f2fe"],e=["#ffb7c5","#ff91a4","#f8c8dc","#ffc0cb","#fda4af"],c=["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#4caf50","#ffeb3b","#ffc107","#ff9800"];function getFallingParticleDefaults(a){switch(a){case"snow":default:return f;case"flowers":return e;case"confetti":return c}}export{c as CONFETTI_DEFAULT_COLORS,e as FLOWERS_DEFAULT_COLORS,f as SNOW_DEFAULT_COLORS,getFallingParticleDefaults};

package/dist/esm/components/animation-background/renderers.js

@@ -1,167 +1 @@
-import { toSpeedRate } from './lumina-utils.js';
-
-/**
- * Canvas 렌더러: particles, stars, snow, flowers, confetti
- */
-function createFallingParticle(width, height, options, isInitial = false) {
-    return {
-        x: Math.random() * width,
-        y: isInitial ? Math.random() * height : -20,
-        size: Math.random() * (options.maxSize - options.minSize) + options.minSize,
-        speedX: (Math.random() - 0.5) * options.wind,
-        speedY: Math.random() * (options.maxSpeedY - options.minSpeedY) + options.minSpeedY,
-        opacity: Math.random() * 0.5 + 0.3,
-        rotation: Math.random() * Math.PI * 2,
-        rotationSpeed: (Math.random() - 0.5) * 0.05,
-        color: options.colors[Math.floor(Math.random() * options.colors.length)],
-    };
-}
-function drawFallingParticleShape(ctx, variant, size) {
-    if (variant === 'snow') {
-        ctx.beginPath();
-        ctx.arc(0, 0, size, 0, Math.PI * 2);
-        ctx.fill();
-        return;
-    }
-    if (variant === 'flowers') {
-        ctx.beginPath();
-        ctx.moveTo(0, 0);
-        ctx.bezierCurveTo(size, -size, size * 2, size, 0, size * 2);
-        ctx.bezierCurveTo(-size * 2, size, -size, -size, 0, 0);
-        ctx.fill();
-        return;
-    }
-    ctx.fillRect(-size / 2, -size / 2, size, size);
-}
-const drawFallingParticles = (ctx, width, height, particlesRef, variant, options) => {
-    const speedFactor = toSpeedRate(options.speed);
-    const minSize = Math.max(1, options.size * 0.5);
-    const maxSize = Math.max(minSize + 0.5, options.size * 1.5);
-    const minSpeedY = 0.4 * speedFactor;
-    const maxSpeedY = 1.2 * speedFactor;
-    const wind = options.wind * speedFactor;
-    const spawnOptions = {
-        minSize,
-        maxSize,
-        minSpeedY,
-        maxSpeedY,
-        wind,
-        colors: options.colors,
-    };
-    const spawnKey = `${options.count}:${options.size}:${options.speed}:${options.wind}`;
-    if (particlesRef.current.length !== options.count || particlesRef.spawnKey !== spawnKey) {
-        particlesRef.current = Array.from({ length: options.count }, () => createFallingParticle(width, height, spawnOptions, true));
-        particlesRef.spawnKey = spawnKey;
-    }
-    particlesRef.current.forEach((p) => {
-        p.y += p.speedY;
-        p.x += p.speedX + Math.sin(p.y / 50) * 0.5 * speedFactor;
-        p.rotation += p.rotationSpeed;
-        if (p.y > height + 20) {
-            Object.assign(p, createFallingParticle(width, height, spawnOptions));
-        }
-        if (p.x > width + 20)
-            p.x = -20;
-        if (p.x < -20)
-            p.x = width + 20;
-        ctx.save();
-        ctx.translate(p.x, p.y);
-        ctx.rotate(p.rotation);
-        ctx.fillStyle = p.color;
-        ctx.globalAlpha = p.opacity * options.layerOpacity;
-        drawFallingParticleShape(ctx, variant, p.size);
-        ctx.restore();
-    });
-    ctx.globalAlpha = 1;
-};
-const drawParticles = (ctx, width, height, particlesRef, options) => {
-    const spawnKey = `${options.count}:${options.size}`;
-    if (particlesRef.current.length !== options.count || particlesRef.spawnKey !== spawnKey) {
-        particlesRef.current = Array.from({ length: options.count }).map(() => ({
-            x: Math.random() * width,
-            y: Math.random() * height,
-            vx: (Math.random() - 0.5) * 1.5,
-            vy: (Math.random() - 0.5) * 1.5,
-            size: Math.random() * options.size + 1,
-            color: options.colors[Math.floor(Math.random() * options.colors.length)],
-        }));
-        particlesRef.spawnKey = spawnKey;
-    }
-    const particles = particlesRef.current;
-    const interactionRadius = 150;
-    const speedFactor = toSpeedRate(options.speed);
-    particles.forEach((p, i) => {
-        p.x += p.vx * speedFactor;
-        p.y += p.vy * speedFactor;
-        if (p.x < 0 || p.x > width)
-            p.vx *= -1;
-        if (p.y < 0 || p.y > height)
-            p.vy *= -1;
-        if (options.clickable) {
-            const dx = options.mouse.x - p.x;
-            const dy = options.mouse.y - p.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance < interactionRadius) {
-                const force = (interactionRadius - distance) / interactionRadius;
-                p.vx += (dx / distance) * force * 0.5;
-                p.vy += (dy / distance) * force * 0.5;
-            }
-            const maxSpeed = 3;
-            const particleSpeed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);
-            if (particleSpeed > maxSpeed) {
-                p.vx = (p.vx / particleSpeed) * maxSpeed;
-                p.vy = (p.vy / particleSpeed) * maxSpeed;
-            }
-        }
-        ctx.save();
-        ctx.globalAlpha = options.layerOpacity;
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-        ctx.fillStyle = p.color;
-        ctx.fill();
-        ctx.restore();
-        for (let j = i + 1; j < particles.length; j++) {
-            const p2 = particles[j];
-            const dx = p.x - p2.x;
-            const dy = p.y - p2.y;
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            if (dist < 100) {
-                ctx.beginPath();
-                ctx.strokeStyle = p.color;
-                ctx.globalAlpha = (1 - dist / 100) * options.layerOpacity;
-                ctx.lineWidth = 0.5;
-                ctx.moveTo(p.x, p.y);
-                ctx.lineTo(p2.x, p2.y);
-                ctx.stroke();
-                ctx.globalAlpha = 1;
-            }
-        }
-    });
-};
-const drawStars = (ctx, width, height, starsRef, options) => {
-    const spawnKey = `${options.count}:${options.size}`;
-    if (starsRef.current.length !== options.count || starsRef.spawnKey !== spawnKey) {
-        starsRef.current = Array.from({ length: options.count }).map(() => ({
-            x: Math.random() * width,
-            y: Math.random() * height,
-            size: Math.random() * options.size,
-            blinkSpeed: Math.random() * 0.05 + 0.01,
-            color: options.colors[Math.floor(Math.random() * options.colors.length)],
-        }));
-        starsRef.spawnKey = spawnKey;
-    }
-    starsRef.current.forEach(star => {
-        star.y -= 0.05 * options.speedRate;
-        if (star.y < 0)
-            star.y = height;
-        const opacity = (0.5 + Math.sin(options.time * star.blinkSpeed) * 0.5) * options.layerOpacity;
-        ctx.beginPath();
-        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
-        ctx.fillStyle = star.color;
-        ctx.globalAlpha = opacity;
-        ctx.fill();
-        ctx.globalAlpha = 1;
-    });
-};
-
-export { drawFallingParticles, drawParticles, drawStars };
+import{toSpeedRate as a}from"./lumina-utils.js";function createFallingParticle(a,e,t,o=!1){return{x:Math.random()*a,y:o?Math.random()*e:-20,size:Math.random()*(t.maxSize-t.minSize)+t.minSize,speedX:(Math.random()-.5)*t.wind,speedY:Math.random()*(t.maxSpeedY-t.minSpeedY)+t.minSpeedY,opacity:.5*Math.random()+.3,rotation:Math.random()*Math.PI*2,rotationSpeed:.05*(Math.random()-.5),color:t.colors[Math.floor(Math.random()*t.colors.length)]}}const drawFallingParticles=(e,t,o,r,n,l)=>{const i=a(l.speed),c=Math.max(1,.5*l.size),s={minSize:c,maxSize:Math.max(c+.5,1.5*l.size),minSpeedY:.4*i,maxSpeedY:1.2*i,wind:l.wind*i,colors:l.colors},h=`${l.count}:${l.size}:${l.speed}:${l.wind}`;r.current.length===l.count&&r.spawnKey===h||(r.current=Array.from({length:l.count},()=>createFallingParticle(t,o,s,!0)),r.spawnKey=h),r.current.forEach(a=>{a.y+=a.speedY,a.x+=a.speedX+.5*Math.sin(a.y/50)*i,a.rotation+=a.rotationSpeed,a.y>o+20&&Object.assign(a,createFallingParticle(t,o,s)),a.x>t+20&&(a.x=-20),a.x<-20&&(a.x=t+20),e.save(),e.translate(a.x,a.y),e.rotate(a.rotation),e.fillStyle=a.color,e.globalAlpha=a.opacity*l.layerOpacity,function drawFallingParticleShape(a,e,t){return"snow"===e?(a.beginPath(),a.arc(0,0,t,0,2*Math.PI),void a.fill()):"flowers"===e?(a.beginPath(),a.moveTo(0,0),a.bezierCurveTo(t,-t,2*t,t,0,2*t),a.bezierCurveTo(2*-t,t,-t,-t,0,0),void a.fill()):void a.fillRect(-t/2,-t/2,t,t)}(e,n,a.size),e.restore()}),e.globalAlpha=1},drawParticles=(e,t,o,r,n)=>{const l=`${n.count}:${n.size}`;r.current.length===n.count&&r.spawnKey===l||(r.current=Array.from({length:n.count}).map(()=>({x:Math.random()*t,y:Math.random()*o,vx:1.5*(Math.random()-.5),vy:1.5*(Math.random()-.5),size:Math.random()*n.size+1,color:n.colors[Math.floor(Math.random()*n.colors.length)]})),r.spawnKey=l);const i=r.current,c=a(n.speed);i.forEach((a,r)=>{if(a.x+=a.vx*c,a.y+=a.vy*c,(a.x<0||a.x>t)&&(a.vx*=-1),(a.y<0||a.y>o)&&(a.vy*=-1),n.clickable){const e=n.mouse.x-a.x,t=n.mouse.y-a.y,o=Math.sqrt(e*e+t*t);if(o<150){const r=(150-o)/150;a.vx+=e/o*r*.5,a.vy+=t/o*r*.5}const r=3,l=Math.sqrt(a.vx*a.vx+a.vy*a.vy);l>r&&(a.vx=a.vx/l*r,a.vy=a.vy/l*r)}e.save(),e.globalAlpha=n.layerOpacity,e.beginPath(),e.arc(a.x,a.y,a.size,0,2*Math.PI),e.fillStyle=a.color,e.fill(),e.restore();for(let t=r+1;t<i.length;t++){const o=i[t],r=a.x-o.x,l=a.y-o.y,c=Math.sqrt(r*r+l*l);c<100&&(e.beginPath(),e.strokeStyle=a.color,e.globalAlpha=(1-c/100)*n.layerOpacity,e.lineWidth=.5,e.moveTo(a.x,a.y),e.lineTo(o.x,o.y),e.stroke(),e.globalAlpha=1)}})},drawStars=(a,e,t,o,r)=>{const n=`${r.count}:${r.size}`;o.current.length===r.count&&o.spawnKey===n||(o.current=Array.from({length:r.count}).map(()=>({x:Math.random()*e,y:Math.random()*t,size:Math.random()*r.size,blinkSpeed:.05*Math.random()+.01,color:r.colors[Math.floor(Math.random()*r.colors.length)]})),o.spawnKey=n),o.current.forEach(e=>{e.y-=.05*r.speedRate,e.y<0&&(e.y=t);const o=(.5+.5*Math.sin(r.time*e.blinkSpeed))*r.layerOpacity;a.beginPath(),a.arc(e.x,e.y,e.size,0,2*Math.PI),a.fillStyle=e.color,a.globalAlpha=o,a.fill(),a.globalAlpha=1})};export{drawFallingParticles,drawParticles,drawStars};

package/dist/esm/components/animation-background/shader-controller.js

@@ -1,154 +1 @@
-import { padColors, hexToRgb, toLuminaSpeed, toLuminaSoftness, clampZoom } from './lumina-utils.js';
-import { VS_SOURCE, getLuminaFragmentShader } from './lumina-shaders.js';
-
-const CLASS = 'designbase-wc-animation-background';
-function loadShader(gl, type, source) {
-    const shader = gl.createShader(type);
-    if (!shader)
-        return null;
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        gl.deleteShader(shader);
-        return null;
-    }
-    return shader;
-}
-class ShaderAnimationController {
-    constructor(container, options) {
-        this.raf = 0;
-        this.startTime = performance.now();
-        this.render = () => {
-            const gl = this.gl;
-            const program = this.program;
-            const positionBuffer = this.positionBuffer;
-            if (!gl || !program || !positionBuffer)
-                return;
-            const { colors, speed, blur, noise, zoom, variant } = this.options;
-            const { width, height } = this.resizeCanvas();
-            if (width === 0 || height === 0) {
-                this.raf = requestAnimationFrame(this.render);
-                return;
-            }
-            gl.viewport(0, 0, width, height);
-            gl.useProgram(program);
-            const aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
-            const uResolution = gl.getUniformLocation(program, 'uResolution');
-            const uTime = gl.getUniformLocation(program, 'uTime');
-            const uColors = gl.getUniformLocation(program, 'uColors');
-            const uSpeed = gl.getUniformLocation(program, 'uSpeed');
-            const uSoftness = gl.getUniformLocation(program, 'uSoftness');
-            const uNoiseStrength = gl.getUniformLocation(program, 'uNoiseStrength');
-            const uZoom = gl.getUniformLocation(program, 'uZoom');
-            gl.enableVertexAttribArray(aVertexPosition);
-            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-            gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
-            gl.uniform2f(uResolution, width, height);
-            const palette = padColors(colors);
-            const luminaSpeed = toLuminaSpeed(speed);
-            const softness = toLuminaSoftness(blur);
-            const meshFlowSpeed = luminaSpeed * 0.6;
-            const zoomValue = clampZoom(zoom);
-            const elapsed = (performance.now() - this.startTime) / 1000;
-            if (variant === 'mesh-flow') {
-                if (uTime)
-                    gl.uniform1f(uTime, elapsed);
-                if (uSpeed)
-                    gl.uniform1f(uSpeed, meshFlowSpeed);
-                if (uSoftness)
-                    gl.uniform1f(uSoftness, softness);
-                if (uZoom)
-                    gl.uniform1f(uZoom, zoomValue);
-            }
-            else {
-                if (uTime)
-                    gl.uniform1f(uTime, elapsed * luminaSpeed);
-                if (uSoftness)
-                    gl.uniform1f(uSoftness, softness);
-                if (uNoiseStrength)
-                    gl.uniform1f(uNoiseStrength, noise);
-                if (uZoom)
-                    gl.uniform1f(uZoom, zoomValue);
-            }
-            const flatColors = new Float32Array(5 * 3);
-            for (let i = 0; i < 5; i++) {
-                const rgb = hexToRgb(palette[i]);
-                flatColors[i * 3] = rgb[0];
-                flatColors[i * 3 + 1] = rgb[1];
-                flatColors[i * 3 + 2] = rgb[2];
-            }
-            if (uColors)
-                gl.uniform3fv(uColors, flatColors);
-            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-            this.raf = requestAnimationFrame(this.render);
-        };
-        this.container = container;
-        this.options = options;
-        this.canvas = document.createElement('canvas');
-        this.canvas.className = `${CLASS}__shader-canvas`;
-        container.appendChild(this.canvas);
-        this.init();
-    }
-    updateOptions(options) {
-        this.options = { ...this.options, ...options };
-    }
-    resizeCanvas() {
-        const rect = this.container.getBoundingClientRect();
-        const dpr = window.devicePixelRatio || 1;
-        this.canvas.width = Math.max(1, rect.width * dpr);
-        this.canvas.height = Math.max(1, rect.height * dpr);
-        this.canvas.style.width = `${rect.width}px`;
-        this.canvas.style.height = `${rect.height}px`;
-        return { width: this.canvas.width, height: this.canvas.height };
-    }
-    init() {
-        const gl = this.canvas.getContext('webgl');
-        if (!gl)
-            return;
-        this.gl = gl;
-        const { variant } = this.options;
-        const fsSource = getLuminaFragmentShader(variant);
-        const shaderProgram = gl.createProgram();
-        if (!shaderProgram)
-            return;
-        const vertexShader = loadShader(gl, gl.VERTEX_SHADER, VS_SOURCE);
-        const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
-        if (!vertexShader || !fragmentShader)
-            return;
-        gl.attachShader(shaderProgram, vertexShader);
-        gl.attachShader(shaderProgram, fragmentShader);
-        gl.linkProgram(shaderProgram);
-        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
-            return;
-        this.program = shaderProgram;
-        this.vertexShader = vertexShader;
-        this.fragmentShader = fragmentShader;
-        const positionBuffer = gl.createBuffer();
-        if (!positionBuffer)
-            return;
-        this.positionBuffer = positionBuffer;
-        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
-        this.observer = new ResizeObserver(() => this.resizeCanvas());
-        this.observer.observe(this.container);
-        this.startTime = performance.now();
-        this.render();
-    }
-    destroy() {
-        cancelAnimationFrame(this.raf);
-        this.observer?.disconnect();
-        const gl = this.gl;
-        if (gl && this.program) {
-            if (this.vertexShader)
-                gl.deleteShader(this.vertexShader);
-            if (this.fragmentShader)
-                gl.deleteShader(this.fragmentShader);
-            if (this.positionBuffer)
-                gl.deleteBuffer(this.positionBuffer);
-            gl.deleteProgram(this.program);
-        }
-        this.canvas.remove();
-    }
-}
-
-export { ShaderAnimationController };
+import{padColors as t,hexToRgb as e,toLuminaSpeed as r,toLuminaSoftness as i,clampZoom as a}from"./lumina-utils.js";import{VS_SOURCE as n,getLuminaFragmentShader as o}from"./lumina-shaders.js";function loadShader(t,e,r){const i=t.createShader(e);return i?(t.shaderSource(i,r),t.compileShader(i),t.getShaderParameter(i,t.COMPILE_STATUS)?i:(t.deleteShader(i),null)):null}class ShaderAnimationController{constructor(n,o){this.raf=0,this.startTime=performance.now(),this.render=()=>{const n=this.gl,o=this.program,s=this.positionBuffer;if(!n||!o||!s)return;const{colors:h,speed:f,blur:c,noise:m,zoom:d,variant:u}=this.options,{width:l,height:g}=this.resizeCanvas();if(0===l||0===g)return void(this.raf=requestAnimationFrame(this.render));n.viewport(0,0,l,g),n.useProgram(o);const v=n.getAttribLocation(o,"aVertexPosition"),S=n.getUniformLocation(o,"uResolution"),p=n.getUniformLocation(o,"uTime"),A=n.getUniformLocation(o,"uColors"),w=n.getUniformLocation(o,"uSpeed"),R=n.getUniformLocation(o,"uSoftness"),b=n.getUniformLocation(o,"uNoiseStrength"),T=n.getUniformLocation(o,"uZoom");n.enableVertexAttribArray(v),n.bindBuffer(n.ARRAY_BUFFER,s),n.vertexAttribPointer(v,2,n.FLOAT,!1,0,0),n.uniform2f(S,l,g);const x=t(h),F=r(f),B=i(c),L=.6*F,P=a(d),U=(performance.now()-this.startTime)/1e3;"mesh-flow"===u?(p&&n.uniform1f(p,U),w&&n.uniform1f(w,L),R&&n.uniform1f(R,B),T&&n.uniform1f(T,P)):(p&&n.uniform1f(p,U*F),R&&n.uniform1f(R,B),b&&n.uniform1f(b,m),T&&n.uniform1f(T,P));const C=new Float32Array(15);for(let t=0;t<5;t++){const r=e(x[t]);C[3*t]=r[0],C[3*t+1]=r[1],C[3*t+2]=r[2]}A&&n.uniform3fv(A,C),n.drawArrays(n.TRIANGLE_STRIP,0,4),this.raf=requestAnimationFrame(this.render)},this.container=n,this.options=o,this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-animation-background__shader-canvas",n.appendChild(this.canvas),this.init()}updateOptions(t){this.options={...this.options,...t}}resizeCanvas(){const t=this.container.getBoundingClientRect(),e=window.devicePixelRatio||1;return this.canvas.width=Math.max(1,t.width*e),this.canvas.height=Math.max(1,t.height*e),this.canvas.style.width=`${t.width}px`,this.canvas.style.height=`${t.height}px`,{width:this.canvas.width,height:this.canvas.height}}init(){const t=this.canvas.getContext("webgl");if(!t)return;this.gl=t;const{variant:e}=this.options,r=o(e),i=t.createProgram();if(!i)return;const a=loadShader(t,t.VERTEX_SHADER,n),s=loadShader(t,t.FRAGMENT_SHADER,r);if(!a||!s)return;if(t.attachShader(i,a),t.attachShader(i,s),t.linkProgram(i),!t.getProgramParameter(i,t.LINK_STATUS))return;this.program=i,this.vertexShader=a,this.fragmentShader=s;const h=t.createBuffer();h&&(this.positionBuffer=h,t.bindBuffer(t.ARRAY_BUFFER,h),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),t.STATIC_DRAW),this.observer=new ResizeObserver(()=>this.resizeCanvas()),this.observer.observe(this.container),this.startTime=performance.now(),this.render())}destroy(){cancelAnimationFrame(this.raf),this.observer?.disconnect();const t=this.gl;t&&this.program&&(this.vertexShader&&t.deleteShader(this.vertexShader),this.fragmentShader&&t.deleteShader(this.fragmentShader),this.positionBuffer&&t.deleteBuffer(this.positionBuffer),t.deleteProgram(this.program)),this.canvas.remove()}}export{ShaderAnimationController};