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.

Example

tsx

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

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

Try it live

← Back to the playground to see Spotlight rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.

← Previous

Marquee

Confetti