All Features
Security
UI/UX
System
Content
Business
Marketing
✨
Admin SettingsUI/UX
Canvas Animations
Three.js WebGL backgrounds that respond to your theme
Overview
Stunning background animations using Three.js. Six animation types: particles, waves, cubes, stars, geometric, and network. Per-page configuration with theme-aware color adaptation.
Design Considerations
UX patterns and visual design notes for this feature:
- •Animations should enhance, never distract
- •Performance matters: test on mobile devices
- •Subtle opacity (0.2-0.4) keeps focus on content
- •Disable on admin pages for productivity
Key Benefits
What makes this feature stand out:
- ✓6 unique animation types
- ✓Per-page customization
- ✓Theme-aware (auto color switching)
- ✓WebGL hardware acceleration
Technical Note
CanvasAnimationsHelper renders Three.js canvas. Configure per-route in params['canvasAnimations']['pages']. Respects prefers-reduced-motion.
Helpers
CanvasAnimationsHelperConfiguration
Config Relationship Legend
⚙ DB overrides params.php🔗 DB related setting📋 DB stores value only
params.php Configuration
Config path: params['canvasAnimations']
params['canvasAnimations']['enabled'] => trueparams['canvasAnimations']['default']['threeJS']['animation'] => 'cubes'params['canvasAnimations']['pages']['site/index']['threeJS']['animation'] => 'particles'params['canvasAnimations']['pages']['site/about']['threeJS']['animation'] => 'waves'params['canvasAnimations']['patterns']['admin/*']['enabled'] => falseNote: Animations are params.php only - no DB settings. Use pages array for per-route config, patterns for wildcards.