A composable analytics card whose chart comes alive on hover: the area fills, the trend line brightens, bars cascade up, points pop, a live point pulses, a value chip slides in and a light sheen sweeps across. clsx + tailwind-merge.
- React 19
- React
- TypeScript
Animated Card Chart is a composable analytics card whose visual wakes up on hover: the area fills, the trend line brightens, bars rise in a staggered cascade, data points pop, a live point pulses, a value chip slides in, and a light sheen sweeps across while the whole card lifts. Composable, drop-in API: AnimatedCard / CardVisual / CardBody / CardTitle / CardDescription, plus Visual3 (the chart) with mainColor / secondaryColor to recolor instantly. Self-contained CSS injected once (no Tailwind required); className merging via clsx + tailwind-merge. React 19 + TypeScript, prefers-reduced-motion aware. Original work for Assetzaar.
- Chart
- Analytics
- Card
- Hover
- Data Display
- SVG


