Account

Chrome

Creative

Edge Glow

Fades out toward its ends with a soft spill into the surface, and draws outward from the middle on arrival.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal
npx @galactrex/ui add edge-glow

Usage

Example
import { EdgeGlow } from "@/components/galactrex/edge-glow";

<div className="relative rounded-xl p-6"><EdgeGlow />…</div>

Source

Installs to components/galactrex/edge-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
edge"top" | "bottom" | "left" | "right""top"Which edge.
spillnumber40Glow spill in px.
colorstring—Any CSS colour; defaults to a theme token.
classNamestring—Extra classes for the outer element.

Variants

  • Panel top. The default modern panel edge.

Accessibility

  • Decorative.

Motion and reduced motion

  • Scale from the middle and a fade on arrival.
  • Reduced motion: present.