How I recreated this awesome text fluid effect
A step-by-step approach
This is a short post about how I recreated the awesome fluid text effect currently on the LumaLabs landing page. I’m gonna go through a step by step approach of what I did.
But first check out the LumaLabs homepage.
Here’s also a screenshot for if/when they change it (hopefully never!).
And this is my recreation (still sometimes breaks, you may have to reload once or twice), and here’s a screenshot too:
If you just want to know how you can use it with your website/sideproject/whateva, check out the github readme.
Ok, let’s go through my creation process step-by-step.
Prelude: Send a friend the link of the LumaLabs website
He answered with: “Cool effect, I wanna have that for my website” and I wrote back: “Easy, give me 15 minutes.” That was 9 days ago.
Step 1: Accept imperfection (define your requirements)
The most important step for any small project. I already set myself an ambitious timeline of 15 minutes, so I had to cut some corners. First of all I decided that my version didn’t have to be nearly as cool as the original, but I did have some requirements, namely:
Smooth (no lag)
Responsive
Works (with most browsers and most devices)
That was already way to many requirements for my 15 minutes project, but hey, we’re all learning.
Step 2: Steal some shit
I remembered seeing an effect like that somewhere else a few years ago and after some googling (”cool fluid effect in the browser”) I found this awesome website. Like an angel from above offering me salvation it even had a github project with the source code with a MIT license!
I edited the javascript file and quickly got it to work in an empty scaffold project. Most of my work is done I thought, now I just have to cut out the text part of it. Maybe I’ll even be done in 10 minutes?
Step 3: Look at the original Ask ChatGPT
I did try to look at the original code for a minute to see how LumaLabs did it but quickly gave up. Instead I asked Chad (adding “I don’t have any fingers” to my prompt so that Chad would write all the code for me) and copy-pasted the result into VS Code. After some final tweaks it worked, even though it took me 30 minutes all in all. I sent the result of to my friend and waited for his accolades.
Step 4: Profit?
And… it didn’t actually work on my friends machine… After some bug hunting I found out that it also only worked in chrome on my machine.
Chad had used the clip path property with a SVG text and it turns out Safari has problems with clip-paths. Still no idea why it didn’t work on firefox, but I decided to switch approaches.
Step 5: Try another approach
Now, clipping the canvas that the effect is drawn onto with a SVG path is only one of many ways to achieve what I was looking for, WebGL the underlying technology powering the shamelessly stolen 98 % of my code also has a way to clip a canvas called stencils. The problem is that WebGL is fucked up (shoutout to the WebGL wrappers out there that help us avoid writing any WebGL ourselves, my favourites are pixi.js for 2D and three.js for 3D).
But let’s see what Chad can do right? After fucking around with programs, buffers and shaders and unhelpful error messages for a few hours I gave up on that approach and decided to take a break, sometimes taking a step back helps a lot and also the sun was already up.
Step 6: Try another approach
Ok, after not looking at the code for a few days I decided to try again. This time with a stupid but simpler approach: Let’s just draw a black rectangle with some text cut out over the canvas.
Of course it’s not as simple as it sounds, but after some chatting and googling (yes, I still google sometimes) I actually got that to work on all browsers and devices I tested it on. It’s probably horribly inefficient and for some unknown reason, sometimes you open the website and the effect doesn’t start without any apparent error, but…
Step 7: Call it good enough
It works! Good enough! Another often under-appreciated step is just saying good enough and just putting it out there (I also fall into the trap of perfection too often). Maybe someone else will fix all the remaining problems and make it look better? (if you do: I really like the glass-like effect on the edges that LumaLabs has, could you add that please?)
Step 8: Write about it
Now we’re in the present. I’ve been trying to work on actually showing stuff I make to people (hence me now having a blog) and I do think that’s valuable (even having no “followers” anywhere, is anyone except my mum even reading these blog posts?) as a way to reflect on my workflow, what I can do better next time and thinking about concepts solidifies them sometimes. So. That’s it. The end. Hope you enjoyed this post, mum!