Users are looking for a way to run pure Canvas animations in Next.js without relying on heavy libraries like three.js, which inflate the bundle size. This would help improve performance for landing pages.
Hey guys. I was getting pretty annoyed by how much three.js and other 3D libraries inflate the initial bundle size just to get a decent background animation on landing pages. So I spent some time building a few animated backgrounds using pure math and the native Canvas API inside a simple "use client" component. I made a 3D globe, an isometric grid, and some data waves. They run super smooth and add literally 0 dependencies to the project. I tried posting the direct link to the live demos and the react source code, but the automod keeps deleting my post for self promotion. If anyone wants to copy paste the code for their own projects, just go to my reddit profile and click the link that says Lab. It's all free. Curious if anyone else is dropping heavy 3D libraries for native canvas lately to improve nextjs performance?