gradient-flow
Dynamic flowing gradient background component with multiple animation styles and interactive effects
Pro features
What the Pro version adds to this component.
Multiple Gradient Types
Linear, radial, conic and mesh gradient types
Animation Styles
Flow, morph, pulse, rotate and shift animation modes
Interactive Effects
Dynamic gradient interaction with mouse movement
Blend Modes
8 different layer blend mode support
Noise & Blur
Texture effects and blur filters
Parallax Scroll
Dynamic motion effects with scroll
Full Customization
Scale, opacity, FPS and smooth control
Canvas Optimization
High-performance Canvas API rendering
Installation
Install via CLI
npx @moontra/moonui-cli add gradient-flowUsage
Craft Stunning
Gradient Animations
Dynamic gradient flows with customizable animation styles. Create captivating visual experiences with smooth transitions.
Examples
Dashboard Header with Stats
Analytics dashboard header with mesh gradient and animated performance metrics
Marketing Hero Banner
Product launch hero section with linear gradient flow and compelling CTAs
Feature Announcement Card
New feature showcase with radial gradient and pulse animation
Product Launch Showcase
Product presentation with conic gradient rotation effect
Analytics Dashboard Panel
Interactive analytics card with mesh gradient and mouse interaction
Gradient Types
Linear, radial, conic and mesh gradient types
Animation Styles
Flow, morph, pulse, rotate and shift animation types
Color Palettes
Different color combinations for gradient effects
Blend Modes
The eight blend modes highlighted in Pro features