animation Admin Background Animations Demo
A modular, configurable background animation system that adds dynamic visual effects to your admin dashboard. Use the control panel above to switch between different animation types.
info
Note: Your animation preference is automatically saved to localStorage and will persist across sessions.
waves
Wave Lines
SVG waves with particle network using Anime.js for smooth animations
hub
Node Lines
Canvas particle network with connecting lines - clean and technical
circle
Floating Circles
Canvas-based floating and bouncing circles with smooth motion
star
Starfield
3D perspective starfield effect with depth and movement
linear_scale
HUD Lines
Horizontal wavy lines with Anime.js for a futuristic HUD effect
code Implementation Guide
How It Works
- Add container: Include
<div id="admin-background"></div>in your layout - Add select box: Include
<select id="admin-background-select">with animation options - Import module: It's already imported in
admin-static.jsandadmin.ts - Done! The system auto-initializes and remembers user preference
Available Animations
| Animation | Technology | Performance | Best For |
|---|---|---|---|
| wave-lines | SVG + Canvas + Anime.js | Medium | Modern, fluid designs with network |
| node-lines | Canvas | High | Clean network visualization |
| circles | Canvas | High | Clean, minimalist look |
| space | Canvas | High | Dark themes, sci-fi |
| hud | SVG + Anime.js | Medium | Tech/cyberpunk themes |
check_circle
Tip: All animations are optimized for performance and automatically pause when the browser tab is not visible.