Spotlight
Pointer-reactive radial highlight surface for cards, hero blocks, and interactive panels
Pointer tracking
Move across the panel to pull the light toward the cursor.
This is the point of Spotlight: a hover signal that pulls attention toward the active area without adding a shader runtime.
Radius
320px
Blend
Soft focus over dark glass
Motion
Pointer-following highlight
Fallback
Still reads when motion is reduced
Static focus
A centered glow that stays visible without pointer movement.
Use the static variant when a card needs built-in focal contrast before the user even hovers it.
Intensity
52%
Color
Warm editorial pink
Purpose
Demo that reads instantly in screenshots
- Treat the component as presentational unless it exposes interactive affordances, and label any interactive affordances explicitly.
- Keep heading, reading, and focus order aligned with the surrounding content.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Spotlight, Card } from '@dryui/ui';
</script>
<Spotlight intensity={32}>
<Card.Root>
<Card.Content>Hover to pull a radial highlight across the surface.</Card.Content>
</Card.Root>
</Spotlight>Import options
Root package
import { Spotlight } from '@dryui/ui'Per-component subpath
import { Spotlight } from '@dryui/ui/spotlight'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| radius | number | — | 260 | — | — |
| intensity | number | — | 26 | — | — |
| color | string | Semantic color or tone applied to the component. | 'rgba(59 | — | — |
| followPointer | boolean | — | true | — | — |
| blendMode | BlendMode | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |