@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,121 @@
-import{drawFallingParticles as e,drawStars as t,drawParticles as s}from"./renderers.js";import{toSpeedRate as i}from"./lumina-utils.js";const n=["snow","flowers","confetti"];class CanvasAnimationController{constructor(o,a){this.raf=0,this.frameCount=0,this.mouse={x:-9999,y:-9999},this.particlesRef={current:[]},this.starsRef={current:[]},this.fallingRef={current:[]},this.tick=()=>{const o=this.canvas.getContext("2d");if(!o)return void(this.raf=requestAnimationFrame(this.tick));const a=window.devicePixelRatio||1,r=this.canvas.width/a,c=this.canvas.height/a,{type:h,colors:l,speed:u,particleCount:v,particleSize:m,starCount:d,starSize:p,clickable:f,wind:w,layerOpacity:R}=this.options;o.clearRect(0,0,r,c);const g=i(u),y=this.frameCount*g;switch(this.frameCount+=1,h){case"particles":s(o,r,c,this.particlesRef,{count:v,colors:l,size:m,speed:u,mouse:this.mouse,clickable:f,layerOpacity:R});break;case"stars":t(o,r,c,this.starsRef,{count:d,colors:l,size:p,time:y,layerOpacity:R,speedRate:g});break;case"snow":case"flowers":case"confetti":(function isFallingType(e){return n.includes(e)})(h)&&e(o,r,c,this.fallingRef,h,{count:v,colors:l,size:m,speed:u,wind:w,layerOpacity:R})}this.raf=requestAnimationFrame(this.tick)},this.container=o,this.options=a,this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-animation-background__canvas",o.appendChild(this.canvas),this.onResize=()=>this.resize(),this.onMouseMove=e=>{if("particles"!==this.options.type)return;const t=this.container.getBoundingClientRect();this.mouse={x:e.clientX-t.left,y:e.clientY-t.top}},this.onMouseLeave=()=>{this.mouse={x:-9999,y:-9999}},o.addEventListener("mousemove",this.onMouseMove),o.addEventListener("mouseleave",this.onMouseLeave),window.addEventListener("resize",this.onResize),this.particlesRef.current=[],this.starsRef.current=[],this.fallingRef.current=[],this.frameCount=0,this.resize(),this.tick()}updateOptions(e){this.options={...this.options,...e}}destroy(){cancelAnimationFrame(this.raf),this.container.removeEventListener("mousemove",this.onMouseMove),this.container.removeEventListener("mouseleave",this.onMouseLeave),window.removeEventListener("resize",this.onResize),this.canvas.remove()}resize(){const e=window.devicePixelRatio||1,t=this.container.getBoundingClientRect();this.canvas.width=t.width*e,this.canvas.height=t.height*e,this.canvas.style.width=`${t.width}px`,this.canvas.style.height=`${t.height}px`;const s=this.canvas.getContext("2d");s&&s.setTransform(e,0,0,e,0,0)}}export{CanvasAnimationController};
+import { drawFallingParticles, drawStars, drawParticles } from './renderers.js';
+import { toSpeedRate } from './lumina-utils.js';
+
+const CLASS = 'designbase-wc-animation-background';
+const FALLING_TYPES = ['snow', 'flowers', 'confetti'];
+function isFallingType(type) {
+    return FALLING_TYPES.includes(type);
+}
+class CanvasAnimationController {
+    constructor(container, options) {
+        this.raf = 0;
+        this.frameCount = 0;
+        this.mouse = { x: -9999, y: -9999 };
+        this.particlesRef = { current: [] };
+        this.starsRef = { current: [] };
+        this.fallingRef = { current: [] };
+        this.tick = () => {
+            const ctx = this.canvas.getContext('2d');
+            if (!ctx) {
+                this.raf = requestAnimationFrame(this.tick);
+                return;
+            }
+            const dpr = window.devicePixelRatio || 1;
+            const width = this.canvas.width / dpr;
+            const height = this.canvas.height / dpr;
+            const { type, colors, speed, particleCount, particleSize, starCount, starSize, clickable, wind, layerOpacity, } = this.options;
+            ctx.clearRect(0, 0, width, height);
+            const speedRate = toSpeedRate(speed);
+            const time = this.frameCount * speedRate;
+            this.frameCount += 1;
+            switch (type) {
+                case 'particles':
+                    drawParticles(ctx, width, height, this.particlesRef, {
+                        count: particleCount,
+                        colors,
+                        size: particleSize,
+                        speed,
+                        mouse: this.mouse,
+                        clickable,
+                        layerOpacity,
+                    });
+                    break;
+                case 'stars':
+                    drawStars(ctx, width, height, this.starsRef, {
+                        count: starCount,
+                        colors,
+                        size: starSize,
+                        time,
+                        layerOpacity,
+                        speedRate,
+                    });
+                    break;
+                case 'snow':
+                case 'flowers':
+                case 'confetti':
+                    if (isFallingType(type)) {
+                        drawFallingParticles(ctx, width, height, this.fallingRef, type, {
+                            count: particleCount,
+                            colors,
+                            size: particleSize,
+                            speed,
+                            wind,
+                            layerOpacity,
+                        });
+                    }
+                    break;
+            }
+            this.raf = requestAnimationFrame(this.tick);
+        };
+        this.container = container;
+        this.options = options;
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = `${CLASS}__canvas`;
+        container.appendChild(this.canvas);
+        this.onResize = () => this.resize();
+        this.onMouseMove = (event) => {
+            if (this.options.type !== 'particles')
+                return;
+            const rect = this.container.getBoundingClientRect();
+            this.mouse = {
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            };
+        };
+        this.onMouseLeave = () => {
+            this.mouse = { x: -9999, y: -9999 };
+        };
+        container.addEventListener('mousemove', this.onMouseMove);
+        container.addEventListener('mouseleave', this.onMouseLeave);
+        window.addEventListener('resize', this.onResize);
+        this.particlesRef.current = [];
+        this.starsRef.current = [];
+        this.fallingRef.current = [];
+        this.frameCount = 0;
+        this.resize();
+        this.tick();
+    }
+    updateOptions(options) {
+        this.options = { ...this.options, ...options };
+    }
+    destroy() {
+        cancelAnimationFrame(this.raf);
+        this.container.removeEventListener('mousemove', this.onMouseMove);
+        this.container.removeEventListener('mouseleave', this.onMouseLeave);
+        window.removeEventListener('resize', this.onResize);
+        this.canvas.remove();
+    }
+    resize() {
+        const dpr = window.devicePixelRatio || 1;
+        const rect = this.container.getBoundingClientRect();
+        this.canvas.width = rect.width * dpr;
+        this.canvas.height = rect.height * dpr;
+        this.canvas.style.width = `${rect.width}px`;
+        this.canvas.style.height = `${rect.height}px`;
+        const ctx = this.canvas.getContext('2d');
+        if (ctx)
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+}
+
+export { CanvasAnimationController };

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

@@ -1 +1,180 @@
-import{GRAPHITE_PRESET_IDS as e}from"./graphite-presets.js";const t=3e3,r={speed:{attr:"speed",label:"Speed (×)",kind:"range",min:500,max:12e3,step:100,default:t,display:{min:.2,max:4,step:.1,fixed:1,fromAttr:e=>{const r=Math.min(12e3,Math.max(500,e));return Math.round(r/t*10)/10},toAttr:e=>{const r=Math.min(4,Math.max(.2,e));return Math.round(r*t)}}},blur:{attr:"blur",label:"Blur",kind:"range",min:0,max:200,step:2,default:80},opacity:{attr:"opacity",label:"Opacity",kind:"range",min:0,max:1,step:.05,default:1,fixed:2},noise:{attr:"noise",label:"Noise",kind:"range",min:0,max:.4,step:.01,default:.05,fixed:2},zoom:{attr:"zoom",label:"Zoom",kind:"range",min:.5,max:3,step:.1,default:1,fixed:1},particleCount:{attr:"particle-count",label:"Particle Count",kind:"range",min:10,max:250,step:5,default:50},particleCountParticles:{attr:"particle-count",label:"Particle Count",kind:"range",min:10,max:250,step:5,default:15},particleSize:{attr:"particle-size",label:"Particle Size",kind:"range",min:1,max:10,step:.5,default:2,fixed:1},starCount:{attr:"star-count",label:"Star Count",kind:"range",min:20,max:500,step:10,default:100},starSize:{attr:"star-size",label:"Star Size",kind:"range",min:.5,max:6,step:.5,default:1.5,fixed:1},wind:{attr:"wind",label:"Wind",kind:"range",min:0,max:3,step:.1,default:.5,fixed:1},direction:{attr:"direction",label:"Direction",kind:"select",options:["left","right","up","down","diagonal","radial"],default:"left"},intensity:{attr:"intensity",label:"Intensity",kind:"select",options:["subtle","medium","vivid"],default:"subtle"},theme:{attr:"theme",label:"Theme",kind:"select",options:["dark","light"],default:"dark"},preset:{attr:"preset",label:"Preset",kind:"select",options:["(none)","neon_dream","sunset_bliss","deep_ocean","forest_mist","northern_lights","monochrome_fog","cotton_candy","cyber_glitch","golden_hour"],default:"(none)"},showVignette:{attr:"show-vignette",label:"Vignette",kind:"toggle",default:!0},shaderSpeed:{attr:"shader-speed",label:"Speed",kind:"range",min:0,max:3,step:.01,default:.4,fixed:2},shaderIntensity:{attr:"shader-intensity",label:"Intensity",kind:"range",min:.1,max:3,step:.01,default:1.2,fixed:2},grain:{attr:"noise",label:"Grain",kind:"range",min:0,max:.5,step:.01,default:.1,fixed:2},scale:{attr:"zoom",label:"Scale",kind:"range",min:.5,max:5,step:.1,default:1,fixed:1},warp:{attr:"warp",label:"Warp",kind:"range",min:0,max:2,step:.05,default:1.4,fixed:2},graphiteTheme:{attr:"preset",label:"Theme",kind:"select",options:[...e],default:"graphite"}};function colors(e){return{attr:"colors",label:"Colors",kind:"colors",default:e}}const a={particles:[r.particleCountParticles,r.particleSize,r.speed,r.opacity,colors(["#60a5fa","#a78bfa","#f472b6"])],stars:[r.starCount,r.starSize,r.speed,r.opacity,colors(["#ffffff","#e0e7ff","#c7d2fe"])],snow:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#ffffff","#f0f9ff","#e0f2fe"])],flowers:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#ffb7c5","#ff91a4","#f8c8dc","#ffc0cb"])],confetti:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#f44336","#e91e63","#9c27b0","#2196f3","#4caf50","#ffeb3b"])],aurora:[r.intensity,r.blur,r.speed,r.theme,colors(["#4f46e5","#ec4899","#06b6d4","#8b5cf6"])],plasma:[r.speed,r.blur,r.noise,r.showVignette,r.preset,colors(["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"])],"mesh-flow":[r.speed,r.blur,r.noise,r.zoom,colors(["#4f46e5","#ec4899","#06b6d4","#8b5cf6","#22d3ee"])],fluid:[r.speed,r.blur,r.noise,r.zoom,colors(["#001133","#0044FF","#00DDFF","#00FFAA","#000066"])],radiant:[r.speed,r.blur,r.noise,r.zoom,colors(["#FF4E50","#FC913A","#F9D423","#EDE574","#E1F5C4"])],ethereal:[r.speed,r.blur,r.noise,r.zoom,colors(["#7000FF","#FF00AA","#00FFFF","#FFFFFF","#3300FF"])],graphite:[r.shaderSpeed,r.shaderIntensity,r.grain,r.scale,r.warp,r.graphiteTheme,colors(["#000000","#333333","#b3b3b3"])]};function getControlsForType(e){return a[e]??a.graphite}function getControlSliderBounds(e){return e.display?{min:e.display.min,max:e.display.max,step:e.display.step,fixed:e.display.fixed}:{min:e.min??0,max:e.max??100,step:e.step??1,fixed:e.fixed}}function controlAttrToSlider(e,t){return e.display?e.display.fromAttr(t):t}function controlSliderToAttr(e,t){return e.display?e.display.toAttr(t):t}function readControlValue(e,t){const r=e.getAttribute(t.attr);if("colors"===t.kind){if(!r)return[...t.default];try{const e=JSON.parse(r);return Array.isArray(e)&&e.length?[...e]:[...t.default]}catch{const e=r.split(",").map(e=>e.trim()).filter(Boolean);return e.length?e:[...t.default]}}if("toggle"===t.kind)return null===r?t.default:"false"!==r;if("select"===t.kind)return r||t.default;if(null===r||""===r)return t.default;const a=Number(r);return Number.isFinite(a)?a:t.default}function writeControlAttribute(e,t,r){"colors"!==t.kind?"toggle"!==t.kind?"select"!==t.kind?e.setAttribute(t.attr,String(r)):"(none)"===r?e.removeAttribute(t.attr):e.setAttribute(t.attr,String(r)):e.setAttribute(t.attr,r?"true":"false"):e.setAttribute(t.attr,JSON.stringify(r))}function resetControlsToDefaults(e,t){t.forEach(t=>{const r=t.default;"select"!==t.kind||r!==t.default?writeControlAttribute(e,t,Array.isArray(r)?[...r]:r):"(none)"===r?e.removeAttribute(t.attr):writeControlAttribute(e,t,r)})}export{controlAttrToSlider,controlSliderToAttr,getControlSliderBounds,getControlsForType,readControlValue,resetControlsToDefaults,writeControlAttribute};
+import { GRAPHITE_PRESET_IDS } from './graphite-presets.js';
+
+const SPEED_MS_MIN = 500;
+const SPEED_MS_MAX = 12000;
+const SPEED_MS_BASE = 3000;
+const speedDisplay = {
+    min: 0.2,
+    max: 4,
+    step: 0.1,
+    fixed: 1,
+    fromAttr: (ms) => {
+        const clamped = Math.min(SPEED_MS_MAX, Math.max(SPEED_MS_MIN, ms));
+        return Math.round((clamped / SPEED_MS_BASE) * 10) / 10;
+    },
+    toAttr: (mult) => {
+        const clamped = Math.min(4, Math.max(0.2, mult));
+        return Math.round(clamped * SPEED_MS_BASE);
+    },
+};
+const PRESET_OPTIONS = [
+    '(none)',
+    'neon_dream',
+    'sunset_bliss',
+    'deep_ocean',
+    'forest_mist',
+    'northern_lights',
+    'monochrome_fog',
+    'cotton_candy',
+    'cyber_glitch',
+    'golden_hour',
+];
+const C = {
+    speed: {
+        attr: 'speed',
+        label: 'Speed (×)',
+        kind: 'range',
+        min: SPEED_MS_MIN,
+        max: SPEED_MS_MAX,
+        step: 100,
+        default: SPEED_MS_BASE,
+        display: speedDisplay,
+    },
+    blur: { attr: 'blur', label: 'Blur', kind: 'range', min: 0, max: 200, step: 2, default: 80 },
+    opacity: { attr: 'opacity', label: 'Opacity', kind: 'range', min: 0, max: 1, step: 0.05, default: 1, fixed: 2 },
+    noise: { attr: 'noise', label: 'Noise', kind: 'range', min: 0, max: 0.4, step: 0.01, default: 0.05, fixed: 2 },
+    zoom: { attr: 'zoom', label: 'Zoom', kind: 'range', min: 0.5, max: 3, step: 0.1, default: 1, fixed: 1 },
+    particleCount: { attr: 'particle-count', label: 'Particle Count', kind: 'range', min: 10, max: 250, step: 5, default: 50 },
+    particleCountParticles: { attr: 'particle-count', label: 'Particle Count', kind: 'range', min: 10, max: 250, step: 5, default: 15 },
+    particleSize: { attr: 'particle-size', label: 'Particle Size', kind: 'range', min: 1, max: 10, step: 0.5, default: 2, fixed: 1 },
+    starCount: { attr: 'star-count', label: 'Star Count', kind: 'range', min: 20, max: 500, step: 10, default: 100 },
+    starSize: { attr: 'star-size', label: 'Star Size', kind: 'range', min: 0.5, max: 6, step: 0.5, default: 1.5, fixed: 1 },
+    wind: { attr: 'wind', label: 'Wind', kind: 'range', min: 0, max: 3, step: 0.1, default: 0.5, fixed: 1 },
+    direction: { attr: 'direction', label: 'Direction', kind: 'select', options: ['left', 'right', 'up', 'down', 'diagonal', 'radial'], default: 'left' },
+    intensity: { attr: 'intensity', label: 'Intensity', kind: 'select', options: ['subtle', 'medium', 'vivid'], default: 'subtle' },
+    theme: { attr: 'theme', label: 'Theme', kind: 'select', options: ['dark', 'light'], default: 'dark' },
+    preset: { attr: 'preset', label: 'Preset', kind: 'select', options: PRESET_OPTIONS, default: '(none)' },
+    showVignette: { attr: 'show-vignette', label: 'Vignette', kind: 'toggle', default: true },
+    shaderSpeed: { attr: 'shader-speed', label: 'Speed', kind: 'range', min: 0, max: 3, step: 0.01, default: 0.4, fixed: 2 },
+    shaderIntensity: { attr: 'shader-intensity', label: 'Intensity', kind: 'range', min: 0.1, max: 3, step: 0.01, default: 1.2, fixed: 2 },
+    grain: { attr: 'noise', label: 'Grain', kind: 'range', min: 0, max: 0.5, step: 0.01, default: 0.1, fixed: 2 },
+    scale: { attr: 'zoom', label: 'Scale', kind: 'range', min: 0.5, max: 5, step: 0.1, default: 1, fixed: 1 },
+    warp: { attr: 'warp', label: 'Warp', kind: 'range', min: 0, max: 2, step: 0.05, default: 1.4, fixed: 2 },
+    graphiteTheme: { attr: 'preset', label: 'Theme', kind: 'select', options: [...GRAPHITE_PRESET_IDS], default: 'graphite' },
+};
+function colors(defaults) {
+    return { attr: 'colors', label: 'Colors', kind: 'colors', default: defaults };
+}
+const TYPE_CONTROLS = {
+    particles: [C.particleCountParticles, C.particleSize, C.speed, C.opacity, colors(['#60a5fa', '#a78bfa', '#f472b6'])],
+    stars: [C.starCount, C.starSize, C.speed, C.opacity, colors(['#ffffff', '#e0e7ff', '#c7d2fe'])],
+    snow: [C.particleCount, C.particleSize, C.speed, C.wind, colors(['#ffffff', '#f0f9ff', '#e0f2fe'])],
+    flowers: [C.particleCount, C.particleSize, C.speed, C.wind, colors(['#ffb7c5', '#ff91a4', '#f8c8dc', '#ffc0cb'])],
+    confetti: [C.particleCount, C.particleSize, C.speed, C.wind, colors(['#f44336', '#e91e63', '#9c27b0', '#2196f3', '#4caf50', '#ffeb3b'])],
+    aurora: [C.intensity, C.blur, C.speed, C.theme, colors(['#4f46e5', '#ec4899', '#06b6d4', '#8b5cf6'])],
+    plasma: [C.speed, C.blur, C.noise, C.showVignette, C.preset, colors(['#7000FF', '#FF00AA', '#3300FF', '#FFCC00', '#00FFFF'])],
+    'mesh-flow': [C.speed, C.blur, C.noise, C.zoom, colors(['#4f46e5', '#ec4899', '#06b6d4', '#8b5cf6', '#22d3ee'])],
+    fluid: [C.speed, C.blur, C.noise, C.zoom, colors(['#001133', '#0044FF', '#00DDFF', '#00FFAA', '#000066'])],
+    radiant: [C.speed, C.blur, C.noise, C.zoom, colors(['#FF4E50', '#FC913A', '#F9D423', '#EDE574', '#E1F5C4'])],
+    ethereal: [C.speed, C.blur, C.noise, C.zoom, colors(['#7000FF', '#FF00AA', '#00FFFF', '#FFFFFF', '#3300FF'])],
+    graphite: [
+        C.shaderSpeed,
+        C.shaderIntensity,
+        C.grain,
+        C.scale,
+        C.warp,
+        C.graphiteTheme,
+        colors(['#000000', '#333333', '#b3b3b3']),
+    ],
+};
+function getControlsForType(type) {
+    return TYPE_CONTROLS[type] ?? TYPE_CONTROLS.graphite;
+}
+function getControlSliderBounds(control) {
+    if (control.display) {
+        return {
+            min: control.display.min,
+            max: control.display.max,
+            step: control.display.step,
+            fixed: control.display.fixed,
+        };
+    }
+    return {
+        min: control.min ?? 0,
+        max: control.max ?? 100,
+        step: control.step ?? 1,
+        fixed: control.fixed,
+    };
+}
+function controlAttrToSlider(control, attrValue) {
+    if (control.display)
+        return control.display.fromAttr(attrValue);
+    return attrValue;
+}
+function controlSliderToAttr(control, sliderValue) {
+    if (control.display)
+        return control.display.toAttr(sliderValue);
+    return sliderValue;
+}
+function readControlValue(el, control) {
+    const raw = el.getAttribute(control.attr);
+    if (control.kind === 'colors') {
+        if (!raw)
+            return [...control.default];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) && parsed.length ? [...parsed] : [...control.default];
+        }
+        catch {
+            const split = raw.split(',').map((c) => c.trim()).filter(Boolean);
+            return split.length ? split : [...control.default];
+        }
+    }
+    if (control.kind === 'toggle') {
+        if (raw === null)
+            return control.default;
+        return raw !== 'false';
+    }
+    if (control.kind === 'select') {
+        if (!raw)
+            return control.default;
+        return raw;
+    }
+    if (raw === null || raw === '')
+        return control.default;
+    const num = Number(raw);
+    return Number.isFinite(num) ? num : control.default;
+}
+function writeControlAttribute(el, control, value) {
+    if (control.kind === 'colors') {
+        el.setAttribute(control.attr, JSON.stringify(value));
+        return;
+    }
+    if (control.kind === 'toggle') {
+        el.setAttribute(control.attr, value ? 'true' : 'false');
+        return;
+    }
+    if (control.kind === 'select') {
+        if (value === '(none)')
+            el.removeAttribute(control.attr);
+        else
+            el.setAttribute(control.attr, String(value));
+        return;
+    }
+    el.setAttribute(control.attr, String(value));
+}
+function resetControlsToDefaults(el, controls) {
+    controls.forEach((control) => {
+        const value = control.default;
+        if (control.kind === 'select' && value === control.default) {
+            if (value === '(none)')
+                el.removeAttribute(control.attr);
+            else
+                writeControlAttribute(el, control, value);
+            return;
+        }
+        writeControlAttribute(el, control, Array.isArray(value) ? [...value] : value);
+    });
+}
+
+export { controlAttrToSlider, controlSliderToAttr, getControlSliderBounds, getControlsForType, readControlValue, resetControlsToDefaults, writeControlAttribute };

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

@@ -1 +1,196 @@
-import{hexToRgb as r}from"./lumina-utils.js";import{GRAPHITE_VS_SOURCE as e,GRAPHITE_FS_SOURCE as t}from"./graphite-shader.js";const i=.05;function loadShader(r,e,t){const i=r.createShader(e);return i?(r.shaderSource(i,t),r.compileShader(i),r.getShaderParameter(i,r.COMPILE_STATUS)?i:(r.deleteShader(i),null)):null}function lerp(r,e,t){return r+(e-r)*t}function lerpRgb(r,e,t){return[lerp(r[0],e[0],t),lerp(r[1],e[1],t),lerp(r[2],e[2],t)]}class GraphiteShaderController{constructor(r,e){this.raf=0,this.startTime=performance.now(),this.current={shaderSpeed:0,shaderIntensity:0,grain:0,scale:0,warp:0,color1:[0,0,0],color2:[0,0,0],color3:[0,0,0]},this.render=()=>{const r=this.gl,e=this.program,t=this.positionBuffer;if(!r||!e||!t)return;this.tickLerp();const{width:i,height:n}=this.resizeCanvas();if(0===i||0===n)return void(this.raf=requestAnimationFrame(this.render));r.viewport(0,0,i,n),r.useProgram(e);const s=r.getAttribLocation(e,"aVertexPosition"),o=r.getUniformLocation(e,"uResolution"),a=r.getUniformLocation(e,"uTime"),h=r.getUniformLocation(e,"uSpeed"),c=r.getUniformLocation(e,"uIntensity"),u=r.getUniformLocation(e,"uGrain"),l=r.getUniformLocation(e,"uScale"),d=r.getUniformLocation(e,"uWarp"),f=r.getUniformLocation(e,"uColor1"),m=r.getUniformLocation(e,"uColor2"),p=r.getUniformLocation(e,"uColor3");r.enableVertexAttribArray(s),r.bindBuffer(r.ARRAY_BUFFER,t),r.vertexAttribPointer(s,2,r.FLOAT,!1,0,0);const g=(performance.now()-this.startTime)/1e3;o&&r.uniform2f(o,i,n),a&&r.uniform1f(a,g),h&&r.uniform1f(h,this.current.shaderSpeed),c&&r.uniform1f(c,this.current.shaderIntensity),u&&r.uniform1f(u,this.current.grain),l&&r.uniform1f(l,this.current.scale),d&&r.uniform1f(d,this.current.warp),f&&r.uniform3fv(f,this.current.color1),m&&r.uniform3fv(m,this.current.color2),p&&r.uniform3fv(p,this.current.color3),r.drawArrays(r.TRIANGLE_STRIP,0,4),this.raf=requestAnimationFrame(this.render)},this.container=r,this.options=e,this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-animation-background__shader-canvas",r.appendChild(this.canvas),this.syncCurrentImmediate(e),this.init()}updateOptions(r){this.options={...this.options,...r}}syncCurrentImmediate(e){const[t,i,n]=this.resolveColors(e.colors);this.current={shaderSpeed:e.shaderSpeed,shaderIntensity:e.shaderIntensity,grain:e.grain,scale:e.scale,warp:e.warp,color1:r(t),color2:r(i),color3:r(n)}}resolveColors(r){return[r[0]??"#000000",r[1]??"#333333",r[2]??"#b3b3b3"]}resizeCanvas(){const r=this.container.getBoundingClientRect(),e=window.devicePixelRatio||1;return this.canvas.width=Math.max(1,r.width*e),this.canvas.height=Math.max(1,r.height*e),this.canvas.style.width=`${r.width}px`,this.canvas.style.height=`${r.height}px`,{width:this.canvas.width,height:this.canvas.height}}init(){const r=this.canvas.getContext("webgl");if(!r)return;this.gl=r;const i=r.createProgram();if(!i)return;const n=loadShader(r,r.VERTEX_SHADER,e),s=loadShader(r,r.FRAGMENT_SHADER,t);if(!n||!s)return;if(r.attachShader(i,n),r.attachShader(i,s),r.linkProgram(i),!r.getProgramParameter(i,r.LINK_STATUS))return;this.program=i,this.vertexShader=n,this.fragmentShader=s;const o=r.createBuffer();o&&(this.positionBuffer=o,r.bindBuffer(r.ARRAY_BUFFER,o),r.bufferData(r.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),r.STATIC_DRAW),this.observer=new ResizeObserver(()=>this.resizeCanvas()),this.observer.observe(this.container),this.startTime=performance.now(),this.render())}tickLerp(){const{colors:e,shaderSpeed:t,shaderIntensity:n,grain:s,scale:o,warp:a}=this.options,[h,c,u]=this.resolveColors(e),l=r(h),d=r(c),f=r(u);this.current.shaderSpeed=lerp(this.current.shaderSpeed,t,i),this.current.shaderIntensity=lerp(this.current.shaderIntensity,n,i),this.current.grain=lerp(this.current.grain,s,i),this.current.scale=lerp(this.current.scale,o,i),this.current.warp=lerp(this.current.warp,a,i),this.current.color1=lerpRgb(this.current.color1,l,i),this.current.color2=lerpRgb(this.current.color2,d,i),this.current.color3=lerpRgb(this.current.color3,f,i)}destroy(){cancelAnimationFrame(this.raf),this.observer?.disconnect();const r=this.gl;r&&this.program&&(this.vertexShader&&r.deleteShader(this.vertexShader),this.fragmentShader&&r.deleteShader(this.fragmentShader),this.positionBuffer&&r.deleteBuffer(this.positionBuffer),r.deleteProgram(this.program)),this.canvas.remove()}}export{GraphiteShaderController};
+import { hexToRgb } from './lumina-utils.js';
+import { GRAPHITE_VS_SOURCE, GRAPHITE_FS_SOURCE } from './graphite-shader.js';
+
+const CLASS = 'designbase-wc-animation-background';
+const LERP = 0.05;
+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;
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+function lerpRgb(current, target, t) {
+    return [
+        lerp(current[0], target[0], t),
+        lerp(current[1], target[1], t),
+        lerp(current[2], target[2], t),
+    ];
+}
+class GraphiteShaderController {
+    constructor(container, options) {
+        this.raf = 0;
+        this.startTime = performance.now();
+        this.current = {
+            shaderSpeed: 0,
+            shaderIntensity: 0,
+            grain: 0,
+            scale: 0,
+            warp: 0,
+            color1: [0, 0, 0],
+            color2: [0, 0, 0],
+            color3: [0, 0, 0],
+        };
+        this.render = () => {
+            const gl = this.gl;
+            const program = this.program;
+            const positionBuffer = this.positionBuffer;
+            if (!gl || !program || !positionBuffer)
+                return;
+            this.tickLerp();
+            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 uSpeed = gl.getUniformLocation(program, 'uSpeed');
+            const uIntensity = gl.getUniformLocation(program, 'uIntensity');
+            const uGrain = gl.getUniformLocation(program, 'uGrain');
+            const uScale = gl.getUniformLocation(program, 'uScale');
+            const uWarp = gl.getUniformLocation(program, 'uWarp');
+            const uColor1 = gl.getUniformLocation(program, 'uColor1');
+            const uColor2 = gl.getUniformLocation(program, 'uColor2');
+            const uColor3 = gl.getUniformLocation(program, 'uColor3');
+            gl.enableVertexAttribArray(aVertexPosition);
+            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+            gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
+            const elapsed = (performance.now() - this.startTime) / 1000;
+            if (uResolution)
+                gl.uniform2f(uResolution, width, height);
+            if (uTime)
+                gl.uniform1f(uTime, elapsed);
+            if (uSpeed)
+                gl.uniform1f(uSpeed, this.current.shaderSpeed);
+            if (uIntensity)
+                gl.uniform1f(uIntensity, this.current.shaderIntensity);
+            if (uGrain)
+                gl.uniform1f(uGrain, this.current.grain);
+            if (uScale)
+                gl.uniform1f(uScale, this.current.scale);
+            if (uWarp)
+                gl.uniform1f(uWarp, this.current.warp);
+            if (uColor1)
+                gl.uniform3fv(uColor1, this.current.color1);
+            if (uColor2)
+                gl.uniform3fv(uColor2, this.current.color2);
+            if (uColor3)
+                gl.uniform3fv(uColor3, this.current.color3);
+            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.syncCurrentImmediate(options);
+        this.init();
+    }
+    updateOptions(options) {
+        this.options = { ...this.options, ...options };
+    }
+    syncCurrentImmediate(options) {
+        const [c1, c2, c3] = this.resolveColors(options.colors);
+        this.current = {
+            shaderSpeed: options.shaderSpeed,
+            shaderIntensity: options.shaderIntensity,
+            grain: options.grain,
+            scale: options.scale,
+            warp: options.warp,
+            color1: hexToRgb(c1),
+            color2: hexToRgb(c2),
+            color3: hexToRgb(c3),
+        };
+    }
+    resolveColors(colors) {
+        const c1 = colors[0] ?? '#000000';
+        const c2 = colors[1] ?? '#333333';
+        const c3 = colors[2] ?? '#b3b3b3';
+        return [c1, c2, c3];
+    }
+    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 shaderProgram = gl.createProgram();
+        if (!shaderProgram)
+            return;
+        const vertexShader = loadShader(gl, gl.VERTEX_SHADER, GRAPHITE_VS_SOURCE);
+        const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, GRAPHITE_FS_SOURCE);
+        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();
+    }
+    tickLerp() {
+        const { colors, shaderSpeed, shaderIntensity, grain, scale, warp } = this.options;
+        const [c1, c2, c3] = this.resolveColors(colors);
+        const t1 = hexToRgb(c1);
+        const t2 = hexToRgb(c2);
+        const t3 = hexToRgb(c3);
+        this.current.shaderSpeed = lerp(this.current.shaderSpeed, shaderSpeed, LERP);
+        this.current.shaderIntensity = lerp(this.current.shaderIntensity, shaderIntensity, LERP);
+        this.current.grain = lerp(this.current.grain, grain, LERP);
+        this.current.scale = lerp(this.current.scale, scale, LERP);
+        this.current.warp = lerp(this.current.warp, warp, LERP);
+        this.current.color1 = lerpRgb(this.current.color1, t1, LERP);
+        this.current.color2 = lerpRgb(this.current.color2, t2, LERP);
+        this.current.color3 = lerpRgb(this.current.color3, t3, LERP);
+    }
+    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 { GraphiteShaderController };

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

@@ -1 +1,42 @@
-const e={graphite:{id:"graphite",colors:["#000000","#333333","#b3b3b3"],scale:1},abyss:{id:"abyss",colors:["#020617","#0f172a","#3b82f6"],scale:2.2},cherry:{id:"cherry",colors:["#1a0505","#4a0b1c","#e11d48"],scale:2.8},forest:{id:"forest",colors:["#021207","#064e3b","#10b981"],scale:2},sunset:{id:"sunset",colors:["#170500","#7c2d12","#f97316"],scale:3},amethyst:{id:"amethyst",colors:["#0f051a","#3b0764","#a855f7"],scale:2.4}},s=e.graphite.colors,r=Object.keys(e);function isGraphitePresetId(s){return Boolean(s&&s in e)}function getGraphitePreset(s){return e[s]}export{s as GRAPHITE_DEFAULT_COLORS,e as GRAPHITE_PRESETS,r as GRAPHITE_PRESET_IDS,getGraphitePreset,isGraphitePresetId};
+const GRAPHITE_PRESETS = {
+    graphite: {
+        id: 'graphite',
+        colors: ['#000000', '#333333', '#b3b3b3'],
+        scale: 1.0,
+    },
+    abyss: {
+        id: 'abyss',
+        colors: ['#020617', '#0f172a', '#3b82f6'],
+        scale: 2.2,
+    },
+    cherry: {
+        id: 'cherry',
+        colors: ['#1a0505', '#4a0b1c', '#e11d48'],
+        scale: 2.8,
+    },
+    forest: {
+        id: 'forest',
+        colors: ['#021207', '#064e3b', '#10b981'],
+        scale: 2.0,
+    },
+    sunset: {
+        id: 'sunset',
+        colors: ['#170500', '#7c2d12', '#f97316'],
+        scale: 3.0,
+    },
+    amethyst: {
+        id: 'amethyst',
+        colors: ['#0f051a', '#3b0764', '#a855f7'],
+        scale: 2.4,
+    },
+};
+const GRAPHITE_DEFAULT_COLORS = GRAPHITE_PRESETS.graphite.colors;
+const GRAPHITE_PRESET_IDS = Object.keys(GRAPHITE_PRESETS);
+function isGraphitePresetId(value) {
+    return Boolean(value && value in GRAPHITE_PRESETS);
+}
+function getGraphitePreset(id) {
+    return GRAPHITE_PRESETS[id];
+}
+
+export { GRAPHITE_DEFAULT_COLORS, GRAPHITE_PRESETS, GRAPHITE_PRESET_IDS, getGraphitePreset, isGraphitePresetId };