I'm trying to figure out the easiest way to make an animated background similar to the one used on VAPI's website. I see that they utilize Lottie, which costs $20 a month, but I'm looking for more budget-friendly alternatives. What approaches do you think would work best for creating a similar effect?
3 Answers
If you're considering the technical side, using a Canvas element with WebGPU or WebGL could work. There’s also Three.js if you want something a bit more advanced. Just keep in mind that while it’s really fun, it might not be the best for maintainability with simpler projects.
You can create Lottie animations for free on certain platforms! But if you want to go a different route, you could easily learn basic CSS animations using keyframes or leverage JavaScript. GreenSock Animation (GSAP) is also another solid option worth exploring.
From what I've seen, they use a bunch of SVGs along with requestAnimationFrame to animate colored blocks on and off. I’d suggest giving it a shot yourself! Building it from scratch could be a fun learning experience, and hey, saving $20 a month isn’t a bad idea either!
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads