Glowing mesh-gradient border that follows cursor direction and intensifies near edges.
Bring the pointer close to the card border and the glow follows its direction. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
edgeSensitivity | number | 30 | How close the pointer must be to the edge for the glow to appear (0 to 100). |
glowColor | string | "40 80 80" | HSL values for the glow color, as "H S L" (e.g. "40 80 80"). |
backgroundColor | string | "#120F17" | Background color of the card. |
borderRadius | number | 28 | Corner radius of the card in pixels. |
glowRadius | number | 40 | How far the outer glow extends beyond the card in pixels. |
glowIntensity | number | 1.0 | Multiplier for glow opacity (0.1 to 3.0). |
coneSpread | number | 25 | Width of the directional cone mask as a percentage (5 to 45). |
animated | boolean | false | Play an intro sweep animation on mount. |
colors | string[] | ["#c084fc", "#f472b6", "#38bdf8"] | Array of 3 hex colors for the mesh gradient border, distributed across positions. |
fillOpacity | number | 0.5 | Opacity of the colored fill that appears inside the card near the edges. |
| Prop | Type | Default | Description |
|---|---|---|---|
default | slot | - | Content rendered inside the card. |
Keyboard shortcuts and ARIA behavior.