Components (13)

Border Glow

New

Interactive surface with cursor-tracking mesh gradient edge illumination, outer atmospheric aura, and entry sweep animation.

$ pnpm dlx shadcn@latest add @byphongphan/border-glow

Requires @byphongphan in components.json

card

border-glow.tsx

Mesh Beam

Border Glow

Dynamic mesh gradient edge illumination calculating real-time cursor proximity, entry angle, and outer atmospheric aura.

Zero Re-render

Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/border-glow

Requires @byphongphan in components.json

Usage

import { BorderGlow } from "@/shared/ui/core/border-glow"
export function Example() {  return (    <BorderGlow      animated      borderRadius={20}      edgeSensitivity={25}      glowRadius={40}      className="p-6"    >      <h3 className="font-semibold text-foreground">Glowing Perimeter Card</h3>      <p className="text-sm text-muted-foreground">        Move your mouse near the edges of this card to observe the responsive mesh beam.      </p>    </BorderGlow>  )}

Props

Prop	Type	Default	Description
`edgeSensitivity`	`number`	`30`	Distance threshold in percentage before the edge glow triggers.
`glowColor`	`string`	`"40 80 80"`	HSL string `h s l` representing outer halo color.
`borderRadius`	`number \| string`	`20`	Border radius in pixels or CSS unit.
`glowRadius`	`number`	`36`	Radius of the external blurred atmospheric glow.
`glowIntensity`	`number`	`1.0`	Multiplier for the multi-layered box shadow intensity.
`coneSpread`	`number`	`25`	Angle spread percentage for the conic gradient beam.
`animated`	`boolean`	`false`	Triggers a sweeping intro animation on initial mount.
`colors`	`string[]`	`["#c084fc", "#f472b6", "#38bdf8"]`	Array of colors forming the multi-stop mesh gradient.
`fillOpacity`	`number`	`0.5`	Opacity of the inner mesh wash near the borders.
`contentClassName`	`string`	`undefined`	Custom classes for the inner content container.

Border Glow

Border Glow

Installation

Usage

Props

Command Palette

Border Glow