← All components
Surfaces / component
Border Glow
A seven-layer mesh and directional cone illuminate the nearest edge.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
- Reduced motion keeps a still effect. Hidden and offscreen instances stop requesting frames; all owned work is cancelled on unmount.
- Keep space around the card for the outer glow.
React 19CSS
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | undefined | Content rendered inside the interactive surface; the demo uses this control as its heading. |
glowColor | string | 40 80 80 | Glow HSL |
backgroundColor | string | #120F17 | Surface color |
edgeSensitivity | number | 30 | Edge sensitivity |
glowRadius | number | 40 | Glow radius |
glowIntensity | number | 1 | Glow intensity |
coneSpread | number | 25 | Cone width |
fillOpacity | number | 0.5 | Mesh fill |
borderRadius | number | 28 | Corner radius |
animated | boolean | false | Intro sweep |
colors | string[] | ['#c084fc','#f472b6','#38bdf8'] | One to three colors for the seven radial mesh layers. |
paused | boolean | false | Freeze the current frame; hidden time is excluded. |
replayToken | number | 0 | Change this value to restart the effect. |
className | string | '' | Additional outer classes. |