@wave3d/element 0.2.0 → 0.2.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 +12 -12
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# @wave3d/element
|
|
2
2
|
|
|
3
|
-
The `<wave-3d>` custom element
|
|
3
|
+
The `<wave-3d>` custom element: a drop-in animated **3D gradient wave** for Vue, Svelte, or plain HTML. Design one in [Wave Studio](https://wave-studio.pages.dev), export the snippet for your framework, paste it in.
|
|
4
4
|
|
|
5
|
-
Poster-first
|
|
5
|
+
Poster-first: it shows a poster immediately, then upgrades to live WebGL only when the browser can run it. It falls back to the poster on no-WebGL, Save-Data, reduced motion, or a lost context, with `three.js` code-split out of the initial load.
|
|
6
6
|
|
|
7
|
-
## Install
|
|
7
|
+
## 📦 Install
|
|
8
8
|
|
|
9
9
|
```sh
|
|
10
10
|
pnpm add @wave3d/element three
|
|
@@ -14,7 +14,7 @@ pnpm add @wave3d/element three
|
|
|
14
14
|
|
|
15
15
|
## Usage
|
|
16
16
|
|
|
17
|
-
Importing the package registers `<wave-3d>`
|
|
17
|
+
Importing the package registers `<wave-3d>` for you:
|
|
18
18
|
|
|
19
19
|
```html
|
|
20
20
|
<script type="module">
|
|
@@ -31,27 +31,27 @@ Importing the package registers `<wave-3d>` automatically:
|
|
|
31
31
|
| `preset` | a built-in preset name (lazy-loads the presets chunk) |
|
|
32
32
|
| `config` | an inline JSON config |
|
|
33
33
|
| `src` | URL to a config JSON to fetch |
|
|
34
|
-
| `poster` | poster image shown before
|
|
35
|
-
| `paused` | pause
|
|
34
|
+
| `poster` | poster image shown before or instead of WebGL |
|
|
35
|
+
| `paused` | pause or resume the animation |
|
|
36
36
|
| `lazy` | defer the upgrade until visible |
|
|
37
37
|
| `webgl` | `auto` \| `force` \| `off` |
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
There's also a `config` **property** (merged last, over the attributes) and a read-only `handle` getter. Precedence: **default → `preset` → `src` → `config` attribute → `config` property**.
|
|
40
40
|
|
|
41
41
|
## Events
|
|
42
42
|
|
|
43
|
-
- `wave3d-ready
|
|
44
|
-
- `wave3d-fallback
|
|
43
|
+
- `wave3d-ready`: `detail` is the live `WaveRenderer`.
|
|
44
|
+
- `wave3d-fallback`: `detail` is the fallback reason.
|
|
45
45
|
|
|
46
46
|
## Capture a poster
|
|
47
47
|
|
|
48
|
-
Grab the live frame
|
|
48
|
+
Grab the live frame once the wave is running, e.g. to generate the poster that reduced-motion, no-WebGL, and Save-Data visitors see:
|
|
49
49
|
|
|
50
50
|
```js
|
|
51
51
|
const wave = document.querySelector("wave-3d");
|
|
52
52
|
wave.addEventListener("wave3d-ready", async () => {
|
|
53
53
|
const blob = await wave.handle.snapshot(); // WebP of the current frame, transparent
|
|
54
|
-
// host
|
|
54
|
+
// host or cache `blob`, then use it as the poster
|
|
55
55
|
});
|
|
56
56
|
```
|
|
57
57
|
|
|
@@ -66,7 +66,7 @@ register("my-wave"); // instead of the default <wave-3d>
|
|
|
66
66
|
|
|
67
67
|
## Credits
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
Built by [Amir Abushanab](https://github.com/Amir-Abushanab).
|
|
70
70
|
|
|
71
71
|
## License
|
|
72
72
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wave3d/element",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.2.2",
|
|
4
|
+
"description": "Drop-in animated 3D gradient wave for Vue, Svelte, or plain HTML: the <wave-3d> custom element",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"background",
|
|
7
7
|
"custom-elements",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"access": "public"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@wave3d/core": "^0.2.
|
|
43
|
+
"@wave3d/core": "^0.2.2"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"@types/three": ">=0.180",
|