@wave3d/react 0.2.0 → 0.2.1
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 +10 -10
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# @wave3d/react
|
|
2
2
|
|
|
3
|
-
A drop-in
|
|
3
|
+
A drop-in animated **3D gradient wave** for React: the `<Wave3D>` component. Design one in [Wave Studio](https://wave-studio.pages.dev), export the React snippet, paste it here.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
It renders a server-safe `<div>`, then on the client shows a poster and 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/react three # + @types/three for TypeScript
|
|
@@ -20,7 +20,7 @@ import { Wave3D } from "@wave3d/react";
|
|
|
20
20
|
<Wave3D preset="Hero" poster="/wave.png" style={{ width: 480, height: 270 }} />;
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
Server-render your own poster by passing it as a child
|
|
23
|
+
Server-render your own poster by passing it as a child. The shell adopts it:
|
|
24
24
|
|
|
25
25
|
```tsx
|
|
26
26
|
<Wave3D poster="/wave.png">
|
|
@@ -30,14 +30,14 @@ Server-render your own poster by passing it as a child — the shell adopts it:
|
|
|
30
30
|
|
|
31
31
|
## Capture a poster
|
|
32
32
|
|
|
33
|
-
`onReady` hands you the live `WaveRenderer
|
|
33
|
+
`onReady` hands you the live `WaveRenderer`. Capture the current frame to generate the poster that reduced-motion, no-WebGL, and Save-Data visitors see:
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
36
|
<Wave3D
|
|
37
37
|
preset="Hero"
|
|
38
38
|
onReady={async (renderer) => {
|
|
39
39
|
const blob = await renderer.captureImage("image/webp"); // transparent by default
|
|
40
|
-
// host
|
|
40
|
+
// host or cache `blob`, then serve it as the poster
|
|
41
41
|
}}
|
|
42
42
|
/>
|
|
43
43
|
```
|
|
@@ -48,18 +48,18 @@ Server-render your own poster by passing it as a child — the shell adopts it:
|
|
|
48
48
|
| ------------------------ | ----------------------------------------- | --------------------------------------------------------------------------- |
|
|
49
49
|
| `preset` | `string \| () => Partial<StudioConfig>` | a name (lazy-loads the presets chunk) or a function preset (tree-shakeable) |
|
|
50
50
|
| `config` | `Partial<StudioConfig>` | escape hatch, applied last |
|
|
51
|
-
| `poster` | `string` | poster image shown before
|
|
51
|
+
| `poster` | `string` | poster image shown before or instead of WebGL |
|
|
52
52
|
| `lazy` | `boolean` | defer the upgrade until visible |
|
|
53
53
|
| `webgl` | `"auto" \| "force" \| "off"` | force or disable the WebGL upgrade |
|
|
54
54
|
| `respectReducedMotion` | `boolean` | freeze on the poster for reduced-motion users |
|
|
55
55
|
| `onReady` / `onFallback` | `(renderer) => void` / `(reason) => void` | lifecycle callbacks |
|
|
56
|
-
| `className`, `style` |
|
|
56
|
+
| `className`, `style` | | forwarded to the container `<div>` |
|
|
57
57
|
|
|
58
|
-
Plus flat shortcuts mapped onto the first wave
|
|
58
|
+
Plus flat shortcuts mapped onto the first wave and scene: `palette`, `sheen`, `iridescence`, `speed`, `opacity`, `blendMode`, `theme`, `background`, `transparentBackground`, `quality`, `dprMax`, `loopSeconds`, `paused`, and more. Precedence: **default → preset → flat props → `config`**.
|
|
59
59
|
|
|
60
60
|
## Credits
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
Built by [Amir Abushanab](https://github.com/Amir-Abushanab).
|
|
63
63
|
|
|
64
64
|
## License
|
|
65
65
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wave3d/react",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.2.1",
|
|
4
|
+
"description": "Drop-in animated 3D gradient wave for React: the <Wave3D> component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"animation",
|
|
7
7
|
"background",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"access": "public"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@wave3d/core": "^0.2.
|
|
40
|
+
"@wave3d/core": "^0.2.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@types/react": "^19.0.0",
|