Geometric Patterns
Canvas-based animated geometric patterns background component - Inspired by React Bits
Pro features
What the Pro version adds to this component.
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 @moontra/moonui-cli 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
Hexagonal Grid - Tech Inspired
Pulsing hexagonal patterns with futuristic design
Diamond Matrix - Elegant Design
Morphing diamond patterns with 3D perspective
Circle Flow - Smooth Motion
Shifting circular patterns with soft gradients
Mixed Geometry - Dynamic Blend
Combined patterns with interactive mouse effects
Minimal Squares - Clean Design
Subtle square patterns for minimalist interfaces
Glowing Patterns - Neon Style
High intensity glow effects with vibrant colors