realm-loader-npm/dist/index.esm.js

A comprehensive collection of 14 beautiful circle animations with performance optimization, presets, themes, and React/Vue components

class t{constructor(){this.batteryLevel=null,this.isMobile=this.detectMobile(),this.isLowEndDevice=this.detectLowEndDevice(),this.config=this.getDefaultConfig(),this.optimizeForDevice()}static getInstance(){return t.instance||(t.instance=new t),t.instance}detectMobile(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||"ontouchstart"in window||navigator.maxTouchPoints>0}detectLowEndDevice(){const t=navigator.hardwareConcurrency||2,e=navigator.deviceMemory||4,i=window.matchMedia("(prefers-reduced-motion: reduce)").matches;return t<=2||e<=2||i}getDefaultConfig(){return{maxFPS:60,particleCount:100,quality:"high",enableReducedMotion:!1,enableBatterySaving:!1}}optimizeForDevice(){this.isLowEndDevice?(this.config.quality="low",this.config.maxFPS=30,this.config.particleCount=50,this.config.enableReducedMotion=!0,this.config.enableBatterySaving=!0):this.isMobile&&(this.config.quality="medium",this.config.maxFPS=45,this.config.particleCount=75,this.config.enableBatterySaving=!0),"getBattery"in navigator&&navigator.getBattery().then(t=>{this.batteryLevel=t.level,t.level<.2&&(this.config.enableBatterySaving=!0,this.config.maxFPS=Math.min(this.config.maxFPS,30),this.config.particleCount=Math.floor(.5*this.config.particleCount))}),document.addEventListener("visibilitychange",()=>{document.hidden?this.config.maxFPS=10:this.optimizeForDevice()})}getOptimizedConfig(t){const e={...this.config};switch(t){case"spiral-galaxy":case"quantum-field":this.isLowEndDevice?e.particleCount=30:this.isMobile&&(e.particleCount=60);break;case"pulsing-grid":case"neural-network":this.isLowEndDevice&&(e.quality="low",e.maxFPS=20);break;case"wave-ripple":case"spiral-vortex":this.isLowEndDevice&&(e.maxFPS=25)}return e}shouldReduceMotion(){return this.config.enableReducedMotion||window.matchMedia("(prefers-reduced-motion: reduce)").matches}getOptimalFrameRate(){return this.config.maxFPS}getOptimalParticleCount(t){return Math.min(t,this.config.particleCount)}isBatterySavingMode(){return this.config.enableBatterySaving}updateConfig(t){this.config={...this.config,...t}}getDeviceInfo(){return{isMobile:this.isMobile,isLowEnd:this.isLowEndDevice,batteryLevel:this.batteryLevel,cores:navigator.hardwareConcurrency||2,memory:navigator.deviceMemory||4}}}class e{constructor(e,i={}){this.animationId=null,this.isRunning=!1,this.time=0,this.lastTime=0,this.animate=t=>{this.lastTime||(this.lastTime=t);const e=t-this.lastTime;e<this.frameInterval||(this.lastTime=t,this.time+=.001*e*this.config.speed,this.clearCanvas(),this.draw()),this.isRunning&&(this.animationId=requestAnimationFrame(this.animate))},this.container=e,this.config={width:180,height:180,speed:1,color:"#ffffff",backgroundColor:"transparent",opacity:.9,...i},this.canvas=this.createCanvas(),this.ctx=this.canvas.getContext("2d"),this.container.appendChild(this.canvas),this.performanceOptimizer=t.getInstance(),this.targetFPS=this.performanceOptimizer.getOptimalFrameRate(),this.frameInterval=1e3/this.targetFPS}createCanvas(){const t=document.createElement("canvas");return t.width=this.config.width,t.height=this.config.height,t.style.position="absolute",t.style.left="0",t.style.top="0",t.style.pointerEvents="none",t}clearCanvas(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)}start(){this.isRunning||(this.isRunning=!0,this.lastTime=0,this.time=0,this.animationId=requestAnimationFrame(this.animate))}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}destroy(){this.stop(),this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}updateConfig(t){this.config={...this.config,...t},(t.width||t.height)&&(this.canvas.width=this.config.width,this.canvas.height=this.config.height)}getColor(t=1){const e=this.config.color;if(e.startsWith("#")){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t*this.config.opacity})`}return e}}class i extends e{constructor(t,e={}){super(t,e),this.ringCount=e.ringCount||8,this.dotsPerRing=e.dotsPerRing||12,this.maxRadius=e.maxRadius||75,this.pulseSpeed=e.pulseSpeed||.35}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;for(let i=0;i<this.ringCount;i++){const s=(this.time*this.pulseSpeed+i/this.ringCount)%1,n=s*this.maxRadius;if(n<5)continue;const a=1-s;for(let i=0;i<this.dotsPerRing;i++){const r=i/this.dotsPerRing*Math.PI*2,o=t+Math.cos(r)*n,c=e+Math.sin(r)*n,l=2.5*(1-.5*s);this.ctx.beginPath(),this.ctx.arc(o,c,l,0,2*Math.PI),this.ctx.fillStyle=this.getColor(a),this.ctx.fill()}}}}class s extends e{constructor(t,e={}){super(t,e),this.orbits=e.orbits||[{radius:15,dotCount:6},{radius:25,dotCount:10},{radius:35,dotCount:14},{radius:45,dotCount:18},{radius:55,dotCount:22},{radius:65,dotCount:26}],this.pulseFrequency=e.pulseFrequency||.5,this.pulseAmplitude=e.pulseAmplitude||2,this.maxRadius=75}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;this.orbits.forEach(i=>{this.ctx.beginPath(),this.ctx.arc(t,e,i.radius,0,2*Math.PI),this.ctx.strokeStyle=this.getColor(.05),this.ctx.lineWidth=1,this.ctx.stroke();const s=1.5*(i.radius/this.maxRadius),n=(this.time*this.pulseFrequency-s)%1,a=Math.sin(n*Math.PI)*this.pulseAmplitude,r=a>0?a:0;for(let s=0;s<i.dotCount;s++){const n=s/i.dotCount*Math.PI*2,a=i.radius+r,o=t+Math.cos(n)*a,c=e+Math.sin(n)*a,l=2+r/this.pulseAmplitude*1.5,h=.7+r/this.pulseAmplitude*.3;this.ctx.beginPath(),this.ctx.arc(o,c,l,0,2*Math.PI),this.ctx.fillStyle=this.getColor(h),this.ctx.fill()}})}}class n extends e{constructor(t,e={}){super(t,e),this.pendulumCount=e.pendulumCount||15,this.baseFrequency=e.baseFrequency||.5,this.pendulumLength=e.pendulumLength||90,this.maxAngle=e.maxAngle||Math.PI/12,this.createReferenceLine()}createReferenceLine(){const t=this.canvas.width/2,e=this.canvas.height/2,i=document.createElement("div");i.style&&(i.style.position="absolute",i.style.width=8*this.pendulumCount+"px",i.style.height="1px",i.style.left=t-8*this.pendulumCount/2+"px",i.style.top=e-this.pendulumLength+"px",i.style.backgroundColor=this.getColor(.15)),this.container.appendChild(i)}draw(){const t=this.canvas.width/2,e=this.canvas.height/2,i=Math.sin(this.time*this.baseFrequency*Math.PI)*this.maxAngle;for(let s=0;s<this.pendulumCount;s++){const n=t-4*this.pendulumCount+8*s,a=e-this.pendulumLength,r=n+Math.sin(i)*this.pendulumLength,o=a+Math.cos(i)*this.pendulumLength;this.ctx.beginPath(),this.ctx.moveTo(n,a),this.ctx.lineTo(r,o),this.ctx.strokeStyle=this.getColor(.4),this.ctx.lineWidth=1,this.ctx.stroke(),this.ctx.beginPath(),this.ctx.arc(r,o,3,0,2*Math.PI),this.ctx.fillStyle=this.getColor(.9),this.ctx.fill(),this.ctx.beginPath(),this.ctx.arc(n,a,1,0,2*Math.PI),this.ctx.fillStyle=this.getColor(.5),this.ctx.fill()}}}class a extends e{constructor(t,e={}){super(t,e),this.dotRings=e.dotRings||[{radius:15,count:6},{radius:30,count:12},{radius:45,count:18},{radius:60,count:24},{radius:75,count:30}]}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;this.dotRings.forEach((i,s)=>{for(let n=0;n<i.count;n++){const a=n/i.count*Math.PI*2,r=3*Math.sin(2*this.time-.4*s),o=t+Math.cos(a)*(i.radius+r),c=e+Math.sin(a)*(i.radius+r),l=.4+.6*Math.sin(2*this.time-.4*s+.2*n);this.ctx.beginPath(),this.ctx.arc(o,c,2,0,2*Math.PI),this.ctx.fillStyle=this.getColor(l),this.ctx.fill()}})}}class r extends e{constructor(t,e={}){super(t,e),this.ringCount=e.ringCount||5,this.maxRadius=e.maxRadius||75}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;for(let i=0;i<this.ringCount;i++){const s=(i+1)/this.ringCount*this.maxRadius,n=6+6*i,a=i%2==0?.2*this.time:.2*-this.time,r=this.time+.7*i;for(let o=0;o<n;o++){const c=o/n*Math.PI*2+a,l=s+3*Math.sin(r),h=t+Math.cos(c)*l,u=e+Math.sin(c)*l,d=2+i/(this.ringCount-1),f=Math.sin(r)*d*.7+d,p=.6+.4*Math.sin(r);this.ctx.beginPath(),this.ctx.arc(h,u,f,0,2*Math.PI),this.ctx.fillStyle=this.getColor(p),this.ctx.fill()}}}}class o extends e{constructor(t,e={}){super(t,e),this.radius=e.radius||70,this.dotCount=e.dotCount||16}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;this.ctx.beginPath(),this.ctx.arc(t,e,this.radius,0,2*Math.PI),this.ctx.strokeStyle=this.getColor(.05),this.ctx.lineWidth=1,this.ctx.stroke();for(let i=0;i<this.dotCount;i++){const s=i/this.dotCount*Math.PI*2,n=(.5*this.time+i/this.dotCount)%1,a=Math.sin(n*Math.PI*2),r=2+2*a,o=this.radius+5*a,c=t+Math.cos(s)*o,l=e+Math.sin(s)*o;this.ctx.beginPath(),this.ctx.moveTo(t,e),this.ctx.lineTo(c,l),this.ctx.strokeStyle=this.getColor(.1+.2*a),this.ctx.lineWidth=1,this.ctx.stroke(),this.ctx.beginPath(),this.ctx.arc(c,l,r,0,2*Math.PI),this.ctx.fillStyle=this.getColor(.9),this.ctx.fill()}}}class c extends e{constructor(t,e={}){super(t,e),this.dotCount=e.dotCount||20,this.rowCount=e.rowCount||5,this.spacing=e.spacing||15}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;for(let i=0;i<this.rowCount;i++){const s=e-(this.rowCount-1)/2*this.spacing+i*this.spacing;for(let e=0;e<this.dotCount;e++){const n=4+2*i,a=1+.2*i,r=.5*i,o=t-(this.dotCount-1)/2*8+8*e,c=s+Math.sin(this.time*a+.2*e+r)*n;this.ctx.beginPath(),this.ctx.arc(o,c,2,0,2*Math.PI),this.ctx.fillStyle=this.getColor(.9),this.ctx.fill()}}}}class l extends e{constructor(t,e={}){super(t,e),this.gridSize=e.gridSize||5,this.spacing=e.spacing||15,this.breathingSpeed=e.breathingSpeed||.5,this.waveSpeed=e.waveSpeed||1.2,this.colorPulseSpeed=e.colorPulseSpeed||1}draw(){const t=this.canvas.width/2,e=this.canvas.height/2,i=.2*Math.sin(this.time*this.breathingSpeed)+1;for(let s=0;s<this.gridSize;s++)for(let n=0;n<this.gridSize;n++){if(s===Math.floor(this.gridSize/2)&&n===Math.floor(this.gridSize/2))continue;const a=(n-(this.gridSize-1)/2)*this.spacing,r=(s-(this.gridSize-1)/2)*this.spacing,o=Math.sqrt(a*a+r*r)/(this.spacing*Math.sqrt(2)*(this.gridSize-1)/2),c=Math.atan2(r,a),l=(this.time-o)%1,h=4*Math.sin(l*Math.PI*2);Math.PI,this.time;const u=r*i,d=t+a*i+Math.cos(c)*h,f=e+u+Math.sin(c)*h,p=(1.5+1.5*(1-o))*(.6*Math.sin(2*this.time+5*o)+1),m=.3*Math.sin(this.time*this.colorPulseSpeed+3*o)+.3,g=1-m,y=Math.floor(255*g+200*m),x=Math.floor(255*g+220*m),v=255,w=.5+.2*Math.sin(1.5*this.time+3*c)+.3*o;if(s>0&&n>0&&s<this.gridSize-1&&n<this.gridSize-1){const a=[{r:s-1,c:n},{r:s,c:n+1},{r:s+1,c:n},{r:s,c:n-1}];for(const r of a){const a=(r.c-(this.gridSize-1)/2)*this.spacing*i,o=(r.r-(this.gridSize-1)/2)*this.spacing*i;if(r.r===Math.floor(this.gridSize/2)&&r.c===Math.floor(this.gridSize/2))continue;const c=Math.sqrt(Math.pow(n-r.c,2)+Math.pow(s-r.r,2)),l=.1+.05*Math.sin(1.5*this.time+2*c);this.ctx.beginPath(),this.ctx.moveTo(d,f),this.ctx.lineTo(t+a,e+o),this.ctx.strokeStyle=`rgba(255, 255, 255, ${l})`,this.ctx.lineWidth=.5,this.ctx.stroke()}}this.ctx.beginPath(),this.ctx.arc(d,f,p,0,2*Math.PI),this.ctx.fillStyle=`rgba(${y}, ${x}, ${v}, ${w})`,this.ctx.fill()}}}class h extends e{constructor(t,e={}){super(t,e),this.particleCount=e.particleCount||200,this.maxRadius=e.maxRadius||75,this.spiralArms=e.spiralArms||3,this.rotationSpeed=e.rotationSpeed||.1,this.particles=this.createParticles()}createParticles(){const t=[];for(let e=0;e<this.particleCount;e++){const e=Math.pow(Math.random(),.5)*this.maxRadius,i=Math.floor(Math.random()*this.spiralArms),s=i/this.spiralArms*Math.PI*2,n=.2,a=Math.log(e/5)/n;t.push({distance:e,angle:a+s,armIndex:i,size:1+1.5*Math.random(),opacity:.3+.7*Math.random(),speedFactor:.8+.4*Math.random(),color:{r:220+Math.floor(35*Math.random()),g:220+Math.floor(35*Math.random()),b:255}})}return t}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;for(const i of this.particles){const s=1/Math.sqrt(i.distance/10);i.angle+=this.rotationSpeed*s*i.speedFactor*16.67;const n=t+Math.cos(i.angle)*i.distance,a=e+Math.sin(i.angle)*i.distance,r=(.5*this.time+i.armIndex/this.spiralArms)%1,o=.3*Math.sin(r*Math.PI*2)+.7;this.ctx.beginPath(),this.ctx.arc(n,a,i.size*o,0,2*Math.PI);const c=i.opacity*o;if(this.ctx.fillStyle=`rgba(${i.color.r}, ${i.color.g}, ${i.color.b}, ${c})`,this.ctx.fill(),i.size>1.8){const r=.15*i.distance,o=i.angle-.1*s,l=t+Math.cos(o)*(i.distance-r),h=e+Math.sin(o)*(i.distance-r);this.ctx.beginPath(),this.ctx.moveTo(n,a),this.ctx.lineTo(l,h),this.ctx.strokeStyle=`rgba(${i.color.r}, ${i.color.g}, ${i.color.b}, ${.3*c})`,this.ctx.lineWidth=.5*i.size,this.ctx.stroke()}}}}class u extends e{constructor(t,e={}){super(t,e),this.waveCount=e.waveCount||5,this.rippleSpeed=e.rippleSpeed||.8,this.waveAmplitude=e.waveAmplitude||20,this.maxRadius=e.maxRadius||80}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;for(let i=0;i<this.waveCount;i++){const s=(this.time*this.rippleSpeed+i/this.waveCount)%1,n=s*this.maxRadius;if(n<5)continue;const a=64,r=Math.sin(2*this.time+i)*this.waveAmplitude;this.ctx.beginPath();for(let i=0;i<=a;i++){const s=i/a*Math.PI*2,o=n+Math.sin(3*s+3*this.time)*(.3*this.waveAmplitude),c=t+Math.cos(s)*o,l=e+Math.sin(s)*o+r;0===i?this.ctx.moveTo(c,l):this.ctx.lineTo(c,l)}this.ctx.strokeStyle=this.getColor(1-s),this.ctx.lineWidth=2,this.ctx.stroke()}}}class d extends e{constructor(t,e={}){super(t,e),this.orbitCount=e.orbitCount||4,this.dancersPerOrbit=e.dancersPerOrbit||8,this.danceSpeed=e.danceSpeed||.6,this.maxRadius=e.maxRadius||70}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;for(let i=0;i<this.orbitCount;i++){const s=(i+1)/this.orbitCount*this.maxRadius,n=this.danceSpeed*(1+.2*i),a=this.time*n;for(let n=0;n<this.dancersPerOrbit;n++){const r=n/this.dancersPerOrbit*Math.PI*2+a,o=(2*this.time+.5*n+.3*i)%1,c=s+15*Math.sin(o*Math.PI*2),l=t+Math.cos(r)*c,h=e+Math.sin(r)*c;this.ctx.beginPath(),this.ctx.arc(l,h,2+1*Math.sin(o*Math.PI*2),0,2*Math.PI),this.ctx.fillStyle=this.getColor(.8-.1*i),this.ctx.fill();const u=8,d=r-.1,f=t+Math.cos(d)*(c-u),p=e+Math.sin(d)*(c-u);this.ctx.beginPath(),this.ctx.moveTo(l,h),this.ctx.lineTo(f,p),this.ctx.strokeStyle=this.getColor(.3),this.ctx.lineWidth=1,this.ctx.stroke()}}}}class f extends e{constructor(t,e={}){super(t,e),this.particleCount=e.particleCount||150,this.vortexSpeed=e.vortexSpeed||.3,this.spiralTightness=e.spiralTightness||.15,this.maxRadius=e.maxRadius||80}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;for(let i=0;i<this.particleCount;i++){const s=i/this.particleCount*4*Math.PI,n=s/(4*Math.PI)*this.maxRadius,a=s*this.spiralTightness+this.time*this.vortexSpeed,r=t+Math.cos(a)*n,o=e+Math.sin(a)*n,c=1+2*(1-n/this.maxRadius),l=.8*(1-n/this.maxRadius);if(this.ctx.beginPath(),this.ctx.arc(r,o,c,0,2*Math.PI),this.ctx.fillStyle=this.getColor(l),this.ctx.fill(),i%3==0){const i=5,s=a-.2,h=t+Math.cos(s)*(n-i),u=e+Math.sin(s)*(n-i);this.ctx.beginPath(),this.ctx.moveTo(r,o),this.ctx.lineTo(h,u),this.ctx.strokeStyle=this.getColor(.5*l),this.ctx.lineWidth=.5*c,this.ctx.stroke()}}}}class p extends e{constructor(t,e={}){super(t,e),this.fieldSize=e.fieldSize||6,this.particleCount=e.particleCount||200,this.quantumSpeed=e.quantumSpeed||1.2,this.fieldIntensity=e.fieldIntensity||.8}draw(){const t=this.canvas.width/2,e=this.canvas.height/2;for(let i=0;i<this.particleCount;i++){const s=(this.time*this.quantumSpeed+.1*i)%1,n=i%this.fieldSize-this.fieldSize/2,a=Math.floor(i/this.fieldSize)-this.fieldSize/2,r=Math.sin(s*Math.PI*2+.3*i);if(r<.3)continue;const o=t+20*n+8*Math.sin(3*this.time+i),c=e+20*a+6*Math.cos(2*this.time+i),l=.5*Math.sin(s*Math.PI*4)+.5,h=1+2*l,u=l*this.fieldIntensity;if(this.ctx.beginPath(),this.ctx.arc(o,c,h,0,2*Math.PI),this.ctx.fillStyle=this.getColor(u),this.ctx.fill(),i%4==0&&r>.7){const s=(i+1)%this.particleCount,n=s%this.fieldSize-this.fieldSize/2,a=Math.floor(s/this.fieldSize)-this.fieldSize/2,r=t+20*n+8*Math.sin(3*this.time+s),l=e+20*a+6*Math.cos(2*this.time+s);this.ctx.beginPath(),this.ctx.moveTo(o,c),this.ctx.lineTo(r,l),this.ctx.strokeStyle=this.getColor(.2),this.ctx.lineWidth=.5,this.ctx.stroke()}}}}class m extends e{constructor(t,e={}){super(t,e),this.nodeCount=e.nodeCount||12,this.layerCount=e.layerCount||3,this.activationSpeed=e.activationSpeed||.8,this.maxRadius=e.maxRadius||70}draw(){const t=this.canvas.width/2,e=this.canvas.height/2,i=[];for(let s=0;s<this.layerCount;s++){const n=(s+1)/this.layerCount*this.maxRadius,a=Math.floor(this.nodeCount/this.layerCount)+(s===this.layerCount-1?this.nodeCount%this.layerCount:0);for(let r=0;r<a;r++){const o=r/a*Math.PI*2+.1*this.time,c=t+Math.cos(o)*n,l=e+Math.sin(o)*n,h=(this.time*this.activationSpeed+.2*r+.5*s)%1,u=.5*Math.sin(h*Math.PI*2)+.5;i.push({x:c,y:l,layer:s,activation:u})}}for(let t=0;t<i.length;t++)for(let e=t+1;e<i.length;e++){const s=i[t],n=i[e];if(1===Math.abs(s.layer-n.layer)){const t=(s.activation+n.activation)/2;this.ctx.beginPath(),this.ctx.moveTo(s.x,s.y),this.ctx.lineTo(n.x,n.y),this.ctx.strokeStyle=this.getColor(.3*t),this.ctx.lineWidth=2*t,this.ctx.stroke()}}i.forEach((t,e)=>{const i=3+3*t.activation;this.ctx.beginPath(),this.ctx.arc(t.x,t.y,i,0,2*Math.PI),this.ctx.fillStyle=this.getColor(.6+.4*t.activation),this.ctx.fill(),this.ctx.beginPath(),this.ctx.arc(t.x,t.y,i+2,0,2*Math.PI),this.ctx.strokeStyle=this.getColor(.5*t.activation),this.ctx.lineWidth=1,this.ctx.stroke()})}}class g{constructor(t){this.animation=null;const e=this.getContainer(t.container),i=t.animation,s=t.config||{};this.animation=this.createAnimation(e,i,s),!1!==t.autoStart&&this.animation.start()}getContainer(t){if("string"==typeof t){const e=document.querySelector(t);if(!e)throw new Error(`Container element not found: ${t}`);return e}return t}createAnimation(t,e,g){switch(e){case"radial-pulse":return new i(t,g);case"orbital-pulse":return new s(t,g);case"pendulum-wave":return new n(t,g);case"pulse-wave":return new a(t,g);case"concentric-rings":return new r(t,g);case"sequential-pulse":return new o(t,g);case"oscillating-dots":return new c(t,g);case"pulsing-grid":return new l(t,g);case"spiral-galaxy":return new h(t,g);case"wave-ripple":return new u(t,g);case"orbital-dance":return new d(t,g);case"spiral-vortex":return new f(t,g);case"quantum-field":return new p(t,g);case"neural-network":return new m(t,g);default:throw new Error(`Unknown animation type: ${e}`)}}start(){this.animation&&this.animation.start()}stop(){this.animation&&this.animation.stop()}destroy(){this.animation&&(this.animation.destroy(),this.animation=null)}updateConfig(t){this.animation&&this.animation.updateConfig(t)}static createRadialPulse(t,e){return new g({container:t,animation:"radial-pulse",config:e})}static createOrbitalPulse(t,e){return new g({container:t,animation:"orbital-pulse",config:e})}static createPendulumWave(t,e){return new g({container:t,animation:"pendulum-wave",config:e})}static createPulseWave(t,e){return new g({container:t,animation:"pulse-wave",config:e})}static createConcentricRings(t,e){return new g({container:t,animation:"concentric-rings",config:e})}static createSequentialPulse(t,e){return new g({container:t,animation:"sequential-pulse",config:e})}static createOscillatingDots(t,e){return new g({container:t,animation:"oscillating-dots",config:e})}static createPulsingGrid(t,e){return new g({container:t,animation:"pulsing-grid",config:e})}static createSpiralGalaxy(t,e){return new g({container:t,animation:"spiral-galaxy",config:e})}static createWaveRipple(t,e){return new g({container:t,animation:"wave-ripple",config:e})}static createOrbitalDance(t,e){return new g({container:t,animation:"orbital-dance",config:e})}static createSpiralVortex(t,e){return new g({container:t,animation:"spiral-vortex",config:e})}static createQuantumField(t,e){return new g({container:t,animation:"quantum-field",config:e})}static createNeuralNetwork(t,e){return new g({container:t,animation:"neural-network",config:e})}}var y;class x{static initializePresets(){this.presets.set("loading-fast",{name:"Fast Loading",description:"Quick, energetic loading animation",config:{speed:2,color:"#4ecdc4",opacity:.9},category:"loading",tags:["fast","loading","energetic"]}),this.presets.set("loading-smooth",{name:"Smooth Loading",description:"Gentle, smooth loading animation",config:{speed:.8,color:"#96ceb4",opacity:.7},category:"loading",tags:["smooth","loading","gentle"]}),this.presets.set("loading-minimal",{name:"Minimal Loading",description:"Simple, minimal loading animation",config:{speed:1,color:"#ffffff",opacity:.5},category:"loading",tags:["minimal","loading","simple"]}),this.presets.set("decorative-elegant",{name:"Elegant Decoration",description:"Sophisticated decorative animation",config:{speed:.6,color:"#d4af37",opacity:.8},category:"decorative",tags:["elegant","decorative","sophisticated"]}),this.presets.set("decorative-playful",{name:"Playful Decoration",description:"Fun, colorful decorative animation",config:{speed:1.5,color:"#ff6b6b",opacity:.9},category:"decorative",tags:["playful","decorative","colorful"]}),this.presets.set("scientific-precise",{name:"Precise Scientific",description:"Accurate, scientific visualization",config:{speed:1,color:"#00d2d3",opacity:.8},category:"scientific",tags:["scientific","precise","data"]}),this.presets.set("scientific-quantum",{name:"Quantum Field",description:"Quantum physics visualization",config:{speed:1.2,color:"#9b59b6",opacity:.7},category:"scientific",tags:["quantum","scientific","physics"]}),this.presets.set("artistic-abstract",{name:"Abstract Art",description:"Abstract artistic expression",config:{speed:.4,color:"#e74c3c",opacity:.6},category:"artistic",tags:["abstract","artistic","creative"]}),this.presets.set("artistic-organic",{name:"Organic Flow",description:"Natural, organic movement",config:{speed:.8,color:"#2ecc71",opacity:.8},category:"artistic",tags:["organic","artistic","natural"]}),this.presets.set("minimal-subtle",{name:"Subtle Minimal",description:"Very subtle, minimal animation",config:{speed:.5,color:"#bdc3c7",opacity:.3},category:"minimal",tags:["minimal","subtle","quiet"]}),this.presets.set("minimal-clean",{name:"Clean Minimal",description:"Clean, simple minimal animation",config:{speed:1,color:"#34495e",opacity:.5},category:"minimal",tags:["minimal","clean","simple"]})}static initializeThemes(){this.themes.set("ocean",{name:"Ocean",description:"Cool ocean-inspired colors",colors:{primary:"#4ecdc4",secondary:"#45b7d1",accent:"#96ceb4",background:"#2c3e50"},opacity:.8,speed:1}),this.themes.set("sunset",{name:"Sunset",description:"Warm sunset colors",colors:{primary:"#ff6b6b",secondary:"#feca57",accent:"#ff9ff3",background:"#2c2c54"},opacity:.9,speed:1.2}),this.themes.set("forest",{name:"Forest",description:"Natural forest colors",colors:{primary:"#2ecc71",secondary:"#27ae60",accent:"#96ceb4",background:"#1e3a8a"},opacity:.7,speed:.8}),this.themes.set("cosmic",{name:"Cosmic",description:"Space and cosmic colors",colors:{primary:"#9b59b6",secondary:"#8e44ad",accent:"#00d2d3",background:"#000000"},opacity:.9,speed:1.5}),this.themes.set("monochrome",{name:"Monochrome",description:"Black and white theme",colors:{primary:"#ffffff",secondary:"#bdc3c7",accent:"#95a5a6",background:"#2c3e50"},opacity:.8,speed:1}),this.themes.set("neon",{name:"Neon",description:"Bright neon colors",colors:{primary:"#00ff00",secondary:"#ff00ff",accent:"#00ffff",background:"#000000"},opacity:1,speed:2})}static getPreset(t){return this.presets.get(t)}static getAllPresets(){return Array.from(this.presets.values())}static getPresetsByCategory(t){return Array.from(this.presets.values()).filter(e=>e.category===t)}static getPresetsByTag(t){return Array.from(this.presets.values()).filter(e=>e.tags.includes(t))}static getTheme(t){return this.themes.get(t)}static getAllThemes(){return Array.from(this.themes.values())}static applyThemeToConfig(t,e){const i=this.getTheme(e);return i?{...t,color:i.colors.primary,backgroundColor:i.colors.background,opacity:i.opacity,speed:i.speed}:t}static applyPresetToConfig(t,e){const i=this.getPreset(e);return i?{...t,...i.config}:t}static getRecommendedPreset(t,e){return{"radial-pulse":{loading:"loading-fast",decorative:"decorative-elegant",minimal:"minimal-subtle"},"spiral-galaxy":{scientific:"scientific-quantum",artistic:"artistic-abstract",decorative:"decorative-playful"},"neural-network":{scientific:"scientific-precise",artistic:"artistic-abstract",minimal:"minimal-clean"},"quantum-field":{scientific:"scientific-quantum",artistic:"artistic-abstract",decorative:"decorative-playful"}}[t]?.[e]||null}static createCustomPreset(t,e,i,s,n){this.presets.set(t,{name:t,description:e,config:i,category:s,tags:n})}static createCustomTheme(t,e,i,s,n){this.themes.set(t,{name:t,description:e,colors:i,opacity:s,speed:n})}}y=x,x.presets=new Map,x.themes=new Map,y.initializePresets(),y.initializeThemes();var v={exports:{}},w={},b=Symbol.for("react.transitional.element"),C=Symbol.for("react.fragment");function S(t,e,i){var s=null;if(void 0!==i&&(s=""+i),void 0!==e.key&&(s=""+e.key),"key"in e)for(var n in i={},e)"key"!==n&&(i[n]=e[n]);else i=e;return e=i.ref,{$$typeof:b,type:t,key:s,ref:void 0!==e?e:null,props:i}}w.Fragment=C,w.jsx=S,w.jsxs=S,v.exports=w;var M=v.exports,P={exports:{}},R={},k=Symbol.for("react.transitional.element"),I=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),A=Symbol.for("react.consumer"),j=Symbol.for("react.context"),q=Symbol.for("react.forward_ref"),z=Symbol.for("react.suspense"),$=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),O=Symbol.iterator;var L={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},D=Object.assign,H={};function N(t,e,i){this.props=t,this.context=e,this.refs=H,this.updater=i||L}function W(){}function B(t,e,i){this.props=t,this.context=e,this.refs=H,this.updater=i||L}N.prototype.isReactComponent={},N.prototype.setState=function(t,e){if("object"!=typeof t&&"function"!=typeof t&&null!=t)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,t,e,"setState")},N.prototype.forceUpdate=function(t){this.updater.enqueueForceUpdate(this,t,"forceUpdate")},W.prototype=N.prototype;var U=B.prototype=new W;U.constructor=B,D(U,N.prototype),U.isPureReactComponent=!0;var V=Array.isArray,G={H:null,A:null,T:null,S:null,V:null},Q=Object.prototype.hasOwnProperty;function Y(t,e,i,s,n,a){return i=a.ref,{$$typeof:k,type:t,key:e,ref:void 0!==i?i:null,props:a}}function J(t){return"object"==typeof t&&null!==t&&t.$$typeof===k}var K=/\/+/g;function X(t,e){return"object"==typeof t&&null!==t&&null!=t.key?(i=""+t.key,s={"=":"=0",":":"=2"},"$"+i.replace(/[=:]/g,function(t){return s[t]})):e.toString(36);var i,s}function Z(){}function tt(t,e,i,s,n){var a=typeof t;"undefined"!==a&&"boolean"!==a||(t=null);var r,o,c=!1;if(null===t)c=!0;else switch(a){case"bigint":case"string":case"number":c=!0;break;case"object":switch(t.$$typeof){case k:case I:c=!0;break;case F:return tt((c=t._init)(t._payload),e,i,s,n)}}if(c)return n=n(t),c=""===s?"."+X(t,0):s,V(n)?(i="",null!=c&&(i=c.replace(K,"$&/")+"/"),tt(n,e,i,"",function(t){return t})):null!=n&&(J(n)&&(r=n,o=i+(null==n.key||t&&t.key===n.key?"":(""+n.key).replace(K,"$&/")+"/")+c,n=Y(r.type,o,void 0,0,0,r.props)),e.push(n)),1;c=0;var l,h=""===s?".":s+":";if(V(t))for(var u=0;u<t.length;u++)c+=tt(s=t[u],e,i,a=h+X(s,u),n);else if("function"==typeof(u=null===(l=t)||"object"!=typeof l?null:"function"==typeof(l=O&&l[O]||l["@@iterator"])?l:null))for(t=u.call(t),u=0;!(s=t.next()).done;)c+=tt(s=s.value,e,i,a=h+X(s,u++),n);else if("object"===a){if("function"==typeof t.then)return tt(function(t){switch(t.status){case"fulfilled":return t.value;case"rejected":throw t.reason;default:switch("string"==typeof t.status?t.then(Z,Z):(t.status="pending",t.then(function(e){"pending"===t.status&&(t.status="fulfilled",t.value=e)},function(e){"pending"===t.status&&(t.status="rejected",t.reason=e)})),t.status){case"fulfilled":return t.value;case"rejected":throw t.reason}}throw t}(t),e,i,s,n);throw e=String(t),Error("Objects are not valid as a React child (found: "+("[object Object]"===e?"object with keys {"+Object.keys(t).join(", ")+"}":e)+"). If you meant to render a collection of children, use an array instead.")}return c}function et(t,e,i){if(null==t)return t;var s=[],n=0;return tt(t,s,"","",function(t){return e.call(i,t,n++)}),s}function it(t){if(-1===t._status){var e=t._result;(e=e()).then(function(e){0!==t._status&&-1!==t._status||(t._status=1,t._result=e)},function(e){0!==t._status&&-1!==t._status||(t._status=2,t._result=e)}),-1===t._status&&(t._status=0,t._result=e)}if(1===t._status)return t._result.default;throw t._result}var st="function"==typeof reportError?reportError:function(t){if("object"==typeof window&&"function"==typeof window.ErrorEvent){var e=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:"object"==typeof t&&null!==t&&"string"==typeof t.message?String(t.message):String(t),error:t});if(!window.dispatchEvent(e))return}else if("object"==typeof process&&"function"==typeof process.emit)return void process.emit("uncaughtException",t);console.error(t)};function nt(){}R.Children={map:et,forEach:function(t,e,i){et(t,function(){e.apply(this,arguments)},i)},count:function(t){var e=0;return et(t,function(){e++}),e},toArray:function(t){return et(t,function(t){return t})||[]},only:function(t){if(!J(t))throw Error("React.Children.only expected to receive a single React element child.");return t}},R.Component=N,R.Fragment=T,R.Profiler=E,R.PureComponent=B,R.StrictMode=_,R.Suspense=z,R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=G,R.__COMPILER_RUNTIME={__proto__:null,c:function(t){return G.H.useMemoCache(t)}},R.cache=function(t){return function(){return t.apply(null,arguments)}},R.cloneElement=function(t,e,i){if(null==t)throw Error("The argument must be a React element, but you passed "+t+".");var s=D({},t.props),n=t.key;if(null!=e)for(a in void 0!==e.ref&&void 0,void 0!==e.key&&(n=""+e.key),e)!Q.call(e,a)||"key"===a||"__self"===a||"__source"===a||"ref"===a&&void 0===e.ref||(s[a]=e[a]);var a=arguments.length-2;if(1===a)s.children=i;else if(1<a){for(var r=Array(a),o=0;o<a;o++)r[o]=arguments[o+2];s.children=r}return Y(t.type,n,void 0,0,0,s)},R.createContext=function(t){return(t={$$typeof:j,_currentValue:t,_currentValue2:t,_threadCount:0,Provider:null,Consumer:null}).Provider=t,t.Consumer={$$typeof:A,_context:t},t},R.createElement=function(t,e,i){var s,n={},a=null;if(null!=e)for(s in void 0!==e.key&&(a=""+e.key),e)Q.call(e,s)&&"key"!==s&&"__self"!==s&&"__source"!==s&&(n[s]=e[s]);var r=arguments.length-2;if(1===r)n.children=i;else if(1<r){for(var o=Array(r),c=0;c<r;c++)o[c]=arguments[c+2];n.children=o}if(t&&t.defaultProps)for(s in r=t.defaultProps)void 0===n[s]&&(n[s]=r[s]);return Y(t,a,void 0,0,0,n)},R.createRef=function(){return{current:null}},R.forwardRef=function(t){return{$$typeof:q,render:t}},R.isValidElement=J,R.lazy=function(t){return{$$typeof:F,_payload:{_status:-1,_result:t},_init:it}},R.memo=function(t,e){return{$$typeof:$,type:t,compare:void 0===e?null:e}},R.startTransition=function(t){var e=G.T,i={};G.T=i;try{var s=t(),n=G.S;null!==n&&n(i,s),"object"==typeof s&&null!==s&&"function"==typeof s.then&&s.then(nt,st)}catch(t){st(t)}finally{G.T=e}},R.unstable_useCacheRefresh=function(){return G.H.useCacheRefresh()},R.use=function(t){return G.H.use(t)},R.useActionState=function(t,e,i){return G.H.useActionState(t,e,i)},R.useCallback=function(t,e){return G.H.useCallback(t,e)},R.useContext=function(t){return G.H.useContext(t)},R.useDebugValue=function(){},R.useDeferredValue=function(t,e){return G.H.useDeferredValue(t,e)},R.useEffect=function(t,e,i){var s=G.H;if("function"==typeof i)throw Error("useEffect CRUD overload is not enabled in this build of React.");return s.useEffect(t,e)},R.useId=function(){return G.H.useId()},R.useImperativeHandle=function(t,e,i){return G.H.useImperativeHandle(t,e,i)},R.useInsertionEffect=function(t,e){return G.H.useInsertionEffect(t,e)},R.useLayoutEffect=function(t,e){return G.H.useLayoutEffect(t,e)},R.useMemo=function(t,e){return G.H.useMemo(t,e)},R.useOptimistic=function(t,e){return G.H.useOptimistic(t,e)},R.useReducer=function(t,e,i){return G.H.useReducer(t,e,i)},R.useRef=function(t){return G.H.useRef(t)},R.useState=function(t){return G.H.useState(t)},R.useSyncExternalStore=function(t,e,i){return G.H.useSyncExternalStore(t,e,i)},R.useTransition=function(){return G.H.useTransition()},R.version="19.1.1",P.exports=R;var at=P.exports;const rt=at.forwardRef(({animation:t,config:e={},preset:i,theme:s,autoStart:n=!0,className:a,style:r,onStart:o,onStop:c,onDestroy:l},h)=>{const u=at.useRef(null),d=at.useRef(null);return at.useImperativeHandle(h,()=>({start:()=>{d.current&&(d.current.start(),o?.())},stop:()=>{d.current&&(d.current.stop(),c?.())},destroy:()=>{d.current&&(d.current.destroy(),d.current=null,l?.())},updateConfig:t=>{d.current&&d.current.updateConfig(t)},getAnimation:()=>d.current})),at.useEffect(()=>{if(!u.current)return;let a={...e};if(i){x.getPreset(i)&&(a=x.applyPresetToConfig(a,i))}s&&(a=x.applyThemeToConfig(a,s));const r={container:u.current,animation:t,config:a,autoStart:n};return d.current=new g(r),n&&o?.(),()=>{d.current&&(d.current.destroy(),d.current=null,l?.())}},[t,i,s,n]),at.useEffect(()=>{if(d.current&&e){let t={...e};i&&(t=x.applyPresetToConfig(t,i)),s&&(t=x.applyThemeToConfig(t,s)),d.current.updateConfig(t)}},[e,i,s]),M.jsx("div",{ref:u,className:a,style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",...r}})});rt.displayName="RealmLoader";const ot=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"radial-pulse",ref:e})),ct=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"orbital-pulse",ref:e})),lt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"pendulum-wave",ref:e})),ht=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"pulse-wave",ref:e})),ut=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"concentric-rings",ref:e})),dt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"sequential-pulse",ref:e})),ft=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"oscillating-dots",ref:e})),pt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"pulsing-grid",ref:e})),mt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"spiral-galaxy",ref:e})),gt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"wave-ripple",ref:e})),yt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"orbital-dance",ref:e})),xt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"spiral-vortex",ref:e})),vt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"quantum-field",ref:e})),wt=at.forwardRef((t,e)=>M.jsx(rt,{...t,animation:"neural-network",ref:e})),bt=(t,e)=>{const i=at.useRef(null);return{ref:i,start:()=>i.current?.start(),stop:()=>i.current?.stop(),destroy:()=>i.current?.destroy(),updateConfig:t=>i.current?.updateConfig(t)}};let Ct=null;try{Ct=require("vue")}catch(t){}const St=t=>{if(!Ct)return null;const{defineComponent:e,ref:i,onMounted:s,onUnmounted:n,watch:a,h:r}=Ct;return e({name:t.split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join("")+"Loader",props:{config:{type:Object,default:()=>({})},preset:{type:String,default:void 0},theme:{type:String,default:void 0},autoStart:{type:Boolean,default:!0},className:{type:String,default:""},style:{type:Object,default:()=>({})}},setup(e,{expose:o}){const c=i(null);let l=null;const h=()=>{if(c.value){let i={...e.config};if(e.preset){x.getPreset(e.preset)&&(i=x.applyPresetToConfig(i,e.preset))}e.theme&&(i=x.applyThemeToConfig(i,e.theme));const s={container:c.value,animation:t,config:i,autoStart:e.autoStart};l=new g(s)}};return s(()=>{h()}),n(()=>{l?.destroy(),l=null}),a([()=>e.config,()=>e.preset,()=>e.theme],()=>{l&&(l.destroy(),h())},{deep:!0}),o({start:()=>l?.start(),stop:()=>l?.stop(),destroy:()=>{l?.destroy(),l=null},updateConfig:t=>l?.updateConfig(t),getAnimation:()=>l}),()=>r("div",{ref:c,class:["realm-loader-container",e.className],style:{position:"relative",display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",...e.style}})}})},Mt=St("radial-pulse"),Pt=St("orbital-pulse"),Rt=St("pendulum-wave"),kt=St("pulse-wave"),It=St("concentric-rings"),Tt=St("sequential-pulse"),_t=St("oscillating-dots"),Et=St("pulsing-grid"),At=St("spiral-galaxy"),jt=St("wave-ripple"),qt=St("orbital-dance"),zt=St("spiral-vortex"),$t=St("quantum-field"),Ft=St("neural-network");var Ot=Object.freeze({__proto__:null,AnimationPresets:x,ConcentricRings:It,NeuralNetwork:Ft,OrbitalDance:qt,OrbitalPulse:Pt,OscillatingDots:_t,PendulumWave:Rt,PulseWave:kt,PulsingGrid:Et,QuantumField:$t,RadialPulse:Mt,SequentialPulse:Tt,SpiralGalaxy:At,SpiralVortex:zt,WaveRipple:jt,useRealmLoader:(t,e)=>{if(!Ct)return{ref:{value:null},start:()=>{},stop:()=>{},destroy:()=>{},updateConfig:()=>{}};const{ref:i}=Ct,s=i(null);return{ref:s,start:()=>s.value?.start(),stop:()=>s.value?.stop(),destroy:()=>{s.value?.destroy(),s.value=null},updateConfig:t=>s.value?.updateConfig(t)}}});export{x as AnimationPresets,e as BaseAnimation,g as CircleAnimations,ut as ConcentricRings,r as ConcentricRingsAnimation,wt as NeuralNetwork,m as NeuralNetworkAnimation,yt as OrbitalDance,d as OrbitalDanceAnimation,ct as OrbitalPulse,s as OrbitalPulseAnimation,ft as OscillatingDots,c as OscillatingDotsAnimation,lt as PendulumWave,n as PendulumWaveAnimation,t as PerformanceOptimizer,ht as PulseWave,a as PulseWaveAnimation,pt as PulsingGrid,l as PulsingGridAnimation,vt as QuantumField,p as QuantumFieldAnimation,ot as RadialPulse,i as RadialPulseAnimation,rt as RealmLoader,dt as SequentialPulse,o as SequentialPulseAnimation,mt as SpiralGalaxy,h as SpiralGalaxyAnimation,xt as SpiralVortex,f as SpiralVortexAnimation,Ot as VueComponents,gt as WaveRipple,u as WaveRippleAnimation,bt as useRealmLoader};
//# sourceMappingURL=index.esm.js.map