import { Component } from '@angular/core';
import { WrSpotlight, WrSpotlightCard } from 'ngwr/bits/spotlight-card';
@Component({ imports: [WrSpotlight, WrSpotlightCard] })
export class MyComponent {}Spotlight Card
A card with a soft highlight that follows the pointer.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
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 (%)
Directive variant ([wrSpotlight])
[wrSpotlight] writes the pointer position to --wr-spotlight-x and -y; paint it with your own gradient.
import { WrSpotlight } from 'ngwr/bits/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%),
// color-mix(in srgb, var(--wr-color-primary) 15%, transparent),
// transparent 60%
// );API
| Name | Description | Type | Default |
|---|---|---|---|
radius | Where the spotlight fades out (% of the gradient). | number | 80 |
spotlightColor | Highlight colour. Unset, it follows the theme. | string | null | null |
[wrSpotlight] | Writes --wr-spotlight-x / -y (in %) on any element. Pair with a gradient in your CSS. | directive | — |
[wrSpotlight].resetX / .resetY | Default coordinates when no pointer is over the host. | string | '50%' |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/bits/spotlight-card's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-spotlight-card-border | var(--wr-border-base) | .wr-spotlight-card |
--wr-spotlight-card-padding | var(--wr-space-xl) | .wr-spotlight-card |
--wr-spotlight-card-radius | var(--wr-border-radius-lg) | .wr-spotlight-card |
--wr-spotlight-color | light-dark(color-mix(in srgb, var(--wr-color-on-surface) 15%, transparent), color-mix(in srgb, var(--wr-color-on-surface) 22%, transparent)) | .wr-spotlight-card |
--wr-spotlight-x | 50% | .wr-spotlight-card |
--wr-spotlight-y | 50% | .wr-spotlight-card |