Introduction
Overview of Mesh Gradient, key features, motivation, and documentation structure.
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, Vue 3, and SSR-friendly builds
- ✅ New Documentation website with Playground
- ✅ Simplified API with full type definitions
- ✅ Performance-oriented core (resize debounce,
ResizeObserver, pause when off-screen, logical canvas size tied to layout and HiDPI buffer, target FPS, visibility handling, WebGL loss/restore helpers, and more) - ✅ 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 three ways: