Backgrounds
CreativeRadial Glow
The simplest way to give a flat section a focal point, optionally breathing.
Install
Included with Creative: needs your API key. Initialize and log in once.
npx @galactrex/ui add radial-glowUsage
import { RadialGlow } from "@/components/galactrex/radial-glow";
<section className="relative overflow-hidden">
<RadialGlow />
<h1 className="relative">New</h1>
</section>Source
Installs to components/galactrex/radial-glow.tsx, with the shared motion primitives beside it.
Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | 50 | Centre across the width, in %. |
y | number | 0 | Centre down the height, in %. |
size | number | 70 | Diameter as % of the width. |
intensity | number | 0.22 | Strength at the centre, 0 to 1. |
pulse | boolean | true | A slow breath. |
color | string | var(--gxui-glow) | Glow colour. |
className | string | — | Extra classes for the outer element. |
Variants
- Top glow. Light from above the fold.
- Still. `pulse={false}` for a fixed glow.
Accessibility
- Decorative only and aria-hidden; never takes pointer events.
Motion and reduced motion
- Scale and opacity only.
- Still offscreen.
- Reduced motion: a fixed glow.