Introduction
Mesh Gradient is a library for creating stunning animated gradient effects.
Key Features
Highly Customizable - Control colors, animation speed, frequency, and appearance with extensive configuration options.
Smooth Transitions - Built-in fade transitions between gradient configurations with customizable duration.
High Performance - Hardware-accelerated WebGL rendering with optimized frame skipping and auto-pause when out of viewport.
Zero Dependencies - Lightweight core library (~8kb gzipped) with no external dependencies.
Motivation
In 2021 @jordienr and @ndom91 have uploaded to GitHub gist a Stripe landing page gradient effect . They have also created a Whatamesh website to showcase this beautiful package.
However, the tool was one large file written in JavaScript, had unreadable code and structure, unused event listeners and pretty weird type definitions.
I decided to make it more readable and maintainable.
Key changes
- ✅ Rewritten the tool from scratch in
TypeScript - ✅ Integration with React and SSR
- ✅ New Documentation website with Playground
- ✅ Simplified API with full type definitions
- ✅ Performance optimizations in core library (resize debounce, pause on out of viewport, removed unused event listeners, size for rendering context kept in sync with canvas size instead of
windowsize, etc.) - ✅ A lot of new features and improvements in core library (animation speed, randomly generated colors and seeds, smooth appearance, fade transition between 2 gradients out of the box, etc.)
- ✅ Extended configuration for the tool
How to use it?
You can start using Mesh Gradient in your project in 2 ways: