Card chrome with a pointer-directed border, optional soft bloom, and a hairline trace mode.
Install with the CLI, or copy the component source into your project.
Add border-glow (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add border-glow
Dark card with kit defaults, including bloom true: edgeSensitivity 0, glowRadius 15, glowIntensity 0.8, coneSpread 5, animated false, background neutral-920.
Hover near the edges
Dark card (neutral-920) with bloom and a directional mesh. Move close to the border to see it follow the pointer.
variant light: soft white face with a tinted mesh glow. Remains subtle white under a dark preview surface.
Light card
Soft white face with a tinted edge glow. Stays a subtle white when the preview is dark; the colored glow still tracks the pointer.
trace: single-ink or spectrum hairline outside the card, no bloom. Expands from the pointer on hover and follows it around the ring.
Hairline trace
Hidden until hover. The hairline expands from the pointer and follows it around the ring.
Props written out to match the default configuration, including bloom true (border radius omitted; uses the theme radius token).
Explicit defaults
Same values as the kit defaults, passed as props for reference.
Card chrome with a pointer-directed border. Use bloom for the soft mesh glow, or trace for the outer hairline.
Shared card chrome and layout.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Content rendered inside the card. |
| className | string | - | Additional classes on the outer wrapper. |
| variant | "default" | "light" | "default" | default uses the dark face (neutral-920). light uses a soft white face and tinted mesh, and stays subtle white under .dark. |
| backgroundColor | string | variant token | Card face fill. Omit to use --df-border-glow-bg or --df-border-glow-light-bg. |
| strokeColor | string | variant stroke token | Idle CSS border color. Omit to use --df-border-glow-stroke or --df-border-glow-light-stroke. |
| borderRadius | number | - | Corner radius in pixels. Omit to use --df-border-glow-radius. |
| cornerShape | "round" | "smooth" | - | Instance corner curve. Omit to inherit --df-corner-shape from the theme (set at create/init). |
Soft outer glow and directional mesh. Ignored when trace is true.
| Prop | Type | Default | Notes |
|---|---|---|---|
| bloom | boolean | true | Soft outer bloom around the card. Set false to disable bloom (inner wash defaults to 0). Ignored when trace is true. |
| glowColor | string | var(--df-border-glow-ink-base) or light ink token | Soft outer glow source when bloom is true. Prefer a CSS color. HSL channels as "H S L" still work. In trace mode, used as the single hairline ink when colors is omitted. |
| glowRadius | number | var(--df-border-glow-glow-radius) | How far the soft outer bloom extends beyond the card in pixels. Omit to use --df-border-glow-glow-radius. |
| glowIntensity | number | 0.8 | Multiplier for bloom opacity (0.1 to 3). |
| edgeSensitivity | number | 0 | How close the pointer must be to the edge for the glow to appear (0 to 100). Lower values light the edge sooner. |
| coneSpread | number | 5 | Width of the directional cone mask as a percentage (5 to 45). |
| colors | string[] | variant mesh tokens | Three colors for the mesh gradient border. Defaults to --df-border-glow-color-* or --df-border-glow-light-color-*. |
| fillOpacity | number | 0.5 when bloom; 0 when bloom is false | Strength of the near-edge mesh fill inside the card (0 to 1). |
| animated | boolean | false | Play an intro cone sweep on mount. |
Hairline-only animation. Forces bloom off and no face wash. The arc expands from zero at the pointer, then follows it.
| Prop | Type | Default | Notes |
|---|---|---|---|
| trace | boolean | false | Enable hairline trace mode. Paints only the outer hairline (masked to the border, never the face). |
| glowColor | string | var(--df-neutral-1000) | Single hairline ink when colors is omitted. |
| colors | string[] | glowColor as one stop | Up to four colors along the expanding hairline arc. Pass DEFAULT_SPECTRUM_COLORS from SpectrumText for the kit spectrum. |
| coneSpread | number | 20 | Max lit arc length. Higher values make a longer hairline segment. |
| outlineOffset | number | var(--df-border-glow-trace-outline-offset) | Gap in pixels between the card edge and the outer hairline. Omit in trace mode to use --df-border-glow-trace-outline-offset. |
| outlineWidth | number | var(--df-border-glow-outline-width) | Thickness in pixels of the outer hairline. Omit to use --df-border-glow-outline-width. |
| followDuration | number | 0.5 | Seconds for the lit arc to ease toward the pointer. Lower is snappier; higher is smoother. |
| revealDuration | number | 0.7 | Seconds for the hairline to expand from zero on enter and collapse on leave. Uses a quint ease-out. |
| arcFade | number | 0.75 | How soft the ends of the lit arc are (0 to 1). Higher fades out earlier and more gradually. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-border-glow-bg | CSS color | var(--df-neutral-920) | Default (dark) card face. |
| --df-border-glow-stroke | CSS color | color-mix(in oklch, var(--df-neutral-0) 15%, transparent) | Idle CSS border color on the default card. |
| --df-border-glow-radius | length | var(--radius-4xl) | Default corner radius when borderRadius is omitted. |
| --df-corner-shape | CSS corner-shape | var(--df-corner-shape-round) | Theme corner curve for all kit chrome. round = circular arcs; smooth = continuous squircle. Set with df-ui init --corner-shape, or override on :root. Default round. |
| --df-border-glow-edge-sensitivity | number | 0 | Theme default for edgeSensitivity (0 to 100). |
| --df-border-glow-glow-radius | length | calc(3.75 * var(--spacing-unit)) | Theme default for glowRadius. |
| --df-border-glow-outline-offset | length | calc(0.5 * var(--spacing-unit)) | Gap between the card edge and the outer outline when bloom is off. |
| --df-border-glow-trace-outline-offset | length | calc(3 * var(--spacing-unit)) | Gap between the card edge and the outer hairline in trace mode. |
| --df-border-glow-outline-width | length | var(--border-width-hairline) | Thickness of the outer hairline in trace mode. |
| --df-border-glow-trace-follow | number | 0.5 | Theme default for followDuration in seconds. |
| --df-border-glow-trace-reveal | number | 0.7 | Theme default for revealDuration in seconds. |
| --df-border-glow-trace-fade | number | 0.75 | Theme default for arcFade (0 to 1). |
| --df-border-glow-cone-spread | number | 5 | Theme default for coneSpread in bloom modes. |
| --df-border-glow-glow-intensity | number | 0.8 | Theme default for glowIntensity. |
| --df-border-glow-fill-opacity | number | 0.5 | Theme default for fillOpacity on the default variant. |
| --df-border-glow-ink-base | CSS color | var(--df-neutral-100) | Default soft outer glow source color. |
| --df-border-glow-color-1 | CSS color | var(--df-orange-80) | Default mesh stop 1. |
| --df-border-glow-color-2 | CSS color | var(--df-orange-180) | Default mesh stop 2. |
| --df-border-glow-color-3 | CSS color | var(--df-blue-320) | Default mesh stop 3. |
| --df-border-glow-light-bg | CSS color | var(--df-neutral-0) | Light variant face. Soft white under .dark (neutral-50). |
| --df-border-glow-light-stroke | CSS color | color-mix(in oklch, var(--df-neutral-1000) 8%, transparent) | Idle CSS border color on the light variant. |
| --df-border-glow-light-ink-base | CSS color | var(--df-orange-340) | Light variant soft outer glow source color. |
| --df-border-glow-light-color-1 | CSS color | var(--df-orange-80) | Light variant mesh stop 1. |
| --df-border-glow-light-color-2 | CSS color | var(--df-orange-420) | Light variant mesh stop 2. |
| --df-border-glow-light-color-3 | CSS color | var(--code-dark-keyword) | Light variant mesh stop 3. |