Typography & motion

Spotlight

Pure-CSS radial gradient that tracks the cursor across a card. Premium hover feel for hero sections, pricing cards, and key call-to-actions.

Spotlight wraps any card with a soft, mouse-following radial highlight. Pure CSS — no canvas, no JS animation loop — so it stays buttery on low-end devices. Use it for hero CTAs and pricing cards where a little extra "this is special" is welcome.

Live preview

Hover me

The light follows your cursor.

And here too

Independent spotlights per card.

Example

tsx

import { Spotlight, GlassCard } from '@kidcash/ui';

<Spotlight>
  <GlassCard variant="strong">
    <h3>Pro plan</h3>
    <p>Unlimited goals, unlimited kids.</p>
  </GlassCard>
</Spotlight>

Want all 27 in one place?

The home playground shows every component side-by-side. Or install @kidcash/ui and use Spotlight in your own app.

← Previous

Marquee

Confetti