@basmilius/sparkle 2.4.0 → 2.5.0

package/src/glitch/layer.ts

@@ -0,0 +1,231 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { GlitchBlock, GlitchConfig, GlitchSlice } from './types';
+
+const BURST_COLORS = [
+    '#ff0000',
+    '#00ff00',
+    '#0000ff',
+    '#ff00ff',
+    '#00ffff',
+    '#ffff00',
+    '#ffffff'
+];
+
+export class Glitch extends Effect<GlitchConfig> {
+    readonly #scale: number;
+    #intensity: number;
+    #speed: number;
+    #rgbSplit: number;
+    readonly #scanlines: boolean;
+    readonly #noiseBlocks: boolean;
+    readonly #sliceDisplacement: boolean;
+    readonly #colorRGB: [number, number, number];
+
+    #slices: GlitchSlice[] = [];
+    #blocks: GlitchBlock[] = [];
+    #time: number = 0;
+    #burstTimer: number = 0;
+    #burstDuration: number = 0;
+    #isBursting: boolean = false;
+    #nextBurstIn: number = 0;
+    #width: number = 960;
+    #height: number = 540;
+
+    constructor(config: GlitchConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#intensity = config.intensity ?? 0.5;
+        this.#speed = config.speed ?? 1;
+        this.#rgbSplit = (config.rgbSplit ?? 3) * this.#scale;
+        this.#scanlines = config.scanlines ?? true;
+        this.#noiseBlocks = config.noiseBlocks ?? true;
+        this.#sliceDisplacement = config.sliceDisplacement ?? true;
+        this.#colorRGB = hexToRGB(config.color ?? '#00ff41');
+        this.#nextBurstIn = 30 + MULBERRY.next() * 60;
+    }
+
+    configure(config: Partial<GlitchConfig>): void {
+        if (config.intensity !== undefined) {
+            this.#intensity = config.intensity;
+        }
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.rgbSplit !== undefined) {
+            this.#rgbSplit = config.rgbSplit * this.#scale;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        const speedDt = dt * this.#speed;
+        this.#time += speedDt;
+
+        // Update existing slices.
+        let writeIndex = 0;
+        for (let index = 0; index < this.#slices.length; ++index) {
+            const slice = this.#slices[index];
+            slice.life -= speedDt;
+
+            if (slice.life > 0) {
+                this.#slices[writeIndex++] = slice;
+            }
+        }
+        this.#slices.length = writeIndex;
+
+        // Update existing blocks.
+        writeIndex = 0;
+        for (let index = 0; index < this.#blocks.length; ++index) {
+            const block = this.#blocks[index];
+            block.life -= speedDt;
+
+            if (block.life > 0) {
+                this.#blocks[writeIndex++] = block;
+            }
+        }
+        this.#blocks.length = writeIndex;
+
+        // Burst logic.
+        if (this.#isBursting) {
+            this.#burstTimer -= speedDt;
+
+            // Spawn slices during burst.
+            if (this.#sliceDisplacement && MULBERRY.next() < 0.4 * this.#intensity) {
+                const sliceCount = 1 + Math.floor(MULBERRY.next() * 3 * this.#intensity);
+
+                for (let index = 0; index < sliceCount; ++index) {
+                    this.#slices.push(this.#createSlice(width, height));
+                }
+            }
+
+            // Spawn noise blocks during burst.
+            if (this.#noiseBlocks && MULBERRY.next() < 0.3 * this.#intensity) {
+                const blockCount = 1 + Math.floor(MULBERRY.next() * 4 * this.#intensity);
+
+                for (let index = 0; index < blockCount; ++index) {
+                    this.#blocks.push(this.#createBlock(width, height));
+                }
+            }
+
+            if (this.#burstTimer <= 0) {
+                this.#isBursting = false;
+                this.#nextBurstIn = (20 + MULBERRY.next() * 80) * (1 - this.#intensity * 0.7);
+            }
+        } else {
+            this.#nextBurstIn -= speedDt;
+
+            if (this.#nextBurstIn <= 0) {
+                this.#isBursting = true;
+                this.#burstDuration = 5 + MULBERRY.next() * 15 * this.#intensity;
+                this.#burstTimer = this.#burstDuration;
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const [cr, cg, cb] = this.#colorRGB;
+
+        // Scanlines (always subtle, more visible during burst).
+        if (this.#scanlines) {
+            const scanlineAlpha = this.#isBursting ? 0.08 + this.#intensity * 0.07 : 0.03;
+            ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${scanlineAlpha})`;
+
+            const spacing = 3 * this.#scale;
+
+            for (let scanY = 0; scanY < height; scanY += spacing) {
+                ctx.fillRect(0, scanY, width, 1);
+            }
+        }
+
+        // Slice displacement.
+        if (this.#sliceDisplacement) {
+            for (const slice of this.#slices) {
+                const lifeRatio = slice.life / slice.maxLife;
+                const alpha = lifeRatio * 0.3 * this.#intensity;
+
+                // Red channel shifted left.
+                ctx.fillStyle = `rgba(255, 0, 0, ${alpha * 0.6})`;
+                ctx.fillRect(slice.offset - this.#rgbSplit, slice.y, width, slice.height);
+
+                // Blue channel shifted right.
+                ctx.fillStyle = `rgba(0, 0, 255, ${alpha * 0.6})`;
+                ctx.fillRect(slice.offset + this.#rgbSplit, slice.y, width, slice.height);
+
+                // Main slice color.
+                ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${alpha})`;
+                ctx.fillRect(slice.offset, slice.y, width, slice.height);
+            }
+        }
+
+        // RGB split overlay during burst.
+        if (this.#isBursting && this.#rgbSplit > 0) {
+            const burstProgress = this.#burstTimer / this.#burstDuration;
+            const splitAlpha = burstProgress * 0.04 * this.#intensity;
+
+            ctx.fillStyle = `rgba(255, 0, 0, ${splitAlpha})`;
+            ctx.fillRect(-this.#rgbSplit, 0, width + this.#rgbSplit * 2, height);
+
+            ctx.fillStyle = `rgba(0, 0, 255, ${splitAlpha})`;
+            ctx.fillRect(this.#rgbSplit, 0, width + this.#rgbSplit * 2, height);
+        }
+
+        // Noise blocks.
+        if (this.#noiseBlocks) {
+            for (const block of this.#blocks) {
+                const lifeRatio = block.life / block.maxLife;
+                const alpha = lifeRatio * 0.5 * this.#intensity;
+
+                ctx.fillStyle = block.color;
+                ctx.globalAlpha = alpha;
+                ctx.fillRect(block.x, block.y, block.width, block.height);
+            }
+            ctx.globalAlpha = 1;
+        }
+
+        // Horizontal scan bar during burst.
+        if (this.#isBursting) {
+            const barY = (this.#time * 3 % (height + 20)) - 10;
+            const barHeight = 2 + MULBERRY.next() * 4 * this.#scale;
+            const barAlpha = 0.15 * this.#intensity;
+
+            ctx.fillStyle = `rgba(255, 255, 255, ${barAlpha})`;
+            ctx.fillRect(0, barY, width, barHeight);
+        }
+    }
+
+    #createSlice(width: number, height: number): GlitchSlice {
+        const maxLife = 2 + MULBERRY.next() * 6;
+
+        return {
+            y: MULBERRY.next() * height,
+            height: 1 + MULBERRY.next() * 30 * this.#scale,
+            offset: (MULBERRY.next() - 0.5) * width * 0.15 * this.#intensity,
+            life: maxLife,
+            maxLife
+        };
+    }
+
+    #createBlock(width: number, height: number): GlitchBlock {
+        const maxLife = 1 + MULBERRY.next() * 4;
+
+        return {
+            x: MULBERRY.next() * width,
+            y: MULBERRY.next() * height,
+            width: 5 + MULBERRY.next() * 60 * this.#scale,
+            height: 2 + MULBERRY.next() * 20 * this.#scale,
+            life: maxLife,
+            maxLife,
+            color: BURST_COLORS[Math.floor(MULBERRY.next() * BURST_COLORS.length)]
+        };
+    }
+}

package/src/glitch/types.ts

@@ -0,0 +1,28 @@
+export interface GlitchConfig {
+    readonly intensity?: number;
+    readonly speed?: number;
+    readonly rgbSplit?: number;
+    readonly scanlines?: boolean;
+    readonly noiseBlocks?: boolean;
+    readonly sliceDisplacement?: boolean;
+    readonly color?: string;
+    readonly scale?: number;
+}
+
+export type GlitchSlice = {
+    y: number;
+    height: number;
+    offset: number;
+    life: number;
+    maxLife: number;
+};
+
+export type GlitchBlock = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    life: number;
+    maxLife: number;
+    color: string;
+};

package/src/gradient-flow/consts.ts

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

package/src/gradient-flow/index.ts

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

package/src/gradient-flow/layer.ts

@@ -0,0 +1,134 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { MULBERRY } from './consts';
+import type { GradientBlob } from './types';
+
+export interface GradientFlowConfig {
+    readonly speed?: number;
+    readonly scale?: number;
+    readonly colors?: string[];
+    readonly blobs?: number;
+    readonly resolution?: number;
+}
+
+const DEFAULT_COLORS = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#6c5ce7'];
+
+export class GradientFlow extends Effect<GradientFlowConfig> {
+    readonly #scale: number;
+    #speed: number;
+    readonly #resolution: number;
+    #blobs: GradientBlob[] = [];
+    #offscreen: HTMLCanvasElement | null = null;
+    #offscreenCtx: CanvasRenderingContext2D | null = null;
+    #imageData: ImageData | null = null;
+
+    constructor(config: GradientFlowConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 0.5;
+        this.#resolution = config.resolution ?? 6;
+
+        const colors = config.colors ?? [...DEFAULT_COLORS];
+        const blobCount = config.blobs ?? 5;
+
+        for (let index = 0; index < blobCount; index++) {
+            const colorHex = colors[index % colors.length];
+            const [r, g, b] = hexToRGB(colorHex);
+
+            this.#blobs.push({
+                x: MULBERRY.next(),
+                y: MULBERRY.next(),
+                vx: (MULBERRY.next() - 0.5) * 0.01,
+                vy: (MULBERRY.next() - 0.5) * 0.01,
+                radius: (0.15 + MULBERRY.next() * 0.2) * this.#scale,
+                color: [r, g, b]
+            });
+        }
+    }
+
+    configure(config: Partial<GradientFlowConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+    }
+
+    tick(dt: number, _width: number, _height: number): void {
+        const speed = this.#speed;
+
+        for (const blob of this.#blobs) {
+            blob.x += blob.vx * dt * speed;
+            blob.y += blob.vy * dt * speed;
+
+            if (blob.x < 0.05) {
+                blob.vx = Math.abs(blob.vx);
+            } else if (blob.x > 0.95) {
+                blob.vx = -Math.abs(blob.vx);
+            }
+
+            if (blob.y < 0.05) {
+                blob.vy = Math.abs(blob.vy);
+            } else if (blob.y > 0.95) {
+                blob.vy = -Math.abs(blob.vy);
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const resolution = this.#resolution;
+        const offWidth = Math.ceil(width / resolution);
+        const offHeight = Math.ceil(height / resolution);
+
+        if (!this.#offscreen || this.#offscreen.width !== offWidth || this.#offscreen.height !== offHeight) {
+            this.#offscreen = document.createElement('canvas');
+            this.#offscreen.width = offWidth;
+            this.#offscreen.height = offHeight;
+            this.#offscreenCtx = this.#offscreen.getContext('2d');
+            this.#imageData = this.#offscreenCtx!.createImageData(offWidth, offHeight);
+        }
+
+        const data = this.#imageData!.data;
+        const blobs = this.#blobs;
+        const blobCount = blobs.length;
+
+        for (let py = 0; py < offHeight; py++) {
+            const normY = py / offHeight;
+
+            for (let px = 0; px < offWidth; px++) {
+                const normX = px / offWidth;
+
+                let totalWeight = 0;
+                let red = 0;
+                let green = 0;
+                let blue = 0;
+
+                for (let bi = 0; bi < blobCount; bi++) {
+                    const blob = blobs[bi];
+                    const dx = normX - blob.x;
+                    const dy = normY - blob.y;
+                    const distSq = dx * dx + dy * dy;
+                    const radiusSq = blob.radius * blob.radius;
+                    const weight = radiusSq / (distSq + 0.001);
+
+                    totalWeight += weight;
+                    red += blob.color[0] * weight;
+                    green += blob.color[1] * weight;
+                    blue += blob.color[2] * weight;
+                }
+
+                const invWeight = 1 / totalWeight;
+
+                const offset = (py * offWidth + px) * 4;
+                data[offset] = Math.min(255, red * invWeight);
+                data[offset + 1] = Math.min(255, green * invWeight);
+                data[offset + 2] = Math.min(255, blue * invWeight);
+                data[offset + 3] = 255;
+            }
+        }
+
+        this.#offscreenCtx!.putImageData(this.#imageData!, 0, 0);
+
+        ctx.imageSmoothingEnabled = true;
+        ctx.drawImage(this.#offscreen!, 0, 0, width, height);
+    }
+}

package/src/gradient-flow/types.ts

@@ -0,0 +1,8 @@
+export type GradientBlob = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    radius: number;
+    color: [number, number, number];
+};

package/src/hologram/consts.ts

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

package/src/hologram/index.ts

@@ -0,0 +1,9 @@
+import { Hologram } from './layer';
+import type { HologramConfig } from './types';
+import type { Effect } from '../effect';
+
+export function createHologram(config?: HologramConfig): Effect<HologramConfig> {
+    return new Hologram(config);
+}
+
+export type { HologramConfig, HologramFragment } from './types';

package/src/hologram/layer.ts

@@ -0,0 +1,205 @@
+import { hexToRGB } from '@basmilius/utils';
+import { Effect } from '../effect';
+import { HEX_CHARS, MULBERRY } from './consts';
+import type { HologramConfig, HologramFragment } from './types';
+
+export class Hologram extends Effect<HologramConfig> {
+    readonly #scale: number;
+    #speed: number;
+    readonly #scanlineSpacing: number;
+    #flickerIntensity: number;
+    readonly #maxFragments: number;
+    readonly #colorRGB: [number, number, number];
+
+    #fragments: HologramFragment[] = [];
+    #time: number = 0;
+    #scanOffset: number = 0;
+    #scanBarY: number = -100;
+    #scanBarSpeed: number = 0;
+    #scanBarActive: boolean = false;
+    #flickerAlpha: number = 1;
+    #nextDropout: number = 0;
+    #dropoutTimer: number = 0;
+    #width: number = 960;
+    #height: number = 540;
+    #initialized: boolean = false;
+
+    constructor(config: HologramConfig = {}) {
+        super();
+
+        this.#scale = config.scale ?? 1;
+        this.#speed = config.speed ?? 1;
+        this.#scanlineSpacing = (config.scanlineSpacing ?? 3) * this.#scale;
+        this.#flickerIntensity = config.flickerIntensity ?? 0.3;
+        this.#maxFragments = config.dataFragments ?? 15;
+        this.#colorRGB = hexToRGB(config.color ?? '#00ccff');
+        this.#nextDropout = 40 + MULBERRY.next() * 80;
+    }
+
+    configure(config: Partial<HologramConfig>): void {
+        if (config.speed !== undefined) {
+            this.#speed = config.speed;
+        }
+        if (config.flickerIntensity !== undefined) {
+            this.#flickerIntensity = config.flickerIntensity;
+        }
+    }
+
+    onResize(width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        if (!this.#initialized) {
+            this.#initialized = true;
+
+            for (let index = 0; index < this.#maxFragments; ++index) {
+                this.#fragments.push(this.#createFragment(width, height));
+            }
+        }
+    }
+
+    tick(dt: number, width: number, height: number): void {
+        this.#width = width;
+        this.#height = height;
+
+        const speedDt = dt * this.#speed;
+        this.#time += speedDt * 0.01;
+
+        // Scrolling scanlines.
+        this.#scanOffset = (this.#scanOffset + speedDt * 0.05) % this.#scanlineSpacing;
+
+        // Flicker oscillation.
+        const baseFlicker = 1 - this.#flickerIntensity * 0.3;
+        const oscillation = Math.sin(this.#time * 12) * 0.05 + Math.sin(this.#time * 31) * 0.03;
+        this.#flickerAlpha = baseFlicker + oscillation * this.#flickerIntensity;
+
+        // Occasional dropout.
+        if (this.#dropoutTimer > 0) {
+            this.#dropoutTimer -= speedDt;
+            this.#flickerAlpha = 0.05 + MULBERRY.next() * 0.1;
+        } else {
+            this.#nextDropout -= speedDt;
+
+            if (this.#nextDropout <= 0) {
+                this.#dropoutTimer = 1 + MULBERRY.next() * 3;
+                this.#nextDropout = 40 + MULBERRY.next() * 120;
+            }
+        }
+
+        // Scan bar.
+        if (this.#scanBarActive) {
+            this.#scanBarY -= this.#scanBarSpeed * speedDt;
+
+            if (this.#scanBarY < -20) {
+                this.#scanBarActive = false;
+            }
+        } else if (MULBERRY.next() < 0.002 * this.#speed) {
+            this.#scanBarActive = true;
+            this.#scanBarY = height + 10;
+            this.#scanBarSpeed = 2 + MULBERRY.next() * 4;
+        }
+
+        // Update fragments.
+        for (let index = 0; index < this.#fragments.length; ++index) {
+            const fragment = this.#fragments[index];
+            fragment.life -= speedDt;
+            fragment.y -= fragment.speed * speedDt;
+
+            if (fragment.life <= 0 || fragment.y + fragment.height < 0) {
+                this.#fragments[index] = this.#createFragment(width, height);
+            }
+        }
+    }
+
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+        const [cr, cg, cb] = this.#colorRGB;
+        const prevComposite = ctx.globalCompositeOperation;
+
+        ctx.globalAlpha = this.#flickerAlpha;
+        ctx.globalCompositeOperation = 'lighter';
+
+        // Scanlines.
+        ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, 0.04)`;
+
+        for (let scanY = -this.#scanOffset; scanY < height; scanY += this.#scanlineSpacing) {
+            ctx.fillRect(0, scanY, width, 1);
+        }
+
+        // Data fragments.
+        for (const fragment of this.#fragments) {
+            const lifeRatio = fragment.life / fragment.maxLife;
+            const fadeIn = Math.min(lifeRatio * 5, 1);
+            const fadeOut = Math.min((1 - lifeRatio) * 5, 1);
+            const alpha = fragment.opacity * Math.min(fadeIn, fadeOut);
+
+            // Fragment background.
+            ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${alpha * 0.15})`;
+            ctx.fillRect(fragment.x, fragment.y, fragment.width, fragment.height);
+
+            // Fragment border.
+            ctx.strokeStyle = `rgba(${cr}, ${cg}, ${cb}, ${alpha * 0.3})`;
+            ctx.lineWidth = 1;
+            ctx.strokeRect(fragment.x, fragment.y, fragment.width, fragment.height);
+
+            // Simulated text rows (small horizontal lines).
+            ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${alpha * 0.4})`;
+            const lineHeight = 4 * this.#scale;
+            const padding = 3 * this.#scale;
+            const textWidth = fragment.width - padding * 2;
+
+            if (textWidth > 0) {
+                for (let lineY = fragment.y + padding; lineY < fragment.y + fragment.height - padding; lineY += lineHeight + 2) {
+                    const rowWidth = textWidth * (0.4 + MULBERRY.next() * 0.6);
+                    ctx.fillRect(fragment.x + padding, lineY, rowWidth, lineHeight * 0.5);
+                }
+            }
+        }
+
+        // Scan bar.
+        if (this.#scanBarActive) {
+            const barHeight = 6 * this.#scale;
+            const gradient = ctx.createLinearGradient(0, this.#scanBarY - barHeight, 0, this.#scanBarY + barHeight);
+            gradient.addColorStop(0, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+            gradient.addColorStop(0.4, `rgba(${cr}, ${cg}, ${cb}, 0.2)`);
+            gradient.addColorStop(0.5, `rgba(${cr}, ${cg}, ${cb}, 0.4)`);
+            gradient.addColorStop(0.6, `rgba(${cr}, ${cg}, ${cb}, 0.2)`);
+            gradient.addColorStop(1, `rgba(${cr}, ${cg}, ${cb}, 0)`);
+
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, this.#scanBarY - barHeight, width, barHeight * 2);
+        }
+
+        // Subtle overall vignette glow at edges.
+        ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, 0.02)`;
+        ctx.fillRect(0, 0, width, height);
+
+        ctx.globalAlpha = 1;
+        ctx.globalCompositeOperation = prevComposite;
+    }
+
+    #createFragment(width: number, height: number): HologramFragment {
+        const maxLife = 30 + MULBERRY.next() * 90;
+        const fragmentWidth = (20 + MULBERRY.next() * 80) * this.#scale;
+        const fragmentHeight = (12 + MULBERRY.next() * 40) * this.#scale;
+
+        // Generate random hex string.
+        let text = '';
+        const textLength = 4 + Math.floor(MULBERRY.next() * 8);
+
+        for (let index = 0; index < textLength; ++index) {
+            text += HEX_CHARS[Math.floor(MULBERRY.next() * HEX_CHARS.length)];
+        }
+
+        return {
+            x: MULBERRY.next() * (width - fragmentWidth),
+            y: MULBERRY.next() * height + height * 0.1,
+            width: fragmentWidth,
+            height: fragmentHeight,
+            opacity: 0.3 + MULBERRY.next() * 0.7,
+            speed: 0.1 + MULBERRY.next() * 0.5,
+            text,
+            life: maxLife,
+            maxLife
+        };
+    }
+}

package/src/hologram/types.ts

@@ -0,0 +1,20 @@
+export interface HologramConfig {
+    readonly speed?: number;
+    readonly scanlineSpacing?: number;
+    readonly flickerIntensity?: number;
+    readonly dataFragments?: number;
+    readonly color?: string;
+    readonly scale?: number;
+}
+
+export type HologramFragment = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number;
+    speed: number;
+    text: string;
+    life: number;
+    maxLife: number;
+};

package/src/hyper-space/consts.ts

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

package/src/hyper-space/index.ts

@@ -0,0 +1,10 @@
+import { HyperSpace } from './layer';
+import type { HyperSpaceConfig } from './layer';
+import type { Effect } from '../effect';
+
+export function createHyperSpace(config?: HyperSpaceConfig): Effect<HyperSpaceConfig> {
+    return new HyperSpace(config);
+}
+
+export type { HyperSpaceConfig };
+export type { HyperSpaceStar } from './types';