@jayf0x/fluidity-js 0.1.4 → 0.1.6
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 +22 -14
- package/dist/globals.d.ts +16 -3
- package/dist/index.js +536 -498
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -6,7 +6,17 @@
|
|
|
6
6
|
[](./LICENSE)
|
|
7
7
|
[](https://bundlephobia.com/package/@jayf0x/fluidity-js)
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<a href="https://jayf0x.github.io/fluidity">
|
|
10
|
+
<p align="center" title='Try if you can make this effect.'>
|
|
11
|
+
<img align="center" src="assets/preview.png" alt="preview" height="300px"/>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<strong>
|
|
16
|
+
Live demo →
|
|
17
|
+
</strong>
|
|
18
|
+
</p>
|
|
19
|
+
</a>
|
|
10
20
|
|
|
11
21
|
---
|
|
12
22
|
|
|
@@ -54,6 +64,7 @@ export function Cover() {
|
|
|
54
64
|
|
|
55
65
|
```tsx
|
|
56
66
|
import { useRef } from 'react';
|
|
67
|
+
|
|
57
68
|
import { FluidText } from '@jayf0x/fluidity-js';
|
|
58
69
|
|
|
59
70
|
export function Interactive() {
|
|
@@ -81,16 +92,13 @@ More examples → [`demo/src/examples/`](./demo/src/examples/)
|
|
|
81
92
|
|
|
82
93
|
### FluidText
|
|
83
94
|
|
|
84
|
-
| Prop
|
|
85
|
-
|
|
|
86
|
-
| `text`
|
|
87
|
-
| `fontSize`
|
|
88
|
-
| `color`
|
|
89
|
-
| `fontFamily`
|
|
90
|
-
| `fontWeight`
|
|
91
|
-
| `textQuality` | `number` | `2` |
|
|
92
|
-
|
|
93
|
-
`textQuality` controls the oversample factor for text rendering. `2` (default) renders at 2× the simulation resolution before upload so edges are antialiased. Set to `1` for the exact simulation resolution; higher values are sharper but use more texture memory.
|
|
95
|
+
| Prop | Type | Default |
|
|
96
|
+
| ------------ | ------------------ | -------------- |
|
|
97
|
+
| `text` | `string` | — |
|
|
98
|
+
| `fontSize` | `number` | `100` |
|
|
99
|
+
| `color` | `string` | `'#ffffff'` |
|
|
100
|
+
| `fontFamily` | `string` | `'sans-serif'` |
|
|
101
|
+
| `fontWeight` | `string \| number` | `900` |
|
|
94
102
|
|
|
95
103
|
### FluidImage
|
|
96
104
|
|
|
@@ -167,11 +175,11 @@ More examples → [`demo/src/examples/`](./demo/src/examples/)
|
|
|
167
175
|
## Presets
|
|
168
176
|
|
|
169
177
|
```tsx
|
|
170
|
-
<FluidText text="
|
|
171
|
-
<FluidText text="
|
|
178
|
+
<FluidText text="Wicked" preset="neon" />
|
|
179
|
+
<FluidText text="Wicked" preset="calm" />
|
|
172
180
|
```
|
|
173
181
|
|
|
174
|
-
Available: `calm` · `
|
|
182
|
+
Available: `calm` · `sand` · `wave` · `neon` · `smoke`
|
|
175
183
|
|
|
176
184
|
`preset` is reactive — changing it re-applies the preset config. Any `config` values you pass override the preset. `algorithm` prop also overrides the preset's algorithm.
|
|
177
185
|
|
package/dist/globals.d.ts
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
type FluidAlgorithm = 'standard' | 'glass' | 'ink' | 'aurora' | 'ripple';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Granular performance/quality controls. Both axes are independent — you can
|
|
7
|
+
* run a sharp display at a coarser simulation, or vice versa.
|
|
8
|
+
* Reactive: changes after mount are applied on the next animation frame.
|
|
9
|
+
*/
|
|
10
|
+
interface FluidQuality {
|
|
11
|
+
/** devicePixelRatio multiplier for canvas backing resolution. Range [0.1, 1]. Default 1 (native). On Retina, 0.5 → 1× pixels (75% less fill). */
|
|
12
|
+
dpr?: number;
|
|
13
|
+
/** Simulation FBO size as a fraction of canvas size. Range [0.1, 1]. Default 0.5 (current behavior). Higher = more fluid detail, more GPU. */
|
|
14
|
+
sim?: number;
|
|
15
|
+
}
|
|
16
|
+
|
|
5
17
|
interface FluidConfig {
|
|
6
18
|
densityDissipation: number;
|
|
7
19
|
velocityDissipation: number;
|
|
@@ -18,12 +30,12 @@ interface FluidConfig {
|
|
|
18
30
|
warpStrength: number;
|
|
19
31
|
}
|
|
20
32
|
|
|
21
|
-
type PresetKey = 'calm' | '
|
|
33
|
+
type PresetKey = 'calm' | 'sand' | 'wave' | 'neon' | 'smoke';
|
|
22
34
|
|
|
23
35
|
interface FluidHandle {
|
|
24
36
|
reset(): void;
|
|
25
|
-
move(
|
|
26
|
-
splat(x: number, y: number,
|
|
37
|
+
move(x: number, y: number, strength?: number): void;
|
|
38
|
+
splat(x: number, y: number, velocityX: number, velocityY: number, strength?: number): void;
|
|
27
39
|
updateConfig(config: Partial<FluidConfig>): void;
|
|
28
40
|
}
|
|
29
41
|
|
|
@@ -33,6 +45,7 @@ interface FluidBaseProps {
|
|
|
33
45
|
config?: Partial<FluidConfig>;
|
|
34
46
|
isMouseEnabled?: boolean;
|
|
35
47
|
isWorkerEnabled?: boolean;
|
|
48
|
+
quality?: FluidQuality;
|
|
36
49
|
preset?: PresetKey;
|
|
37
50
|
algorithm?: FluidAlgorithm;
|
|
38
51
|
backgroundColor?: string;
|