@iamahmarfaraz/react-liquid-bg 1.0.0 → 1.0.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 +18 -10
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="./demo.gif" alt="react-liquid-bg demo" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
# @iamahmarfaraz/react-liquid-bg
|
|
2
6
|
|
|
3
7
|
A high-performance WebGL liquid fluid background component for React.
|
|
4
8
|
|
|
5
9
|
Built and maintained by **Ahmar Faraz**.
|
|
6
10
|
|
|
7
|
-
|
|
11
|
+
`@iamahmarfaraz/react-liquid-bg` provides a real-time, GPU-accelerated liquid simulation using WebGL and GLSL shaders.
|
|
8
12
|
It is designed for production React applications where visuals, performance, and clean architecture matter.
|
|
9
13
|
|
|
10
14
|
This is **not** a CSS animation or video background.
|
|
@@ -27,13 +31,13 @@ This is a real fluid simulation running entirely on the GPU.
|
|
|
27
31
|
## Installation
|
|
28
32
|
|
|
29
33
|
```bash
|
|
30
|
-
npm install react-liquid-bg
|
|
34
|
+
npm install @iamahmarfaraz/react-liquid-bg
|
|
31
35
|
```
|
|
32
36
|
|
|
33
37
|
or
|
|
34
38
|
|
|
35
39
|
```bash
|
|
36
|
-
yarn add react-liquid-bg
|
|
40
|
+
yarn add @iamahmarfaraz/react-liquid-bg
|
|
37
41
|
```
|
|
38
42
|
|
|
39
43
|
---
|
|
@@ -41,13 +45,15 @@ yarn add react-liquid-bg
|
|
|
41
45
|
## Basic Usage
|
|
42
46
|
|
|
43
47
|
```jsx
|
|
44
|
-
import LiquidBG from "react-liquid-bg";
|
|
48
|
+
import LiquidBG from "@iamahmarfaraz/react-liquid-bg";
|
|
45
49
|
|
|
46
50
|
function App() {
|
|
47
51
|
return (
|
|
48
52
|
<div className="relative min-h-screen">
|
|
49
53
|
<LiquidBG enabled={true} />
|
|
50
|
-
<div className="relative z-10">
|
|
54
|
+
<div className="relative z-10">
|
|
55
|
+
Your App Content
|
|
56
|
+
</div>
|
|
51
57
|
</div>
|
|
52
58
|
);
|
|
53
59
|
}
|
|
@@ -69,9 +75,12 @@ The simulation starts when `enabled` is true and pauses when false.
|
|
|
69
75
|
|
|
70
76
|
## Props
|
|
71
77
|
|
|
72
|
-
| Prop | Type |
|
|
73
|
-
|
|
74
|
-
| enabled | boolean |
|
|
78
|
+
| Prop | Type | Default | Description |
|
|
79
|
+
|-----|------|---------|-------------|
|
|
80
|
+
| enabled | boolean | true | Starts or pauses the fluid simulation |
|
|
81
|
+
| className | string | "" | Custom class for the canvas |
|
|
82
|
+
| style | object | {} | Inline styles for the canvas |
|
|
83
|
+
| pointerEvents | boolean | true | Enable or disable pointer interaction |
|
|
75
84
|
|
|
76
85
|
---
|
|
77
86
|
|
|
@@ -106,7 +115,6 @@ All heavy computation is done on the GPU for maximum performance.
|
|
|
106
115
|
- Velocity field updates
|
|
107
116
|
- Pressure correction
|
|
108
117
|
- Vorticity and curl
|
|
109
|
-
- Density transport
|
|
110
118
|
|
|
111
119
|
### Rendering Layer
|
|
112
120
|
- Shader-based rendering
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iamahmarfaraz/react-liquid-bg",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "High-performance WebGL liquid fluid background for React",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "vite build"
|
|
34
34
|
}
|
|
35
|
-
}
|
|
35
|
+
}
|