layershift 0.5.1 → 0.6.0

package/README.md

@@ -14,7 +14,6 @@ Layershift is a growing collection of visual effects that turn flat video into s
 <layershift-effect
   src="video.mp4"
   depth-src="depth-data.bin"
-  depth-meta="depth-meta.json"
   config="filter-config.json"
 ></layershift-effect>
 ```
@@ -26,11 +25,13 @@ Layershift is a growing collection of visual effects that turn flat video into s
 The `<layershift-effect>` element supports multiple effect types, all driven by the same depth data:
 
 - **Depth Parallax** — per-pixel UV displacement via Parallax Occlusion Mapping
+- **Rack Focus** — animated focus shift between depth layers
 - **Depth Glow** — depth-driven emissive glow
 - **Color Grade** — depth-aware color grading
 - **Fog / Atmosphere** — depth-based atmospheric haze
 - **Tilt Shift** — miniature/diorama lens effect
 - **Pop-Out** — foreground subjects break out of the frame
+- **Freestyle** — custom effect composition with manual channel configuration
 
 Effects are configured in the [Layershift Editor](https://layershift.io/editor/) and exported as a `filter-config.json` file.
 
@@ -75,13 +76,15 @@ Use the [Layershift Editor](https://layershift.io/editor/) to:
 3. Configure your effect with the visual editor
 4. Export a consumer package with all assets + config
 
-The editor produces `depth-data.bin`, `depth-meta.json`, and `filter-config.json` — everything `<layershift-effect>` needs.
+The editor produces `depth-data.bin` and `filter-config.json` — everything `<layershift-effect>` needs.
 
 ## Development
 
 ```bash
 npm install
-npm run dev
+npm run dev          # Landing page dev server (port 5173)
+npm run dev:editor   # Editor dev server (port 5175)
+npm run docs:dev     # Documentation dev server (VitePress)
 ```
 
 ## Build
@@ -95,6 +98,12 @@ npm run build:component
 
 # Build the npm package (ESM + IIFE + types)
 npm run build:package
+
+# Build the editor
+npm run build:editor
+
+# Build documentation
+npm run build:docs
 ```
 
 ## Component Library
@@ -104,7 +113,8 @@ Browse all site UI components with interactive controls and documentation.
 **[View Component Library →](https://layershift.io/storybook/)**
 
 ```bash
-npm run storybook
+npm run storybook        # Dev server (port 6006)
+npm run build:storybook  # Static build
 ```
 
 Components follow atomic design (Atoms → Molecules → Organisms → Templates). Each component includes a story with controls and a colocated test.
@@ -118,15 +128,20 @@ Components follow atomic design (Atoms → Molecules → Organisms → Templates
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `src` | string | — | Video or image URL (required) |
-| `depth-src` | string | — | Depth binary URL (required) |
-| `depth-meta` | string | — | Depth metadata URL (required) |
-| `config` | string | — | Filter config JSON URL |
+| `depth-src` | string | — | Depth binary URL (required unless `depth-model` is set) |
+| `config` | string | — | Filter config JSON URL (authored in the editor) |
+| `depth-width` | number | 512 | Width of depth map frames (pixels) |
+| `depth-height` | number | 512 | Height of depth map frames (pixels) |
+| `depth-fps` | number | 5 | Frame rate of precomputed depth data |
+| `depth-model` | string | — | ONNX model URL for browser-side depth estimation |
+| `source-type` | string | video | Source type: `video`, `image`, `camera` (experimental) |
+| `quality` | string | auto | Quality tier: `auto`, `high`, `medium`, `low` |
+| `gpu-backend` | string | auto | GPU backend: `auto`, `webgpu`, `webgl2` |
 | `parallax-x` | number | 0.4 | Horizontal parallax intensity |
 | `parallax-y` | number | 1.0 | Vertical parallax intensity |
 | `parallax-max` | number | 30 | Max pixel offset for nearest layer |
+| `layers` | number | 5 | Number of parallax layers |
 | `overscan` | number | 0.05 | Extra padding ratio |
-| `quality` | string | auto | Quality tier: `auto`, `high`, `medium`, `low` |
-| `source-type` | string | video | Source type: `video`, `image`, `camera` |
 | `autoplay` | boolean | true | Auto-play on mount |
 | `loop` | boolean | true | Loop playback |
 | `muted` | boolean | true | Muted (required for autoplay) |
@@ -257,6 +272,12 @@ Each `<layershift-effect>` instance creates 1 WebGL renderer, 1 Web Worker, 1 hi
 # Unit tests (Vitest)
 npm test
 
+# Unit tests in watch mode
+npm run test:watch
+
+# Storybook component tests
+npm run test:storybook
+
 # E2E tests (Playwright, requires build first)
 npm run build && npm run build:component && npm run test:e2e