@jayf0x/fluidity-js 0.1.6 β†’ 0.1.7

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.
Files changed (2) hide show
  1. package/README.md +55 -38
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,4 @@
1
- # fluidity-js
2
-
3
- **WebGL fluid simulation for React β€” interactive text and image effects powered by Navier-Stokes.**
1
+ # fluidity-js - πŸ”₯Upgrade your UXπŸ”₯
4
2
 
5
3
  [![npm](https://img.shields.io/npm/v/@jayf0x/fluidity-js)](https://www.npmjs.com/package/@jayf0x/fluidity-js)
6
4
  [![license](https://img.shields.io/npm/l/@jayf0x/fluidity-js)](./LICENSE)
@@ -8,7 +6,7 @@
8
6
 
9
7
  <a href="https://jayf0x.github.io/fluidity">
10
8
  <p align="center" title='Try if you can make this effect.'>
11
- <img align="center" src="assets/preview.png" alt="preview" height="300px"/>
9
+ <img align="center" src="assets/preview.gif" alt="preview" height="300px"/>
12
10
  </p>
13
11
 
14
12
  <p align="center">
@@ -18,49 +16,47 @@
18
16
  </p>
19
17
  </a>
20
18
 
21
- ---
22
-
23
- ## Install
24
-
25
19
  ```bash
26
- npm i @jayf0x/fluidity-js
20
+ bun add @jayf0x/fluidity-js
21
+ yarn install @jayf0x/fluidity-js
22
+ pnpm install @jayf0x/fluidity-js
27
23
  ```
28
24
 
29
- Requires React β‰₯ 17 and WebGL (WebGL2 recommended; WebGL1 supported as fallback).
25
+ > uses latest `WebGPU` πŸ”₯ With WebGL2 or WebGL1 supported as fallback
30
26
 
31
27
  ---
32
28
 
33
- ## Usage
29
+ ## React examples
34
30
 
35
- ### FluidText
31
+ **FluidText:**
36
32
 
37
33
  ```tsx
38
34
  import { FluidText } from '@jayf0x/fluidity-js';
39
35
 
40
- export function Hero() {
36
+ export const FancyHero = () => {
41
37
  return (
42
38
  <div style={{ width: '100%', height: 300 }}>
43
- <FluidText text="hello" fontSize={120} color="#ffffff" />
39
+ <FluidText text="πŸ”₯ SupportsEmoji πŸ”₯" fontSize={120} color="#ffffff" />
44
40
  </div>
45
41
  );
46
- }
42
+ };
47
43
  ```
48
44
 
49
- ### FluidImage
45
+ **FluidImage:**
50
46
 
51
47
  ```tsx
52
48
  import { FluidImage } from '@jayf0x/fluidity-js';
53
49
 
54
50
  export function Cover() {
55
51
  return (
56
- <div style={{ width: '100%', height: '100vh' }}>
52
+ <div className="size-full">
57
53
  <FluidImage src="/hero.jpg" algorithm="aurora" />
58
54
  </div>
59
55
  );
60
56
  }
61
57
  ```
62
58
 
63
- ### Ref API
59
+ **Handle custom events with a ref**
64
60
 
65
61
  ```tsx
66
62
  import { useRef } from 'react';
@@ -68,13 +64,10 @@ import { useRef } from 'react';
68
64
  import { FluidText } from '@jayf0x/fluidity-js';
69
65
 
70
66
  export function Interactive() {
71
- const fluid = useRef<FluidHandle>(null);
72
-
67
+ const fluidRef = useRef<FluidHandle>(null);
73
68
  return (
74
69
  <>
75
- <div style={{ width: '100%', height: 300 }}>
76
- <FluidText ref={fluid} text="fluid" fontSize={120} color="#fff" />
77
- </div>
70
+ <FluidText ref={fluidRef} isMouseEnabled={false} text="Amazing" fontSize={120} color="#fff" />
78
71
  <button onClick={() => fluid.current?.reset()}>Reset</button>
79
72
  <button onClick={() => fluid.current?.updateConfig({ curl: 0.3 })}>Swirl</button>
80
73
  </>
@@ -82,9 +75,7 @@ export function Interactive() {
82
75
  }
83
76
  ```
84
77
 
85
- `FluidHandle` is a global type β€” no import needed.
86
-
87
- More examples β†’ [`demo/src/examples/`](./demo/src/examples/)
78
+ Official examples β†’ [`demo/src/examples/`](./demo/src/examples/)
88
79
 
89
80
  ---
90
81
 
@@ -110,18 +101,19 @@ More examples β†’ [`demo/src/examples/`](./demo/src/examples/)
110
101
 
111
102
  ### Shared props
112
103
 
113
- | Prop | Type | Default |
114
- | ----------------- | ---------------------- | ------------ |
115
- | `config` | `Partial<FluidConfig>` | β€” |
116
- | `preset` | `PresetKey` | β€” |
117
- | `algorithm` | `FluidAlgorithm` | `'standard'` |
118
- | `backgroundColor` | `string` | `'#0a0a0a'` |
119
- | `backgroundSrc` | `string` | β€” |
120
- | `backgroundSize` | `string \| number` | `'cover'` |
121
- | `isMouseEnabled` | `boolean` | `true` |
122
- | `isWorkerEnabled` | `boolean` | `true` |
123
- | `className` | `string` | β€” |
124
- | `style` | `CSSProperties` | β€” |
104
+ | Prop | Type | Default |
105
+ | ----------------- | ---------------------- | ---------------------- |
106
+ | `config` | `Partial<FluidConfig>` | β€” |
107
+ | `preset` | `PresetKey` | β€” |
108
+ | `algorithm` | `FluidAlgorithm` | `'standard'` |
109
+ | `quality` | `FluidQuality` | `{ dpr: 1, sim: 0.5 }` |
110
+ | `backgroundColor` | `string` | `'#0a0a0a'` |
111
+ | `backgroundSrc` | `string` | β€” |
112
+ | `backgroundSize` | `string \| number` | `'cover'` |
113
+ | `isMouseEnabled` | `boolean` | `true` |
114
+ | `isWorkerEnabled` | `boolean` | `true` |
115
+ | `className` | `string` | β€” |
116
+ | `style` | `CSSProperties` | β€” |
125
117
 
126
118
  ---
127
119
 
@@ -142,6 +134,31 @@ More examples β†’ [`demo/src/examples/`](./demo/src/examples/)
142
134
 
143
135
  ---
144
136
 
137
+ ## Quality
138
+
139
+ `quality` controls rendering resolution on two independent axes. Both props are reactive β€” you can adjust them at runtime.
140
+
141
+ | Field | Range | Default | Description |
142
+ | ----- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
143
+ | `dpr` | 0.1 – 1 | `1` | Canvas backing resolution as a fraction of `devicePixelRatio`. `0.5` on a Retina screen renders at 1Γ— instead of 2Γ—, saving ~75% fill rate. |
144
+ | `sim` | 0.1 – 1 | `0.5` | Simulation FBO size as a fraction of canvas size. Lower = cheaper GPU, less fluid detail. |
145
+
146
+ ```tsx
147
+ <FluidText text="hello" quality={{ dpr: 0.75, sim: 0.25 }} />
148
+ ```
149
+
150
+ `dpr` and `sim` are independent β€” you can run a sharp canvas at a coarser simulation:
151
+
152
+ ```tsx
153
+ // Sharp display, cheap simulation
154
+ <FluidImage src="/hero.jpg" quality={{ dpr: 1, sim: 0.2 }} />
155
+
156
+ // Lower display res, full simulation quality
157
+ <FluidImage src="/hero.jpg" quality={{ dpr: 0.5, sim: 1 }} />
158
+ ```
159
+
160
+ ---
161
+
145
162
  ## FluidConfig
146
163
 
147
164
  | Key | Default | Description |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jayf0x/fluidity-js",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "description": "High-performance WebGL fluid simulation for React β€” text and image effects",
5
5
  "type": "module",
6
6
  "module": "./dist/index.js",