@basmilius/sparkle 2.3.0 → 2.5.0

package/src/popcorn/types.ts

@@ -0,0 +1,13 @@
+export type PopcornKernel = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    size: number;
+    rotation: number;
+    rotationSpeed: number;
+    popped: boolean;
+    opacity: number;
+    settled: boolean;
+    bounces: number;
+};

package/src/portal/consts.ts

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

package/src/portal/index.ts

@@ -0,0 +1,10 @@
+import { Portal } from './layer';
+import type { PortalConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createPortal(config?: PortalConfig): Effect<PortalConfig> {
+    return new Portal(config);
+}
+
+export type { PortalConfig };
+export type { PortalDirection, PortalParticle } from './types';

package/src/portal/layer.ts

@@ -0,0 +1,251 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { PortalDirection, PortalParticle } from './types';
+
+export interface PortalConfig {
+    readonly speed?: number;
+    readonly particles?: number;
+    readonly size?: number;
+    readonly color?: string;
+    readonly secondaryColor?: string;
+    readonly direction?: PortalDirection;
+    readonly scale?: number;
+}
+
+export class Portal extends Effect<PortalConfig> {
+    #speed: number;
+    #scale: number;
+    readonly #size: number;
+    readonly #colorRGB: [number, number, number];
+    readonly #secondaryRGB: [number, number, number];
+    readonly #direction: PortalDirection;
+    #count: number;
+    #particles: PortalParticle[] = [];
+    #width: number = 960;
+    #height: number = 540;
+    #time: number = 0;
+    #initialized: boolean = false;
+
+    constructor(config: PortalConfig = {}) {
+        super();
+
+        let count = config.particles ?? 100;
+
+        this.#speed = config.speed ?? 1;
+        this.#scale = config.scale ?? 1;
+        this.#size = config.size ?? 0.3;
+        this.#colorRGB = hexToRGB(config.color ?? '#8844ff');
+        this.#secondaryRGB = hexToRGB(config.secondaryColor ?? '#44aaff');
+        this.#direction = config.direction ?? 'inward';
+
+        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<PortalConfig>): 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;
+        this.#time += dt * this.#speed * 0.01;
+
+        const portalRadius = Math.min(width, height) * this.#size * this.#scale;
+        const maxDistance = 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];
+
+            particle.angle += particle.rotationSpeed * this.#speed * dt * this.#scale;
+
+            if (this.#direction === 'inward') {
+                const normalizedDistance = particle.distance / maxDistance;
+                const acceleration = 1 + (1 - normalizedDistance) * 2;
+                particle.distance -= particle.speed * this.#speed * acceleration * dt * this.#scale;
+
+                particle.opacity = Math.min(1, normalizedDistance * 2);
+
+                if (particle.distance > portalRadius * 0.1) {
+                    this.#particles[alive++] = particle;
+                } else {
+                    this.#particles[alive++] = this.#createParticle(false);
+                }
+            } else {
+                const normalizedDistance = particle.distance / maxDistance;
+                const acceleration = 1 + normalizedDistance * 2;
+                particle.distance += particle.speed * this.#speed * acceleration * dt * this.#scale;
+
+                particle.opacity = Math.min(1, (1 - normalizedDistance) * 2);
+
+                if (particle.distance < maxDistance + 20) {
+                    this.#particles[alive++] = particle;
+                } else {
+                    this.#particles[alive++] = this.#createParticle(false);
+                }
+            }
+        }
+
+        this.#particles.length = alive;
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const cx = width / 2;
+        const cy = height / 2;
+        const portalRadius = Math.min(width, height) * this.#size * this.#scale;
+        const [pr, pg, pb] = this.#colorRGB;
+        const [sr, sg, sb] = this.#secondaryRGB;
+
+        ctx.globalCompositeOperation = 'lighter';
+
+        // Inner glow
+        const innerGlow = ctx.createRadialGradient(cx, cy, 0, cx, cy, portalRadius * 0.5);
+        innerGlow.addColorStop(0, `rgba(255, 255, 255, 0.15)`);
+        innerGlow.addColorStop(0.3, `rgba(${pr}, ${pg}, ${pb}, 0.1)`);
+        innerGlow.addColorStop(1, `rgba(${pr}, ${pg}, ${pb}, 0)`);
+
+        ctx.beginPath();
+        ctx.arc(cx, cy, portalRadius * 0.5, 0, Math.PI * 2);
+        ctx.fillStyle = innerGlow;
+        ctx.fill();
+
+        // Ring with distortion and swirl
+        const ringSegments = 6;
+        const time = this.#time;
+
+        for (let ring = 0; ring < ringSegments; ++ring) {
+            const ringPhase = (ring / ringSegments) * Math.PI * 2;
+            const ringAlpha = 0.15 - ring * 0.015;
+            const ringWidth = 3 + ring * 1.5;
+
+            ctx.beginPath();
+            ctx.lineWidth = ringWidth * this.#scale;
+
+            for (let angle = 0; angle <= Math.PI * 2; angle += 0.02) {
+                const distortion = 1
+                    + Math.sin(angle * 3 + time * 2 + ringPhase) * 0.04
+                    + Math.sin(angle * 5 + time * 3.7) * 0.02
+                    + Math.sin(angle * 7 + time * 1.3 + ringPhase) * 0.015;
+
+                const radius = portalRadius * distortion;
+                const px = cx + Math.cos(angle + time * 0.5 + ringPhase * 0.3) * radius;
+                const py = cy + Math.sin(angle + time * 0.5 + ringPhase * 0.3) * radius;
+
+                if (angle === 0) {
+                    ctx.moveTo(px, py);
+                } else {
+                    ctx.lineTo(px, py);
+                }
+            }
+
+            ctx.closePath();
+
+            const mixFactor = ring / ringSegments;
+            const colorR = Math.round(pr + (sr - pr) * mixFactor);
+            const colorG = Math.round(pg + (sg - pg) * mixFactor);
+            const colorB = Math.round(pb + (sb - pb) * mixFactor);
+
+            ctx.strokeStyle = `rgba(${colorR}, ${colorG}, ${colorB}, ${ringAlpha})`;
+            ctx.stroke();
+        }
+
+        // Ring glow
+        const ringGlow = ctx.createRadialGradient(cx, cy, portalRadius * 0.8, cx, cy, portalRadius * 1.3);
+        ringGlow.addColorStop(0, `rgba(${pr}, ${pg}, ${pb}, 0)`);
+        ringGlow.addColorStop(0.5, `rgba(${pr}, ${pg}, ${pb}, 0.08)`);
+        ringGlow.addColorStop(1, `rgba(${pr}, ${pg}, ${pb}, 0)`);
+
+        ctx.beginPath();
+        ctx.arc(cx, cy, portalRadius * 1.3, 0, Math.PI * 2);
+        ctx.fillStyle = ringGlow;
+        ctx.fill();
+
+        // Particles
+        for (const particle of this.#particles) {
+            const px = cx + Math.cos(particle.angle) * particle.distance;
+            const py = cy + Math.sin(particle.angle) * particle.distance;
+
+            const trailAngle = this.#direction === 'inward' ? particle.angle + Math.PI : particle.angle;
+            const trailLength = (8 + particle.speed * 4) * this.#scale;
+            const tx = px + Math.cos(trailAngle) * trailLength;
+            const ty = py + Math.sin(trailAngle) * trailLength;
+
+            const alpha = Math.max(0.05, Math.min(1, particle.opacity));
+            const lineWidth = Math.max(0.5, particle.size * this.#scale);
+
+            const gradient = ctx.createLinearGradient(px, py, tx, ty);
+            gradient.addColorStop(0, `rgba(${sr}, ${sg}, ${sb}, ${alpha})`);
+            gradient.addColorStop(1, `rgba(${sr}, ${sg}, ${sb}, 0)`);
+
+            ctx.globalAlpha = 1;
+            ctx.beginPath();
+            ctx.moveTo(px, py);
+            ctx.lineTo(tx, ty);
+            ctx.strokeStyle = gradient;
+            ctx.lineWidth = lineWidth;
+            ctx.stroke();
+
+            // Glowing dot at particle head
+            ctx.globalAlpha = alpha;
+            ctx.beginPath();
+            ctx.arc(px, py, lineWidth * 0.8, 0, Math.PI * 2);
+            ctx.fillStyle = `rgb(${sr}, ${sg}, ${sb})`;
+            ctx.fill();
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+    }
+
+    #createParticle(spread: boolean): PortalParticle {
+        const maxDistance = Math.sqrt((this.#width / 2) ** 2 + (this.#height / 2) ** 2);
+        const portalRadius = Math.min(this.#width, this.#height) * this.#size * this.#scale;
+        const angle = MULBERRY.next() * Math.PI * 2;
+
+        let distance: number;
+
+        if (this.#direction === 'inward') {
+            distance = spread
+                ? portalRadius + MULBERRY.next() * (maxDistance - portalRadius)
+                : maxDistance * (0.7 + MULBERRY.next() * 0.3);
+        } else {
+            distance = spread
+                ? portalRadius + MULBERRY.next() * (maxDistance - portalRadius)
+                : portalRadius * (1 + MULBERRY.next() * 0.2);
+        }
+
+        return {
+            angle,
+            distance,
+            speed: 0.3 + MULBERRY.next() * 1.2,
+            size: 0.8 + MULBERRY.next() * 2,
+            opacity: 1,
+            rotationSpeed: (0.002 + MULBERRY.next() * 0.006) * (MULBERRY.next() > 0.5 ? 1 : -1)
+        };
+    }
+}

package/src/portal/types.ts

@@ -0,0 +1,10 @@
+export type PortalDirection = 'inward' | 'outward';
+
+export type PortalParticle = {
+    angle: number;
+    distance: number;
+    speed: number;
+    size: number;
+    opacity: number;
+    rotationSpeed: number;
+};

package/src/pulse-grid/consts.ts

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

package/src/pulse-grid/index.ts

@@ -0,0 +1,10 @@
+import { PulseGrid } from './layer';
+import type { PulseGridConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createPulseGrid(config?: PulseGridConfig): Effect<PulseGridConfig> {
+    return new PulseGrid(config);
+}
+
+export type { PulseGridConfig };
+export type { PulseWave } from './types';

package/src/pulse-grid/layer.ts

@@ -0,0 +1,185 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { PulseWave } from './types';
+
+export interface PulseGridConfig {
+    readonly spacing?: number;
+    readonly speed?: number;
+    readonly color?: string;
+    readonly dotSize?: number;
+    readonly waveCount?: number;
+    readonly waveSpeed?: number;
+    readonly scale?: number;
+}
+
+const DEFAULT_SPACING = 30;
+const DEFAULT_DOT_SIZE = 2;
+const DEFAULT_WAVE_COUNT = 3;
+const DEFAULT_WAVE_SPEED = 100;
+const TWO_PI = Math.PI * 2;
+
+export class PulseGrid extends Effect<PulseGridConfig> {
+    readonly #scale: number;
+    readonly #dotSize: number;
+    readonly #r: number;
+    readonly #g: number;
+    readonly #b: number;
+    #speed: number;
+    #waveSpeed: number;
+    #spacing: number;
+    #waveCount: number;
+    #gridX: Float32Array = new Float32Array(0);
+    #gridY: Float32Array = new Float32Array(0);
+    #gridCount: number = 0;
+    #waves: PulseWave[] = [];
+    #spawnTimer: number = 0;
+    #width: number = 0;
+    #height: number = 0;
+
+    constructor(config: PulseGridConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#spacing = (config.spacing ?? DEFAULT_SPACING) * this.#scale;
+        this.#speed = config.speed ?? 1;
+        this.#dotSize = (config.dotSize ?? DEFAULT_DOT_SIZE) * this.#scale;
+        this.#waveCount = config.waveCount ?? DEFAULT_WAVE_COUNT;
+        this.#waveSpeed = (config.waveSpeed ?? DEFAULT_WAVE_SPEED) * this.#scale;
+
+        const [r, g, b] = hexToRGB(config.color ?? '#4488ff');
+        this.#r = r;
+        this.#g = g;
+        this.#b = b;
+    }
+
+    configure(config: Partial<PulseGridConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.waveSpeed !== undefined) {
+            this.#waveSpeed = (config.waveSpeed) * this.#scale;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+        this.#buildGrid(width, height);
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        const dtSeconds = dt * 0.008 * this.#speed;
+
+        // Update existing waves.
+        let writeIndex = 0;
+
+        for (let index = 0; index < this.#waves.length; index++) {
+            const wave = this.#waves[index];
+            wave.radius += wave.speed * dtSeconds;
+            wave.life -= dtSeconds * 0.5;
+
+            if (wave.life > 0 && wave.radius < wave.maxRadius) {
+                this.#waves[writeIndex++] = wave;
+            }
+        }
+
+        this.#waves.length = writeIndex;
+
+        // Spawn new waves periodically.
+        this.#spawnTimer += dtSeconds;
+
+        const spawnInterval = 1.5 / this.#waveCount;
+
+        while (this.#spawnTimer >= spawnInterval && this.#waves.length < this.#waveCount * 2) {
+            this.#spawnTimer -= spawnInterval;
+            this.#spawnWave();
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, _width: number, _height: number): void {
+        const waveCount = this.#waves.length;
+
+        if (waveCount === 0) {
+            return;
+        }
+
+        ctx.globalCompositeOperation = 'lighter';
+
+        const dotSize = this.#dotSize;
+        const r = this.#r;
+        const g = this.#g;
+        const b = this.#b;
+
+        for (let index = 0; index < this.#gridCount; index++) {
+            const px = this.#gridX[index];
+            const py = this.#gridY[index];
+
+            let brightness = 0;
+
+            for (let wi = 0; wi < waveCount; wi++) {
+                const wave = this.#waves[wi];
+                const dx = px - wave.x;
+                const dy = py - wave.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                const ringDist = Math.abs(dist - wave.radius);
+                const ringWidth = 20 * this.#scale;
+
+                // Gaussian brightness based on distance to wave ring.
+                const intensity = Math.exp(-(ringDist * ringDist) / (2 * ringWidth * ringWidth));
+                brightness += intensity * wave.life;
+            }
+
+            if (brightness < 0.01) {
+                continue;
+            }
+
+            if (brightness > 1) {
+                brightness = 1;
+            }
+
+            ctx.globalAlpha = brightness;
+            ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+            ctx.beginPath();
+            ctx.arc(px, py, dotSize + dotSize * brightness * 0.5, 0, TWO_PI);
+            ctx.fill();
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+    }
+
+    #buildGrid(width: number, height: number): void {
+        const spacing = this.#spacing;
+        const cols = Math.ceil(width / spacing) + 1;
+        const rows = Math.ceil(height / spacing) + 1;
+        const total = cols * rows;
+
+        this.#gridX = new Float32Array(total);
+        this.#gridY = new Float32Array(total);
+        this.#gridCount = total;
+
+        let index = 0;
+
+        for (let row = 0; row < rows; row++) {
+            for (let col = 0; col < cols; col++) {
+                this.#gridX[index] = col * spacing;
+                this.#gridY[index] = row * spacing;
+                index++;
+            }
+        }
+    }
+
+    #spawnWave(): void {
+        const maxDim = Math.max(this.#width, this.#height);
+
+        this.#waves.push({
+            x: MULBERRY.next() * this.#width,
+            y: MULBERRY.next() * this.#height,
+            radius: 0,
+            maxRadius: maxDim * 0.8 + MULBERRY.next() * maxDim * 0.4,
+            speed: this.#waveSpeed * (0.8 + MULBERRY.next() * 0.4),
+            life: 1
+        });
+    }
+}

package/src/pulse-grid/types.ts

@@ -0,0 +1,8 @@
+export type PulseWave = {
+    x: number;
+    y: number;
+    radius: number;
+    maxRadius: number;
+    speed: number;
+    life: number;
+};

package/src/roots/consts.ts

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

package/src/roots/index.ts

@@ -0,0 +1,9 @@
+import { Roots } from './layer';
+import type { RootsConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createRoots(config?: RootsConfig): Effect<RootsConfig> {
+    return new Roots(config);
+}
+
+export type { RootsConfig };