scrollcraft 2.0.9 → 2.0.10

package/README.md

@@ -2,7 +2,7 @@
 
 **Transform media into interactive web experiences.**
 
-ScrollCraft is a modern animation SDK built for the era of high-performance, agent-driven development. It allows you to transform standard video or images into web assets that precisely track subjects and depth.
+[ScrollCraft](https://scrollcraft.dev) is a modern animation SDK built for the era of high-performance, agent-driven development. It allows you to transform standard video or images into web assets that precisely track subjects and depth.
 
 ---
 
@@ -18,7 +18,10 @@ npm install scrollcraft
 
 ScrollCraft features a **Universal Asset Pipeline** that runs identical logic in both the **CLI** (Node.js) and the **Browser** (ideal for CMS integrations like WordPress).
 
-### 1. CLI Usage (Node.js)
+### 1. Asset Pipeline
+Asset pipeline is used to transform video or images into ScrollCraft projects. It outputs a folder with optimized variants and a scrollcraft.json file that you point to in your ScrollCraftProvider in step 2. You can use the pipeline in the CLI, browser or node.
+
+#### CLI Usage (Node.js)
 Transform your video into a ScrollCraft project from your terminal:
 
 ```bash
@@ -26,7 +29,7 @@ Transform your video into a ScrollCraft project from your terminal:
 npx scft create "your-video.mp4" --name "my-project" --track "apple" --cloud --depth
 ```
 
-### 2. Programmatic Usage (Browser/Node)
+#### Programmatic Usage (Browser/Node)
 You can also import the pipeline into your own React apps or dashboard:
 
 ```javascript
@@ -46,28 +49,72 @@ const project = await pipeline.create({
 });
 ```
 
----
+### 2. Rendering Integration
+
+All you have to do now, is to drop the scrollcraft.json project into your ScrollCraftProvider.
+
+#### Vanilla JS Integration
+For full implementation, please refer to the [Vanilla JS Example](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/examples/html/index.html).
+
+[Live Demo](https://example-html.scrollcraft.dev) 
+
+```html
+<!-- 2. Drop it into your HTML -->
+<script type="module">
+    import ScrollCraft from 'scrollcraft/core';
+
+    document.addEventListener('DOMContentLoaded', async () => {
+        const orchestrators = await ScrollCraft.CoreOrchestrator.initAll();
+    });
+</script>
+```
+
+
+#### React Integration
+For full implementation, please refer to the [React Integration Example](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/examples/create-next-app/src/app/page.tsx).
+
+[Live Demo](https://example-next.scrollcraft.dev) 
+
 
 ```tsx
 // 2. Drop it into your Next.js app
-import project from './my-project/scrollcraft.json';
-import { ScrollCraftProvider, ScrollCraftCanvas, SubjectLayer } from 'scrollcraft/react';
+import myproject from './example-apple-project/scrollcraft.json';
+import { ScrollCraftProvider, ScrollCraftCanvas, ScrollCraftLayer, ScrollCraftLayerTracking, useScrollCraft } from 'scrollcraft/react';
+
 
 const App = () => (
   <ScrollCraftProvider 
-    project={project} 
-    scrub={0.1} // Smooth interpolation (0 = instant, 1 = 1 second lag)
+    project={myproject} 
   >
-    <div style={{ height: '400vh' }}>
+    <ScrollCraftLayer>
       <ScrollCraftCanvas />
+    </ScrollCraftLayer>
       
-      {/* Automatically follows the 'apple' tracked in the CLI */}
-      <SubjectLayer id="main">
-         <h2>Pinned Element</h2>
-      </SubjectLayer>
-    </div>
+    {/* Automatically follows the 'apple' tracked in the CLI */}
+    <ScrollCraftLayerTracking id="main">
+        <h2>Apple</h2>
+    </ScrollCraftLayerTracking>
+
+    {/* Shows frame number and animates opacity based on scroll progress */}
+    <ScrollCraftLayer align="bottom-left">
+        <AppleInfo />
+    </ScrollCraftLayer>
   </ScrollCraftProvider>
 );
+
+const AppleInfo = () => {
+    const { progress, frame } = useScrollCraft();
+    const opacity = progress > 0.2 && progress < 0.5 ? 1 : 0;
+
+    return (
+        <>
+            <h2 style={{ fontSize: '3rem', margin: 0, color: "white" }}>Green Apple</h2>
+            <p style={{ opacity: 0.7, color: "white" }}>Frame: {frame}</p>
+        </>
+    );
+};
+
+
 ```
 
 ---
@@ -77,13 +124,13 @@ const App = () => (
 Choose your path based on your role:
 
 ### 👤 For Humans
-- [**Core Architecture**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/content/architecture.md): Understand the state-snapshot engine.
-- [**Asset Pipeline**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/content/asset-pipeline.md): Learn how to use the CLI and AI tracking.
-- [**React Hooks**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/content/react-integration.md): Build custom interactive components.
+- [**Core Architecture**](https://docs.scrollcraft.dev/architecture): Understand the state-snapshot engine.
+- [**Asset Pipeline**](https://docs.scrollcraft.dev/asset-pipeline): Learn how to use the CLI and AI tracking.
+- [**React Hooks**](https://docs.scrollcraft.dev/react-integration): Build custom interactive components.
 
 ### 🤖 For AI Agents
 - [**AGENTS.md**](https://github.com/aleskozelsky/scrollcraft/blob/main/AGENTS.md): Technical standard operating procedures for the repository.
-- [**AI Integration Protocol**](https://github.com/aleskozelsky/scrollcraft/blob/main/packages/docs/content/ai-integration.md): How to prompt agents to build scenes for you.
+- [**AI Integration Protocol**](https://docs.scrollcraft.dev/ai-integration): How to prompt agents to build scenes for you.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scrollcraft",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "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",
@@ -74,5 +74,23 @@
   "bugs": {
     "url": "https://github.com/aleskozelsky/scrollcraft/issues"
   },
-  "homepage": "https://github.com/aleskozelsky/scrollcraft#readme"
+  "homepage": "https://github.com/aleskozelsky/scrollcraft#readme",
+  "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",
+    "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",
+    "@types/fs-extra": "^11.0.4",
+    "@types/sharp": "^0.31.1"
+  }
 }