Media & effects
Spotlight Card
Radial pointer tracking over dark layered surface
detent-spotlight-card
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 4
- Wave
- phase-4-pointer
- Group
- Media & effects
Edge Computing
Deploy globally distributed stateful workloads in 35 regions.
2.8 KB gzip for the class module
Variants
Tighter beam
A narrower radius with a violet inner glow.
Move the pointer over a card: the border beam and the ambient glow follow it, written as two CSS custom properties per pointer sample — no animation frame runs while the pointer is still. This card uses a smaller radius and a different colour than the one above. The paragraph text is readable without any pointer interaction, and both cards use fixed example copy.
Recorded states
hoverrecorded state; no setteridlerecorded state; no setter
Usage
Import
import '/components/spotlight-card/define.js';
// or register it yourself
import { DetentSpotlightCard } from '/components/spotlight-card/spotlight-card.js';Attributes
spotlight-colorspotlight-size
Properties
spotlightColorspotlightSize
Slots
default
Events
No events are recorded for this component.
Example
Runnable example: site/examples/spotlight-card.ts. The snippet below is generated from the catalogued attributes.
<detent-spotlight-card
spotlight-color="rgba(56, 189, 248, 0.08)"
spotlight-size="350"
></detent-spotlight-card>Source
The pinned upstream source for this row:
src/components/ui/SpotlightCard.tsxsha256 9d86686433de…
Native files
The native module and its artifacts:
src/components/spotlight-card/spotlight-card.tssrc/components/spotlight-card/styles.csssrc/components/spotlight-card/define.tsdocs/components/spotlight-card.mdsite/examples/spotlight-card.tstests/browser/spotlight-card.spec.tsevidence/components/spotlight-card.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
spotlight-color | spotlightColor | string | 'rgba(56, 189, 248, 0.08)' | Kebab-case attribute; camelCase property. |
spotlight-size | spotlightSize | number | 350 | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
spotlightColor | string | 'rgba(56, 189, 248, 0.08)' | Property-only: assign from script; not accepted as an attribute. |
spotlightSize | number | 350 | Property-only: assign from script; not accepted as an attribute. |
Events
No custom events are recorded for this component.
Slots
| Slot | Notes |
|---|---|
default | Consumer content; rendered through a slot, never re-created. |
CSS customisation
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- Pointer coordinates clamp to the card box.
- Reduced motion centres the spotlight and removes the fade.
- spotlight-color is validated with CSS.supports and spotlight-size clamps to 0..2000, each warning once on invalid input.
- The idle/hover state vocabulary is pinned here because the row recorded only a state-scope gap.
What it does
A near-black layered card illuminated by two decorative radial layers that track the pointer: a narrow white border beam and a wider ambient inner glow.
Upstream behaviour
- Hardware-accelerated dynamic radial mask
- Dual illumination (border beam + ambient inner glow)
- Near-black layered background preservation
Differences from upstream
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- Pointer coordinates clamp to the card box.
- Reduced motion centres the spotlight and removes the fade.
- spotlight-color is validated with CSS.supports and spotlight-size clamps to 0..2000, each warning once on invalid input.
- The idle/hover state vocabulary is pinned here because the row recorded only a state-scope gap.