Spotlight
spotlightAdds a theme-aware radial glow behind foreground content.
Usage
Basic usage
The parent container relative, Spotlight is used as the background layer, and the content is superimposed on it with relative z-10. Default top brand glow.
<div className="relative ...">
<Spotlight />
<div className="relative z-10">...content...</div>
</div>Glow position
x/y locates the glow center, intensity adjusts the brightness - the strong glow in the upper left corner is x="20%", increase intensity.
<div className="relative ...">
<Spotlight x="20%" intensity={18} />
<div className="relative z-10">...content...</div>
</div>Semantic Color Glow
color Connect any CSS color/variable, and change it to the success color to create a hero/empty status background for positive feedback.
<div className="relative ...">
<Spotlight color="var(--color-success)" y="50%" size="100%" intensity={16} />
<div className="relative z-10">...content...</div>
</div>Gathering Glow
fade The smaller the glow, the more concentrated it is - it can be used as a partial accent light for pop-up windows/cards in conjunction with the centered position.
<div className="relative ...">
<Spotlight y="50%" size="80%" intensity={20} fade={40} />
<div className="relative z-10">...content...</div>
</div>When to Use
Add a soft radial glow to the Hero/Card (focuses the eye, creates atmosphere). If you want to glow, use this component; if you want to regularize the texture, use DotPattern / GridPattern / StripedPattern.
Import
import { Spotlight } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | var(--color-primary) | Glow color; any CSS color/variable can be passed (such as var(--color-success)) |
| intensity | number | 14 | Center-color percentage used by color-mix; higher values make the glow brighter |
| x | string | "50%" | Glow Center X Position |
| y | string | "0%" | Glow center Y position (top) |
| size | string | "125%" | Glow ellipse size (radial gradient range) |
| fade | number | 55 | The percentage of the position where the background fades out. The smaller the glow, the more concentrated it is |
Inherited from ComponentPropsWithoutRef<"div">.Usage Guidelines
- The internal
absolute inset-0fills the parent and must be placed inside therelative(and usuallyoverflow-hidden) positioning container; the overlay content must berelative z-10to cover the glow. - Customize
colorusing the token variable (var(--color-*), which must be prefixed with--color-) instead of barevar(--primary), otherwise color-mix will not parse it.
Related
DotPattern · GridPattern · StripedPattern · RetroGrid · Ripple · Meteors
Playground
<div className="relative">
<Spotlight intensity={14} fade={55} />
<div className="relative z-10">...content...</div>
</div>