@jayf0x/fluidity-js 0.1.7 → 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 +29 -23
- package/dist/globals.d.ts +4 -0
- package/dist/index.js +1410 -515
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -4,72 +4,77 @@
|
|
|
4
4
|
[](./LICENSE)
|
|
5
5
|
[](https://bundlephobia.com/package/@jayf0x/fluidity-js)
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
<p align="center" title='Try if you can make this effect.'>
|
|
9
|
-
<img align="center" src="assets/preview.gif" alt="preview" height="300px"/>
|
|
10
|
-
</p>
|
|
11
|
-
|
|
7
|
+
<a href="https://jayf0x.github.io/fluidity">
|
|
12
8
|
<p align="center">
|
|
13
|
-
<
|
|
14
|
-
Live demo →
|
|
15
|
-
</strong>
|
|
9
|
+
<img src="assets/preview.gif" alt="preview" height="300px"/>
|
|
16
10
|
</p>
|
|
11
|
+
<p align="center"><strong>Live demo →</strong></p>
|
|
17
12
|
</a>
|
|
18
13
|
|
|
19
14
|
```bash
|
|
20
15
|
bun add @jayf0x/fluidity-js
|
|
21
|
-
|
|
22
|
-
pnpm install @jayf0x/fluidity-js
|
|
16
|
+
# or: npm install / yarn add / pnpm add
|
|
23
17
|
```
|
|
24
18
|
|
|
25
|
-
>
|
|
19
|
+
> **WebGPU-first** 🔥 — falls back automatically to WebGL2 / WebGL1.
|
|
26
20
|
|
|
27
21
|
---
|
|
28
22
|
|
|
29
23
|
## React examples
|
|
30
24
|
|
|
31
|
-
**
|
|
25
|
+
**Hero text that moves with your cursor:**
|
|
32
26
|
|
|
33
27
|
```tsx
|
|
34
28
|
import { FluidText } from '@jayf0x/fluidity-js';
|
|
35
29
|
|
|
36
|
-
export
|
|
30
|
+
export function Hero() {
|
|
37
31
|
return (
|
|
38
|
-
<div style={{ width: '100%', height:
|
|
39
|
-
<FluidText text="
|
|
32
|
+
<div style={{ width: '100%', height: 400 }}>
|
|
33
|
+
<FluidText text="Hello World" fontSize={140} color="#ffffff" />
|
|
40
34
|
</div>
|
|
41
35
|
);
|
|
42
|
-
}
|
|
36
|
+
}
|
|
43
37
|
```
|
|
44
38
|
|
|
45
|
-
**
|
|
39
|
+
**Full-bleed image cover — one line to make it alive:**
|
|
46
40
|
|
|
47
41
|
```tsx
|
|
48
42
|
import { FluidImage } from '@jayf0x/fluidity-js';
|
|
49
43
|
|
|
50
44
|
export function Cover() {
|
|
51
45
|
return (
|
|
52
|
-
<div
|
|
46
|
+
<div style={{ width: '100%', height: '100vh' }}>
|
|
53
47
|
<FluidImage src="/hero.jpg" algorithm="aurora" />
|
|
54
48
|
</div>
|
|
55
49
|
);
|
|
56
50
|
}
|
|
57
51
|
```
|
|
58
52
|
|
|
59
|
-
**
|
|
53
|
+
**Go further — presets, algorithms, live config:**
|
|
60
54
|
|
|
61
55
|
```tsx
|
|
62
|
-
|
|
56
|
+
<FluidText text="Wicked" preset="neon" algorithm="glass" />
|
|
57
|
+
<FluidImage src="/poster.jpg" algorithm="ripple" config={{ curl: 0.4, splatRadius: 0.008 }} />
|
|
58
|
+
<FluidText text="Chill" preset="calm" quality={{ dpr: 1, sim: 0.75 }} />
|
|
59
|
+
```
|
|
63
60
|
|
|
61
|
+
**Trigger effects programmatically:**
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { useRef } from 'react';
|
|
64
65
|
import { FluidText } from '@jayf0x/fluidity-js';
|
|
65
66
|
|
|
66
67
|
export function Interactive() {
|
|
67
|
-
const
|
|
68
|
+
const fluid = useRef<FluidHandle>(null);
|
|
69
|
+
|
|
68
70
|
return (
|
|
69
71
|
<>
|
|
70
|
-
<
|
|
72
|
+
<div style={{ width: '100%', height: 400 }}>
|
|
73
|
+
<FluidText ref={fluid} text="Touch me" fontSize={120} color="#fff" />
|
|
74
|
+
</div>
|
|
75
|
+
<button onClick={() => fluid.current?.splat(200, 200, 8, -4)}>Splat</button>
|
|
76
|
+
<button onClick={() => fluid.current?.updateConfig({ curl: 0.5 })}>Swirl</button>
|
|
71
77
|
<button onClick={() => fluid.current?.reset()}>Reset</button>
|
|
72
|
-
<button onClick={() => fluid.current?.updateConfig({ curl: 0.3 })}>Swirl</button>
|
|
73
78
|
</>
|
|
74
79
|
);
|
|
75
80
|
}
|
|
@@ -112,6 +117,7 @@ Official examples → [`demo/src/examples/`](./demo/src/examples/)
|
|
|
112
117
|
| `backgroundSize` | `string \| number` | `'cover'` |
|
|
113
118
|
| `isMouseEnabled` | `boolean` | `true` |
|
|
114
119
|
| `isWorkerEnabled` | `boolean` | `true` |
|
|
120
|
+
| `useWebGPU` | `boolean` | `true` |
|
|
115
121
|
| `className` | `string` | — |
|
|
116
122
|
| `style` | `CSSProperties` | — |
|
|
117
123
|
|
package/dist/globals.d.ts
CHANGED
|
@@ -40,7 +40,9 @@ interface FluidHandle {
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
interface FluidBaseProps {
|
|
43
|
+
/** Will apply to canvas container */
|
|
43
44
|
className?: string;
|
|
45
|
+
/** Will apply to canvas container */
|
|
44
46
|
style?: React.CSSProperties;
|
|
45
47
|
config?: Partial<FluidConfig>;
|
|
46
48
|
isMouseEnabled?: boolean;
|
|
@@ -51,6 +53,8 @@ interface FluidBaseProps {
|
|
|
51
53
|
backgroundColor?: string;
|
|
52
54
|
backgroundSrc?: string;
|
|
53
55
|
backgroundSize?: string | number;
|
|
56
|
+
/** enabled greater performance, but not every browser supports it */
|
|
57
|
+
useWebGPU?: boolean;
|
|
54
58
|
}
|
|
55
59
|
|
|
56
60
|
interface FluidTextProps extends FluidBaseProps {
|