@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,111 @@
-const n="\n  attribute vec4 aVertexPosition;\n  void main() {\n    gl_Position = aVertexPosition;\n  }\n",e="\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform float uSpeed;\n  uniform float uIntensity;\n  uniform float uGrain;\n  uniform float uScale;\n  uniform float uWarp;\n  uniform vec3 uColor1;\n  uniform vec3 uColor2;\n  uniform vec3 uColor3;\n\n  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}\n  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}\n  vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}\n\n  float cnoise(vec3 P){\n    vec3 Pi0 = floor(P);\n    vec3 Pi1 = Pi0 + vec3(1.0);\n    Pi0 = mod(Pi0, 289.0);\n    Pi1 = mod(Pi1, 289.0);\n    vec3 Pf0 = fract(P);\n    vec3 Pf1 = Pf0 - vec3(1.0);\n    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n    vec4 iy = vec4(Pi0.yy, Pi1.yy);\n    vec4 iz0 = Pi0.zzzz;\n    vec4 iz1 = Pi1.zzzz;\n\n    vec4 ixy = permute(permute(ix) + iy);\n    vec4 ixy0 = permute(ixy + iz0);\n    vec4 ixy1 = permute(ixy + iz1);\n\n    vec4 gx0 = ixy0 / 7.0;\n    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;\n    gx0 = fract(gx0);\n    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n    vec4 sz0 = step(gz0, vec4(0.0));\n    gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n    gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n    vec4 gx1 = ixy1 / 7.0;\n    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;\n    gx1 = fract(gx1);\n    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n    vec4 sz1 = step(gz1, vec4(0.0));\n    gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n    gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n    g000 *= norm0.x;\n    g010 *= norm0.y;\n    g100 *= norm0.z;\n    g110 *= norm0.w;\n    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n    g001 *= norm1.x;\n    g011 *= norm1.y;\n    g101 *= norm1.z;\n    g111 *= norm1.w;\n\n    float n000 = dot(g000, Pf0);\n    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n    float n111 = dot(g111, Pf1);\n\n    vec3 fade_xyz = fade(Pf0);\n    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n    return 2.2 * n_xyz;\n  }\n\n  void main() {\n    vec2 p = gl_FragCoord.xy / uResolution.xy;\n    float base = p.x * 0.5 + p.y * 0.5;\n\n    float n = cnoise(vec3(p * uScale, uTime * uSpeed)) * 0.5 + 0.5;\n    float n2 = cnoise(vec3(p * (uScale * 1.5) - (n * uWarp), uTime * (uSpeed * 1.2))) * 0.5 + 0.5;\n\n    float mask = (base * 0.2 + n * 0.5 + n2 * 0.3) * uIntensity;\n\n    vec3 color = mix(uColor1, uColor2, smoothstep(0.1, 0.6, mask));\n    color = mix(color, uColor3, smoothstep(0.5, 0.9, mask));\n\n    float grain = fract(sin(dot(p + fract(uTime), vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * uGrain;\n\n    gl_FragColor = vec4(color, 1.0);\n  }\n";export{e as GRAPHITE_FS_SOURCE,n as GRAPHITE_VS_SOURCE};
+const GRAPHITE_VS_SOURCE = `
+  attribute vec4 aVertexPosition;
+  void main() {
+    gl_Position = aVertexPosition;
+  }
+`;
+const GRAPHITE_FS_SOURCE = `
+  precision highp float;
+  uniform vec2 uResolution;
+  uniform float uTime;
+  uniform float uSpeed;
+  uniform float uIntensity;
+  uniform float uGrain;
+  uniform float uScale;
+  uniform float uWarp;
+  uniform vec3 uColor1;
+  uniform vec3 uColor2;
+  uniform vec3 uColor3;
+
+  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+  vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
+
+  float cnoise(vec3 P){
+    vec3 Pi0 = floor(P);
+    vec3 Pi1 = Pi0 + vec3(1.0);
+    Pi0 = mod(Pi0, 289.0);
+    Pi1 = mod(Pi1, 289.0);
+    vec3 Pf0 = fract(P);
+    vec3 Pf1 = Pf0 - vec3(1.0);
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = Pi0.zzzz;
+    vec4 iz1 = Pi1.zzzz;
+
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+
+    vec4 gx0 = ixy0 / 7.0;
+    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
+    gx0 = fract(gx0);
+    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+    vec4 sz0 = step(gz0, vec4(0.0));
+    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+
+    vec4 gx1 = ixy1 / 7.0;
+    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
+    gx1 = fract(gx1);
+    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+    vec4 sz1 = step(gz1, vec4(0.0));
+    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+
+    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+
+    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+    g000 *= norm0.x;
+    g010 *= norm0.y;
+    g100 *= norm0.z;
+    g110 *= norm0.w;
+    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+    g001 *= norm1.x;
+    g011 *= norm1.y;
+    g101 *= norm1.z;
+    g111 *= norm1.w;
+
+    float n000 = dot(g000, Pf0);
+    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+    float n111 = dot(g111, Pf1);
+
+    vec3 fade_xyz = fade(Pf0);
+    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
+    return 2.2 * n_xyz;
+  }
+
+  void main() {
+    vec2 p = gl_FragCoord.xy / uResolution.xy;
+    float base = p.x * 0.5 + p.y * 0.5;
+
+    float n = cnoise(vec3(p * uScale, uTime * uSpeed)) * 0.5 + 0.5;
+    float n2 = cnoise(vec3(p * (uScale * 1.5) - (n * uWarp), uTime * (uSpeed * 1.2))) * 0.5 + 0.5;
+
+    float mask = (base * 0.2 + n * 0.5 + n2 * 0.3) * uIntensity;
+
+    vec3 color = mix(uColor1, uColor2, smoothstep(0.1, 0.6, mask));
+    color = mix(color, uColor3, smoothstep(0.5, 0.9, mask));
+
+    float grain = fract(sin(dot(p + fract(uTime), vec2(12.9898, 78.233))) * 43758.5453);
+    color += (grain - 0.5) * uGrain;
+
+    gl_FragColor = vec4(color, 1.0);
+  }
+`;
+
+export { GRAPHITE_FS_SOURCE, GRAPHITE_VS_SOURCE };

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

@@ -1 +1,369 @@
-import{LUMINA_NOISE_SVG as e,isLuminaType as t,FLUID_DEFAULT_COLORS as a,padColors as r,toAnimationDurationSec as n,LUMINA_ANIMATION_DURATION_SEC as s,toLuminaSpeed as i}from"./lumina-utils.js";import{getLuminaPresetColors as o}from"./lumina-presets.js";import{getGraphitePreset as l,GRAPHITE_DEFAULT_COLORS as d,isGraphitePresetId as m}from"./graphite-presets.js";import{getFallingParticleDefaults as u}from"./particle-defaults.js";import{CanvasAnimationController as p}from"./canvas-controller.js";import{ShaderAnimationController as g}from"./shader-controller.js";import{GraphiteShaderController as b}from"./graphite-controller.js";const f="designbase-wc-animation-background",h="graphite",y=new Set(["particles","stars","snow","flowers","confetti","aurora","plasma","mesh-flow","fluid","radiant","ethereal","graphite"]);function parseColors(e,t){if(!e)return t;try{const a=JSON.parse(e);return Array.isArray(a)&&a.length?a:t}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}}function parseAnimationBackgroundConfig(e){const t=function normalizeAnimationType(e){return e&&"gradient"!==e&&y.has(e)?e:h}(e.getAttribute("type")),a="light"===e.getAttribute("theme")?"light":"dark",r=e.getAttribute("intensity")||"subtle",n=e.getAttribute("preset")||void 0,s=e.getAttribute("zoom"),i="graphite"===t;let o=Number(s||1);if(i&&null===s){const e=m(n)?n:"graphite";o=l(e).scale}return{type:t,theme:a,intensity:r,blur:Number(e.getAttribute("blur")||80),speed:Number(e.getAttribute("speed")||3e3),direction:e.getAttribute("direction")||"left",colors:parseColors(e.getAttribute("colors"),i?[...d]:["#667eea","#764ba2","#f093fb"]),opacity:Number(e.getAttribute("opacity")||1),particleCount:Number(e.getAttribute("particle-count")||("particles"===t?15:50)),particleSize:Number(e.getAttribute("particle-size")||2),starCount:Number(e.getAttribute("star-count")||100),starSize:Number(e.getAttribute("star-size")||1.5),clickable:e.hasAttribute("clickable")&&"false"!==e.getAttribute("clickable"),wind:Number(e.getAttribute("wind")||.5),noise:Number(e.getAttribute("noise")??(i?.1:.05)),showVignette:!e.hasAttribute("show-vignette")||"false"!==e.getAttribute("show-vignette"),preset:n||(i?"graphite":void 0),zoom:o,shaderSpeed:Number(e.getAttribute("shader-speed")||.4),shaderIntensity:Number(e.getAttribute("shader-intensity")||1.2),warp:Number(e.getAttribute("warp")||1.4),disabled:e.hasAttribute("disabled")&&"false"!==e.getAttribute("disabled")}}function resolveColors(e){const{type:t,preset:r,colors:n}=e;if("graphite"===t)return r&&m(r)?[...l(r).colors]:n.length>=3?n.slice(0,3):[...d];if(r&&!m(r))return o(r);if("fluid"===t&&n.length<5)return a;if("snow"===t||"flowers"===t||"confetti"===t){const e=u(t);return 3===n.length&&"#667eea"===n[0]&&"#764ba2"===n[1]?e:n}return n}function createLuminaOverlays(t,a){const r=document.createDocumentFragment();if(t>0){const a=document.createElement("div");a.className=`${f}__lumina-noise`,a.style.backgroundImage=`url("${e}")`,a.style.opacity=String(t),r.appendChild(a)}if(a){const e=document.createElement("div");e.className=`${f}__lumina-vignette`,r.appendChild(e)}return r}function syncLuminaOverlays(t,a,r){let n=t.querySelector(`.${f}__lumina-noise`),s=t.querySelector(`.${f}__lumina-vignette`);a>0?(n||(n=document.createElement("div"),n.className=`${f}__lumina-noise`,n.style.backgroundImage=`url("${e}")`,n.style.mixBlendMode="overlay",t.appendChild(n)),n.style.opacity=String(a)):n?.remove(),r?s||(s=document.createElement("div"),s.className=`${f}__lumina-vignette`,t.appendChild(s)):s?.remove()}function mountAnimationLayers(e,t){const a=resolveColors(t);let o={};if(t.disabled)return o;switch(t.type){case"particles":case"stars":case"snow":case"flowers":case"confetti":{const r=document.createElement("div");r.className=`${f}__canvas-layer`,e.appendChild(r);const n=new p(r,{type:t.type,colors:a,speed:t.speed,particleCount:t.particleCount,particleSize:t.particleSize,starCount:t.starCount,starSize:t.starSize,clickable:t.clickable,wind:t.wind,layerOpacity:t.opacity});o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,speed:e.speed,particleCount:e.particleCount,particleSize:e.particleSize,starCount:e.starCount,starSize:e.starSize,clickable:e.clickable,wind:e.wind,layerOpacity:e.opacity})}};break}case"aurora":e.appendChild(function createMeshAuroraLayer(e,t,a,r,s){const i=document.createElement("div");i.className=`${f}__aurora-mesh`;const o="subtle"===r?.3:"medium"===r?.6:.8,l=n(t,5,1.25),d=e.length>=3?e:["#4f46e5","#ec4899","#06b6d4","#8b5cf6"],m="dark"===s?"screen":"multiply",u=`blur(${a}px)`,p=`${f}__aurora-blob`,g=[{backgroundColor:d[0],top:"-10%",left:"-10%",animationDuration:`${l}s`,animationDelay:"0s"},{backgroundColor:d[1],top:"-10%",right:"-10%",animationDuration:1.2*l+"s",animationDelay:"2s"},{backgroundColor:d[2],bottom:"-20%",left:"20%",animationDuration:1.5*l+"s",animationDelay:"4s"}];d[3]&&g.push({backgroundColor:d[3],bottom:"-10%",right:"-10%",animationDuration:1.1*l+"s",animationDelay:"1s"}),g.forEach(e=>{const t=document.createElement("div");t.className=p,Object.assign(t.style,{filter:u,opacity:String(o),mixBlendMode:m,...e}),i.appendChild(t)});const b=document.createElement("div");return b.className=`${f}__aurora-noise`,b.style.opacity="dark"===s?"0.03":"0.05",b.style.backgroundImage="url(\"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)'/%3E%3C/svg%3E\")",i.appendChild(b),i}(a,t.speed,t.blur,t.intensity,t.theme));break;case"plasma":e.appendChild(function createPlasmaLayer(e,t,a){const n=document.createElement("div");n.className=`${f}__plasma`;const o=Math.random().toString(36).slice(2,11),l=r(e),c=e=>l[e%l.length],d=i(t),m=s/d,u=document.createElement("style");u.textContent=`\n    @keyframes designbase-wc-plasma-move-1-${o} {\n      0% { transform: translate(0, 0) rotate(0deg) scale(1); }\n      25% { transform: translate(10%, 10%) rotate(90deg) scale(1.2); }\n      50% { transform: translate(0, 20%) rotate(180deg) scale(1); }\n      75% { transform: translate(-10%, 10%) rotate(270deg) scale(0.9); }\n      100% { transform: translate(0, 0) rotate(360deg) scale(1); }\n    }\n    @keyframes designbase-wc-plasma-move-2-${o} {\n      0% { transform: translate(0, 0) rotate(0deg) scale(1.2); }\n      33% { transform: translate(-20%, 0) rotate(120deg) scale(1); }\n      66% { transform: translate(20%, -10%) rotate(240deg) scale(0.8); }\n      100% { transform: translate(0, 0) rotate(360deg) scale(1.2); }\n    }\n    @keyframes designbase-wc-plasma-move-3-${o} {\n      0% { transform: translate(0, 0) scale(0.8); }\n      50% { transform: translate(15%, -15%) scale(1.4); }\n      100% { transform: translate(0, 0) scale(0.8); }\n    }\n    @keyframes designbase-wc-plasma-rotate-${o} {\n      0% { transform: rotate(0deg) scale(1.5); }\n      50% { transform: rotate(180deg) scale(2.0); }\n      100% { transform: rotate(360deg) scale(1.5); }\n    }`,n.appendChild(u);const p=document.createElement("div");return p.className=`${f}__plasma-base`,p.style.backgroundColor=c(0),n.appendChild(p),[{top:"-10%",left:"-10%",width:"70%",height:"70%",background:`radial-gradient(circle, ${c(1)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-move-1-${o} ${m}s infinite linear`},{bottom:"-20%",right:"-10%",width:"80%",height:"80%",background:`radial-gradient(circle, ${c(2)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-move-2-${o} ${m}s infinite linear`},{top:"20%",left:"20%",width:"60%",height:"60%",background:`radial-gradient(circle, ${c(3)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-rotate-${o} ${m}s infinite linear`,extraClass:`${f}__plasma-blob--exclusion`},{top:"40%",right:"20%",width:"40%",height:"40%",background:c(4),animation:`designbase-wc-plasma-move-3-${o} ${m}s infinite ease-in-out`,extraClass:`${f}__plasma-blob--accent`,filter:`blur(${a}px)`,opacity:"0.6"}].forEach(e=>{const t=document.createElement("div");t.className=`${f}__plasma-blob${e.extraClass?` ${e.extraClass}`:""}`,Object.assign(t.style,{filter:e.filter||`blur(${a}px)`,opacity:e.opacity||"0.9",...e}),n.appendChild(t)}),n}(a,t.speed,t.blur)),e.appendChild(createLuminaOverlays(t.noise,t.showVignette));break;case"mesh-flow":case"fluid":case"radiant":case"ethereal":{const r=document.createElement("div");r.className=`${f}__shader-layer`,e.appendChild(r);const n=new g(r,{variant:t.type,colors:a,speed:t.speed,blur:t.blur,noise:t.noise,zoom:t.zoom});e.appendChild(createLuminaOverlays(t.noise,t.showVignette)),o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,speed:e.speed,blur:e.blur,noise:e.noise,zoom:e.zoom})}};break}case"graphite":{const r=document.createElement("div");r.className=`${f}__shader-layer`,e.appendChild(r);const n=new b(r,{colors:a,shaderSpeed:t.shaderSpeed,shaderIntensity:t.shaderIntensity,grain:t.noise,scale:t.zoom,warp:t.warp});o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,shaderSpeed:e.shaderSpeed,shaderIntensity:e.shaderIntensity,grain:e.noise,scale:e.zoom,warp:e.warp})}};break}}return o}function applyContainerStyles(e,a){const r=t(a.type),n="graphite"===a.type,s=r||n?"#000000":"dark"===a.theme?"var(--db-surface-base, #0f172a)":"var(--db-surface-base, #ffffff)";e.style.position="relative",e.style.overflow="hidden",e.style.backgroundColor=s}export{f as ANIMATION_BACKGROUND_CLASS,applyContainerStyles,mountAnimationLayers,parseAnimationBackgroundConfig,syncLuminaOverlays};
+import { LUMINA_NOISE_SVG, isLuminaType, FLUID_DEFAULT_COLORS, padColors, toAnimationDurationSec, LUMINA_ANIMATION_DURATION_SEC, toLuminaSpeed } from './lumina-utils.js';
+import { getLuminaPresetColors } from './lumina-presets.js';
+import { getGraphitePreset, GRAPHITE_DEFAULT_COLORS, isGraphitePresetId } from './graphite-presets.js';
+import { getFallingParticleDefaults } from './particle-defaults.js';
+import { CanvasAnimationController } from './canvas-controller.js';
+import { ShaderAnimationController } from './shader-controller.js';
+import { GraphiteShaderController } from './graphite-controller.js';
+
+const CLASS = 'designbase-wc-animation-background';
+const DEFAULT_ANIMATION_TYPE = 'graphite';
+const ANIMATION_TYPES = new Set([
+    'particles',
+    'stars',
+    'snow',
+    'flowers',
+    'confetti',
+    'aurora',
+    'plasma',
+    'mesh-flow',
+    'fluid',
+    'radiant',
+    'ethereal',
+    'graphite',
+]);
+function normalizeAnimationType(raw) {
+    if (!raw || raw === 'gradient')
+        return DEFAULT_ANIMATION_TYPE;
+    return ANIMATION_TYPES.has(raw)
+        ? raw
+        : DEFAULT_ANIMATION_TYPE;
+}
+function parseColors(raw, fallback) {
+    if (!raw)
+        return fallback;
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) && parsed.length ? parsed : fallback;
+    }
+    catch {
+        return raw.split(',').map((c) => c.trim()).filter(Boolean);
+    }
+}
+function parseAnimationBackgroundConfig(el) {
+    const type = normalizeAnimationType(el.getAttribute('type'));
+    const theme = el.getAttribute('theme') === 'light' ? 'light' : 'dark';
+    const intensity = (el.getAttribute('intensity') || 'subtle');
+    const defaultColors = ['#667eea', '#764ba2', '#f093fb'];
+    const presetAttr = el.getAttribute('preset') || undefined;
+    const zoomAttr = el.getAttribute('zoom');
+    const isGraphite = type === 'graphite';
+    let zoom = Number(zoomAttr || 1);
+    if (isGraphite && zoomAttr === null) {
+        const presetId = isGraphitePresetId(presetAttr) ? presetAttr : 'graphite';
+        zoom = getGraphitePreset(presetId).scale;
+    }
+    return {
+        type,
+        theme,
+        intensity,
+        blur: Number(el.getAttribute('blur') || 80),
+        speed: Number(el.getAttribute('speed') || 3000),
+        direction: (el.getAttribute('direction') || 'left'),
+        colors: parseColors(el.getAttribute('colors'), isGraphite ? [...GRAPHITE_DEFAULT_COLORS] : defaultColors),
+        opacity: Number(el.getAttribute('opacity') || 1),
+        particleCount: Number(el.getAttribute('particle-count') || (type === 'particles' ? 15 : 50)),
+        particleSize: Number(el.getAttribute('particle-size') || 2),
+        starCount: Number(el.getAttribute('star-count') || 100),
+        starSize: Number(el.getAttribute('star-size') || 1.5),
+        clickable: el.hasAttribute('clickable') && el.getAttribute('clickable') !== 'false',
+        wind: Number(el.getAttribute('wind') || 0.5),
+        noise: Number(el.getAttribute('noise') ?? (isGraphite ? 0.1 : 0.05)),
+        showVignette: !el.hasAttribute('show-vignette') || el.getAttribute('show-vignette') !== 'false',
+        preset: (presetAttr || (isGraphite ? 'graphite' : undefined)),
+        zoom,
+        shaderSpeed: Number(el.getAttribute('shader-speed') || 0.4),
+        shaderIntensity: Number(el.getAttribute('shader-intensity') || 1.2),
+        warp: Number(el.getAttribute('warp') || 1.4),
+        disabled: el.hasAttribute('disabled') && el.getAttribute('disabled') !== 'false',
+    };
+}
+function resolveColors(config) {
+    const { type, preset, colors } = config;
+    if (type === 'graphite') {
+        if (preset && isGraphitePresetId(preset))
+            return [...getGraphitePreset(preset).colors];
+        if (colors.length >= 3)
+            return colors.slice(0, 3);
+        return [...GRAPHITE_DEFAULT_COLORS];
+    }
+    if (preset && !isGraphitePresetId(preset))
+        return getLuminaPresetColors(preset);
+    if (type === 'fluid' && colors.length < 5)
+        return FLUID_DEFAULT_COLORS;
+    if (type === 'snow' || type === 'flowers' || type === 'confetti') {
+        const defaults = getFallingParticleDefaults(type);
+        const isGenericDefault = colors.length === 3 && colors[0] === '#667eea' && colors[1] === '#764ba2';
+        return isGenericDefault ? defaults : colors;
+    }
+    return colors;
+}
+function createMeshAuroraLayer(colors, speed, blur, intensity, theme) {
+    const root = document.createElement('div');
+    root.className = `${CLASS}__aurora-mesh`;
+    const baseOpacity = intensity === 'subtle' ? 0.3 : intensity === 'medium' ? 0.6 : 0.8;
+    const duration = toAnimationDurationSec(speed, 5, 1.25);
+    const palette = colors.length >= 3 ? colors : ['#4f46e5', '#ec4899', '#06b6d4', '#8b5cf6'];
+    const blendMode = theme === 'dark' ? 'screen' : 'multiply';
+    const filterStyle = `blur(${blur}px)`;
+    const blobClass = `${CLASS}__aurora-blob`;
+    const blobs = [
+        { backgroundColor: palette[0], top: '-10%', left: '-10%', animationDuration: `${duration}s`, animationDelay: '0s' },
+        { backgroundColor: palette[1], top: '-10%', right: '-10%', animationDuration: `${duration * 1.2}s`, animationDelay: '2s' },
+        { backgroundColor: palette[2], bottom: '-20%', left: '20%', animationDuration: `${duration * 1.5}s`, animationDelay: '4s' },
+    ];
+    if (palette[3]) {
+        blobs.push({
+            backgroundColor: palette[3],
+            bottom: '-10%',
+            right: '-10%',
+            animationDuration: `${duration * 1.1}s`,
+            animationDelay: '1s',
+        });
+    }
+    blobs.forEach((style) => {
+        const blob = document.createElement('div');
+        blob.className = blobClass;
+        Object.assign(blob.style, {
+            filter: filterStyle,
+            opacity: String(baseOpacity),
+            mixBlendMode: blendMode,
+            ...style,
+        });
+        root.appendChild(blob);
+    });
+    const noise = document.createElement('div');
+    noise.className = `${CLASS}__aurora-noise`;
+    noise.style.opacity = theme === 'dark' ? '0.03' : '0.05';
+    noise.style.backgroundImage = `url("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)'/%3E%3C/svg%3E")`;
+    root.appendChild(noise);
+    return root;
+}
+function createPlasmaLayer(colors, speed, blur) {
+    const root = document.createElement('div');
+    root.className = `${CLASS}__plasma`;
+    const animId = Math.random().toString(36).slice(2, 11);
+    const palette = padColors(colors);
+    const c = (idx) => palette[idx % palette.length];
+    const luminaSpeed = toLuminaSpeed(speed);
+    const duration = LUMINA_ANIMATION_DURATION_SEC / luminaSpeed;
+    const style = document.createElement('style');
+    style.textContent = `
+    @keyframes designbase-wc-plasma-move-1-${animId} {
+      0% { transform: translate(0, 0) rotate(0deg) scale(1); }
+      25% { transform: translate(10%, 10%) rotate(90deg) scale(1.2); }
+      50% { transform: translate(0, 20%) rotate(180deg) scale(1); }
+      75% { transform: translate(-10%, 10%) rotate(270deg) scale(0.9); }
+      100% { transform: translate(0, 0) rotate(360deg) scale(1); }
+    }
+    @keyframes designbase-wc-plasma-move-2-${animId} {
+      0% { transform: translate(0, 0) rotate(0deg) scale(1.2); }
+      33% { transform: translate(-20%, 0) rotate(120deg) scale(1); }
+      66% { transform: translate(20%, -10%) rotate(240deg) scale(0.8); }
+      100% { transform: translate(0, 0) rotate(360deg) scale(1.2); }
+    }
+    @keyframes designbase-wc-plasma-move-3-${animId} {
+      0% { transform: translate(0, 0) scale(0.8); }
+      50% { transform: translate(15%, -15%) scale(1.4); }
+      100% { transform: translate(0, 0) scale(0.8); }
+    }
+    @keyframes designbase-wc-plasma-rotate-${animId} {
+      0% { transform: rotate(0deg) scale(1.5); }
+      50% { transform: rotate(180deg) scale(2.0); }
+      100% { transform: rotate(360deg) scale(1.5); }
+    }`;
+    root.appendChild(style);
+    const base = document.createElement('div');
+    base.className = `${CLASS}__plasma-base`;
+    base.style.backgroundColor = c(0);
+    root.appendChild(base);
+    const blobDefs = [
+        { top: '-10%', left: '-10%', width: '70%', height: '70%', background: `radial-gradient(circle, ${c(1)} 0%, transparent 70%)`, animation: `designbase-wc-plasma-move-1-${animId} ${duration}s infinite linear` },
+        { bottom: '-20%', right: '-10%', width: '80%', height: '80%', background: `radial-gradient(circle, ${c(2)} 0%, transparent 70%)`, animation: `designbase-wc-plasma-move-2-${animId} ${duration}s infinite linear` },
+        { top: '20%', left: '20%', width: '60%', height: '60%', background: `radial-gradient(circle, ${c(3)} 0%, transparent 70%)`, animation: `designbase-wc-plasma-rotate-${animId} ${duration}s infinite linear`, extraClass: `${CLASS}__plasma-blob--exclusion` },
+        { top: '40%', right: '20%', width: '40%', height: '40%', background: c(4), animation: `designbase-wc-plasma-move-3-${animId} ${duration}s infinite ease-in-out`, extraClass: `${CLASS}__plasma-blob--accent`, filter: `blur(${blur}px)`, opacity: '0.6' },
+    ];
+    blobDefs.forEach((def) => {
+        const blob = document.createElement('div');
+        blob.className = `${CLASS}__plasma-blob${def.extraClass ? ` ${def.extraClass}` : ''}`;
+        Object.assign(blob.style, {
+            filter: def.filter || `blur(${blur}px)`,
+            opacity: def.opacity || '0.9',
+            ...def,
+        });
+        root.appendChild(blob);
+    });
+    return root;
+}
+function createLuminaOverlays(noise, showVignette) {
+    const fragment = document.createDocumentFragment();
+    if (noise > 0) {
+        const noiseEl = document.createElement('div');
+        noiseEl.className = `${CLASS}__lumina-noise`;
+        noiseEl.style.backgroundImage = `url("${LUMINA_NOISE_SVG}")`;
+        noiseEl.style.opacity = String(noise);
+        fragment.appendChild(noiseEl);
+    }
+    if (showVignette) {
+        const vignette = document.createElement('div');
+        vignette.className = `${CLASS}__lumina-vignette`;
+        fragment.appendChild(vignette);
+    }
+    return fragment;
+}
+function syncLuminaOverlays(layersEl, noise, showVignette) {
+    let noiseEl = layersEl.querySelector(`.${CLASS}__lumina-noise`);
+    let vignetteEl = layersEl.querySelector(`.${CLASS}__lumina-vignette`);
+    if (noise > 0) {
+        if (!noiseEl) {
+            noiseEl = document.createElement('div');
+            noiseEl.className = `${CLASS}__lumina-noise`;
+            noiseEl.style.backgroundImage = `url("${LUMINA_NOISE_SVG}")`;
+            noiseEl.style.mixBlendMode = 'overlay';
+            layersEl.appendChild(noiseEl);
+        }
+        noiseEl.style.opacity = String(noise);
+    }
+    else {
+        noiseEl?.remove();
+    }
+    if (showVignette) {
+        if (!vignetteEl) {
+            vignetteEl = document.createElement('div');
+            vignetteEl.className = `${CLASS}__lumina-vignette`;
+            layersEl.appendChild(vignetteEl);
+        }
+    }
+    else {
+        vignetteEl?.remove();
+    }
+}
+function mountAnimationLayers(layersEl, config) {
+    const resolvedColors = resolveColors(config);
+    let handle = {};
+    if (config.disabled)
+        return handle;
+    switch (config.type) {
+        case 'particles':
+        case 'stars':
+        case 'snow':
+        case 'flowers':
+        case 'confetti': {
+            const container = document.createElement('div');
+            container.className = `${CLASS}__canvas-layer`;
+            layersEl.appendChild(container);
+            const controller = new CanvasAnimationController(container, {
+                type: config.type,
+                colors: resolvedColors,
+                speed: config.speed,
+                particleCount: config.particleCount,
+                particleSize: config.particleSize,
+                starCount: config.starCount,
+                starSize: config.starSize,
+                clickable: config.clickable,
+                wind: config.wind,
+                layerOpacity: config.opacity,
+            });
+            handle = {
+                destroy: () => controller.destroy(),
+                update: (next) => {
+                    const nextColors = resolveColors(next);
+                    controller.updateOptions({
+                        colors: nextColors,
+                        speed: next.speed,
+                        particleCount: next.particleCount,
+                        particleSize: next.particleSize,
+                        starCount: next.starCount,
+                        starSize: next.starSize,
+                        clickable: next.clickable,
+                        wind: next.wind,
+                        layerOpacity: next.opacity,
+                    });
+                },
+            };
+            break;
+        }
+        case 'aurora':
+            layersEl.appendChild(createMeshAuroraLayer(resolvedColors, config.speed, config.blur, config.intensity, config.theme));
+            break;
+        case 'plasma':
+            layersEl.appendChild(createPlasmaLayer(resolvedColors, config.speed, config.blur));
+            layersEl.appendChild(createLuminaOverlays(config.noise, config.showVignette));
+            break;
+        case 'mesh-flow':
+        case 'fluid':
+        case 'radiant':
+        case 'ethereal': {
+            const shaderContainer = document.createElement('div');
+            shaderContainer.className = `${CLASS}__shader-layer`;
+            layersEl.appendChild(shaderContainer);
+            const controller = new ShaderAnimationController(shaderContainer, {
+                variant: config.type,
+                colors: resolvedColors,
+                speed: config.speed,
+                blur: config.blur,
+                noise: config.noise,
+                zoom: config.zoom,
+            });
+            layersEl.appendChild(createLuminaOverlays(config.noise, config.showVignette));
+            handle = {
+                destroy: () => controller.destroy(),
+                update: (next) => {
+                    const nextColors = resolveColors(next);
+                    controller.updateOptions({
+                        colors: nextColors,
+                        speed: next.speed,
+                        blur: next.blur,
+                        noise: next.noise,
+                        zoom: next.zoom,
+                    });
+                },
+            };
+            break;
+        }
+        case 'graphite': {
+            const shaderContainer = document.createElement('div');
+            shaderContainer.className = `${CLASS}__shader-layer`;
+            layersEl.appendChild(shaderContainer);
+            const controller = new GraphiteShaderController(shaderContainer, {
+                colors: resolvedColors,
+                shaderSpeed: config.shaderSpeed,
+                shaderIntensity: config.shaderIntensity,
+                grain: config.noise,
+                scale: config.zoom,
+                warp: config.warp,
+            });
+            handle = {
+                destroy: () => controller.destroy(),
+                update: (next) => {
+                    const nextColors = resolveColors(next);
+                    controller.updateOptions({
+                        colors: nextColors,
+                        shaderSpeed: next.shaderSpeed,
+                        shaderIntensity: next.shaderIntensity,
+                        grain: next.noise,
+                        scale: next.zoom,
+                        warp: next.warp,
+                    });
+                },
+            };
+            break;
+        }
+    }
+    return handle;
+}
+function applyContainerStyles(host, config) {
+    const isLumina = isLuminaType(config.type);
+    const isGraphite = config.type === 'graphite';
+    const backgroundColor = isLumina || isGraphite
+        ? '#000000'
+        : config.theme === 'dark'
+            ? 'var(--db-surface-base, #0f172a)'
+            : 'var(--db-surface-base, #ffffff)';
+    host.style.position = 'relative';
+    host.style.overflow = 'hidden';
+    host.style.backgroundColor = backgroundColor;
+    host.style.border = 'none';
+}
+
+export { CLASS as ANIMATION_BACKGROUND_CLASS, applyContainerStyles, mountAnimationLayers, parseAnimationBackgroundConfig, syncLuminaOverlays };

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

@@ -1 +1,53 @@
-const F=[{id:"neon_dream",name:"Neon Dream",colors:["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"]},{id:"sunset_bliss",name:"Sunset Bliss",colors:["#FF9900","#FF00CC","#6600FF","#FF5500","#220055"]},{id:"deep_ocean",name:"Deep Ocean",colors:["#001133","#0044FF","#00DDFF","#00FFAA","#000066"]},{id:"forest_mist",name:"Forest Mist",colors:["#002200","#00FF44","#AAFF00","#006622","#CCFFCC"]},{id:"northern_lights",name:"Northern Lights",colors:["#000000","#00FF99","#AA00FF","#0044FF","#FFFFFF"]},{id:"monochrome_fog",name:"Monochrome Fog",colors:["#000000","#333333","#888888","#CCCCCC","#FFFFFF"]},{id:"cotton_candy",name:"Cotton Candy",colors:["#FFC0CB","#87CEFA","#E0FFFF","#DDA0DD","#FF69B4"]},{id:"cyber_glitch",name:"Cyber Glitch",colors:["#1A1A1D","#C3073F","#6F2232","#950740","#4E4E50"]},{id:"golden_hour",name:"Golden Hour",colors:["#FF4E50","#FC913A","#F9D423","#EDE574","#E1F5C4"]}];function getLuminaPresetColors(o){const e=F.find(F=>F.id===o);return e?.colors??F[0].colors}export{F as LUMINA_COLOR_PRESETS,getLuminaPresetColors};
+const LUMINA_COLOR_PRESETS = [
+    {
+        id: 'neon_dream',
+        name: 'Neon Dream',
+        colors: ['#7000FF', '#FF00AA', '#3300FF', '#FFCC00', '#00FFFF'],
+    },
+    {
+        id: 'sunset_bliss',
+        name: 'Sunset Bliss',
+        colors: ['#FF9900', '#FF00CC', '#6600FF', '#FF5500', '#220055'],
+    },
+    {
+        id: 'deep_ocean',
+        name: 'Deep Ocean',
+        colors: ['#001133', '#0044FF', '#00DDFF', '#00FFAA', '#000066'],
+    },
+    {
+        id: 'forest_mist',
+        name: 'Forest Mist',
+        colors: ['#002200', '#00FF44', '#AAFF00', '#006622', '#CCFFCC'],
+    },
+    {
+        id: 'northern_lights',
+        name: 'Northern Lights',
+        colors: ['#000000', '#00FF99', '#AA00FF', '#0044FF', '#FFFFFF'],
+    },
+    {
+        id: 'monochrome_fog',
+        name: 'Monochrome Fog',
+        colors: ['#000000', '#333333', '#888888', '#CCCCCC', '#FFFFFF'],
+    },
+    {
+        id: 'cotton_candy',
+        name: 'Cotton Candy',
+        colors: ['#FFC0CB', '#87CEFA', '#E0FFFF', '#DDA0DD', '#FF69B4'],
+    },
+    {
+        id: 'cyber_glitch',
+        name: 'Cyber Glitch',
+        colors: ['#1A1A1D', '#C3073F', '#6F2232', '#950740', '#4E4E50'],
+    },
+    {
+        id: 'golden_hour',
+        name: 'Golden Hour',
+        colors: ['#FF4E50', '#FC913A', '#F9D423', '#EDE574', '#E1F5C4'],
+    },
+];
+function getLuminaPresetColors(presetId) {
+    const preset = LUMINA_COLOR_PRESETS.find((p) => p.id === presetId);
+    return preset?.colors ?? LUMINA_COLOR_PRESETS[0].colors;
+}
+
+export { LUMINA_COLOR_PRESETS, getLuminaPresetColors };