Border Glow

An interactive card wrapper with an ambient glowing mesh gradient that mathematically tracks the mouse. The glow traces the borders exactly and cascades over the inner padding realistically.

Live Preview

Interactive Glow

A highly sensitive ambient glow effect that tracks the cursor mathematically around the border radius.

Installation

CLI

npx @modus-ui/cli add border-glow

Manual

Copy the code from the component tab.
Create a file at components/ui/border-glow.tsx.
Paste the code.

Usage

tsx

import { BorderGlow } from "@/components/ui/border-glow";

export default function Example() {
  return (
    <BorderGlow
      className="h-[350px] w-[300px] p-8"
      glowColor="200 100 65"
      colors={["hsl(var(--primary))", "hsl(var(--primary))", "hsl(var(--primary))"]}
      animated={true}
      backgroundColor="hsl(var(--primary))"
    >
      <h3 className="text-xl font-medium text-white">Interactive Glow</h3>
      <p className="text-zinc-400">Content goes here.</p>
    </BorderGlow>
  );
}

Props

Prop	Type	Default	Description
`edgeSensitivity`	`number`	`30`	How close in pixels to the edge the glow appears.
`glowColor`	`string`	`"266 100 65"`	Glow colour as space-separated HSL values.
`backgroundColor`	`string`	`"hsl(var(--card))"`	Card background colour.
`borderRadius`	`number`	`28`	Corner radius in pixels.
`glowRadius`	`number`	`40`	Size of the glow in pixels.
`glowIntensity`	`number`	`1`	Strength of the glow.
`coneSpread`	`number`	`25`	Angular spread of the glow in degrees.
`animated`	`boolean`	`false`	Runs an intro sweep of the glow.
`colors`	`string[]`	`["hsl(var(--primary))", "hsl(var(--primary))", "hsl(var(--primary))"]`	Colours of the border gradient.
`fillOpacity`	`number`	`0.5`	Opacity of the inner glow fill.