scrollcraft 2.0.1

package/README.md

@@ -0,0 +1,58 @@
+# 🎞️ ScrollCraft 2.0
+
+**Transform cinematic motion into interactive web experiences.**
+
+ScrollCraft 2.0 is a modern animation SDK built for the era of high-performance, agent-driven development. It allows you to transform standard video or image sequences into "Intelligent Assets" that precisely track subjects and depth.
+
+---
+
+## 🚀 Quick Start
+
+```bash
+# 1. Transform your video into an intelligent asset sequence
+npx scft create "examples/sample-media/jabko.mp4" --cloud --depth --prompt "apple" 
+
+# this command will output a folder named scrollcraft-project 
+```
+
+```tsx
+// 2. Drop it into your React app
+import project from './scrollcraft-project/scrollcraft.json';
+import { ScrollCraftProvider, ScrollCraftCanvas, SubjectLayer } from 'scrollcraft';
+
+const App = () => (
+  <ScrollCraftProvider project={project}>
+    <ScrollCraftCanvas />
+    <SubjectLayer offset={{ x: 10, y: -5 }}>
+       <h2>Pin UI to moving objects.</h2>
+    </SubjectLayer>
+  </ScrollCraftProvider>
+);
+```
+
+---
+
+## 📖 Documentation & Guides
+
+Choose your path based on your role:
+
+### 👤 For Humans
+- [**Core Architecture**](docs/architecture.md): Understand the state-snapshot engine.
+- [**Asset Pipeline**](docs/asset-pipeline.md): Learn how to use the CLI and AI tracking.
+- [**React Hooks**](docs/react-integration.md): Build custom interactive components.
+
+### 🤖 For AI Agents
+- [**AGENTS.md**](AGENTS.md): Technical standard operating procedures for the repository.
+- [**AI Integration Protocol**](docs/ai-integration.md): How to prompt agents to build scenes for you.
+
+---
+
+## 🛠️ Performance & Tech
+- **WebGL Accelerated**: High-FPS rendering even for 4K sequences.
+- **AI Subject Tracking**: Automatic (x,y) pinning via SAM 3.
+- **Mouse-Interactive Parallax**: Automatic 3D depth map generation and rendering.
+- **Object-Fit Support**: Responsive "Cover" and "Contain" logic built into the shader.
+
+---
+
+*Dedicated to my family — Svetla, Verca, Natalka, Alex, and Agatka — and our daughter Agatka, who stays in our hearts.*

package/dist/cli/_not_used_api.d.ts

@@ -0,0 +1 @@
+export declare function sendRequest(endpoint: string, method?: 'GET' | 'POST', body?: any, token?: string): Promise<any>;

package/dist/cli/_not_used_api.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendRequest = sendRequest;
+const API_BASE_URL = 'https://api.scrollcraft.com';
+async function sendRequest(endpoint, method = 'GET', body, token) {
+    const headers = {
+        'Content-Type': 'application/json',
+    };
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+        method,
+        headers,
+        body: body ? JSON.stringify(body) : undefined,
+    });
+    if (!response.ok) {
+        throw new Error(`API request failed: ${response.statusText}`);
+    }
+    return response.json();
+}

package/dist/cli/api.d.ts

@@ -0,0 +1 @@
+export declare function sendRequest(endpoint: string, method?: 'GET' | 'POST', body?: any, token?: string): Promise<any>;

package/dist/cli/api.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendRequest = sendRequest;
+const API_BASE_URL = 'https://api.scrollcraft.com';
+async function sendRequest(endpoint, method = 'GET', body, token) {
+    const headers = {
+        'Content-Type': 'application/json',
+    };
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+        method,
+        headers,
+        body: body ? JSON.stringify(body) : undefined,
+    });
+    if (!response.ok) {
+        throw new Error(`API request failed: ${response.statusText}`);
+    }
+    return response.json();
+}

package/dist/cli/fal-service.d.ts

@@ -0,0 +1,38 @@
+import 'dotenv/config';
+/**
+ * FAL.AI SERVICE
+ *
+ * Handles all cloud-based AI processing for the asset pipeline.
+ */
+export declare class FalService {
+    constructor();
+    /**
+     * SUBJECT TRACKING (SAM 3)
+     *
+     * Analyzes a video and returns frame-by-frame (x,y) coordinates of the subject.
+     */
+    trackSubject(videoPathOrUrl: string, prompt?: string): Promise<{
+        x: number;
+        y: number;
+        scale: number;
+        frame: number;
+    }[]>;
+    /**
+     * AUTO-UPLOAD HELPER
+     * Uploads a local file to fal.ai temporary storage.
+     */
+    private uploadFile;
+    /**
+     * DEPTH MAP GENERATION (Video Depth Anything)
+     * Creates a temporally consistent grayscale depth video.
+     */
+    generateDepthMap(videoPathOrUrl: string): Promise<any>;
+    /**
+     * IMAGE REFINEMENT (Upscale / BG Remove)
+     */
+    refineImage(imageUrl: string, options: {
+        upscale?: boolean;
+        removeBg?: boolean;
+    }): Promise<string>;
+    private mapBoxesToTrackingData;
+}

package/dist/cli/fal-service.js

@@ -0,0 +1,190 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FalService = void 0;
+const client_1 = require("@fal-ai/client");
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
+require("dotenv/config");
+/**
+ * FAL.AI SERVICE
+ *
+ * Handles all cloud-based AI processing for the asset pipeline.
+ */
+class FalService {
+    constructor() {
+        if (!process.env.FAL_KEY) {
+            throw new Error('FAL_KEY not found in environment. Please add it to your .env file.');
+        }
+    }
+    /**
+     * SUBJECT TRACKING (SAM 3)
+     *
+     * Analyzes a video and returns frame-by-frame (x,y) coordinates of the subject.
+     */
+    async trackSubject(videoPathOrUrl, prompt = "main subject") {
+        let videoUrl = videoPathOrUrl;
+        // Auto-upload if the input is a local file
+        if (fs.existsSync(videoPathOrUrl) && fs.statSync(videoPathOrUrl).isFile()) {
+            videoUrl = await this.uploadFile(videoPathOrUrl);
+        }
+        console.log(`🤖 AI is tracking "${prompt}" in the video via SAM 3...`);
+        const result = await client_1.fal.subscribe("fal-ai/sam-3/video-rle", {
+            input: {
+                video_url: videoUrl,
+                prompt: prompt,
+            },
+            logs: true,
+            onQueueUpdate: (update) => {
+                if (update.status === "IN_PROGRESS") {
+                    update.logs.forEach(l => console.log(`⏳ AI Tracking: ${l.message}`));
+                }
+            }
+        });
+        // SAM 3 Video RLE structure parsing
+        const payload = result.data || result;
+        const boxes = payload.boxes;
+        if (!boxes || !Array.isArray(boxes) || boxes.length === 0) {
+            throw new Error(`AI tracking returned no box data. Check if your FAL_KEY is active and the prompt "${prompt}" matches an object in the video.`);
+        }
+        console.log(`✅ AI identified tracking data for ${boxes.length} frames.`);
+        return this.mapBoxesToTrackingData(boxes, payload);
+    }
+    /**
+     * AUTO-UPLOAD HELPER
+     * Uploads a local file to fal.ai temporary storage.
+     */
+    async uploadFile(filePath) {
+        console.log(`☁️  Uploading local file to AI Cloud: ${path.basename(filePath)}...`);
+        const fileBuffer = await fs.readFile(filePath);
+        const url = await client_1.fal.storage.upload(new Blob([fileBuffer]));
+        console.log(`✅ Upload complete: ${url}`);
+        return url;
+    }
+    /**
+     * DEPTH MAP GENERATION (Video Depth Anything)
+     * Creates a temporally consistent grayscale depth video.
+     */
+    async generateDepthMap(videoPathOrUrl) {
+        let videoUrl = videoPathOrUrl;
+        // Auto-upload if the input is a local file
+        if (fs.existsSync(videoPathOrUrl) && fs.statSync(videoPathOrUrl).isFile()) {
+            videoUrl = await this.uploadFile(videoPathOrUrl);
+        }
+        console.log(`🤖 AI is generating Depth Map Video using Video Depth Anything...`);
+        const result = await client_1.fal.subscribe("fal-ai/video-depth-anything", {
+            input: {
+                video_url: videoUrl,
+                model_size: "VDA-Base", // Small, Base, or Large. Base is a good balance.
+            },
+            logs: true,
+            onQueueUpdate: (update) => {
+                if (update.status === "IN_PROGRESS") {
+                    update.logs.forEach(l => console.log(`⏳ AI Depth Map: ${l.message}`));
+                }
+            }
+        });
+        // Debug output to see what Fal is actually returning
+        await fs.writeFile('debug_fal.json', JSON.stringify(result, null, 2));
+        const payload = result.data || result;
+        if (!payload.video || !payload.video.url) {
+            throw new Error(`AI Depth Map generation failed. No video URL returned. Saved response to debug_fal.json`);
+        }
+        console.log(`✅ Depth Map Video Generated: ${payload.video.url}`);
+        return payload.video.url;
+    }
+    /**
+     * IMAGE REFINEMENT (Upscale / BG Remove)
+     */
+    async refineImage(imageUrl, options) {
+        let currentUrl = imageUrl;
+        if (options.removeBg) {
+            const bgResult = await client_1.fal.subscribe("fal-ai/bria/background-removal", {
+                input: { image_url: currentUrl }
+            });
+            currentUrl = bgResult.image.url;
+        }
+        if (options.upscale) {
+            const upscaleResult = await client_1.fal.subscribe("fal-ai/esrgan", {
+                input: { image_url: currentUrl, scale: 2 }
+            });
+            currentUrl = upscaleResult.image.url;
+        }
+        return currentUrl;
+    }
+    mapBoxesToTrackingData(boxes, payload = {}) {
+        let lastKnown = { x: 0.5, y: 0.5, scale: 0 };
+        let detectedCount = 0;
+        const mapped = boxes.map((frameBoxes, i) => {
+            // SAM-3 video-rle returns frames as [null, [cx,cy,w,h], [cx,cy,w,h], ...]
+            // Or sometimes [[cx,cy,w,h]] if it's an array of objects
+            if (frameBoxes && Array.isArray(frameBoxes)) {
+                let box = null;
+                // Case 1: frameBoxes is [cx, cy, w, h] directly
+                if (typeof frameBoxes[0] === 'number' && frameBoxes.length >= 4) {
+                    box = frameBoxes;
+                }
+                // Case 2: frameBoxes is [[cx, cy, w, h]]
+                else if (Array.isArray(frameBoxes[0]) && frameBoxes[0].length >= 4) {
+                    box = frameBoxes[0];
+                }
+                // Case 3: frameBoxes is [{box_2d: [...]}]
+                else if (typeof frameBoxes[0] === 'object' && frameBoxes[0].box_2d) {
+                    box = frameBoxes[0].box_2d;
+                }
+                if (box) {
+                    lastKnown = {
+                        x: box[0],
+                        y: box[1],
+                        scale: box[2] * box[3]
+                    };
+                    detectedCount++;
+                }
+            }
+            return {
+                frame: i,
+                ...lastKnown
+            };
+        });
+        if (detectedCount === 0) {
+            console.warn('⚠️  AI found frames but NO objects were detected with the logic. All coordinates defaulted to 0.5.');
+        }
+        else {
+            console.log(`🎯 Successfully extracted unique coordinates for ${detectedCount} frames.`);
+        }
+        return mapped;
+    }
+}
+exports.FalService = FalService;

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -0,0 +1,164 @@
+#!/usr/bin/env node
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const chalk_1 = __importDefault(require("chalk"));
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
+const child_process_1 = require("child_process");
+const ffmpeg_static_1 = __importDefault(require("ffmpeg-static"));
+const fal_service_1 = require("./fal-service");
+const processor_1 = require("./processor");
+/**
+ * Robust FFmpeg Detection
+ * Prioritizes bundled static binary, then system PATH.
+ */
+function getFFmpegPath() {
+    // 1. Try bundled ffmpeg-static
+    if (ffmpeg_static_1.default)
+        return ffmpeg_static_1.default;
+    // 2. Try system PATH
+    try {
+        (0, child_process_1.execSync)('ffmpeg -version', { stdio: 'ignore' });
+        return 'ffmpeg';
+    }
+    catch (e) {
+        return null;
+    }
+}
+const program = new commander_1.Command();
+program
+    .name('scft')
+    .description('ScrollCraft CLI 2.0 - Immersive Web SDK')
+    .version('2.0.1');
+program
+    .command('create')
+    .description('ONE-STEP: Transform video/images into a responsive ScrollCraft')
+    .argument('<input>', 'Path to input video or directory of images')
+    .option('-o, --output <dir>', 'Output directory', './scrollcraft-project')
+    .option('-p, --prompt <text>', 'Text prompt for subject tracking', 'main subject')
+    .option('-s, --step <number>', 'Process every Nth frame (default: 1)', '1')
+    .option('--cloud', 'Use Fal.ai for tracking and refinement', false)
+    .option('--depth', 'Generate a 3D depth map for the displacement effect (Requires --cloud)', false)
+    .action(async (input, opts) => {
+    console.log(chalk_1.default.bold.blue('\n🎞️  ScrollCraft 2.0 Asset Pipeline\n'));
+    // 0. PRE-FLIGHT CHECK
+    const ffmpegPath = getFFmpegPath();
+    if (!ffmpegPath) {
+        console.error(chalk_1.default.red('\n❌ FFmpeg not found!'));
+        console.log(chalk_1.default.yellow('This CLI requires FFmpeg to process videos.'));
+        console.log('Please install it manually or ensure regular npm install was successful.');
+        process.exit(1);
+    }
+    const outDir = path.resolve(opts.output);
+    const tempDir = path.join(outDir, '.temp-frames');
+    const step = parseInt(opts.step) || 1;
+    try {
+        await fs.ensureDir(outDir);
+        await fs.ensureDir(tempDir);
+        // 1. FRAME EXTRACTION
+        if (fs.statSync(input).isFile()) {
+            console.log(chalk_1.default.yellow(`📦 Extracting frames from video: ${input}`));
+            // Extract 30 frames per second (matching our default)
+            // Using the robust path discovered in pre-flight
+            (0, child_process_1.execSync)(`"${ffmpegPath}" -i "${input}" -vf "fps=30" "${tempDir}/frame_%04d.png"`, { stdio: 'inherit' });
+        }
+        else {
+            console.log(chalk_1.default.yellow(`📂 Using images from: ${input}`));
+            if (opts.cloud || opts.depth) {
+                console.error(chalk_1.default.red('\n❌ AI Cloud features (tracking/depth) currently require a video file as input.'));
+                console.log(chalk_1.default.yellow('To use a directory of images, please use local mode (disable --cloud and --depth).'));
+                process.exit(1);
+            }
+            const files = (await fs.readdir(input))
+                .filter(f => /\.(png|jpg|jpeg|webp)$/i.test(f))
+                .sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }));
+            if (files.length === 0) {
+                throw new Error(`No compatible images (png, jpg, webp) found in ${input}`);
+            }
+            console.log(chalk_1.default.dim(`📦 Standardizing ${files.length} images...`));
+            for (let i = 0; i < files.length; i++) {
+                const ext = path.extname(files[i]);
+                const frameName = `frame_${(i + 1).toString().padStart(4, '0')}${ext}`;
+                await fs.copy(path.join(input, files[i]), path.join(tempDir, frameName));
+            }
+        }
+        // 2. SUBJECT TRACKING & DEPTH MAP
+        let trackingData = [];
+        let hasDepth = false;
+        if (opts.cloud) {
+            const fal = new fal_service_1.FalService();
+            // Tracking
+            trackingData = await fal.trackSubject(input, opts.prompt);
+            // Depth Map
+            if (opts.depth) {
+                console.log(chalk_1.default.yellow(`\n🕳️  Generating Depth Map via AI...`));
+                const depthUrl = await fal.generateDepthMap(input);
+                console.log(chalk_1.default.yellow(`📥 Downloading Depth Map Video...`));
+                const res = await fetch(depthUrl);
+                const arrayBuffer = await res.arrayBuffer();
+                const depthVideoPath = path.join(tempDir, 'depth_video.mp4');
+                await fs.writeFile(depthVideoPath, Buffer.from(arrayBuffer));
+                console.log(chalk_1.default.yellow(`📦 Extracting depth frames...`));
+                (0, child_process_1.execSync)(`"${ffmpegPath}" -i "${depthVideoPath}" -vf "fps=30" "${tempDir}/depth_%04d.png"`, { stdio: 'inherit' });
+                hasDepth = true;
+            }
+        }
+        else {
+            console.log(chalk_1.default.dim('ℹ️  Local tracking not yet implemented. Using center-pinned defaults.'));
+            const frames = (await fs.readdir(tempDir)).filter(f => f.startsWith('frame_'));
+            trackingData = frames.map((_, i) => ({ frame: i, x: 0.5, y: 0.5, scale: 0 }));
+        }
+        // 3. VARIANT GENERATION (Mobile/Desktop)
+        const processor = new processor_1.AssetProcessor(outDir);
+        const variants = await processor.processVariants(tempDir, trackingData, { step, hasDepth });
+        // 4. CLEANUP & SAVE
+        await processor.saveConfig(variants);
+        await fs.remove(tempDir);
+        console.log(chalk_1.default.bold.green(`\n✅ Project Created Successfully!`));
+        console.log(chalk_1.default.white(`📍 Output: ${outDir}`));
+        console.log(chalk_1.default.white(`📜 Config: scrollcraft.json`));
+        console.log(chalk_1.default.cyan(`\nNext: Import the .json into your <ScrollCraftProvider />\n`));
+    }
+    catch (err) {
+        console.error(chalk_1.default.red(`\n❌ Error: ${err.message}`));
+        process.exit(1);
+    }
+});
+program.parse(process.argv);

package/dist/cli/processor.d.ts

@@ -0,0 +1,24 @@
+import { ProjectConfiguration, AssetVariant, SubjectFrameData } from '../core/types';
+/**
+ * LOCAL ASSET PROCESSOR
+ *
+ * Handles cropping, resizing, and variant generation.
+ */
+export declare class AssetProcessor {
+    private outDir;
+    constructor(outDir: string);
+    /**
+     * GENERATE VARIANTS
+     *
+     * Creates folders for Mobile, Tablet, Desktop with optimized images.
+     */
+    processVariants(sourceFramesDir: string, trackingData: SubjectFrameData[], options?: {
+        step?: number;
+        hasDepth?: boolean;
+    }): Promise<AssetVariant[]>;
+    private subjectToSharpPosition;
+    /**
+     * SAVE PROJECT FILE
+     */
+    saveConfig(variants: AssetVariant[]): Promise<ProjectConfiguration>;
+}

package/dist/cli/processor.js

@@ -0,0 +1,168 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetProcessor = void 0;
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
+const sharp_1 = __importDefault(require("sharp"));
+/**
+ * LOCAL ASSET PROCESSOR
+ *
+ * Handles cropping, resizing, and variant generation.
+ */
+class AssetProcessor {
+    outDir;
+    constructor(outDir) {
+        this.outDir = outDir;
+    }
+    /**
+     * GENERATE VARIANTS
+     *
+     * Creates folders for Mobile, Tablet, Desktop with optimized images.
+     */
+    async processVariants(sourceFramesDir, trackingData, options = {}) {
+        const step = options.step || 1;
+        const allFiles = await fs.readdir(sourceFramesDir);
+        // Ensure we only process regular frames for the main loop
+        const allFrames = allFiles.filter(f => f.startsWith('frame_'));
+        // Sort frames numerically to ensure consistent indexing (e.g. 1, 2, 10 instead of 1, 10, 2)
+        allFrames.sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' }));
+        const framesToProcess = allFrames.filter((_, i) => i % step === 0);
+        const variants = [];
+        // Define our target variants
+        const configs = [
+            { id: 'mobile', width: 720, height: 1280, media: '(max-width: 600px)' },
+            { id: 'desktop', width: 1920, height: 1080, media: '(min-width: 601px)' }
+        ];
+        for (const config of configs) {
+            const variantDir = path.join(this.outDir, config.id);
+            await fs.ensureDir(variantDir);
+            console.log(`🎨 Generating ${config.id} variant (${config.width}x${config.height}) for ${framesToProcess.length} images...`);
+            const variantTracking = [];
+            for (let i = 0; i < framesToProcess.length; i++) {
+                const originalIndex = i * step;
+                const frameName = framesToProcess[i];
+                const framePath = path.join(sourceFramesDir, frameName);
+                const targetPath = path.join(variantDir, `index_${i}.webp`);
+                const subject = trackingData.find(f => f.frame === originalIndex) || { frame: originalIndex, x: 0.5, y: 0.5, scale: 0 };
+                // SMART CROP: Center on the subject (x,y)
+                // This logic would calculate the top/left based on subject relative position
+                await (0, sharp_1.default)(framePath)
+                    .resize(config.width, config.height, {
+                    fit: 'cover',
+                    position: this.subjectToSharpPosition(subject)
+                })
+                    .webp({ quality: 80 })
+                    .toFile(targetPath);
+                if (options.hasDepth) {
+                    const numStr = frameName.match(/(\d+)/)?.[1] || "";
+                    // Look for a depth file that matches the same numeric index
+                    const depthFrameName = allFiles.find(f => f.startsWith('depth_') && f.includes(numStr));
+                    const depthFramePath = depthFrameName ? path.join(sourceFramesDir, depthFrameName) : '';
+                    if (depthFramePath && fs.existsSync(depthFramePath)) {
+                        const depthTargetPath = path.join(variantDir, `index_${i}_depth.webp`);
+                        await (0, sharp_1.default)(depthFramePath)
+                            .resize(config.width, config.height, {
+                            fit: 'cover',
+                            position: this.subjectToSharpPosition(subject)
+                        })
+                            // We grayscale and save as webp
+                            .grayscale()
+                            .webp({ quality: 80 })
+                            .toFile(depthTargetPath);
+                    }
+                }
+                // Add to variant tracking (using relative frame 0...N)
+                variantTracking.push({
+                    ...subject,
+                    frame: i
+                });
+            }
+            variants.push({
+                id: config.id,
+                media: config.media,
+                path: `./${config.id}`, // Relative path in the final output
+                aspectRatio: config.id === 'mobile' ? '9:16' : '16:9',
+                frameCount: framesToProcess.length,
+                hasDepthMap: options.hasDepth,
+                subjectTracking: variantTracking
+            });
+        }
+        return variants;
+    }
+    subjectToSharpPosition(subject) {
+        // Map 0-1 to percentages for sharp
+        const xPercent = Math.round(subject.x * 100);
+        const yPercent = Math.round(subject.y * 100);
+        // Return a string sharp understands or use its gravity system
+        // For custom positioning, we'd need more complex math with .extract()
+        return 'center'; // Placeholder for now
+    }
+    /**
+     * SAVE PROJECT FILE
+     */
+    async saveConfig(variants) {
+        const config = {
+            version: "2.0.1",
+            settings: {
+                fps: 30,
+                baseResolution: { width: 1920, height: 1080 },
+                scrollMode: 'vh'
+            },
+            assets: [{
+                    id: "main-sequence",
+                    strategy: "adaptive",
+                    variants: variants
+                }],
+            timeline: {
+                totalDuration: "300vh",
+                scenes: [{
+                        id: "scene-1",
+                        assetId: "main-sequence",
+                        startProgress: 0,
+                        duration: 1,
+                        assetRange: [0, variants[0].frameCount - 1],
+                        layers: []
+                    }]
+            }
+        };
+        await fs.writeJson(path.join(this.outDir, 'scrollcraft.json'), config, { spaces: 2 });
+        return config;
+    }
+}
+exports.AssetProcessor = AssetProcessor;

package/dist/core/CoreEngine.d.ts

@@ -0,0 +1,52 @@
+import { ProjectConfiguration } from './types';
+/**
+ * SCROLLCRAFT 2.0 CORE ENGINE
+ *
+ * A declarative, performant engine that maps scroll progress
+ * to high-performance image sequence rendering.
+ */
+export declare class CoreEngine {
+    private config;
+    private currentFrame;
+    private activeVariant;
+    private canvas;
+    private ctx;
+    private renderer;
+    private imageCache;
+    private depthCache;
+    private scrollTimeout;
+    constructor(config: ProjectConfiguration);
+    /**
+     * ATTACH CANVAS
+     * Connects the engine to a DOM element for rendering.
+     */
+    attachCanvas(canvas: HTMLCanvasElement): void;
+    private resizeCanvas;
+    /**
+     * ADAPTIVE RENDERING
+     * Selects the best image folder based on current browser media queries.
+     */
+    private detectBestVariant;
+    private clearCache;
+    private preloadInitial;
+    /**
+     * THE PLAYER ENGINE
+     * Maps global scroll progress (0-1) to local scene frames.
+     */
+    update(progress: number): {
+        frame: number;
+        subjectCoords: {
+            x: number;
+            y: number;
+        };
+    } | undefined;
+    private getSubjectCoords;
+    /**
+     * RENDER LOOP
+     * Draws the image to the canvas with object-fit: cover logic.
+     */
+    private render;
+    private getImage;
+    private loadDepthMap;
+    private getDepthImage;
+}

package/dist/core/WebGLRenderer.d.ts

@@ -0,0 +1,16 @@
+export declare class WebGLRenderer {
+    private gl;
+    private program;
+    private positionBuffer;
+    private texture;
+    private depthTexture;
+    private targetMouse;
+    private currentMouse;
+    private animationFrameId;
+    constructor(canvas: HTMLCanvasElement);
+    private createProgram;
+    private animate;
+    render(img: HTMLImageElement, depthImg: HTMLImageElement | null, width: number, height: number): void;
+    private draw;
+    destroy(): void;
+}

package/dist/core/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/dist/core/scrollcraft.umd.min.js

@@ -0,0 +1,14 @@
+/*
+    Venovani:
+    Tento plugin je venovan me rodine - mamince Svetle,
+    manzelce Verce, detem Natalce a Alexovi
+    a nasi dceri Agatce, ktera navzdy zustane v nasich srdcich.
+ 
+    Dedication:
+    This plugin is dedicated to my family - my mother Svetla,
+    my wife Verca, my children Natalka and Alex,
+    and our daughter Agatka, who will forever remain in our hearts.
+*/
+
+
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ScrollCraft=t():e.ScrollCraft=t()}(this,()=>(()=>{"use strict";var e={};return e=e.default})());

package/dist/core/types.d.ts

@@ -0,0 +1,172 @@
+/**
+ * SCROLLCRAFT 2.0 - DECLARATIVE SCHEMA
+ *
+ * This file defines the core data structures that allow an AI Agent
+ * to describe a scroll experience in one step.
+ */
+export interface ProjectConfiguration {
+    version: string;
+    settings: ProjectSettings;
+    assets: SequenceAsset[];
+    timeline: TimelineDefinition;
+}
+export interface ProjectSettings {
+    fps: number;
+    baseResolution: {
+        width: number;
+        height: number;
+    };
+    scrollMode: 'vh' | 'px';
+}
+/**
+ * ASSET SYSTEM
+ */
+export interface SequenceAsset {
+    id: string;
+    strategy: 'adaptive' | 'fixed';
+    variants: AssetVariant[];
+}
+export interface AssetVariant {
+    id: string;
+    media: string;
+    path: string;
+    aspectRatio: string;
+    frameCount: number;
+    hasDepthMap?: boolean;
+    subjectTracking?: SubjectFrameData[];
+}
+export interface SubjectFrameData {
+    frame: number;
+    x: number;
+    y: number;
+    scale?: number;
+}
+/**
+ * TIMELINE SYSTEM
+ */
+export interface TimelineDefinition {
+    totalDuration: string | number;
+    scenes: SceneDefinition[];
+}
+export interface SceneDefinition {
+    id: string;
+    assetId: string;
+    startProgress: number;
+    duration: number;
+    assetRange: [number, number];
+    layers: LayerDefinition[];
+}
+/**
+ * LAYER SYSTEM
+ */
+export type LayerDefinition = HTMLLayer | CanvasLayer;
+export interface BaseLayer {
+    id: string;
+    type: string;
+    zIndex?: number;
+    anchor: 'viewport' | 'subject';
+    position: ResponsiveCoordinate;
+    animations: LayerAnimation[];
+}
+export interface HTMLLayer extends BaseLayer {
+    type: 'html';
+    content: string;
+    style?: Record<string, string>;
+}
+export interface CanvasLayer extends BaseLayer {
+    type: 'canvas';
+}
+/**
+ * UTILITY TYPES
+ */
+export interface ResponsiveCoordinate {
+    default: Point;
+    mobile?: Point;
+    tablet?: Point;
+    desktop?: Point;
+}
+export interface Point {
+    x: string | number;
+    y: string | number;
+}
+export interface LayerAnimation {
+    property: string;
+    from: number | string;
+    to: number | string;
+    start: number;
+    end: number;
+    easing?: string;
+}
+/**
+ * LEGACY TYPES (V1 Compatibility)
+ * These are required for existing modules to compile.
+ */
+export interface BlockInstanceInterface {
+    destroy(): void;
+    resize(params: {
+        wiWidth: number;
+        wiHeight: number;
+    }): void;
+}
+export type MediaGroupPositionAndSize = {
+    bgSize?: 'contain' | 'cover' | 'custom';
+    bgPosition?: {
+        x: number;
+        y: number;
+    };
+};
+export type ImagesUrlListArray = Array<string | {
+    i: string;
+    dur?: number;
+}>;
+export type ImageGroupUrlList = MediaGroupPositionAndSize & {
+    type: 'urlList';
+    prefix?: string;
+    suffix?: string;
+    images: ImagesUrlListArray;
+    duration?: number;
+};
+export type ImageGroupGap = {
+    type: 'gap';
+    duration: number;
+};
+export type VideoGroupUrl = MediaGroupPositionAndSize & {
+    type: 'urlVideo';
+    video?: string;
+    duration?: number;
+};
+export type ImageGroupWp = MediaGroupPositionAndSize & {
+    type: 'wpMedia';
+    images: number[];
+    duration?: number;
+};
+export type VideoGroupWp = MediaGroupPositionAndSize & {
+    type: 'wpVideo';
+    video?: number;
+    duration?: number;
+};
+export type MediaGroup = ImageGroupGap | ImageGroupUrlList | VideoGroupUrl | ImageGroupWp | VideoGroupWp;
+export type MediaGroups = MediaGroup[];
+export type AttributesCanvas2d = {
+    mediaGroups: MediaGroups;
+    markers: boolean;
+    scrub: number;
+    triggerStart: number;
+    triggerEnd: number;
+    pin: boolean;
+    pinSpacing: boolean;
+};
+export type AttributesScene = {
+    scenePosition: 'flow' | 'sticky' | 'fixed';
+    stickyType: 'css' | 'js';
+    height: number;
+    heightUnit: string;
+    duration: number;
+    durationUnit: string;
+    top: number;
+    topUnit: string;
+    markers: boolean;
+    scrub: number;
+    triggerStart: number;
+    triggerEnd: number;
+};

package/dist/core/types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * SCROLLCRAFT 2.0 - DECLARATIVE SCHEMA
+ *
+ * This file defines the core data structures that allow an AI Agent
+ * to describe a scroll experience in one step.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/react/ScrollCraftProvider.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CoreEngine } from '../core/CoreEngine';
+import { ProjectConfiguration } from '../core/types';
+interface SCFTContext {
+    progress: number;
+    frame: number;
+    subjectCoords: {
+        x: number;
+        y: number;
+    };
+    engine: CoreEngine | null;
+}
+export declare const ScrollCraftProvider: React.FC<{
+    project: ProjectConfiguration;
+    children: React.ReactNode;
+}>;
+export declare const ScrollCraftCanvas: React.FC<{
+    assetId?: string;
+    style?: React.CSSProperties;
+}>;
+export declare const SubjectLayer: React.FC<{
+    offset?: {
+        x: number;
+        y: number;
+    };
+    children: React.ReactNode;
+}>;
+export declare const useScrollCraft: () => SCFTContext;
+export {};

package/dist/react/index.d.ts

@@ -0,0 +1 @@
+export { ScrollCraftProvider, ScrollCraftCanvas, SubjectLayer, useScrollCraft } from './ScrollCraftProvider';

package/dist/react/index.js

@@ -0,0 +1,14 @@
+/*
+    Venovani:
+    Tento plugin je venovan me rodine - mamince Svetle,
+    manzelce Verce, detem Natalce a Alexovi
+    a nasi dceri Agatce, ktera navzdy zustane v nasich srdcich.
+ 
+    Dedication:
+    This plugin is dedicated to my family - my mother Svetla,
+    my wife Verca, my children Natalka and Alex,
+    and our daughter Agatka, who will forever remain in our hearts.
+*/
+
+
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ScrollCraftReact=e(require("react")):t.ScrollCraftReact=e(t.react)}(this,t=>(()=>{"use strict";var e={326(t,e){var i=Symbol.for("react.transitional.element");function r(t,e,r){var s=null;if(void 0!==r&&(s=""+r),void 0!==e.key&&(s=""+e.key),"key"in e)for(var a in r={},e)"key"!==a&&(r[a]=e[a]);else r=e;return e=r.ref,{$$typeof:i,type:t,key:s,ref:void 0!==e?e:null,props:r}}Symbol.for("react.fragment"),e.jsx=r},540(t,e,i){t.exports=i(326)},155(e){e.exports=t}},i={};function r(t){var s=i[t];if(void 0!==s)return s.exports;var a=i[t]={exports:{}};return e[t](a,a.exports,r),a.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var s={};r.r(s),r.d(s,{ScrollCraftCanvas:()=>u,ScrollCraftProvider:()=>c,SubjectLayer:()=>g,useScrollCraft:()=>d});var a=r(540),n=r(155);class o{constructor(t){if(this.targetMouse={x:0,y:0},this.currentMouse={x:0,y:0},this.animationFrameId=0,this.animate=()=>{if(this.currentMouse.x+=.1*(this.targetMouse.x-this.currentMouse.x),this.currentMouse.y+=.1*(this.targetMouse.y-this.currentMouse.y),this.gl&&this.program){this.gl.useProgram(this.program);const t=this.gl.getUniformLocation(this.program,"u_mouse");this.gl.uniform2f(t,this.currentMouse.x,this.currentMouse.y),this.draw()}this.animationFrameId=requestAnimationFrame(this.animate)},this.gl=t.getContext("webgl",{alpha:!1,antialias:!1}),!this.gl)throw new Error("WebGL not supported");this.program=this.createProgram("\n            attribute vec2 a_position;\n            varying vec2 v_texCoord;\n            void main() {\n                gl_Position = vec4(a_position, 0.0, 1.0);\n                // Convert -1 -> 1 to 0 -> 1 for UVs\n                v_texCoord = a_position * 0.5 + 0.5;\n                v_texCoord.y = 1.0 - v_texCoord.y;\n            }\n        ","\n            precision mediump float;\n            uniform sampler2D u_image;\n            uniform sampler2D u_depthMap;\n            uniform vec2 u_resolution;\n            uniform vec2 u_imageResolution;\n            uniform vec2 u_mouse;\n            uniform bool u_hasDepth;\n            varying vec2 v_texCoord;\n\n            void main() {\n                // object-fit: cover math\n                vec2 ratio = vec2(\n                    min((u_resolution.x / u_resolution.y) / (u_imageResolution.x / u_imageResolution.y), 1.0),\n                    min((u_resolution.y / u_resolution.x) / (u_imageResolution.y / u_imageResolution.x), 1.0)\n                );\n                vec2 uv = vec2(\n                    v_texCoord.x * ratio.x + (1.0 - ratio.x) * 0.5,\n                    v_texCoord.y * ratio.y + (1.0 - ratio.y) * 0.5\n                );\n\n                if (u_hasDepth) {\n                    float depth = texture2D(u_depthMap, uv).r;\n                    // White is close (1), Black is far (0). We move close objects more.\n                    vec2 parallax = u_mouse * depth * 0.04;\n                    uv += parallax;\n                }\n                \n                gl_FragColor = texture2D(u_image, uv);\n            }\n        "),this.gl.useProgram(this.program),this.positionBuffer=this.gl.createBuffer(),this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.positionBuffer),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),this.gl.STATIC_DRAW),this.texture=this.gl.createTexture(),this.depthTexture=this.gl.createTexture(),window.addEventListener("mousemove",t=>{this.targetMouse.x=t.clientX/window.innerWidth*2-1,this.targetMouse.y=-t.clientY/window.innerHeight*2+1}),this.animate()}createProgram(t,e){const i=this.gl.createShader(this.gl.VERTEX_SHADER);this.gl.shaderSource(i,t),this.gl.compileShader(i);const r=this.gl.createShader(this.gl.FRAGMENT_SHADER);this.gl.shaderSource(r,e),this.gl.compileShader(r);const s=this.gl.createProgram();return this.gl.attachShader(s,i),this.gl.attachShader(s,r),this.gl.linkProgram(s),s}render(t,e,i,r){this.gl.useProgram(this.program),this.gl.activeTexture(this.gl.TEXTURE0),this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,t),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.activeTexture(this.gl.TEXTURE1),this.gl.bindTexture(this.gl.TEXTURE_2D,this.depthTexture),e&&(this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,e),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR)),this.gl.uniform1i(this.gl.getUniformLocation(this.program,"u_image"),0),this.gl.uniform1i(this.gl.getUniformLocation(this.program,"u_depthMap"),1),this.gl.uniform1i(this.gl.getUniformLocation(this.program,"u_hasDepth"),e?1:0),this.gl.uniform2f(this.gl.getUniformLocation(this.program,"u_resolution"),i,r),this.gl.uniform2f(this.gl.getUniformLocation(this.program,"u_imageResolution"),t.naturalWidth,t.naturalHeight);const s=this.gl.getAttribLocation(this.program,"a_position");this.gl.enableVertexAttribArray(s),this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.positionBuffer),this.gl.vertexAttribPointer(s,2,this.gl.FLOAT,!1,0,0),this.gl.viewport(0,0,i,r),this.draw()}draw(){this.gl.drawArrays(this.gl.TRIANGLES,0,6)}destroy(){cancelAnimationFrame(this.animationFrameId)}}class h{constructor(t){this.currentFrame=-1,this.activeVariant=null,this.canvas=null,this.ctx=null,this.renderer=null,this.imageCache=new Map,this.depthCache=new Map,this.scrollTimeout=null,this.config=t,this.detectBestVariant(),window.addEventListener("resize",()=>{this.detectBestVariant(),this.resizeCanvas(),this.render()})}attachCanvas(t){this.canvas=t;try{this.renderer=new o(t)}catch(e){console.warn("WebGL failed, falling back to 2D",e),this.ctx=t.getContext("2d",{alpha:!1})}this.resizeCanvas(),this.render()}resizeCanvas(){if(!this.canvas)return;const t=window.innerWidth,e=window.innerHeight,i=window.devicePixelRatio||1;this.canvas.width=t*i,this.canvas.height=e*i,this.ctx&&this.ctx.scale(i,i)}detectBestVariant(){var t;const e=this.config.assets[0];if(!e)return;const i=e.variants.find(t=>window.matchMedia(t.media).matches)||e.variants[0];i?(null===(t=this.activeVariant)||void 0===t?void 0:t.id)!==i.id&&(console.log(`🎯 Variant Switched: ${i.id}`),this.activeVariant=i,console.log("[CoreEngine] Variant hasDepthMap:",this.activeVariant.hasDepthMap),this.clearCache(),this.preloadInitial()):console.warn("[CoreEngine] No best match found")}clearCache(){this.imageCache.clear(),this.depthCache.clear()}preloadInitial(){for(let t=0;t<15;t++)this.getImage(t)}update(t){const e=this.config.timeline.scenes[0];if(!e)return;const i=e.assetRange[1]-e.assetRange[0],r=Math.floor(e.assetRange[0]+t*i);return r!==this.currentFrame&&(this.currentFrame=r,this.render(),this.getImage(this.currentFrame+5),this.getImage(this.currentFrame+10),this.scrollTimeout&&clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout(()=>{this.loadDepthMap(this.currentFrame)},100)),{frame:this.currentFrame,subjectCoords:this.getSubjectCoords(this.currentFrame)}}getSubjectCoords(t){var e;if(!(null===(e=this.activeVariant)||void 0===e?void 0:e.subjectTracking))return{x:.5,y:.5};const i=this.activeVariant.subjectTracking.find(e=>e.frame===t);return i?{x:i.x,y:i.y}:{x:.5,y:.5}}render(){var t;if(!this.canvas||-1===this.currentFrame)return;const e=this.getImage(this.currentFrame);if(!e||!e.complete)return;const i=window.innerWidth,r=window.innerHeight;let s=null;if((null===(t=this.activeVariant)||void 0===t?void 0:t.hasDepthMap)&&(s=this.getDepthImage(this.currentFrame),s&&!s.complete&&(s=null)),this.renderer)this.renderer.render(e,s,i*(window.devicePixelRatio||1),r*(window.devicePixelRatio||1));else if(this.ctx){const t=e.naturalWidth/e.naturalHeight;let s,a,n,o;t>i/r?(a=r,s=r*t,n=(i-s)/2,o=0):(s=i,a=i/t,n=0,o=(r-a)/2),this.ctx.clearRect(0,0,i,r),this.ctx.drawImage(e,n,o,s,a)}}getImage(t){if(!this.activeVariant)return null;if(t<0||t>=this.activeVariant.frameCount)return null;const e=`${this.activeVariant.id}_${t}`;if(this.imageCache.has(e))return this.imageCache.get(e);const i=new Image;return i.crossOrigin="anonymous",i.src=`${this.activeVariant.path}/index_${t}.webp`,i.onload=()=>{this.currentFrame===t&&this.render()},this.imageCache.set(e,i),i}loadDepthMap(t){var e;if(!(null===(e=this.activeVariant)||void 0===e?void 0:e.hasDepthMap))return void console.log("[CoreEngine] activeVariant does not define hasDepthMap=true");console.log(`[CoreEngine] Lazy requesting depth map for frame: ${t}`);this.getDepthImage(t)}getDepthImage(t){var e;if(!(null===(e=this.activeVariant)||void 0===e?void 0:e.hasDepthMap))return null;if(t<0||t>=this.activeVariant.frameCount)return null;const i=`${this.activeVariant.id}_depth_${t}`;if(this.depthCache.has(i))return this.depthCache.get(i);console.log(`[CoreEngine] Downloading: ${this.activeVariant.path}/index_${t}_depth.webp`);const r=new Image;return r.crossOrigin="anonymous",r.src=`${this.activeVariant.path}/index_${t}_depth.webp`,r.onload=()=>{console.log(`[CoreEngine] Depth map loaded for frame: ${t}`),this.currentFrame===t&&this.render()},r.onerror=e=>{console.error(`[CoreEngine] Depth map failed to load for frame: ${t}`,e)},this.depthCache.set(i,r),r}}const l=(0,n.createContext)(null),c=({project:t,children:e})=>{const[i,r]=(0,n.useState)({progress:0,frame:-1,subjectCoords:{x:.5,y:.5}}),s=(0,n.useRef)(null);return(0,n.useEffect)(()=>{const e=new h(t);s.current=e;const i=()=>{const t=window.scrollY,i=document.body.scrollHeight-window.innerHeight,s=i<=0?0:Math.max(0,Math.min(1,t/i)),a=e.update(s);a&&r({progress:s,frame:a.frame,subjectCoords:a.subjectCoords})};return window.addEventListener("scroll",i,{passive:!0}),setTimeout(i,100),()=>window.removeEventListener("scroll",i)},[t]),(0,a.jsx)(l.Provider,{value:Object.assign(Object.assign({},i),{engine:s.current}),children:(0,a.jsx)("div",{className:"scft-wrapper",style:{position:"relative"},children:e})})},u=({style:t})=>{const e=(0,n.useContext)(l),i=(0,n.useRef)(null);return(0,n.useEffect)(()=>{i.current&&(null==e?void 0:e.engine)&&e.engine.attachCanvas(i.current)},[null==e?void 0:e.engine]),(0,a.jsx)("canvas",{ref:i,style:Object.assign({width:"100%",height:"100%",display:"block"},t)})},g=({offset:t={x:0,y:0},children:e})=>{const i=(0,n.useContext)(l);if(!i||-1===i.frame)return null;const r={position:"fixed",left:`${100*i.subjectCoords.x+t.x}%`,top:`${100*i.subjectCoords.y+t.y}%`,transform:"translate(-50%, -50%)",pointerEvents:"auto",zIndex:10,transition:"left 0.1s linear, top 0.1s linear"};return(0,a.jsx)("div",{style:r,children:e})},d=()=>{const t=(0,n.useContext)(l);if(!t)throw new Error("useScrollCraft must be used within a ScrollCraftProvider");return t};return s})());

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "scrollcraft",
+  "version": "2.0.1",
+  "description": "ScrollCraft is a web-based tool for scroll-triggered animations.",
+  "main": "dist/core/scrollcraft.umd.min.js",
+  "module": "dist/core/scrollcraft.umd.min.js",
+  "exports": {
+    ".": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/scrollcraft.umd.min.js",
+      "require": "./dist/core/scrollcraft.umd.min.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/scrollcraft.umd.min.js",
+      "require": "./dist/core/scrollcraft.umd.min.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "require": "./dist/react/index.js",
+      "import": "./dist/react/index.js"
+    },
+    "./cli": "./dist/cli/index.js"
+  },
+  "types": "dist/core/index.d.ts",
+  "bin": {
+    "scft": "dist/cli/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "npm run build:js && npm run build:types && npm run build:cli",
+    "build:js": "webpack --mode production",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:cli": "tsc --project tsconfig.cli.json && node scripts/make-executable.cjs",
+    "dev": "concurrently -n JS,CLI,TYP -c \"blue,yellow,magenta\" \"npm:dev:js\" \"npm:dev:cli\" \"npm:dev:types\"",
+    "dev:js": "webpack --mode development --watch",
+    "dev:cli": "tsc --project tsconfig.cli.json --watch --preserveWatchOutput",
+    "dev:types": "tsc --emitDeclarationOnly --watch --preserveWatchOutput",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/fluent-ffmpeg": "^2.1.28",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "chalk": "^4.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "commander": "^11.1.0",
+    "concurrently": "^8.2.0",
+    "css-loader": "^6.8.0",
+    "style-loader": "^3.3.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.0",
+    "typescript": "^5.3.0",
+    "webpack": "^5.90.0",
+    "webpack-cli": "^5.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aleskozelsky/scrollcraft.git"
+  },
+  "keywords": [
+    "scroll",
+    "animation",
+    "video",
+    "scroll",
+    "image",
+    "sequence",
+    "scroll",
+    "sequence"
+  ],
+  "author": "Ales Kozelsky",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/aleskozelsky/scrollcraft/issues"
+  },
+  "homepage": "https://github.com/aleskozelsky/scrollcraft#readme",
+  "dependencies": {
+    "@fal-ai/client": "^1.9.4",
+    "@types/fs-extra": "^11.0.4",
+    "@types/sharp": "^0.31.1",
+    "dotenv": "^17.3.1",
+    "ffmpeg-static": "^5.3.0",
+    "fluent-ffmpeg": "^2.1.3",
+    "fs-extra": "^11.3.4",
+    "motion": "^12.35.1",
+    "sharp": "^0.34.5"
+  },
+  "directories": {
+    "doc": "docs",
+    "example": "examples"
+  }
+}