Geometric Patterns
Canvas-based animated geometric patterns background component - Inspired by React Bits
Pro Features
Unlock advanced capabilities with the Pro version
Multiple Geometric Shapes
Triangle, hexagon, square, diamond, circle, and mixed pattern support
Animation Types
Rotate, pulse, shift, morph animation options
Color Palettes
Customizable color combinations and gradient support
3D Perspective
Advanced 3D visual experience with depth effects
Glow Effects
Adjustable glow and light effects
Interactive Mode
Dynamic pattern interaction with mouse movement
Fill Styles
Solid, gradient, outline, and dotted fill options
Performance Control
FPS limiting and density optimization
Canvas Optimization
High-performance Canvas API with smooth rendering
Real-time
Instant animation and interaction updates
Installation
Install via CLI
npx moonui-cli@latest add geometric-patternsUsage
Geometric PatternsDynamic Background Effects
High-performance canvas animations with multiple patterns, interactive effects, and smooth transitions
Examples
Classic Triangles - Rotating Beauty
Smooth rotating triangular patterns with gradient colors
Classic Triangles
Rotating geometric beauty with gradient fills
Hexagonal Grid - Tech Inspired
Pulsing hexagonal patterns with futuristic design
Hexagonal Grid
Tech-inspired pulsing animation
Diamond Matrix - Elegant Design
Morphing diamond patterns with 3D perspective
Diamond Matrix
3D morphing animation with depth
Circle Flow - Smooth Motion
Shifting circular patterns with soft gradients
Circle Flow
Smooth shifting animation with radial gradients
Mixed Geometry - Dynamic Blend
Combined patterns with interactive mouse effects
Mixed Geometry
Move your mouse for interactive effects
Minimal Squares - Clean Design
Subtle square patterns for minimalist interfaces
Minimal Squares
Clean static design for professional layouts
Glowing Patterns - Neon Style
High intensity glow effects with vibrant colors
Glowing Patterns
Neon-style illumination with maximum glow