Chrome
CreativeEdge 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.
npx @galactrex/ui add edge-glowUsage
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
edge | "top" | "bottom" | "left" | "right" | "top" | Which edge. |
spill | number | 40 | Glow spill in px. |
color | string | — | Any CSS colour; defaults to a theme token. |
className | string | — | 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.