@basmilius/sparkle 2.0.0 → 2.2.0

package/src/waves/layer.ts

@@ -0,0 +1,164 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { Wave } from './types';
+
+const DEFAULT_COLORS = ['#0a3d6b', '#0e5a8a', '#1a7ab5', '#3399cc', '#66c2e0'];
+
+export interface WavesConfig {
+    readonly layers?: number;
+    readonly speed?: number;
+    readonly colors?: string[];
+    readonly foamColor?: string;
+    readonly foamAmount?: number;
+    readonly scale?: number;
+}
+
+export class Waves extends Effect<WavesConfig> {
+    #speed: number;
+    #foamAmount: number;
+    #scale: number;
+    readonly #foamRGB: [number, number, number];
+    #waves: Wave[] = [];
+    #foamParticles: { x: number; y: number; alpha: number; size: number }[] = [];
+    #maxFoamParticles: number;
+
+    constructor(config: WavesConfig = {}) {
+        super();
+
+        const layers = config.layers ?? 5;
+        const colors = config.colors ?? DEFAULT_COLORS;
+        this.#speed = config.speed ?? 1;
+        this.#foamAmount = config.foamAmount ?? 0.4;
+        this.#scale = config.scale ?? 1;
+        this.#maxFoamParticles = 120;
+        this.#foamRGB = hexToRGB(config.foamColor ?? '#ffffff');
+
+        if (innerWidth < 991) {
+            this.#maxFoamParticles = Math.floor(this.#maxFoamParticles / 2);
+        }
+
+        for (let i = 0; i < layers; i++) {
+            const depth = i / Math.max(layers - 1, 1);
+            const color = colors[i % colors.length];
+
+            this.#waves.push({
+                amplitude: (20 + MULBERRY.next() * 30) * (1 - depth * 0.4),
+                frequency: 0.005 + MULBERRY.next() * 0.008 + depth * 0.002,
+                speed: 0.4 + MULBERRY.next() * 0.6 + depth * 0.3,
+                phase: MULBERRY.next() * Math.PI * 2,
+                baseY: 0.35 + depth * 0.13,
+                color,
+                foamThreshold: 0.6 + MULBERRY.next() * 0.3,
+                rgb: hexToRGB(color)
+            });
+        }
+    }
+
+    configure(config: Partial<WavesConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.foamAmount !== undefined) {
+            this.#foamAmount = config.foamAmount;
+        }
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        for (const wave of this.#waves) {
+            wave.phase += 0.015 * wave.speed * this.#speed * dt;
+        }
+
+        let aliveFoam = 0;
+
+        for (let i = 0; i < this.#foamParticles.length; i++) {
+            const foam = this.#foamParticles[i];
+            foam.alpha -= (0.008 + MULBERRY.next() * 0.006) * dt;
+            foam.x += (MULBERRY.next() - 0.5) * 0.5 * dt;
+            foam.y += (MULBERRY.next() - 0.5) * 0.3 * dt;
+
+            if (foam.alpha > 0) {
+                this.#foamParticles[aliveFoam++] = foam;
+            }
+        }
+
+        this.#foamParticles.length = aliveFoam;
+
+        if (this.#foamAmount > 0 && width > 0 && height > 0) {
+            const spawnCount = Math.ceil(2 * this.#foamAmount * dt);
+
+            for (let s = 0; s < spawnCount && this.#foamParticles.length < this.#maxFoamParticles; s++) {
+                const waveIndex = Math.floor(MULBERRY.next() * this.#waves.length);
+                const wave = this.#waves[waveIndex];
+                const x = MULBERRY.next() * width;
+                const centerY = wave.baseY * height;
+                const primary = wave.amplitude * Math.sin(wave.frequency * x + wave.phase);
+                const secondary = wave.amplitude * 0.4 * Math.sin(wave.frequency * 2.3 * x + wave.phase * 1.7 + 1.3);
+                const waveY = centerY + (primary + secondary) * this.#scale;
+
+                const slopeCheck = Math.cos(wave.frequency * x + wave.phase);
+
+                if (slopeCheck > wave.foamThreshold - 1) {
+                    this.#foamParticles.push({
+                        x,
+                        y: waveY - MULBERRY.next() * 4 * this.#scale,
+                        alpha: 0.4 + MULBERRY.next() * 0.6,
+                        size: 1 + MULBERRY.next() * 3
+                    });
+                }
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        const step = 2;
+
+        for (let wi = 0; wi < this.#waves.length; wi++) {
+            const wave = this.#waves[wi];
+            const [wr, wg, wb] = wave.rgb;
+            const centerY = wave.baseY * height;
+
+            ctx.beginPath();
+            ctx.moveTo(0, height);
+
+            for (let x = 0; x <= width; x += step) {
+                const primary = wave.amplitude * Math.sin(wave.frequency * x + wave.phase);
+                const secondary = wave.amplitude * 0.4 * Math.sin(wave.frequency * 2.3 * x + wave.phase * 1.7 + 1.3);
+                const tertiary = wave.amplitude * 0.15 * Math.sin(wave.frequency * 4.1 * x + wave.phase * 0.6 + 2.8);
+                const waveY = centerY + (primary + secondary + tertiary) * this.#scale;
+
+                ctx.lineTo(x, waveY);
+            }
+
+            ctx.lineTo(width, height);
+            ctx.closePath();
+
+            const gradient = ctx.createLinearGradient(0, centerY - wave.amplitude * this.#scale, 0, height);
+            gradient.addColorStop(0, `rgba(${wr}, ${wg}, ${wb}, 0.85)`);
+            gradient.addColorStop(0.4, `rgb(${wr}, ${wg}, ${wb})`);
+            gradient.addColorStop(1, `rgb(${Math.floor(wr * 0.6)}, ${Math.floor(wg * 0.6)}, ${Math.floor(wb * 0.6)})`);
+
+            ctx.fillStyle = gradient;
+            ctx.fill();
+        }
+
+        if (this.#foamAmount > 0) {
+            const [fr, fg, fb] = this.#foamRGB;
+
+            for (const foam of this.#foamParticles) {
+                if (foam.alpha <= 0) {
+                    continue;
+                }
+
+                ctx.beginPath();
+                ctx.arc(foam.x, foam.y, foam.size * this.#scale, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(${fr}, ${fg}, ${fb}, ${foam.alpha * this.#foamAmount})`;
+                ctx.fill();
+            }
+        }
+    }
+}

package/src/waves/types.ts

@@ -0,0 +1,10 @@
+export type Wave = {
+    amplitude: number;
+    frequency: number;
+    speed: number;
+    phase: number;
+    baseY: number;
+    color: string;
+    foamThreshold: number;
+    rgb: [number, number, number];
+};

package/src/wormhole/consts.ts

@@ -0,0 +1,3 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);

package/src/wormhole/index.ts

@@ -0,0 +1,10 @@
+import { Wormhole } from './layer';
+import type { WormholeConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createWormhole(config?: WormholeConfig): Effect<WormholeConfig> {
+    return new Wormhole(config);
+}
+
+export type { WormholeConfig };
+export type { WormholeDirection, WormholeParticle } from './types';

package/src/wormhole/layer.ts

@@ -0,0 +1,197 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { WormholeDirection, WormholeParticle } from './types';
+
+export interface WormholeConfig {
+    readonly count?: number;
+    readonly speed?: number;
+    readonly color?: string;
+    readonly direction?: WormholeDirection;
+    readonly scale?: number;
+}
+
+export class Wormhole extends Effect<WormholeConfig> {
+    #speed: number;
+    readonly #colorRGB: [number, number, number];
+    readonly #direction: WormholeDirection;
+    #scale: number;
+    #count: number;
+    #particles: WormholeParticle[] = [];
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: WormholeConfig = {}) {
+        super();
+
+        let count = config.count ?? 200;
+
+        this.#speed = config.speed ?? 1;
+        this.#colorRGB = hexToRGB(config.color ?? '#6699ff');
+        this.#direction = config.direction ?? 'inward';
+        this.#scale = config.scale ?? 1;
+
+        if (innerWidth < 991) {
+            count = Math.floor(count / 2);
+        }
+
+        this.#count = count;
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#particles = [];
+
+            for (let i = 0; i < this.#count; ++i) {
+                this.#particles.push(this.#createParticle(true));
+            }
+        }
+    }
+
+    configure(config: Partial<WormholeConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        const maxRadius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2);
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#particles.length; ++i) {
+            const particle = this.#particles[i];
+
+            if (this.#direction === 'inward') {
+                const normalizedDistance = particle.distance / maxRadius;
+                const acceleration = 1 + (1 - normalizedDistance) * 3;
+                particle.distance -= particle.speed * this.#speed * acceleration * dt * this.#scale;
+
+                particle.trail = 5 + (1 - normalizedDistance) * 25;
+
+                if (particle.distance > 0) {
+                    this.#particles[alive++] = particle;
+                } else {
+                    this.#particles[alive++] = this.#createParticle(false);
+                }
+            } else {
+                const normalizedDistance = particle.distance / maxRadius;
+                const acceleration = 1 + normalizedDistance * 3;
+                particle.distance += particle.speed * this.#speed * acceleration * dt * this.#scale;
+
+                particle.trail = 5 + normalizedDistance * 25;
+
+                if (particle.distance < maxRadius + 20) {
+                    this.#particles[alive++] = particle;
+                } else {
+                    this.#particles[alive++] = this.#createParticle(false);
+                }
+            }
+
+            particle.angle += (MULBERRY.next() - 0.5) * 0.002 * dt;
+        }
+
+        this.#particles.length = alive;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const cx = width / 2;
+        const cy = height / 2;
+        const maxRadius = Math.sqrt(cx * cx + cy * cy);
+        const [cr, cg, cb] = this.#colorRGB;
+
+
+        const glowRadius = 40 * this.#scale;
+        const glow = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowRadius);
+        glow.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, 0.25)`);
+        glow.addColorStop(0.4, `rgba(${cr}, ${cg}, ${cb}, 0.08)`);
+        glow.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.arc(cx, cy, glowRadius, 0, Math.PI * 2);
+        ctx.fillStyle = glow;
+        ctx.fill();
+
+        for (const particle of this.#particles) {
+            const normalizedDistance = particle.distance / maxRadius;
+            const px = cx + Math.cos(particle.angle) * particle.distance;
+            const py = cy + Math.sin(particle.angle) * particle.distance;
+
+            const trailFactor = this.#direction === 'inward' ? 1 : -1;
+            const trailLength = particle.trail * this.#scale;
+            const tx = px + Math.cos(particle.angle) * trailLength * trailFactor;
+            const ty = py + Math.sin(particle.angle) * trailLength * trailFactor;
+
+            let intensity: number;
+
+            if (this.#direction === 'inward') {
+                intensity = particle.brightness * (1 - normalizedDistance);
+            } else {
+                intensity = particle.brightness * normalizedDistance;
+            }
+
+            const alpha = Math.max(0.05, Math.min(1, intensity));
+            const lineWidth = Math.max(0.5, particle.size * this.#scale * (0.5 + intensity * 0.5));
+
+            const gradient = ctx.createLinearGradient(px, py, tx, ty);
+            gradient.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, ${alpha})`);
+            gradient.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+            ctx.globalAlpha = 1;
+            ctx.beginPath();
+            ctx.moveTo(px, py);
+            ctx.lineTo(tx, ty);
+            ctx.strokeStyle = gradient;
+            ctx.lineWidth = lineWidth;
+            ctx.stroke();
+
+            ctx.globalAlpha = alpha;
+            ctx.beginPath();
+            ctx.arc(px, py, lineWidth * 0.6, 0, Math.PI * 2);
+            ctx.fillStyle = `rgb(${cr}, ${cg}, ${cb})`;
+            ctx.fill();
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+    }
+
+    #createParticle(spread: boolean): WormholeParticle {
+        const maxRadius = Math.sqrt((this.#width / 2) ** 2 + (this.#height / 2) ** 2);
+        const angle = MULBERRY.next() * Math.PI * 2;
+
+        let distance: number;
+
+        if (this.#direction === 'inward') {
+            distance = spread
+                ? MULBERRY.next() * maxRadius
+                : maxRadius * (0.8 + MULBERRY.next() * 0.2);
+        } else {
+            distance = spread
+                ? MULBERRY.next() * maxRadius
+                : MULBERRY.next() * maxRadius * 0.1;
+        }
+
+        return {
+            angle,
+            distance,
+            speed: 0.5 + MULBERRY.next() * 1.5,
+            size: 0.8 + MULBERRY.next() * 2.2,
+            brightness: 0.4 + MULBERRY.next() * 0.6,
+            trail: 5
+        };
+    }
+}

package/src/wormhole/types.ts

@@ -0,0 +1,10 @@
+export type WormholeDirection = 'inward' | 'outward';
+
+export type WormholeParticle = {
+    angle: number;
+    distance: number;
+    speed: number;
+    size: number;
+    brightness: number;
+    trail: number;
+};

package/src/confetti/simulation.ts

@@ -1,221 +0,0 @@
-import { hexToRGB } from '@basmilius/utils';
-import { LimitedFrameRateCanvas } from '../canvas';
-import { DEFAULT_CONFIG, MULBERRY } from './consts';
-import type { Config, Particle, ParticleConfig, Shape } from './types';
-
-const TWO_PI = Math.PI * 2;
-
-// Precomputed unit-size (size=1) Path2D objects per shape.
-// Size is encoded into the context transform, so each path is drawn once and reused every frame.
-const SHAPE_PATHS: Record<Shape, Path2D> = {
-    circle: (() => {
-        const path = new Path2D();
-        path.ellipse(0, 0, 0.6, 1, 0, 0, TWO_PI);
-        return path;
-    })(),
-    diamond: (() => {
-        const path = new Path2D();
-        path.moveTo(0, -1);
-        path.lineTo(0.6, 0);
-        path.lineTo(0, 1);
-        path.lineTo(-0.6, 0);
-        path.closePath();
-        return path;
-    })(),
-    ribbon: (() => {
-        const path = new Path2D();
-        path.rect(-0.2, -1, 0.4, 2);
-        return path;
-    })(),
-    square: (() => {
-        const path = new Path2D();
-        path.rect(-0.7, -0.7, 1.4, 1.4);
-        return path;
-    })(),
-    star: (() => {
-        const path = new Path2D();
-        for (let i = 0; i < 10; i++) {
-            const r = i % 2 === 0 ? 1 : 0.42;
-            const angle = (i * Math.PI / 5) - Math.PI / 2;
-            if (i === 0) path.moveTo(r * Math.cos(angle), r * Math.sin(angle));
-            else path.lineTo(r * Math.cos(angle), r * Math.sin(angle));
-        }
-        path.closePath();
-        return path;
-    })(),
-    triangle: (() => {
-        const path = new Path2D();
-        for (let i = 0; i < 3; i++) {
-            const angle = (i * 2 * Math.PI / 3) - Math.PI / 2;
-            if (i === 0) path.moveTo(Math.cos(angle), Math.sin(angle));
-            else path.lineTo(Math.cos(angle), Math.sin(angle));
-        }
-        path.closePath();
-        return path;
-    })()
-};
-
-export interface ConfettiSimulationConfig {
-    readonly scale?: number;
-    readonly canvasOptions?: CanvasRenderingContext2DSettings;
-}
-
-export class ConfettiSimulation extends LimitedFrameRateCanvas {
-
-    readonly #scale: number;
-    #particles: Particle[] = [];
-
-    constructor(canvas: HTMLCanvasElement, config: ConfettiSimulationConfig = {}) {
-        super(canvas, 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
-
-        this.#scale = config.scale ?? 1;
-
-        this.canvas.style.position = 'absolute';
-        this.canvas.style.top = '0';
-        this.canvas.style.left = '0';
-        this.canvas.style.height = '100%';
-        this.canvas.style.width = '100%';
-    }
-
-    fire(config: Partial<Config>): void {
-        this.onResize();
-        this.draw();
-
-        const resolved = { ...DEFAULT_CONFIG, ...config };
-        const { angle, colors, decay, gravity, shapes, spread, startVelocity, ticks, x, y } = resolved;
-        const numberOfParticles = Math.max(1, resolved.particles);
-
-        for (let i = 0; i < numberOfParticles; i++) {
-            const particle = this.#createParticle({
-                angle,
-                color: hexToRGB(colors[Math.floor(MULBERRY.next() * colors.length)]),
-                decay,
-                gravity: gravity * this.#scale,
-                shape: shapes[Math.floor(MULBERRY.next() * shapes.length)],
-                spread,
-                startVelocity: startVelocity * this.#scale,
-                ticks,
-                x: this.width * x,
-                y: this.height * y
-            });
-
-            this.#tickParticle(particle);
-            this.#particles.push(particle);
-        }
-
-        if (!this.isTicking) {
-            this.start();
-        }
-    }
-
-    draw(): void {
-        const { context, width, height } = this;
-        context.clearRect(0, 0, width, height);
-
-        const particles = this.#particles;
-
-        for (let i = 0; i < particles.length; i++) {
-            const p = particles[i];
-            const flipCos = Math.cos(p.flipAngle);
-            const size = p.size;
-
-            // Encode translate + rotate + scale(flipCos, 1) + scale(size, size) in a single setTransform call,
-            // avoiding save()/translate()/rotate()/scale()/restore() — 5 API calls replaced by 1.
-            context.setTransform(
-                p.rotCos * flipCos * size,
-                p.rotSin * flipCos * size,
-                -p.rotSin * size,
-                p.rotCos * size,
-                p.x,
-                p.y
-            );
-            context.globalAlpha = 1 - p.tick / p.totalTicks;
-            context.fillStyle = p.colorStr;
-            context.fill(SHAPE_PATHS[p.shape]);
-        }
-
-        context.resetTransform();
-    }
-
-    tick(): void {
-        const particles = this.#particles;
-        let alive = 0;
-
-        // Normalize to 60fps-equivalent units so physics is frame-rate independent.
-        // dt ≈ 1.0 at 60fps, 0.5 at 120fps, 2.0 at 30fps.
-        // Cap at 200ms to avoid large jumps after tab switches or dropped frames.
-        const dt = this.delta > 0 && this.delta < 200 ? this.delta / (1000 / 60) : 1;
-
-        // Single pass: tick live particles and compact the array in-place.
-        // Avoids filter() allocation and a separate forEach pass.
-        for (let i = 0; i < particles.length; i++) {
-            const p = particles[i];
-
-            if (p.tick < p.totalTicks) {
-                this.#tickParticle(p, dt);
-                particles[alive++] = p;
-            }
-        }
-
-        particles.length = alive;
-
-        if (alive === 0) {
-            this.stop();
-        }
-    }
-
-    onResize(): void {
-        super.onResize();
-        this.canvas.width = this.width;
-        this.canvas.height = this.height;
-    }
-
-    #createParticle(config: ParticleConfig): Particle {
-        const launchAngle = -(config.angle * Math.PI / 180)
-            + (0.5 * config.spread * Math.PI / 180)
-            - (MULBERRY.next() * config.spread * Math.PI / 180);
-
-        const speed = config.startVelocity * (0.5 + MULBERRY.next());
-        const rotAngle = MULBERRY.next() * TWO_PI;
-
-        return {
-            colorStr: `rgb(${config.color[0]}, ${config.color[1]}, ${config.color[2]})`,
-            decay: config.decay - 0.05 + MULBERRY.next() * 0.1,
-            flipAngle: MULBERRY.next() * TWO_PI,
-            flipSpeed: 0.03 + MULBERRY.next() * 0.05,
-            gravity: config.gravity,
-            rotAngle,
-            rotCos: Math.cos(rotAngle),
-            rotSin: Math.sin(rotAngle),
-            rotSpeed: (MULBERRY.next() - 0.5) * 0.06,
-            shape: config.shape,
-            size: (5 + MULBERRY.next() * 5) * this.#scale,
-            swing: MULBERRY.next() * TWO_PI,
-            swingAmp: 0.5 + MULBERRY.next() * 1.5,
-            swingSpeed: 0.025 + MULBERRY.next() * 0.035,
-            tick: 0,
-            totalTicks: config.ticks,
-            vx: Math.cos(launchAngle) * speed,
-            vy: Math.sin(launchAngle) * speed,
-            x: config.x,
-            y: config.y
-        };
-    }
-
-    // dt defaults to 1 (60fps-equivalent) for the initial kick in fire() before the loop starts.
-    #tickParticle(particle: Particle, dt: number = 1): void {
-        const decayFactor = Math.pow(particle.decay, dt);
-        particle.vx *= decayFactor;
-        particle.vy *= decayFactor;
-        particle.vy += particle.gravity * 0.35 * dt;
-        particle.swing += particle.swingSpeed * dt;
-        particle.x += (particle.vx + particle.swingAmp * Math.cos(particle.swing)) * dt;
-        particle.y += particle.vy * dt;
-        particle.rotAngle += particle.rotSpeed * dt;
-        particle.rotCos = Math.cos(particle.rotAngle);
-        particle.rotSin = Math.sin(particle.rotAngle);
-        particle.flipAngle += particle.flipSpeed * dt;
-        particle.tick += dt;
-    }
-
-}