@joydle/parallax 0.1.20

package/dist/core/generators.d.ts

@@ -0,0 +1,11 @@
+import type { GradientConfig, StarfieldConfig } from './types';
+/**
+ * Generate a gradient canvas.
+ * Returns an OffscreenCanvas (or regular Canvas as fallback).
+ */
+export declare function generateGradient(width: number, height: number, config: GradientConfig): HTMLCanvasElement;
+/**
+ * Generate a starfield canvas with random star positions.
+ * Stars are drawn as small bright dots with varying opacity.
+ */
+export declare function generateStarfield(width: number, height: number, config: StarfieldConfig): HTMLCanvasElement;

package/dist/core/generators.js

@@ -0,0 +1,53 @@
+/**
+ * Generate a gradient canvas.
+ * Returns an OffscreenCanvas (or regular Canvas as fallback).
+ */
+export function generateGradient(width, height, config) {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    const isVertical = (config.direction ?? 'vertical') === 'vertical';
+    const grad = isVertical
+        ? ctx.createLinearGradient(0, 0, 0, height)
+        : ctx.createLinearGradient(0, 0, width, 0);
+    const colors = config.colors;
+    for (let i = 0; i < colors.length; i++) {
+        grad.addColorStop(i / Math.max(colors.length - 1, 1), colors[i]);
+    }
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, width, height);
+    return canvas;
+}
+/**
+ * Generate a starfield canvas with random star positions.
+ * Stars are drawn as small bright dots with varying opacity.
+ */
+export function generateStarfield(width, height, config) {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    // Background
+    const bg = config.background ?? 'transparent';
+    if (bg !== 'transparent') {
+        ctx.fillStyle = bg;
+        ctx.fillRect(0, 0, width, height);
+    }
+    const density = config.density ?? 150;
+    const color = config.color ?? '#ffffff';
+    // Seeded-ish random for consistency within a session
+    for (let i = 0; i < density; i++) {
+        const x = Math.random() * width;
+        const y = Math.random() * height;
+        const radius = 0.5 + Math.random() * 1.5;
+        const alpha = 0.3 + Math.random() * 0.7;
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.fillStyle = color;
+        ctx.globalAlpha = alpha;
+        ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+    return canvas;
+}

package/dist/core/index.d.ts

@@ -0,0 +1,3 @@
+export { generateGradient, generateStarfield } from './generators';
+export { distributeSpeed } from './types';
+export type { LayerConfig, TextureLayerConfig, ProceduralLayerConfig, ProceduralType, GradientConfig, StarfieldConfig, StackConfig, ParallaxStack, } from './types';

package/dist/core/index.js

@@ -0,0 +1,2 @@
+export { generateGradient, generateStarfield } from './generators';
+export { distributeSpeed } from './types';

package/dist/core/types.d.ts

@@ -0,0 +1,74 @@
+/** Configuration for a single parallax layer */
+export interface LayerConfig {
+    /** Unique identifier for runtime manipulation */
+    key: string;
+    /** Scroll speed relative to camera. 0 = static, 1 = moves with camera. */
+    speed?: number;
+    /** Repeat direction. Default 'x' */
+    repeat?: 'x' | 'y' | 'both' | 'none';
+    /** Render order — lower = further back. Auto-assigned if omitted. */
+    zIndex?: number;
+    /** Override layer width (defaults to viewport width × 3) */
+    width?: number;
+    /** Override layer height (defaults to viewport height × 3) */
+    height?: number;
+}
+/** A layer backed by a texture/image */
+export interface TextureLayerConfig extends LayerConfig {
+    texture: unknown;
+    procedural?: never;
+}
+/** A layer generated procedurally (no image asset needed) */
+export interface ProceduralLayerConfig extends LayerConfig {
+    texture?: never;
+    procedural: ProceduralType;
+}
+export type ProceduralType = GradientConfig | StarfieldConfig;
+export interface GradientConfig {
+    type: 'gradient';
+    /** Array of CSS color strings, top to bottom */
+    colors: string[];
+    /** Gradient direction. Default 'vertical' */
+    direction?: 'vertical' | 'horizontal';
+}
+export interface StarfieldConfig {
+    type: 'starfield';
+    /** Number of stars. Default 150 */
+    density?: number;
+    /** Enable twinkle animation. Default true */
+    twinkle?: boolean;
+    /** Star color. Default '#ffffff' */
+    color?: string;
+    /** Background color. Default 'transparent' */
+    background?: string;
+}
+/** Configuration for a parallax stack */
+export interface StackConfig<L extends LayerConfig = LayerConfig> {
+    /** Viewport dimensions — used for layer sizing */
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    /** If true, speeds are auto-distributed (back=0.05 → front=0.7). Layer order = back to front. */
+    autoSpeed?: boolean;
+    /** Layer definitions, ordered back to front */
+    layers: L[];
+}
+/** Shared interface for all parallax stack implementations */
+export interface ParallaxStack {
+    /** Update all layers based on camera position */
+    update(camX: number, camY: number, zoom?: number): void;
+    /** Change a layer's speed at runtime */
+    setSpeed(key: string, speed: number): void;
+    /** Add a layer at runtime */
+    addLayer(config: LayerConfig): void;
+    /** Remove a layer by key */
+    removeLayer(key: string): void;
+    /** Clean up all layers and resources */
+    destroy(): void;
+}
+/**
+ * Distribute speeds across N layers from back (slow) to front (fast).
+ * Range: 0.05 → 0.7
+ */
+export declare function distributeSpeed(index: number, total: number): number;

package/dist/core/types.js

@@ -0,0 +1,10 @@
+/**
+ * Distribute speeds across N layers from back (slow) to front (fast).
+ * Range: 0.05 → 0.7
+ */
+export function distributeSpeed(index, total) {
+    if (total <= 1)
+        return 0.3;
+    const t = index / (total - 1);
+    return 0.05 + t * 0.65;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { generateGradient, generateStarfield } from './core/generators';
+export { distributeSpeed } from './core/types';
+export type { LayerConfig, TextureLayerConfig, ProceduralLayerConfig, ProceduralType, GradientConfig, StarfieldConfig, StackConfig, ParallaxStack, } from './core/types';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { generateGradient, generateStarfield } from './core/generators';
+export { distributeSpeed } from './core/types';

package/dist/pixi/PixiParallaxLayer.d.ts

@@ -0,0 +1,25 @@
+import { Container, Sprite, TilingSprite, Texture } from 'pixi.js';
+import type { TextureLayerConfig, ProceduralLayerConfig } from '../core/types';
+export type PixiLayerConfig = PixiTextureLayerConfig | PixiProceduralLayerConfig;
+export interface PixiTextureLayerConfig extends Omit<TextureLayerConfig, 'texture'> {
+    texture: Texture;
+    procedural?: never;
+}
+export interface PixiProceduralLayerConfig extends ProceduralLayerConfig {
+}
+export declare class PixiParallaxLayer {
+    readonly sprite: Sprite | TilingSprite;
+    readonly key: string;
+    private _speed;
+    private _twinkleTime;
+    private _twinkleEnabled;
+    get speed(): number;
+    set speed(v: number);
+    constructor(parent: Container, config: PixiLayerConfig, viewport: {
+        width: number;
+        height: number;
+    });
+    /** Update parallax position based on camera world coordinates */
+    update(camX: number, camY: number, _zoom?: number, dt?: number): void;
+    destroy(): void;
+}

package/dist/pixi/PixiParallaxLayer.js

@@ -0,0 +1,77 @@
+import { Sprite, TilingSprite, Texture } from 'pixi.js';
+import { generateGradient, generateStarfield } from '../core/generators';
+export class PixiParallaxLayer {
+    sprite;
+    key;
+    _speed;
+    _twinkleTime = 0;
+    _twinkleEnabled = false;
+    get speed() {
+        return this._speed;
+    }
+    set speed(v) {
+        this._speed = v;
+    }
+    constructor(parent, config, viewport) {
+        this.key = config.key;
+        this._speed = config.speed ?? 0.3;
+        const w = config.width ?? viewport.width * 3;
+        const h = config.height ?? viewport.height * 3;
+        let texture;
+        if (config.procedural) {
+            // Generate procedural texture
+            const proc = config.procedural;
+            let canvas;
+            if (proc.type === 'gradient') {
+                canvas = generateGradient(Math.min(w, 512), Math.min(h, 512), proc);
+            }
+            else {
+                canvas = generateStarfield(Math.min(w, 512), Math.min(h, 512), proc);
+                this._twinkleEnabled = proc.twinkle !== false;
+            }
+            texture = Texture.from(canvas);
+        }
+        else {
+            texture = config.texture;
+        }
+        const repeatX = config.repeat === 'x' || config.repeat === 'both';
+        const repeatY = config.repeat === 'y' || config.repeat === 'both';
+        if (repeatX || repeatY) {
+            this.sprite = new TilingSprite({ texture, width: w, height: h });
+        }
+        else {
+            this.sprite = new Sprite(texture);
+            if (config.width)
+                this.sprite.width = w;
+            if (config.height)
+                this.sprite.height = h;
+        }
+        this.sprite.zIndex = config.zIndex ?? -1;
+        parent.addChild(this.sprite);
+        parent.sortableChildren = true;
+    }
+    /** Update parallax position based on camera world coordinates */
+    update(camX, camY, _zoom, dt) {
+        const dx = camX * this._speed;
+        const dy = camY * this._speed;
+        if (this.sprite instanceof TilingSprite) {
+            this.sprite.tilePosition.x = -dx;
+            this.sprite.tilePosition.y = -dy;
+            this.sprite.x = camX - this.sprite.width / 2;
+            this.sprite.y = camY - this.sprite.height / 2;
+        }
+        else {
+            this.sprite.x = camX * (1 - this._speed);
+            this.sprite.y = camY * (1 - this._speed);
+        }
+        // Twinkle effect for starfield layers
+        if (this._twinkleEnabled && dt) {
+            this._twinkleTime += dt;
+            this.sprite.alpha = 0.85 + Math.sin(this._twinkleTime * 1.5) * 0.15;
+        }
+    }
+    destroy() {
+        this.sprite.removeFromParent();
+        this.sprite.destroy();
+    }
+}

package/dist/pixi/PixiParallaxStack.d.ts

@@ -0,0 +1,31 @@
+import { Container } from 'pixi.js';
+import type { ParallaxStack, StackConfig } from '../core/types';
+import { PixiParallaxLayer } from './PixiParallaxLayer';
+import type { PixiLayerConfig } from './PixiParallaxLayer';
+export interface PixiStackConfig extends StackConfig<PixiLayerConfig> {
+}
+/**
+ * Multi-layer parallax manager for PixiJS.
+ *
+ * Manages creation, ordering, updating, and destruction of parallax layers.
+ * Supports texture-based and procedural (gradient, starfield) layers.
+ */
+export declare class PixiParallaxStack implements ParallaxStack {
+    private parent;
+    private layers;
+    private config;
+    private viewport;
+    constructor(parent: Container, config: PixiStackConfig);
+    /** Update all layers. Call after cam.update(dt), pass cam.x, cam.y. */
+    update(camX: number, camY: number, zoom?: number, dt?: number): void;
+    /** Change a layer's scroll speed at runtime */
+    setSpeed(key: string, speed: number): void;
+    /** Add a new layer at runtime */
+    addLayer(config: PixiLayerConfig): void;
+    /** Remove a layer by key */
+    removeLayer(key: string): void;
+    /** Get a layer by key (for direct manipulation) */
+    getLayer(key: string): PixiParallaxLayer | undefined;
+    /** Clean up all layers */
+    destroy(): void;
+}

package/dist/pixi/PixiParallaxStack.js

@@ -0,0 +1,75 @@
+import { distributeSpeed } from '../core/types';
+import { PixiParallaxLayer } from './PixiParallaxLayer';
+/**
+ * Multi-layer parallax manager for PixiJS.
+ *
+ * Manages creation, ordering, updating, and destruction of parallax layers.
+ * Supports texture-based and procedural (gradient, starfield) layers.
+ */
+export class PixiParallaxStack {
+    parent;
+    layers = new Map();
+    config;
+    viewport;
+    constructor(parent, config) {
+        this.parent = parent;
+        this.config = config;
+        this.viewport = config.viewport ?? { width: 480, height: 700 };
+        const total = config.layers.length;
+        for (let i = 0; i < total; i++) {
+            const layerCfg = { ...config.layers[i] };
+            // Auto-assign speed if autoSpeed enabled and no explicit speed
+            if (config.autoSpeed && layerCfg.speed === undefined) {
+                layerCfg.speed = distributeSpeed(i, total);
+            }
+            // Auto-assign zIndex based on order (back to front)
+            if (layerCfg.zIndex === undefined) {
+                layerCfg.zIndex = -100 + i * 10;
+            }
+            const layer = new PixiParallaxLayer(parent, layerCfg, this.viewport);
+            this.layers.set(layerCfg.key, layer);
+        }
+    }
+    /** Update all layers. Call after cam.update(dt), pass cam.x, cam.y. */
+    update(camX, camY, zoom, dt) {
+        for (const layer of this.layers.values()) {
+            layer.update(camX, camY, zoom, dt);
+        }
+    }
+    /** Change a layer's scroll speed at runtime */
+    setSpeed(key, speed) {
+        const layer = this.layers.get(key);
+        if (layer)
+            layer.speed = speed;
+    }
+    /** Add a new layer at runtime */
+    addLayer(config) {
+        if (this.layers.has(config.key)) {
+            this.removeLayer(config.key);
+        }
+        if (config.zIndex === undefined) {
+            config = { ...config, zIndex: -100 + this.layers.size * 10 };
+        }
+        const layer = new PixiParallaxLayer(this.parent, config, this.viewport);
+        this.layers.set(config.key, layer);
+    }
+    /** Remove a layer by key */
+    removeLayer(key) {
+        const layer = this.layers.get(key);
+        if (layer) {
+            layer.destroy();
+            this.layers.delete(key);
+        }
+    }
+    /** Get a layer by key (for direct manipulation) */
+    getLayer(key) {
+        return this.layers.get(key);
+    }
+    /** Clean up all layers */
+    destroy() {
+        for (const layer of this.layers.values()) {
+            layer.destroy();
+        }
+        this.layers.clear();
+    }
+}

package/dist/pixi/index.d.ts

@@ -0,0 +1,4 @@
+export { PixiParallaxLayer } from './PixiParallaxLayer';
+export { PixiParallaxStack } from './PixiParallaxStack';
+export type { PixiLayerConfig, PixiTextureLayerConfig, PixiProceduralLayerConfig } from './PixiParallaxLayer';
+export type { PixiStackConfig } from './PixiParallaxStack';

package/dist/pixi/index.js

@@ -0,0 +1,2 @@
+export { PixiParallaxLayer } from './PixiParallaxLayer';
+export { PixiParallaxStack } from './PixiParallaxStack';

package/dist/three/ThreeParallaxLayer.d.ts

@@ -0,0 +1,46 @@
+import { Mesh } from 'three';
+import type { Scene, Texture } from 'three';
+import type { TextureLayerConfig, ProceduralLayerConfig } from '../core/types';
+export type ThreeLayerConfig = ThreeTextureLayerConfig | ThreeProceduralLayerConfig;
+export interface ThreeTextureLayerConfig extends Omit<TextureLayerConfig, 'texture'> {
+    texture: Texture;
+    procedural?: never;
+    /** Y position in 3D space. Default -1 */
+    y?: number;
+    /** Z position (depth mode). Further negative = further away. */
+    z?: number;
+    /** Scale multiplier for depth mode. Default 1 */
+    scale?: number;
+    /** Texture repeat count. Default 10 */
+    textureRepeat?: number;
+    /** Opacity. Default 1 */
+    opacity?: number;
+}
+export interface ThreeProceduralLayerConfig extends ProceduralLayerConfig {
+    /** Y position in 3D space. Default -1 */
+    y?: number;
+    /** Z position (depth mode). */
+    z?: number;
+    /** Scale multiplier for depth mode. Default 1 */
+    scale?: number;
+    /** Texture repeat count. Default 10 */
+    textureRepeat?: number;
+    /** Opacity. Default 1 */
+    opacity?: number;
+}
+export declare class ThreeParallaxLayer {
+    readonly mesh: Mesh;
+    readonly key: string;
+    private _speed;
+    private material;
+    private mode;
+    get speed(): number;
+    set speed(v: number);
+    constructor(scene: Scene, config: ThreeLayerConfig, mode: 'uv-offset' | 'depth', viewport: {
+        width: number;
+        height: number;
+    });
+    /** Update layer based on camera position */
+    update(camX: number, camZ: number): void;
+    destroy(): void;
+}

package/dist/three/ThreeParallaxLayer.js

@@ -0,0 +1,84 @@
+import { Mesh, PlaneGeometry, MeshBasicMaterial, RepeatWrapping, DoubleSide, CanvasTexture, } from 'three';
+import { generateGradient, generateStarfield } from '../core/generators';
+export class ThreeParallaxLayer {
+    mesh;
+    key;
+    _speed;
+    material;
+    mode;
+    get speed() {
+        return this._speed;
+    }
+    set speed(v) {
+        this._speed = v;
+    }
+    constructor(scene, config, mode, viewport) {
+        this.key = config.key;
+        this._speed = config.speed ?? 0.5;
+        this.mode = mode;
+        const w = config.width ?? viewport.width * 4;
+        const h = config.height ?? viewport.height * 4;
+        const geo = new PlaneGeometry(w, h);
+        let tex;
+        if (config.procedural) {
+            const proc = config.procedural;
+            let canvas;
+            if (proc.type === 'gradient') {
+                canvas = generateGradient(512, 512, proc);
+            }
+            else {
+                canvas = generateStarfield(512, 512, proc);
+            }
+            tex = new CanvasTexture(canvas);
+        }
+        else {
+            tex = config.texture;
+        }
+        // Configure texture wrapping for repeating
+        tex.wrapS = RepeatWrapping;
+        tex.wrapT = RepeatWrapping;
+        const rep = config.textureRepeat ?? 10;
+        tex.repeat.set(rep, rep);
+        const opacity = config.opacity ?? 1;
+        this.material = new MeshBasicMaterial({
+            map: tex,
+            side: DoubleSide,
+            transparent: opacity < 1,
+            opacity,
+        });
+        this.mesh = new Mesh(geo, this.material);
+        if (mode === 'depth') {
+            // Depth mode: position mesh at real Z distance, face camera
+            this.mesh.position.z = config.z ?? -100;
+            this.mesh.position.y = config.y ?? 0;
+            const s = config.scale ?? 1;
+            this.mesh.scale.set(s, s, 1);
+        }
+        else {
+            // UV-offset mode: flat horizontal plane
+            this.mesh.rotation.x = -Math.PI / 2;
+            this.mesh.position.y = config.y ?? -1;
+        }
+        scene.add(this.mesh);
+    }
+    /** Update layer based on camera position */
+    update(camX, camZ) {
+        if (this.mode === 'uv-offset') {
+            // Scroll texture UV
+            if (this.material.map) {
+                this.material.map.offset.x = camX * this._speed * 0.001;
+                this.material.map.offset.y = camZ * this._speed * 0.001;
+            }
+        }
+        // Depth mode: perspective projection handles parallax naturally.
+        // Optionally follow camera X to keep layer centered.
+        if (this.mode === 'depth') {
+            this.mesh.position.x = camX;
+        }
+    }
+    destroy() {
+        this.mesh.removeFromParent();
+        this.mesh.geometry.dispose();
+        this.material.dispose();
+    }
+}

package/dist/three/ThreeParallaxStack.d.ts

@@ -0,0 +1,42 @@
+import type { Scene, Camera } from 'three';
+import type { ParallaxStack, StackConfig } from '../core/types';
+import { ThreeParallaxLayer } from './ThreeParallaxLayer';
+import type { ThreeLayerConfig } from './ThreeParallaxLayer';
+export interface ThreeStackConfig extends StackConfig<ThreeLayerConfig> {
+    /** 'uv-offset' = flat planes with texture scrolling (good for top-down).
+     *  'depth' = meshes at real Z distances, perspective does the parallax (good for 2.5D side-scrollers).
+     *  Default 'uv-offset'. */
+    mode?: 'uv-offset' | 'depth';
+}
+/**
+ * Multi-layer parallax manager for Three.js.
+ *
+ * Supports two modes:
+ * - **uv-offset**: Flat horizontal planes with texture UV scrolling (current @joydle/camera behavior, improved)
+ * - **depth**: Meshes placed at real Z distances — perspective projection creates natural parallax
+ */
+export declare class ThreeParallaxStack implements ParallaxStack {
+    private scene;
+    private layers;
+    private mode;
+    private viewport;
+    private config;
+    constructor(scene: Scene, config: ThreeStackConfig);
+    /**
+     * Update all layers.
+     * - For uv-offset mode: pass camera X and Z world positions.
+     * - For depth mode: pass camera X and Z (layers follow camera horizontally).
+     * - Alternatively pass a Camera object directly.
+     */
+    update(camXOrCamera: number | Camera, camZ?: number): void;
+    /** Change a layer's scroll speed at runtime */
+    setSpeed(key: string, speed: number): void;
+    /** Add a new layer at runtime */
+    addLayer(config: ThreeLayerConfig): void;
+    /** Remove a layer by key */
+    removeLayer(key: string): void;
+    /** Get a layer by key */
+    getLayer(key: string): ThreeParallaxLayer | undefined;
+    /** Clean up all layers and resources */
+    destroy(): void;
+}

package/dist/three/ThreeParallaxStack.js

@@ -0,0 +1,85 @@
+import { distributeSpeed } from '../core/types';
+import { ThreeParallaxLayer } from './ThreeParallaxLayer';
+/**
+ * Multi-layer parallax manager for Three.js.
+ *
+ * Supports two modes:
+ * - **uv-offset**: Flat horizontal planes with texture UV scrolling (current @joydle/camera behavior, improved)
+ * - **depth**: Meshes placed at real Z distances — perspective projection creates natural parallax
+ */
+export class ThreeParallaxStack {
+    scene;
+    layers = new Map();
+    mode;
+    viewport;
+    config;
+    constructor(scene, config) {
+        this.scene = scene;
+        this.config = config;
+        this.mode = config.mode ?? 'uv-offset';
+        this.viewport = config.viewport ?? { width: 1920, height: 1080 };
+        const total = config.layers.length;
+        for (let i = 0; i < total; i++) {
+            const layerCfg = { ...config.layers[i] };
+            if (config.autoSpeed && layerCfg.speed === undefined) {
+                layerCfg.speed = distributeSpeed(i, total);
+            }
+            const layer = new ThreeParallaxLayer(scene, layerCfg, this.mode, this.viewport);
+            this.layers.set(layerCfg.key, layer);
+        }
+    }
+    /**
+     * Update all layers.
+     * - For uv-offset mode: pass camera X and Z world positions.
+     * - For depth mode: pass camera X and Z (layers follow camera horizontally).
+     * - Alternatively pass a Camera object directly.
+     */
+    update(camXOrCamera, camZ) {
+        let cx;
+        let cz;
+        if (typeof camXOrCamera === 'number') {
+            cx = camXOrCamera;
+            cz = camZ ?? 0;
+        }
+        else {
+            cx = camXOrCamera.position.x;
+            cz = camXOrCamera.position.z;
+        }
+        for (const layer of this.layers.values()) {
+            layer.update(cx, cz);
+        }
+    }
+    /** Change a layer's scroll speed at runtime */
+    setSpeed(key, speed) {
+        const layer = this.layers.get(key);
+        if (layer)
+            layer.speed = speed;
+    }
+    /** Add a new layer at runtime */
+    addLayer(config) {
+        if (this.layers.has(config.key)) {
+            this.removeLayer(config.key);
+        }
+        const layer = new ThreeParallaxLayer(this.scene, config, this.mode, this.viewport);
+        this.layers.set(config.key, layer);
+    }
+    /** Remove a layer by key */
+    removeLayer(key) {
+        const layer = this.layers.get(key);
+        if (layer) {
+            layer.destroy();
+            this.layers.delete(key);
+        }
+    }
+    /** Get a layer by key */
+    getLayer(key) {
+        return this.layers.get(key);
+    }
+    /** Clean up all layers and resources */
+    destroy() {
+        for (const layer of this.layers.values()) {
+            layer.destroy();
+        }
+        this.layers.clear();
+    }
+}

package/dist/three/index.d.ts

@@ -0,0 +1,4 @@
+export { ThreeParallaxLayer } from './ThreeParallaxLayer';
+export { ThreeParallaxStack } from './ThreeParallaxStack';
+export type { ThreeLayerConfig, ThreeTextureLayerConfig, ThreeProceduralLayerConfig } from './ThreeParallaxLayer';
+export type { ThreeStackConfig } from './ThreeParallaxStack';

package/dist/three/index.js

@@ -0,0 +1,2 @@
+export { ThreeParallaxLayer } from './ThreeParallaxLayer';
+export { ThreeParallaxStack } from './ThreeParallaxStack';

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@joydle/parallax",
+  "version": "0.1.20",
+  "description": "Multi-layer parallax scrolling — declarative stacks, procedural backgrounds, and depth parallax for PixiJS and Three.js",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./pixi": {
+      "types": "./dist/pixi/index.d.ts",
+      "import": "./dist/pixi/index.js"
+    },
+    "./three": {
+      "types": "./dist/three/index.d.ts",
+      "import": "./dist/three/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "demo:pixi": "vite serve examples/pixi --config examples/pixi/vite.config.ts",
+    "demo:three": "vite serve examples/three --config examples/three/vite.config.ts",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "author": "Joydle <contact@joydle.dev>",
+  "homepage": "https://joydle.dev",
+  "peerDependencies": {
+    "pixi.js": ">=7.0.0",
+    "three": ">=0.150.0"
+  },
+  "peerDependenciesMeta": {
+    "pixi.js": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "pixi.js": "^8.16.0",
+    "three": "^0.170.0",
+    "@types/three": "^0.170.0",
+    "typescript": "~5.9.3",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
+  }
+}