@basmilius/sparkle 2.0.0 → 2.2.0

package/src/matrix/layer.ts

@@ -0,0 +1,154 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MATRIX_CHARS, MULBERRY } from './consts';
+import type { MatrixColumn, MatrixConfig } from './types';
+
+export class Matrix extends Effect<MatrixConfig> {
+    readonly #scale: number;
+    #speed: number;
+    readonly #fontSize: number;
+    #trailLength: number;
+    readonly #colorRGB: [number, number, number];
+    #maxColumns: number;
+    #columns: MatrixColumn[] = [];
+    #respawnTimers: number[] = [];
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: MatrixConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxColumns = config.columns ?? 40;
+        this.#speed = config.speed ?? 1;
+        this.#fontSize = (config.fontSize ?? 14) * this.#scale;
+        this.#trailLength = config.trailLength ?? 20;
+        this.#colorRGB = hexToRGB(config.color ?? '#00ff41');
+
+        if (innerWidth < 991) {
+            this.#maxColumns = Math.floor(this.#maxColumns / 2);
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#columns = [];
+            this.#respawnTimers = [];
+
+            const columnWidth = this.#fontSize;
+            const totalSlots = Math.floor(width / columnWidth);
+            const columnCount = Math.min(this.#maxColumns, totalSlots);
+
+            for (let i = 0; i < columnCount; ++i) {
+                const column = this.#createColumn(totalSlots, height);
+                this.#columns.push(column);
+                this.#respawnTimers.push(0);
+            }
+        }
+    }
+
+    configure(config: Partial<MatrixConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.trailLength !== undefined) {
+            this.#trailLength = config.trailLength;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        const columnWidth = this.#fontSize;
+        const totalSlots = Math.floor(width / columnWidth);
+
+        for (let i = 0; i < this.#columns.length; ++i) {
+            if (this.#respawnTimers[i] > 0) {
+                this.#respawnTimers[i] -= dt;
+
+                if (this.#respawnTimers[i] <= 0) {
+                    this.#columns[i] = this.#createColumn(totalSlots, height);
+                }
+
+                continue;
+            }
+
+            const column = this.#columns[i];
+
+            column.y += column.speed * this.#speed * dt;
+
+            for (let ci = 0; ci < column.chars.length; ++ci) {
+                if (MULBERRY.next() < 0.03) {
+                    column.chars[ci] = MATRIX_CHARS[Math.floor(MULBERRY.next() * MATRIX_CHARS.length)];
+                }
+            }
+
+            const topOfTrail = column.y - (column.chars.length - 1) * this.#fontSize;
+
+            if (topOfTrail > height) {
+                this.#respawnTimers[i] = 10 + MULBERRY.next() * 60;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        ctx.fillStyle = 'rgb(0, 0, 0)';
+        ctx.fillRect(0, 0, width, height);
+
+        const [cr, cg, cb] = this.#colorRGB;
+
+        ctx.font = `${this.#fontSize}px monospace`;
+        ctx.textAlign = 'center';
+
+        for (const column of this.#columns) {
+            const charCount = column.chars.length;
+
+            for (let ci = 0; ci < charCount; ++ci) {
+                const charY = column.y - (charCount - 1 - ci) * this.#fontSize;
+
+                if (charY < -this.#fontSize || charY > height + this.#fontSize) {
+                    continue;
+                }
+
+                const isHead = ci === charCount - 1;
+
+                if (isHead) {
+                    const headAlpha = column.headBrightness;
+                    ctx.fillStyle = `rgba(255, 255, 255, ${headAlpha})`;
+                } else {
+                    const trailProgress = ci / (charCount - 1);
+                    const alpha = trailProgress * 0.8 + 0.05;
+                    ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${alpha})`;
+                }
+
+                ctx.fillText(column.chars[ci], column.x, charY);
+            }
+        }
+    }
+
+    #createColumn(totalSlots: number, height: number): MatrixColumn {
+        const columnWidth = this.#fontSize;
+        const slot = Math.floor(MULBERRY.next() * totalSlots);
+        const length = Math.floor(this.#trailLength * 0.5 + MULBERRY.next() * this.#trailLength);
+        const chars: string[] = [];
+
+        for (let ci = 0; ci < length; ++ci) {
+            chars.push(MATRIX_CHARS[Math.floor(MULBERRY.next() * MATRIX_CHARS.length)]);
+        }
+
+        return {
+            x: slot * columnWidth + columnWidth / 2,
+            y: -(MULBERRY.next() * height),
+            speed: 1.5 + MULBERRY.next() * 3,
+            chars,
+            length,
+            headBrightness: 0.8 + MULBERRY.next() * 0.2
+        };
+    }
+}

package/src/matrix/types.ts

@@ -0,0 +1,17 @@
+export interface MatrixConfig {
+    readonly columns?: number;
+    readonly speed?: number;
+    readonly color?: string;
+    readonly fontSize?: number;
+    readonly trailLength?: number;
+    readonly scale?: number;
+}
+
+export type MatrixColumn = {
+    x: number;
+    y: number;
+    speed: number;
+    chars: string[];
+    length: number;
+    headBrightness: number;
+};

package/src/orbits/consts.ts

@@ -0,0 +1,13 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const ORBIT_COLORS: string[] = [
+    '#60a5fa', // blue
+    '#a78bfa', // purple
+    '#f472b6', // pink
+    '#34d399', // emerald
+    '#fbbf24', // amber
+    '#fb923c', // orange
+    '#38bdf8'  // sky
+];

package/src/orbits/index.ts

@@ -0,0 +1,9 @@
+import { Orbits } from './layer';
+import type { OrbitsConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createOrbits(config?: OrbitsConfig): Effect<OrbitsConfig> {
+    return new Orbits(config);
+}
+
+export type { OrbitsConfig, OrbitalCenter, Orbiter } from './types';

package/src/orbits/layer.ts

@@ -0,0 +1,213 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY, ORBIT_COLORS } from './consts';
+import type { OrbitalCenter, Orbiter, OrbitsConfig } from './types';
+
+export class Orbits extends Effect<OrbitsConfig> {
+    readonly #centerCount: number;
+    readonly #orbitersPerCenter: number;
+    #speed: number;
+    readonly #colors: string[];
+    #trailLength: number;
+    #showCenters: boolean;
+    #scale: number;
+    #centers: OrbitalCenter[] = [];
+    #orbiters: Orbiter[] = [];
+    #time: number = 0;
+    #initialized: boolean = false;
+
+    constructor(config: OrbitsConfig = {}) {
+        super();
+
+        this.#centerCount = config.centers ?? 3;
+        this.#orbitersPerCenter = config.orbitersPerCenter ?? 8;
+        this.#speed = config.speed ?? 1;
+        this.#colors = config.colors ?? ORBIT_COLORS;
+        this.#trailLength = config.trailLength ?? 15;
+        this.#showCenters = config.showCenters ?? true;
+        this.#scale = config.scale ?? 1;
+    }
+
+    onResize(_width: number, _height: number): void {
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#centers = [];
+            this.#orbiters = [];
+
+            for (let i = 0; i < this.#centerCount; i++) {
+                this.#centers.push({
+                    x: 0.15 + MULBERRY.next() * 0.7,
+                    y: 0.15 + MULBERRY.next() * 0.7
+                });
+            }
+
+            const count = innerWidth < 991
+                ? Math.floor(this.#orbitersPerCenter / 2)
+                : this.#orbitersPerCenter;
+
+            for (let ci = 0; ci < this.#centers.length; ci++) {
+                for (let oi = 0; oi < count; oi++) {
+                    this.#orbiters.push(this.#createOrbiter(ci));
+                }
+            }
+        }
+    }
+
+    configure(config: Partial<OrbitsConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.trailLength !== undefined) {
+            this.#trailLength = config.trailLength;
+        }
+        if (config.showCenters !== undefined) {
+            this.#showCenters = config.showCenters;
+        }
+        if (config.scale !== undefined) {
+            this.#scale = config.scale;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.01 * dt * this.#speed;
+
+        for (const orbiter of this.#orbiters) {
+            const center = this.#centers[orbiter.centerIndex];
+            const cx = center.x * width;
+            const cy = center.y * height;
+
+            orbiter.angle += orbiter.angularSpeed * dt * this.#speed;
+
+            const cosAngle = Math.cos(orbiter.angle);
+            const sinAngle = Math.sin(orbiter.angle);
+            const cosTilt = Math.cos(orbiter.tilt);
+
+            const localX = cosAngle * orbiter.radiusX * this.#scale;
+            const localY = sinAngle * orbiter.radiusY * this.#scale * cosTilt;
+
+            const rotatedX = localX * Math.cos(orbiter.tilt * 0.3) - localY * Math.sin(orbiter.tilt * 0.3);
+            const rotatedY = localX * Math.sin(orbiter.tilt * 0.3) + localY * Math.cos(orbiter.tilt * 0.3);
+
+            const px = cx + rotatedX;
+            const py = cy + rotatedY;
+
+            const trail = orbiter.trail;
+            const maxLen = this.#trailLength;
+
+            if (trail.length < maxLen) {
+                trail.push({x: px, y: py});
+                orbiter.trailHead = trail.length - 1;
+            } else {
+                const next = (orbiter.trailHead + 1) % maxLen;
+                trail[next].x = px;
+                trail[next].y = py;
+                orbiter.trailHead = next;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        if (this.#showCenters) {
+            ctx.globalCompositeOperation = 'lighter';
+
+            for (const center of this.#centers) {
+                const cx = center.x * width;
+                const cy = center.y * height;
+                const glowRadius = 30 * this.#scale;
+
+                const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowRadius);
+                gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
+                gradient.addColorStop(0.4, 'rgba(200, 200, 255, 0.1)');
+                gradient.addColorStop(1, 'rgba(200, 200, 255, 0)');
+
+                ctx.globalAlpha = 1;
+                ctx.beginPath();
+                ctx.arc(cx, cy, glowRadius, 0, Math.PI * 2);
+                ctx.fillStyle = gradient;
+                ctx.fill();
+            }
+
+            ctx.globalCompositeOperation = 'source-over';
+        }
+
+        ctx.globalCompositeOperation = 'lighter';
+
+        for (const orbiter of this.#orbiters) {
+            const [cr, cg, cb] = hexToRGB(orbiter.color);
+            const trail = orbiter.trail;
+            const trailLen = trail.length;
+
+            if (trailLen > 1) {
+                const isFull = trailLen === this.#trailLength;
+                const oldest = isFull ? (orbiter.trailHead + 1) % trailLen : 0;
+
+                for (let ti = 0; ti < trailLen - 1; ti++) {
+                    const progress = (ti + 1) / trailLen;
+                    const trailAlpha = progress * 0.5;
+                    const trailWidth = orbiter.size * progress * this.#scale;
+
+                    if (trailAlpha < 0.01) {
+                        continue;
+                    }
+
+                    const idx0 = (oldest + ti) % trailLen;
+                    const idx1 = (oldest + ti + 1) % trailLen;
+
+                    ctx.globalAlpha = trailAlpha;
+                    ctx.strokeStyle = `rgb(${cr}, ${cg}, ${cb})`;
+                    ctx.lineWidth = trailWidth;
+                    ctx.beginPath();
+                    ctx.moveTo(trail[idx0].x, trail[idx0].y);
+                    ctx.lineTo(trail[idx1].x, trail[idx1].y);
+                    ctx.stroke();
+                }
+            }
+
+            if (trailLen > 0) {
+                const head = trail[orbiter.trailHead];
+                const headSize = orbiter.size * this.#scale;
+
+                const glow = ctx.createRadialGradient(
+                    head.x, head.y, 0,
+                    head.x, head.y, headSize * 3
+                );
+                glow.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, 0.9)`);
+                glow.addColorStop(0.3, `rgba(${cr}, ${cg}, ${cb}, 0.3)`);
+                glow.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+                ctx.globalAlpha = 1;
+                ctx.beginPath();
+                ctx.arc(head.x, head.y, headSize * 3, 0, Math.PI * 2);
+                ctx.fillStyle = glow;
+                ctx.fill();
+
+                ctx.beginPath();
+                ctx.arc(head.x, head.y, headSize, 0, Math.PI * 2);
+                ctx.fillStyle = `rgb(${cr}, ${cg}, ${cb})`;
+                ctx.fill();
+            }
+        }
+
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1;
+    }
+
+    #createOrbiter(centerIndex: number): Orbiter {
+        const minRadius = 40;
+        const maxRadius = 160;
+
+        return {
+            centerIndex,
+            angle: MULBERRY.next() * Math.PI * 2,
+            angularSpeed: 0.01 + MULBERRY.next() * 0.03,
+            radiusX: minRadius + MULBERRY.next() * (maxRadius - minRadius),
+            radiusY: (minRadius + MULBERRY.next() * (maxRadius - minRadius)) * (0.3 + MULBERRY.next() * 0.7),
+            tilt: MULBERRY.next() * Math.PI,
+            size: 1.5 + MULBERRY.next() * 2.5,
+            color: this.#colors[Math.floor(MULBERRY.next() * this.#colors.length)],
+            trail: [],
+            trailHead: 0
+        };
+    }
+}

package/src/orbits/types.ts

@@ -0,0 +1,27 @@
+export interface OrbitsConfig {
+    readonly centers?: number;
+    readonly orbitersPerCenter?: number;
+    readonly speed?: number;
+    readonly colors?: string[];
+    readonly trailLength?: number;
+    readonly showCenters?: boolean;
+    readonly scale?: number;
+}
+
+export type OrbitalCenter = {
+    x: number;
+    y: number;
+};
+
+export type Orbiter = {
+    centerIndex: number;
+    angle: number;
+    angularSpeed: number;
+    radiusX: number;
+    radiusY: number;
+    tilt: number;
+    size: number;
+    color: string;
+    trail: { x: number; y: number }[];
+    trailHead: number;
+};

package/src/particles/consts.ts

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

package/src/particles/index.ts

@@ -0,0 +1,10 @@
+import { Particles } from './layer';
+import type { ParticlesConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createParticles(config?: ParticlesConfig): Effect<ParticlesConfig> {
+    return new Particles(config);
+}
+
+export type { ParticlesConfig };
+export type { NetworkParticle, ParticleMouseMode } from './types';