[READ-ONLY] Mirror of https://github.com/flo-bit/text_effect_fluid. cool text fluid effect for your website
flo-bit.dev/text_effect_fluid/
fluid-dynamics
javascript
template
text-effects
update readme
+27
-25
+27
-25
Readme.md
+27
-25
Readme.md
···
1
-
# Text effect: Fluid Simulation
1
+
# Text effect: Fluid Simulation demo
2
2
3
-
3
+
[Live demo](https://flo-bit.github.io/text_effect_fluid/) (currently sometimes breaks on first open, just reload once or twice)
4
+
5
+
[](https://flo-bit.github.io/text_effect_fluid/)
4
6
5
7
Inspired by the current (Jan 2024) version of [the lumalabs homepage](https://lumalabs.ai/) (obviously, their effect looks *way* better, than my quick and dirty version):
6
8
···
15
17
- Add this to your html
16
18
17
19
```html
18
-
<div id="canvasContainer">
19
-
<canvas></canvas>
20
-
<canvas id="maskCanvas"> </canvas>
21
-
</div>
20
+
<div id="canvasContainer">
21
+
<canvas></canvas>
22
+
<canvas id="maskCanvas"> </canvas>
23
+
</div>
22
24
23
-
<script src="./script.js"></script>
25
+
<script src="./script.js"></script>
24
26
```
25
27
26
28
- Add this styling
27
29
28
30
```css
29
-
html,
30
-
body {
31
-
overflow: hidden;
32
-
background-color: #000;
33
-
}
31
+
html,
32
+
body {
33
+
overflow: hidden;
34
+
background-color: #000;
35
+
}
34
36
35
-
body {
36
-
margin: 0;
37
-
}
37
+
body {
38
+
margin: 0;
39
+
}
38
40
39
-
#canvasContainer {
40
-
position: relative;
41
-
width: 100vw;
42
-
height: 100vh;
43
-
}
41
+
#canvasContainer {
42
+
position: relative;
43
+
width: 100vw;
44
+
height: 100vh;
45
+
}
44
46
45
-
canvas {
46
-
width: 100%;
47
-
height: 100%;
48
-
position: absolute;
49
-
}
47
+
canvas {
48
+
width: 100%;
49
+
height: 100%;
50
+
position: absolute;
51
+
}
50
52
```
51
53
52
54