Modern Neumorphic Dashboard — Dynamic Animations
A high-fidelity modern Neumorphic (Soft UI) dashboard featuring a dual-mode color palette (Light/Dark). The aesthetic is defined by subtle drop shadows and inner glows that create a 3D tactile feel, paired with vibrant indigo and emerald accents. It is optimized for SaaS, fintech, and administrative interfaces. Key features include animated stat counters, floating icons, shimmer-effect progress bars, and staggered entrance animations. The typography uses a mix of Satoshi and General Sans for a clean, professional editorial look.
Summary
A sophisticated neumorphic administrative dashboard with a focus on tactile interactivity and dynamic, playful animations. It features a responsive layout with a persistent sidebar, a glass-like header, and a grid of interactive stat cards followed by detailed activity and status modules.
Style
The style is 'Neumorphism 2.0' — using light and shadow to create depth. It uses Satoshi for body text and General Sans for headings. Colors are centered around a soft grey base (#e0e5ec) for light mode and a deep navy (#1e2030) for dark mode. Animations are pervasive, using cubic-bezier(0.34, 1.56, 0.64, 1) for a bouncy, premium feel.
Layout & Structure
The layout uses a 72w sidebar on desktop, a fixed-height sticky header (72px), and a multi-column responsive grid for main content.
Sidebar
Header
Stat Cards Grid
Main Content Grid
Terminal Component
Components
Animated Progress Fills
Progress bars with moving gradient stripes and pulsing glow.
Ripple-Effect Button
A button that generates an expanding radial wave on click.
Floating Stat Icons
Continuous vertical bobbing for stat card visuals.