layershift 0.6.0 → 0.8.0

package/README.md

@@ -13,7 +13,7 @@ Layershift is a growing collection of visual effects that turn flat video into s
 
 <layershift-effect
   src="video.mp4"
-  depth-src="depth-data.bin"
+  map-src="video.lsb"
   config="filter-config.json"
 ></layershift-effect>
 ```
@@ -24,9 +24,9 @@ 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
+- **Parallax** — per-pixel UV displacement via Parallax Occlusion Mapping
 - **Rack Focus** — animated focus shift between depth layers
-- **Depth Glow** — depth-driven emissive glow
+- **Glow** — depth-driven emissive glow
 - **Color Grade** — depth-aware color grading
 - **Fog / Atmosphere** — depth-based atmospheric haze
 - **Tilt Shift** — miniature/diorama lens effect
@@ -76,7 +76,7 @@ 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` and `filter-config.json` — everything `<layershift-effect>` needs.
+The editor produces `video.lsb` and `filter-config.json` — everything `<layershift-effect>` needs.
 
 ## Development
 
@@ -128,11 +128,11 @@ 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 unless `depth-model` is set) |
+| `map-src` | string | — | Depth map URL — `.lsb` file in LSFT format (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 |
+| `map-width` | number | 512 | Width of depth map frames (optional — read from `.lsb` header) |
+| `map-height` | number | 512 | Height of depth map frames (optional — read from `.lsb` header) |
+| `map-fps` | number | 5 | Frame rate of precomputed depth data (optional — read from `.lsb` header) |
 | `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` |
@@ -245,7 +245,7 @@ const cleanup = connectPointer(el as HTMLElement & { input: EffectInput }, {
 
 ### Performance
 
-Each `<layershift-effect>` instance creates 1 WebGL renderer, 1 Web Worker, 1 hidden `<video>` element, and 2 GPU textures (1 draw call per frame). The bilateral filter runs entirely off the main thread.
+Each `<layershift-effect>` instance creates 1 WebGL renderer, 1 hidden `<video>` element, and 2 GPU textures (1 draw call per frame). The bilateral filter runs as a GPU shader pass.
 
 | Instances | Suitability |
 |-----------|-------------|
@@ -255,6 +255,15 @@ Each `<layershift-effect>` instance creates 1 WebGL renderer, 1 Web Worker, 1 hi
 
 ---
 
+## Depth Data
+
+Effects are driven by per-frame depth maps stored in `.lsb` files (LSFT binary format):
+
+- **Precomputed** — generated by the [Layershift Editor](https://layershift.io/editor/) or the [precompute CLI](https://github.com/jeremysykes/layershift-precompute-cli). Depth data is u8+deflate compressed (~0.5–2.7 MB per file). Dimensions, FPS, and frame count are embedded in the file header.
+- **Browser estimation** — on-device ML inference via the `depth-model` attribute. No preprocessing needed.
+
+---
+
 ## Frame-Level Sync
 
 `<layershift-effect>` uses `requestVideoFrameCallback` (RVFC) when available to sync depth updates to actual video frame presentation: