@basmilius/sparkle 2.0.0 → 2.1.0

package/src/glitter/layer.ts

@@ -0,0 +1,173 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { GLITTER_COLORS, MULBERRY } from './consts';
+import type { GlitterSimulationConfig } from './simulation';
+import type { FallingGlitter, SettledGlitter } from './types';
+
+export class GlitterLayer extends SimulationLayer {
+    readonly #scale: number;
+    readonly #size: number;
+    readonly #speed: number;
+    readonly #groundLevel: number;
+    readonly #maxSettled: number;
+    readonly #colorRGBs: [number, number, number][];
+    #maxCount: number;
+    #time: number = 0;
+    #falling: FallingGlitter[] = [];
+    #settled: SettledGlitter[] = [];
+
+    constructor(config: GlitterSimulationConfig = {}) {
+        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));
+        }
+    }
+
+    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/simulation.ts

@@ -0,0 +1,19 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { GlitterLayer } from './layer';
+
+export interface GlitterSimulationConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly groundLevel?: number;
+    readonly maxSettled?: number;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class GlitterSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: GlitterSimulationConfig = {}) {
+        super(canvas, new GlitterLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/glitter/types.ts

@@ -0,0 +1,23 @@
+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,32 @@
+export * from './aurora';
+export * from './color';
+export * from './balloons';
+export * from './bubbles';
 export * from './canvas';
 export * from './confetti';
+export * from './donuts';
+export * from './fireflies';
+export * from './firepit';
 export * from './fireworks';
+export * from './glitter';
+export * from './lanterns';
+export * from './layer';
+export * from './layered';
+export * from './simulation-canvas';
+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 './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,4 @@
+export { LanternLayer } from './layer';
+export { LanternSimulation } from './simulation';
+export type { LanternSimulationConfig } from './simulation';
+export type { Lantern } from './types';

package/src/lanterns/layer.ts

@@ -0,0 +1,166 @@
+import { hexToRGB } from '@basmilius/utils';
+import { SimulationLayer } from '../layer';
+import { LANTERN_COLORS, MULBERRY } from './consts';
+import type { LanternSimulationConfig } from './simulation';
+import type { Lantern } from './types';
+
+export class LanternLayer extends SimulationLayer {
+    readonly #scale: number;
+    readonly #speed: number;
+    readonly #size: number;
+    readonly #colorRGBs: [number, number, number][];
+    #maxCount: number;
+    #time: number = 0;
+    #lanterns: Lantern[] = [];
+
+    constructor(config: LanternSimulationConfig = {}) {
+        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));
+        }
+    }
+
+    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);
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+
+        const sorted = [...this.#lanterns].sort((a, b) => a.size - b.size);
+
+        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.save();
+            ctx.translate(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.restore();
+        }
+    }
+
+    #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/simulation.ts

@@ -0,0 +1,17 @@
+import { SimulationCanvas } from '../simulation-canvas';
+import { LanternLayer } from './layer';
+
+export interface LanternSimulationConfig {
+    readonly count?: number;
+    readonly colors?: string[];
+    readonly size?: number;
+    readonly speed?: number;
+    readonly scale?: number;
+    readonly canvasOptions?: CanvasRenderingContext2DSettings;
+}
+
+export class LanternSimulation extends SimulationCanvas {
+    constructor(canvas: HTMLCanvasElement, config: LanternSimulationConfig = {}) {
+        super(canvas, new LanternLayer(config), 60, config.canvasOptions ?? {colorSpace: 'display-p3'});
+    }
+}

package/src/lanterns/types.ts

@@ -0,0 +1,14 @@
+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,24 @@
+export type EdgeFadeSide = number | [number, number];
+
+export type EdgeFade = {
+    readonly top?: EdgeFadeSide;
+    readonly bottom?: EdgeFadeSide;
+    readonly left?: EdgeFadeSide;
+    readonly right?: EdgeFadeSide;
+};
+
+export abstract class SimulationLayer {
+    fade: EdgeFade | null = null;
+
+    abstract tick(dt: number, width: number, height: number): void;
+    abstract draw(ctx: CanvasRenderingContext2D, width: number, height: number): void;
+
+    onResize(_width: number, _height: number): void {}
+    onMount(_canvas: HTMLCanvasElement): void {}
+    onUnmount(_canvas: HTMLCanvasElement): void {}
+
+    withFade(fade: EdgeFade): this {
+        this.fade = fade;
+        return this;
+    }
+}

package/src/layered.ts

@@ -0,0 +1,185 @@
+import { LimitedFrameRateCanvas } from './canvas';
+import type { EdgeFade, EdgeFadeSide, SimulationLayer } from './layer';
+
+function parseSide(side: EdgeFadeSide): [number, number] {
+    return typeof side === 'number' ? [0, side] : side;
+}
+
+
+function applyEdgeFade(ctx: CanvasRenderingContext2D, width: number, height: number, fade: EdgeFade): void {
+    ctx.globalCompositeOperation = 'destination-out';
+
+    if (fade.top !== undefined) {
+        const [near, far] = parseSide(fade.top);
+        const nearPx = near * height;
+        const farPx = far * height;
+
+        if (nearPx > 0) {
+            ctx.fillStyle = 'rgba(0,0,0,1)';
+            ctx.fillRect(0, 0, width, nearPx);
+        }
+
+        if (farPx > nearPx) {
+            const gradient = ctx.createLinearGradient(0, nearPx, 0, farPx);
+            gradient.addColorStop(0, 'rgba(0,0,0,1)');
+            gradient.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, nearPx, width, farPx - nearPx);
+        }
+    }
+
+    if (fade.bottom !== undefined) {
+        const [near, far] = parseSide(fade.bottom);
+        const nearPx = near * height;
+        const farPx = far * height;
+
+        if (nearPx > 0) {
+            ctx.fillStyle = 'rgba(0,0,0,1)';
+            ctx.fillRect(0, height - nearPx, width, nearPx);
+        }
+
+        if (farPx > nearPx) {
+            const gradient = ctx.createLinearGradient(0, height - farPx, 0, height - nearPx);
+            gradient.addColorStop(0, 'rgba(0,0,0,0)');
+            gradient.addColorStop(1, 'rgba(0,0,0,1)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, height - farPx, width, farPx - nearPx);
+        }
+    }
+
+    if (fade.left !== undefined) {
+        const [near, far] = parseSide(fade.left);
+        const nearPx = near * width;
+        const farPx = far * width;
+
+        if (nearPx > 0) {
+            ctx.fillStyle = 'rgba(0,0,0,1)';
+            ctx.fillRect(0, 0, nearPx, height);
+        }
+
+        if (farPx > nearPx) {
+            const gradient = ctx.createLinearGradient(nearPx, 0, farPx, 0);
+            gradient.addColorStop(0, 'rgba(0,0,0,1)');
+            gradient.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(nearPx, 0, farPx - nearPx, height);
+        }
+    }
+
+    if (fade.right !== undefined) {
+        const [near, far] = parseSide(fade.right);
+        const nearPx = near * width;
+        const farPx = far * width;
+
+        if (nearPx > 0) {
+            ctx.fillStyle = 'rgba(0,0,0,1)';
+            ctx.fillRect(width - nearPx, 0, nearPx, height);
+        }
+
+        if (farPx > nearPx) {
+            const gradient = ctx.createLinearGradient(width - farPx, 0, width - nearPx, 0);
+            gradient.addColorStop(0, 'rgba(0,0,0,0)');
+            gradient.addColorStop(1, 'rgba(0,0,0,1)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(width - farPx, 0, farPx - nearPx, height);
+        }
+    }
+
+    ctx.globalCompositeOperation = 'source-over';
+}
+
+export class LayeredSimulation extends LimitedFrameRateCanvas {
+    readonly #layers: SimulationLayer[] = [];
+    readonly #contextOptions: CanvasRenderingContext2DSettings;
+    #offscreen: HTMLCanvasElement | null = null;
+    #offscreenCtx: CanvasRenderingContext2D | null = null;
+
+    constructor(canvas: HTMLCanvasElement, frameRate: number = 60, options: CanvasRenderingContext2DSettings = {colorSpace: 'display-p3'}) {
+        super(canvas, frameRate, options);
+        this.#contextOptions = options;
+
+        canvas.style.position = 'absolute';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        canvas.style.height = '100%';
+        canvas.style.width = '100%';
+    }
+
+    add(layer: SimulationLayer): this {
+        this.#layers.push(layer);
+
+        if (this.isTicking) {
+            layer.onMount(this.canvas);
+        }
+
+        return this;
+    }
+
+    start(): void {
+        for (const layer of this.#layers) {
+            layer.onMount(this.canvas);
+        }
+        super.start();
+    }
+
+    destroy(): void {
+        for (const layer of this.#layers) {
+            layer.onUnmount(this.canvas);
+        }
+        super.destroy();
+    }
+
+    draw(): void {
+        this.canvas.height = this.height;
+        this.canvas.width = this.width;
+
+        const ctx = this.context;
+        ctx.clearRect(0, 0, this.width, this.height);
+
+        for (const layer of this.#layers) {
+            if (layer.fade) {
+                const offCtx = this.#getOffscreenCtx(this.width, this.height);
+                offCtx.clearRect(0, 0, this.width, this.height);
+                layer.draw(offCtx, this.width, this.height);
+                applyEdgeFade(offCtx, this.width, this.height, layer.fade);
+                ctx.drawImage(this.#offscreen!, 0, 0);
+            } else {
+                ctx.save();
+                layer.draw(ctx, this.width, this.height);
+                ctx.restore();
+            }
+        }
+    }
+
+    tick(): void {
+        const dt = (this.delta > 0 && this.delta < 200 ? this.delta / (1000 / 60) : 1) * this.speed * LimitedFrameRateCanvas.globalSpeed;
+
+        for (const layer of this.#layers) {
+            layer.tick(dt, this.width, this.height);
+        }
+    }
+
+    onResize(): void {
+        super.onResize();
+
+        if (this.#offscreen) {
+            this.#offscreen.width = this.width;
+            this.#offscreen.height = this.height;
+        }
+
+        for (const layer of this.#layers) {
+            layer.onResize(this.width, this.height);
+        }
+    }
+
+    #getOffscreenCtx(width: number, height: number): CanvasRenderingContext2D {
+        if (!this.#offscreen) {
+            this.#offscreen = document.createElement('canvas');
+            this.#offscreen.width = width;
+            this.#offscreen.height = height;
+            this.#offscreenCtx = this.#offscreen.getContext('2d', this.#contextOptions)!;
+        }
+
+        return this.#offscreenCtx!;
+    }
+}