@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,181 @@
-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};
+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 };

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

@@ -1 +1,60 @@
-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};
+/** 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 };

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

@@ -1 +1,36 @@
-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};
+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 };

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

@@ -1 +1,167 @@
-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};
+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 };

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

@@ -1 +1,154 @@
-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};
+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 };