Spotlight Card

Angular adaptation of an effect by David Haz / reactbits.dev.

import { WrSpotlightCard } from 'ngwr/spotlight-card';

Cursor-tracked spotlight

Move the pointer across this card.

<wr-spotlight-card>
  <h3>Cursor-tracked spotlight</h3>
  <p>Move the pointer across this card.</p>
</wr-spotlight-card>

Customize

Spotlight Color

Radius (%)

80 %

// Directive variant — same package, drops on any element.
import { WrSpotlight } from 'ngwr/spotlight-card';

<div wrSpotlight class="card">…</div>

// Then in your CSS:
// background: radial-gradient(
//   400px circle at var(--wr-spotlight-x, 50%) var(--wr-spotlight-y, 50%),
//   rgba(var(--wr-color-primary-rgb), 0.15),
//   transparent 60%
// );

Hover me — [wrSpotlight] writes CSS vars; the gradient does the rest.

Name	Description	Type	Default
`radius`	Where the spotlight fades out (% of the gradient).	`number`	`80`
`spotlightColor`	Highlight colour on `<wr-spotlight-card>`. Any CSS colour string.	`string`	`theme-aware (dark glow on light surfaces, light glow on dark)`
`[wrSpotlight]`	Directive variant — writes `--wr-spotlight-x/y` (in `%`) to any host based on pointer position. Pair with a radial-gradient/mask in your CSS.	`directive`	`—`
`[wrSpotlight].resetX / .resetY`	Default coordinates when no pointer is over the host.	`string`	`'50%'`

Import

Playground

Cursor-tracked spotlight

Customize

Directive variant ([wrSpotlight])

API