@basmilius/sparkle 2.0.0 → 2.2.0

package/src/glitter/layer.ts

@@ -0,0 +1,181 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { GLITTER_COLORS, MULBERRY } from './consts';
+import type { FallingGlitter, GlitterConfig, SettledGlitter } from './types';
+
+export class Glitter extends Effect<GlitterConfig> {
+    readonly #scale: number;
+    readonly #size: number;
+    #speed: number;
+    #groundLevel: number;
+    readonly #maxSettled: number;
+    readonly #colorRGBs: [number, number, number][];
+    #maxCount: number;
+    #time: number = 0;
+    #falling: FallingGlitter[] = [];
+    #settled: SettledGlitter[] = [];
+
+    constructor(config: GlitterConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 80;
+        this.#size = (config.size ?? 4) * this.#scale;
+        this.#speed = config.speed ?? 1;
+        this.#groundLevel = config.groundLevel ?? 0.85;
+        this.#maxSettled = config.maxSettled ?? 200;
+
+        const colors = config.colors ?? GLITTER_COLORS;
+        this.#colorRGBs = colors.map(c => hexToRGB(c));
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        for (let i = 0; i < this.#maxCount; ++i) {
+            this.#falling.push(this.#createFallingPiece(true));
+        }
+    }
+
+    configure(config: Partial<GlitterConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.groundLevel !== undefined) {
+            this.#groundLevel = config.groundLevel;
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        this.#time += 0.03 * dt;
+
+        let alive = 0;
+
+        for (let i = 0; i < this.#falling.length; i++) {
+            const piece = this.#falling[i];
+
+            piece.y += piece.vy * this.#speed * dt;
+            piece.rotation += piece.rotationSpeed * dt;
+            piece.flipAngle += piece.flipSpeed * dt;
+
+            piece.sparkle = 0.3 + 0.7 * Math.max(0, Math.sin(this.#time * 3 + piece.flipAngle * 2));
+
+            if (piece.y >= this.#groundLevel) {
+                this.#settleGlitter(piece);
+                this.#falling[alive++] = this.#createFallingPiece(false);
+            } else if (piece.y > 1.1) {
+                this.#falling[alive++] = this.#createFallingPiece(false);
+            } else {
+                this.#falling[alive++] = piece;
+            }
+        }
+
+        this.#falling.length = alive;
+
+        while (this.#settled.length > this.#maxSettled) {
+            this.#settled.shift();
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        for (const piece of this.#settled) {
+            const px = piece.x * width;
+            const py = piece.y * height;
+            const [r, g, b] = this.#colorRGBs[piece.colorIndex % this.#colorRGBs.length];
+
+            const sparkle = 0.3 + 0.7 * Math.max(0, Math.sin(this.#time * piece.sparkleSpeed + piece.sparklePhase));
+            const alpha = 0.4 + 0.6 * sparkle;
+
+            this.#drawDiamond(ctx, px, py, piece.size, piece.rotation, r, g, b, alpha, sparkle);
+        }
+
+        for (const piece of this.#falling) {
+            const px = piece.x * width;
+            const py = piece.y * height;
+            const [r, g, b] = this.#colorRGBs[piece.colorIndex % this.#colorRGBs.length];
+
+            const flipFactor = Math.abs(Math.cos(piece.flipAngle));
+            const alpha = 0.5 + 0.5 * piece.sparkle;
+
+            this.#drawDiamond(ctx, px, py, piece.size, piece.rotation, r, g, b, alpha, piece.sparkle, flipFactor);
+        }
+    }
+
+    #drawDiamond(
+        ctx: CanvasRenderingContext2D,
+        cx: number,
+        cy: number,
+        size: number,
+        rotation: number,
+        r: number,
+        g: number,
+        b: number,
+        alpha: number,
+        sparkle: number,
+        flipFactor: number = 1
+    ): void {
+        const halfW = size * flipFactor;
+        const halfH = size;
+
+        if (halfW < 0.3) {
+            return;
+        }
+
+        const cos = Math.cos(rotation);
+        const sin = Math.sin(rotation);
+
+        const points = [
+            {x: 0, y: -halfH},
+            {x: halfW, y: 0},
+            {x: 0, y: halfH},
+            {x: -halfW, y: 0}
+        ];
+
+        ctx.beginPath();
+        ctx.moveTo(cx + points[0].x * cos - points[0].y * sin, cy + points[0].x * sin + points[0].y * cos);
+
+        for (let p = 1; p < points.length; p++) {
+            ctx.lineTo(cx + points[p].x * cos - points[p].y * sin, cy + points[p].x * sin + points[p].y * cos);
+        }
+
+        ctx.closePath();
+
+        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha * 0.8})`;
+        ctx.fill();
+
+        if (sparkle > 0.5) {
+            const highlightAlpha = (sparkle - 0.5) * 2 * alpha;
+            ctx.fillStyle = `rgba(255, 255, 255, ${highlightAlpha * 0.6})`;
+            ctx.fill();
+        }
+    }
+
+    #settleGlitter(piece: FallingGlitter): void {
+        this.#settled.push({
+            x: piece.x,
+            y: this.#groundLevel + MULBERRY.next() * 0.05,
+            size: piece.size * 0.8,
+            rotation: piece.rotation,
+            sparklePhase: MULBERRY.next() * Math.PI * 2,
+            sparkleSpeed: 0.5 + MULBERRY.next() * 2,
+            colorIndex: piece.colorIndex
+        });
+    }
+
+    #createFallingPiece(initialSpread: boolean): FallingGlitter {
+        return {
+            x: MULBERRY.next(),
+            y: initialSpread ? MULBERRY.next() * this.#groundLevel : -0.05 - MULBERRY.next() * 0.1,
+            vy: (0.0008 + MULBERRY.next() * 0.0015) * this.#scale,
+            size: (0.5 + MULBERRY.next() * 1) * this.#size,
+            rotation: MULBERRY.next() * Math.PI * 2,
+            rotationSpeed: (MULBERRY.next() - 0.5) * 0.08,
+            flipAngle: MULBERRY.next() * Math.PI * 2,
+            flipSpeed: 0.03 + MULBERRY.next() * 0.07,
+            sparkle: MULBERRY.next(),
+            colorIndex: Math.floor(MULBERRY.next() * this.#colorRGBs.length),
+            settled: false
+        };
+    }
+}

package/src/glitter/types.ts

@@ -0,0 +1,33 @@
+export interface GlitterConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly groundLevel?: number;
+    readonly maxSettled?: number;
+    readonly scale?: number;
+}
+
+export type FallingGlitter = {
+    x: number;
+    y: number;
+    vy: number;
+    size: number;
+    rotation: number;
+    rotationSpeed: number;
+    flipAngle: number;
+    flipSpeed: number;
+    sparkle: number;
+    colorIndex: number;
+    settled: boolean;
+};
+
+export type SettledGlitter = {
+    x: number;
+    y: number;
+    size: number;
+    rotation: number;
+    sparklePhase: number;
+    sparkleSpeed: number;
+    colorIndex: number;
+};

package/src/index.ts

@@ -1,4 +1,31 @@
+export * from './aurora';
+export * from './balloons';
+export * from './bubbles';
 export * from './canvas';
+export * from './color';
 export * from './confetti';
+export * from './donuts';
+export * from './effect';
+export * from './fireflies';
+export * from './firepit';
 export * from './fireworks';
+export * from './glitter';
+export * from './lanterns';
+export * from './leaves';
+export * from './lightning';
+export * from './matrix';
+export * from './orbits';
+export * from './particles';
+export * from './petals';
+export * from './plasma';
+export * from './rain';
+export * from './sandstorm';
+export * from './scene';
+export * from './shooting-stars';
 export * from './snow';
+export * from './sparklers';
+export * from './stars';
+export * from './streamers';
+export * from './trail';
+export * from './waves';
+export * from './wormhole';

package/src/lanterns/consts.ts

@@ -0,0 +1,13 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const LANTERN_COLORS: string[] = [
+    '#ff6b35', // warm orange
+    '#ff8c42', // light orange
+    '#ffd166', // golden
+    '#ffb347', // amber
+    '#e85d04', // deep orange
+    '#f4845f', // coral
+    '#c1121f'  // red
+];

package/src/lanterns/index.ts

@@ -0,0 +1,9 @@
+import { Lanterns } from './layer';
+import type { LanternsConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createLanterns(config?: LanternsConfig): Effect<LanternsConfig> {
+    return new Lanterns(config);
+}
+
+export type { LanternsConfig, Lantern } from './types';

package/src/lanterns/layer.ts

@@ -0,0 +1,178 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { LANTERN_COLORS, MULBERRY } from './consts';
+import type { Lantern, LanternsConfig } from './types';
+
+export class Lanterns extends Effect<LanternsConfig> {
+    readonly #scale: number;
+    #speed: number;
+    readonly #size: number;
+    readonly #colorRGBs: [number, number, number][];
+    #maxCount: number;
+    #time: number = 0;
+    #lanterns: Lantern[] = [];
+    #sortedLanterns: Lantern[] = [];
+    #sortDirty: boolean = true;
+
+    constructor(config: LanternsConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#maxCount = config.count ?? 25;
+        this.#size = (config.size ?? 20) * this.#scale;
+        this.#speed = config.speed ?? 0.5;
+
+        const colors = config.colors ?? LANTERN_COLORS;
+        this.#colorRGBs = colors.map(c => hexToRGB(c));
+
+        if (innerWidth < 991) {
+            this.#maxCount = Math.floor(this.#maxCount / 2);
+        }
+
+        for (let i = 0; i < this.#maxCount; ++i) {
+            this.#lanterns.push(this.#createLantern(true));
+        }
+    }
+
+    configure(config: Partial<LanternsConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#time += 0.02 * dt * this.#speed;
+
+        for (let i = 0; i < this.#lanterns.length; i++) {
+            const lantern = this.#lanterns[i];
+
+            lantern.y -= (lantern.vy * this.#speed * dt) / (height * 1.5);
+
+            const sway = Math.sin(this.#time * lantern.swaySpeed + lantern.swayPhase) * lantern.swayAmplitude;
+            lantern.x += sway * dt / (width * 8);
+
+            if (lantern.y < -0.15) {
+                this.#lanterns[i] = this.#createLantern(false);
+                this.#sortDirty = true;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        if (this.#sortDirty) {
+            this.#sortedLanterns = [...this.#lanterns].sort((a, b) => a.size - b.size);
+            this.#sortDirty = false;
+        }
+
+        const sorted = this.#sortedLanterns;
+
+        for (const lantern of sorted) {
+            const px = lantern.x * width;
+            const py = lantern.y * height;
+            const size = lantern.size;
+            const [r, g, b] = this.#colorRGBs[lantern.colorIndex];
+
+            const glowPulse = 0.6 + 0.4 * Math.sin(this.#time * lantern.glowSpeed + lantern.glowPhase);
+            const alpha = lantern.opacity * glowPulse;
+
+            const glowRadius = size * 3;
+            const glowGradient = ctx.createRadialGradient(px, py, 0, px, py, glowRadius);
+            glowGradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${alpha * 0.35})`);
+            glowGradient.addColorStop(0.3, `rgba(${r}, ${g}, ${b}, ${alpha * 0.15})`);
+            glowGradient.addColorStop(0.6, `rgba(${r}, ${g}, ${b}, ${alpha * 0.05})`);
+            glowGradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+
+            ctx.fillStyle = glowGradient;
+            ctx.beginPath();
+            ctx.arc(px, py, glowRadius, 0, Math.PI * 2);
+            ctx.fill();
+
+            ctx.setTransform(1, 0, 0, 1, px, py);
+
+            const bodyW = size * 0.8;
+            const bodyH = size;
+            const topW = bodyW * 0.6;
+
+            ctx.beginPath();
+            ctx.moveTo(-topW, -bodyH * 0.5);
+            ctx.quadraticCurveTo(-bodyW, 0, -bodyW * 0.7, bodyH * 0.5);
+            ctx.lineTo(bodyW * 0.7, bodyH * 0.5);
+            ctx.quadraticCurveTo(bodyW, 0, topW, -bodyH * 0.5);
+            ctx.closePath();
+
+            const bodyGradient = ctx.createLinearGradient(0, -bodyH * 0.5, 0, bodyH * 0.5);
+            bodyGradient.addColorStop(0, `rgba(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 30)}, ${alpha * 0.9})`);
+            bodyGradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${alpha * 0.85})`);
+            bodyGradient.addColorStop(1, `rgba(${Math.max(0, r - 30)}, ${Math.max(0, g - 30)}, ${Math.max(0, b - 20)}, ${alpha * 0.8})`);
+
+            ctx.fillStyle = bodyGradient;
+            ctx.fill();
+
+            ctx.beginPath();
+            ctx.moveTo(-topW * 0.7, -bodyH * 0.55);
+            ctx.lineTo(topW * 0.7, -bodyH * 0.55);
+            ctx.lineWidth = size * 0.06;
+            ctx.strokeStyle = `rgba(${Math.max(0, r - 40)}, ${Math.max(0, g - 40)}, ${Math.max(0, b - 40)}, ${alpha * 0.7})`;
+            ctx.stroke();
+
+            const flameH = bodyH * 0.3;
+            const flameW = bodyW * 0.15;
+            const flameFlicker = Math.sin(this.#time * 8 + lantern.glowPhase) * flameW * 0.3;
+
+            const flameGradient = ctx.createRadialGradient(
+                flameFlicker, -flameH * 0.1, 0,
+                flameFlicker, -flameH * 0.1, flameH
+            );
+            flameGradient.addColorStop(0, `rgba(255, 255, 200, ${alpha * 0.95})`);
+            flameGradient.addColorStop(0.3, `rgba(255, 200, 80, ${alpha * 0.7})`);
+            flameGradient.addColorStop(0.7, `rgba(255, 140, 40, ${alpha * 0.3})`);
+            flameGradient.addColorStop(1, `rgba(255, 100, 20, 0)`);
+
+            ctx.beginPath();
+            ctx.moveTo(-flameW + flameFlicker, flameH * 0.2);
+            ctx.quadraticCurveTo(-flameW * 0.5 + flameFlicker, -flameH * 0.3, flameFlicker, -flameH);
+            ctx.quadraticCurveTo(flameW * 0.5 + flameFlicker, -flameH * 0.3, flameW + flameFlicker, flameH * 0.2);
+            ctx.closePath();
+            ctx.fillStyle = flameGradient;
+            ctx.fill();
+
+            const stringLen = size * 0.6;
+            const stringDrift = Math.sin(this.#time * 1.5 + lantern.swayPhase) * size * 0.1;
+
+            ctx.beginPath();
+            ctx.moveTo(0, bodyH * 0.5);
+            ctx.quadraticCurveTo(
+                stringDrift,
+                bodyH * 0.5 + stringLen * 0.5,
+                -stringDrift * 0.5,
+                bodyH * 0.5 + stringLen
+            );
+            ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${alpha * 0.4})`;
+            ctx.lineWidth = size * 0.04;
+            ctx.stroke();
+
+            ctx.resetTransform();
+        }
+    }
+
+    #createLantern(initialSpread: boolean): Lantern {
+        const colorIndex = Math.floor(MULBERRY.next() * this.#colorRGBs.length);
+        const sizeVariation = 0.6 + MULBERRY.next() * 0.8;
+
+        return {
+            x: 0.05 + MULBERRY.next() * 0.9,
+            y: initialSpread ? MULBERRY.next() * 1.3 : 1.15 + MULBERRY.next() * 0.2,
+            vx: 0,
+            vy: 0.2 + MULBERRY.next() * 0.6,
+            size: this.#size * sizeVariation,
+            glowPhase: MULBERRY.next() * Math.PI * 2,
+            glowSpeed: 0.8 + MULBERRY.next() * 1.2,
+            swayPhase: MULBERRY.next() * Math.PI * 2,
+            swaySpeed: 0.4 + MULBERRY.next() * 0.8,
+            swayAmplitude: 0.3 + MULBERRY.next() * 0.7,
+            colorIndex,
+            opacity: 0.7 + MULBERRY.next() * 0.3
+        };
+    }
+}

package/src/lanterns/types.ts

@@ -0,0 +1,22 @@
+export interface LanternsConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly scale?: number;
+}
+
+export type Lantern = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    size: number;
+    glowPhase: number;
+    glowSpeed: number;
+    swayPhase: number;
+    swaySpeed: number;
+    swayAmplitude: number;
+    colorIndex: number;
+    opacity: number;
+};

package/src/layer.ts

@@ -0,0 +1,26 @@
+export type EdgeFadeSide = number | [number, number];
+
+export type EdgeFade = {
+    readonly top?: EdgeFadeSide;
+    readonly bottom?: EdgeFadeSide;
+    readonly left?: EdgeFadeSide;
+    readonly right?: EdgeFadeSide;
+};
+
+/**
+ * Internal interface implemented by all Effect subclasses. Used by SimulationCanvas
+ * and Scene to drive rendering without depending on the generic Effect<TConfig> type.
+ */
+export interface SimulationLayer {
+    fade: EdgeFade | null;
+
+    tick(dt: number, width: number, height: number): void;
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void;
+
+    onResize(width: number, height: number): void;
+
+    onMount(canvas: HTMLCanvasElement): void;
+
+    onUnmount(canvas: HTMLCanvasElement): void;
+}

package/src/leaves/consts.ts

@@ -0,0 +1,16 @@
+import { type Mulberry32, mulberry32 } from '@basmilius/utils';
+
+export const MULBERRY: Mulberry32 = mulberry32(13);
+
+export const LEAF_COLORS: string[] = [
+    '#c0392b', // deep red
+    '#e74c3c', // bright red
+    '#d35400', // burnt orange
+    '#e67e22', // orange
+    '#f39c12', // amber
+    '#f1c40f', // golden yellow
+    '#d4a017', // dark gold
+    '#8b4513', // saddle brown
+    '#a0522d', // sienna
+    '#6b8e23'  // olive (some green still)
+];

package/src/leaves/index.ts

@@ -0,0 +1,9 @@
+import { Leaves } from './layer';
+import type { LeavesConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createLeaves(config?: LeavesConfig): Effect<LeavesConfig> {
+    return new Leaves(config);
+}
+
+export type { LeavesConfig, Leaf } from './types';