Account

Backgrounds

Creative

Radial 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.

Terminal
npx @galactrex/ui add radial-glow

Usage

Example
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.

See plans

Props

PropTypeDefaultDescription
xnumber50Centre across the width, in %.
ynumber0Centre down the height, in %.
sizenumber70Diameter as % of the width.
intensitynumber0.22Strength at the centre, 0 to 1.
pulsebooleantrueA slow breath.
colorstringvar(--gxui-glow)Glow colour.
classNamestring—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.