layershift 0.4.0 → 0.4.2

package/README.md

@@ -4,40 +4,35 @@
 
 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>
 ```
 
-### `<layershift-portal>` — Logo Depth Portal
+**[Live demo →](https://layershift.io)**
 
-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.
+## Effects
 
-```html
-<script src="https://cdn.layershift.io/layershift.js"></script>
+The `<layershift-effect>` element supports multiple effect types, all driven by the same depth data:
 
-<layershift-portal
-  src="video.mp4"
-  depth-src="depth-data.bin"
-  depth-meta="depth-meta.json"
-  logo-src="logo.svg"
-></layershift-portal>
-```
+- **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
 
-**[Live demo →](https://layershift.io)**
+Effects are configured in the [Layershift Editor](https://layershift.io/editor/) and exported as a `filter-config.json` file.
 
 ---
 
@@ -46,7 +41,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 +52,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 +66,21 @@ Add JSX type support for the custom elements:
 
 ---
 
-## Prerequisites
-
-The `precompute` script needs **FFmpeg** to read video metadata and extract frames.
+## Prepare Your Video
 
-- **macOS:** `brew install ffmpeg`
-- **Windows:** [FFmpeg downloads](https://ffmpeg.org/download.html) or `winget install FFmpeg`
-- **Linux:** `apt install ffmpeg` / `dnf install ffmpeg`
+Use the [Layershift Editor](https://layershift.io/editor/) to:
 
-## Setup
+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
 
-```bash
-npm install
-```
-
-## 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 +111,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 +135,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 |
 |-----------|-------------|
@@ -174,73 +162,9 @@ Each `<layershift-parallax>` instance creates 1 WebGL renderer, 1 Web Worker, 1
 
 ---
 
-## `<layershift-portal>` Reference
-
-### Required Attributes
-
-| Attribute | Type | Description |
-|-----------|------|-------------|
-| `src` | string | Video file URL |
-| `depth-src` | string | Depth binary URL |
-| `depth-meta` | string | Depth metadata URL |
-| `logo-src` | string | SVG file URL for the portal shape |
-
-### Key Optional Attributes
-
-| Attribute | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `parallax-x` | number | 0.4 | Horizontal parallax intensity |
-| `parallax-y` | number | 0.8 | Vertical parallax intensity |
-| `parallax-max` | number | 30 | Max parallax in pixels |
-| `chamfer-width` | number | 0.025 | Chamfer geometry width (0 = no chamfer) |
-| `chamfer-color` | string | #262630 | Chamfer tint color |
-| `chamfer-specular` | number | 0.3 | Chamfer specular highlight |
-| `rim-intensity` | number | 0.6 | Rim light intensity (0 = off) |
-| `rim-color` | string | #ffffff | Rim light color |
-| `light-direction` | string | -0.5,0.7,-0.3 | 3D light direction as "x,y,z" |
-| `autoplay` | boolean | true | Auto-play on mount |
-| `loop` | boolean | true | Loop playback |
-| `muted` | boolean | true | Muted (required for autoplay) |
-
-The portal supports 40+ optional attributes for fine-grained control over the interior scene, chamfer geometry, boundary effects, bevel, volumetric edge wall, and depth-of-field. See `docs/portal/portal-overview.md` for the full reference.
-
-### Transparent Background
-
-The portal canvas is fully transparent outside the logo shape. Overlay it on any background:
-
-```html
-<div style="position: relative; background: #1a1a2e;">
-  <layershift-portal
-    src="video.mp4"
-    depth-src="depth-data.bin"
-    depth-meta="depth-meta.json"
-    logo-src="logo.svg"
-    style="position: absolute; inset: 0;"
-    autoplay loop muted
-  ></layershift-portal>
-</div>
-```
-
-### Events
-
-| Event | Detail | When |
-|-------|--------|------|
-| `layershift-portal:ready` | `{ videoWidth, videoHeight, duration }` | Initialization complete |
-| `layershift-portal:play` | `{ currentTime }` | Video starts playing |
-| `layershift-portal:pause` | `{ currentTime }` | Video pauses |
-| `layershift-portal:loop` | `{ loopCount }` | Video loops back to start |
-| `layershift-portal:frame` | `{ currentTime, frameNumber }` | New video frame presented |
-| `layershift-portal:error` | `{ message }` | Initialization error |
-
-### SVG Requirements
-
-The `logo-src` SVG should use a `viewBox` attribute and contain filled shapes (`<path>`, `<polygon>`, `<rect>`, `<circle>`, `<ellipse>`). Complex SVGs with multiple paths, compound paths, nested groups, and holes (letters A, R, O, etc.) are supported.
-
----
-
 ## Frame-Level Sync
 
-Both effects use `requestVideoFrameCallback` (RVFC) when available to sync depth updates to actual video frame presentation:
+`<layershift-effect>` uses `requestVideoFrameCallback` (RVFC) when available to sync depth updates to actual video frame presentation:
 
 - Depth work only runs when a new frame is decoded (~24–30fps)
 - Parallax input stays smooth at display refresh rate (60–120fps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "layershift",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Embeddable video effects as Web Components. Drop-in parallax, depth-aware motion, and more.",
   "type": "module",
   "main": "dist/components/layershift.js",