layershift 0.3.0 → 0.4.1

package/README.md

@@ -4,30 +4,42 @@
 
 Embeddable video effects as Web Components. One script tag, one custom element — works in plain HTML, React, Vue, Svelte, Angular, WordPress, and anywhere else.
 
-Layershift is a growing collection of visual effects that turn flat video into something interactive. Each effect ships as its own custom element under the `layershift-*` namespace.
+Layershift is a growing collection of visual effects that turn flat video into something interactive. Effects are configured via a `filter-config.json` file authored in the [Layershift Editor](https://layershift.io/editor/).
 
-## Effects
-
-### `<layershift-parallax>` — Depth-Aware Parallax Video
-
-A precomputed depth map drives per-pixel UV displacement with Parallax Occlusion Mapping (POM), so near objects move more than far objects — creating a convincing 3D effect from a single 2D video.
+## Quick Start
 
 ```html
-<script src="https://cdn.layershift.io/layershift.js"></script>
+<script src="https://unpkg.com/layershift"></script>
 
-<layershift-parallax
+<layershift-effect
   src="video.mp4"
   depth-src="depth-data.bin"
   depth-meta="depth-meta.json"
-></layershift-parallax>
+  config="filter-config.json"
+></layershift-effect>
 ```
 
+**[Live demo →](https://layershift.io)**
+
+## Effects
+
+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
+- **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
+
+Effects are configured in the [Layershift Editor](https://layershift.io/editor/) and exported as a `filter-config.json` file.
+
 ### `<layershift-portal>` — Logo Depth Portal
 
 Renders video through an SVG-shaped cutout with depth-aware parallax, emissive interior compositing, geometric chamfer lighting, and dimensional boundary effects. The canvas background is fully transparent, so the portal can be overlaid on any HTML content.
 
 ```html
-<script src="https://cdn.layershift.io/layershift.js"></script>
+<script src="https://unpkg.com/layershift"></script>
 
 <layershift-portal
   src="video.mp4"
@@ -37,8 +49,6 @@ Renders video through an SVG-shaped cutout with depth-aware parallax, emissive i
 ></layershift-portal>
 ```
 
-**[Live demo →](https://layershift.io)**
-
 ---
 
 ## Install
@@ -46,7 +56,7 @@ Renders video through an SVG-shaped cutout with depth-aware parallax, emissive i
 ### Script Tag (IIFE)
 
 ```html
-<script src="https://cdn.layershift.io/layershift.js"></script>
+<script src="https://unpkg.com/layershift"></script>
 ```
 
 ### npm
@@ -57,7 +67,7 @@ npm install layershift
 
 ```js
 import 'layershift';
-// Both <layershift-parallax> and <layershift-portal> are now registered
+// <layershift-effect> and <layershift-portal> are now registered
 ```
 
 ### TypeScript
@@ -71,31 +81,21 @@ Add JSX type support for the custom elements:
 
 ---
 
-## Prerequisites
-
-The `precompute` script needs **FFmpeg** to read video metadata and extract frames.
-
-- **macOS:** `brew install ffmpeg`
-- **Windows:** [FFmpeg downloads](https://ffmpeg.org/download.html) or `winget install FFmpeg`
-- **Linux:** `apt install ffmpeg` / `dnf install ffmpeg`
+## Prepare Your Video
 
-## Setup
+Use the [Layershift Editor](https://layershift.io/editor/) to:
 
-```bash
-npm install
-```
+1. Import a video or image
+2. Run browser-based depth estimation (no CLI needed)
+3. Configure your effect with the visual editor
+4. Export a consumer package with all assets + config
 
-## Precompute Depth Data
-
-```bash
-npm run precompute
-```
-
-Generates `depth-data.bin` and `depth-meta.json` from a video using Depth Anything v2.
+The editor produces `depth-data.bin`, `depth-meta.json`, and `filter-config.json` — everything `<layershift-effect>` needs.
 
 ## Development
 
 ```bash
+npm install
 npm run dev
 ```
 
@@ -126,19 +126,22 @@ Components follow atomic design (Atoms → Molecules → Organisms → Templates
 
 ---
 
-## `<layershift-parallax>` Reference
+## `<layershift-effect>` Reference
 
 ### Configuration
 
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
-| `src` | string | — | Video file URL (required) |
+| `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 |
 | `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 |
 | `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) |
@@ -147,24 +150,24 @@ Components follow atomic design (Atoms → Molecules → Organisms → Templates
 
 | Event | Detail | When |
 |-------|--------|------|
-| `layershift-parallax:ready` | `{ videoWidth, videoHeight, duration }` | Initialization complete |
-| `layershift-parallax:play` | `{ currentTime }` | Video starts playing |
-| `layershift-parallax:pause` | `{ currentTime }` | Video pauses |
-| `layershift-parallax:loop` | `{ loopCount }` | Video loops back to start |
-| `layershift-parallax:frame` | `{ currentTime, frameNumber }` | New video frame presented |
-| `layershift-parallax:error` | `{ message }` | Initialization error |
+| `layershift-effect:ready` | `{ videoWidth, videoHeight, duration }` | Initialization complete |
+| `layershift-effect:play` | `{ currentTime }` | Video starts playing |
+| `layershift-effect:pause` | `{ currentTime }` | Video pauses |
+| `layershift-effect:loop` | `{ loopCount }` | Video loops back to start |
+| `layershift-effect:frame` | `{ currentTime, frameNumber }` | New video frame presented |
+| `layershift-effect:error` | `{ message }` | Initialization error |
 
 ```js
-const el = document.querySelector('layershift-parallax');
+const el = document.querySelector('layershift-effect');
 
-el.addEventListener('layershift-parallax:ready', (e) => {
+el.addEventListener('layershift-effect:ready', (e) => {
   console.log(`Video: ${e.detail.videoWidth}x${e.detail.videoHeight}`);
 });
 ```
 
 ### Performance
 
-Each `<layershift-parallax>` 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 Web Worker, 1 hidden `<video>` element, and 2 GPU textures (1 draw call per frame). The bilateral filter runs entirely off the main thread.
 
 | Instances | Suitability |
 |-----------|-------------|