← Back to Gallery
Compact Candy Stat Card
Live Preview
A refined, space-efficient version of the candy-themed dashboard card. This compact variant reduces the overall width to 320px while maintaining the playful aesthetic and interactive animations. It features a soft glassmorphism effect and vibrant pastel accents, making it perfect for dense analytical dashboards or mobile-first interfaces where screen real estate is at a premium.
Features
- Compact 320px width for better layout density
- Playful candy-themed pastel color palette
- Smooth hover scale and rotation effects
- Animated numerical counter on scroll
- Glassmorphism backdrop-filter effect
Uses
- Mobile dashboard summaries
- Sidebar analytics widgets
- E-commerce sales tracking
- Gamified application progress indicators
Benefits
- Saves significant screen real estate
- High visual impact in a small footprint
- Responsive and mobile-friendly by design
- Engaging micro-interactions improve UX
Techniques Used
CSS Backdrop-filter, Flexbox centering, Intersection Observer API, Cubic-bezier transitions, and CSS transforms.
Frequently Asked Questions
How does the animated numerical counter handle decimal precision and rounding when the scroll-trigger activates?
The counter logic utilizes a requestAnimationFrame loop paired with an interpolation function; you can define the 'decimalPlaces' prop to control precision, which internally applies the toFixed() method to the frame-calculated value before rendering it to the DOM.
Can I adjust the backdrop-filter: blur() intensity without breaking the soft pink pastel gradient layering?
Yes, the glassmorphism effect is controlled via the '--glass-blur' CSS variable. By adjusting this value, you can increase the frost effect, though it is recommended to keep the value between 4px and 12px to maintain the visibility of the underlying candy-themed background gradients.
Does the hover-triggered icon rotation utilize a spring-physics library or a standard CSS cubic-bezier transition?
The 'Sugar Rush' component uses a CSS transition with a custom 'cubic-bezier(0.68, -0.6, 0.32, 1.6)' timing function to achieve its signature playful bounce effect, ensuring high performance without the overhead of external JS physics engines.
How is the Quicksand typography optimized to prevent horizontal layout shifting during the numerical increment animation?
To eliminate horizontal jitter as numbers change, the component applies 'font-variant-numeric: tabular-nums' to the Quicksand font stack, ensuring every digit occupies the same horizontal space regardless of its specific glyph width.
Is it possible to trigger the 'Sugar Rush' animation sequence programmatically via a Ref rather than the default Intersection Observer scroll-trigger?
Yes, you can disable the 'autoStart' prop and use the exposed 'playAnimation()' method via a forwarded Ref, allowing you to sync the metric's countdown or count-up with other complex UI state changes or API response events.