whisper-money/resources
Víctor Falcón 4d14e4d2f0
feat(ui): add glowing effect to all card components (#170)
## Why

### Problem
Cards across the app lacked visual interactivity. Adding a
cursor-tracking glowing border effect improves the UI polish and makes
the dashboard and other card-heavy pages feel more dynamic.

## What

### Changes
- Install `motion` package (required for the `animate()` call in the
effect)
- Add `GlowingEffect` component at
`resources/js/components/ui/glowing-effect.tsx` — tracks pointer
position and renders an animated conic gradient border that follows the
cursor
- Update the base `Card` primitive to include `<GlowingEffect>` as the
first child with `spread=40`, `proximity=64`, `inactiveZone=0.01`,
`glow=true` — all consumers inherit the effect automatically
- Remove `overflow-hidden` from the net-worth chart's `<Card>` (it was
clipping the effect) and move it to `<CardContent>` where it's actually
needed to contain the chart

## Verification

### Tests
No new logic was introduced — this is a purely visual enhancement to an
existing UI primitive. Existing tests remain unaffected.

### Manual
Move the cursor near and over any card (dashboard stats, account
balances, net worth chart, cashflow, budgets) to see the gradient border
glow follow the cursor.
2026-03-01 10:56:59 +00:00
..
css Add chart color scheme setting (#101) 2026-02-28 12:58:21 +01:00
js feat(ui): add glowing effect to all card components (#170) 2026-03-01 10:56:59 +00:00
views fix(ui): app icon visible on light wallpapers + country select overflow on mobile (#162) 2026-02-28 13:41:41 +00:00