layershift 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -80
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -34,21 +34,6 @@ The `<layershift-effect>` element supports multiple effect types, all driven by
|
|
|
34
34
|
|
|
35
35
|
Effects are configured in the [Layershift Editor](https://layershift.io/editor/) and exported as a `filter-config.json` file.
|
|
36
36
|
|
|
37
|
-
### `<layershift-portal>` — Logo Depth Portal
|
|
38
|
-
|
|
39
|
-
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.
|
|
40
|
-
|
|
41
|
-
```html
|
|
42
|
-
<script src="https://unpkg.com/layershift"></script>
|
|
43
|
-
|
|
44
|
-
<layershift-portal
|
|
45
|
-
src="video.mp4"
|
|
46
|
-
depth-src="depth-data.bin"
|
|
47
|
-
depth-meta="depth-meta.json"
|
|
48
|
-
logo-src="logo.svg"
|
|
49
|
-
></layershift-portal>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
37
|
---
|
|
53
38
|
|
|
54
39
|
## Install
|
|
@@ -177,73 +162,9 @@ Each `<layershift-effect>` instance creates 1 WebGL renderer, 1 Web Worker, 1 hi
|
|
|
177
162
|
|
|
178
163
|
---
|
|
179
164
|
|
|
180
|
-
## `<layershift-portal>` Reference
|
|
181
|
-
|
|
182
|
-
### Required Attributes
|
|
183
|
-
|
|
184
|
-
| Attribute | Type | Description |
|
|
185
|
-
|-----------|------|-------------|
|
|
186
|
-
| `src` | string | Video file URL |
|
|
187
|
-
| `depth-src` | string | Depth binary URL |
|
|
188
|
-
| `depth-meta` | string | Depth metadata URL |
|
|
189
|
-
| `logo-src` | string | SVG file URL for the portal shape |
|
|
190
|
-
|
|
191
|
-
### Key Optional Attributes
|
|
192
|
-
|
|
193
|
-
| Attribute | Type | Default | Description |
|
|
194
|
-
|-----------|------|---------|-------------|
|
|
195
|
-
| `parallax-x` | number | 0.4 | Horizontal parallax intensity |
|
|
196
|
-
| `parallax-y` | number | 0.8 | Vertical parallax intensity |
|
|
197
|
-
| `parallax-max` | number | 30 | Max parallax in pixels |
|
|
198
|
-
| `chamfer-width` | number | 0.025 | Chamfer geometry width (0 = no chamfer) |
|
|
199
|
-
| `chamfer-color` | string | #262630 | Chamfer tint color |
|
|
200
|
-
| `chamfer-specular` | number | 0.3 | Chamfer specular highlight |
|
|
201
|
-
| `rim-intensity` | number | 0.6 | Rim light intensity (0 = off) |
|
|
202
|
-
| `rim-color` | string | #ffffff | Rim light color |
|
|
203
|
-
| `light-direction` | string | -0.5,0.7,-0.3 | 3D light direction as "x,y,z" |
|
|
204
|
-
| `autoplay` | boolean | true | Auto-play on mount |
|
|
205
|
-
| `loop` | boolean | true | Loop playback |
|
|
206
|
-
| `muted` | boolean | true | Muted (required for autoplay) |
|
|
207
|
-
|
|
208
|
-
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.
|
|
209
|
-
|
|
210
|
-
### Transparent Background
|
|
211
|
-
|
|
212
|
-
The portal canvas is fully transparent outside the logo shape. Overlay it on any background:
|
|
213
|
-
|
|
214
|
-
```html
|
|
215
|
-
<div style="position: relative; background: #1a1a2e;">
|
|
216
|
-
<layershift-portal
|
|
217
|
-
src="video.mp4"
|
|
218
|
-
depth-src="depth-data.bin"
|
|
219
|
-
depth-meta="depth-meta.json"
|
|
220
|
-
logo-src="logo.svg"
|
|
221
|
-
style="position: absolute; inset: 0;"
|
|
222
|
-
autoplay loop muted
|
|
223
|
-
></layershift-portal>
|
|
224
|
-
</div>
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
### Events
|
|
228
|
-
|
|
229
|
-
| Event | Detail | When |
|
|
230
|
-
|-------|--------|------|
|
|
231
|
-
| `layershift-portal:ready` | `{ videoWidth, videoHeight, duration }` | Initialization complete |
|
|
232
|
-
| `layershift-portal:play` | `{ currentTime }` | Video starts playing |
|
|
233
|
-
| `layershift-portal:pause` | `{ currentTime }` | Video pauses |
|
|
234
|
-
| `layershift-portal:loop` | `{ loopCount }` | Video loops back to start |
|
|
235
|
-
| `layershift-portal:frame` | `{ currentTime, frameNumber }` | New video frame presented |
|
|
236
|
-
| `layershift-portal:error` | `{ message }` | Initialization error |
|
|
237
|
-
|
|
238
|
-
### SVG Requirements
|
|
239
|
-
|
|
240
|
-
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.
|
|
241
|
-
|
|
242
|
-
---
|
|
243
|
-
|
|
244
165
|
## Frame-Level Sync
|
|
245
166
|
|
|
246
|
-
|
|
167
|
+
`<layershift-effect>` uses `requestVideoFrameCallback` (RVFC) when available to sync depth updates to actual video frame presentation:
|
|
247
168
|
|
|
248
169
|
- Depth work only runs when a new frame is decoded (~24–30fps)
|
|
249
170
|
- Parallax input stays smooth at display refresh rate (60–120fps)
|
package/package.json
CHANGED