Glowing Effect

GlowingEffect is a client-side decorative border effect that follows pointer movement around a container. It renders a masked conic/radial gradient glow and can be configured for colorful or white styling.

uiregistry-item.json
Glowing Effect
LIVE · running in a sandboxed iframe
Installed with plain shadcn add · no workarounds · theme neutral (none shipped)
See how it was built

Installation

pnpm dlx shadcn@latest add @aceternity/glowing-effect

Requires @aceternity in the registries of your components.json (shadcn adds official directory namespaces automatically).

Usage

usage.tsx
import { GlowingEffect } from "@/components/ui/glowing-effect";<div className="relative rounded-xl border p-6">  <GlowingEffect disabled={false} />  <div className="relative">Featured content</div></div>
  • Highlight cards, feature panels, pricing tiers, or other bordered surfaces with pointer-reactive decoration.
  • Add visual emphasis to hero content, product showcases, testimonials, or interactive dashboard tiles.
  • Use the static glow mode for decorative borders when pointer tracking is unnecessary.
  • Place inside a relatively positioned container with rounded corners so the effect follows its shape.

Examples

Interactive feature card

A colorful glow follows the pointer around a feature card.

interactive-feature-card.tsx
import { GlowingEffect } from "@/components/ui/glowing-effect";<div className="relative rounded-2xl border bg-card p-6">  <GlowingEffect    disabled={false}    proximity={64}    spread={32}    blur={2}    className="rounded-2xl"  />  <div className="relative z-10">    <p className="text-sm font-medium">Realtime analytics</p>    <p className="mt-2 text-sm text-muted-foreground">      Monitor product activity as it happens.    </p>  </div></div>

White glow on a dark panel

A monochrome pointer-reactive border suits dark promotional content.

white-glow-on-a-dark-panel.tsx
import { GlowingEffect } from "@/components/ui/glowing-effect";<section className="relative rounded-3xl bg-black p-8 text-white">  <GlowingEffect    disabled={false}    variant="white"    proximity={80}    spread={24}    borderWidth={2}  />  <div className="relative z-10">    <p className="text-xs uppercase tracking-widest text-white/60">Pro plan</p>    <h2 className="mt-3 text-3xl font-semibold">Built for growing teams</h2>  </div></section>

Static decorative border

A visible, non-interactive border overlay can be used as a decorative accent.

static-decorative-border.tsx
import { GlowingEffect } from "@/components/ui/glowing-effect";<div className="relative rounded-xl border p-5">  <GlowingEffect glow borderWidth={1} />  <div className="relative z-10">    <p className="font-medium">New release</p>    <p className="mt-1 text-sm text-muted-foreground">      Explore the latest improvements.    </p>  </div></div>

API reference

PropTypeDefaultDescription
blurnumber0Blur radius in pixels applied to the glow layer.
inactiveZonenumber0.7Fraction used to define the inactive radius around the container center. Pointer movement inside this radius disables the active glow.
proximitynumber0Additional pixel distance outside the container in which the pointer can activate the glow.
spreadnumber20Angular spread, in degrees, of the active gradient segment.
variant"default" | "white""default"Gradient style. The default uses multicolor radial and conic gradients; white uses a monochrome gradient based on the --black CSS variable.
glowbooleanfalseAdds the opacity class to the decorative border layer. It does not enable pointer tracking; set disabled to false for pointer interaction.
classNamestring—Additional class names applied to the main glow layer.
disabledbooleantrueDisables pointer and scroll listeners and hides the animated glow layer. When true, the separate border layer is forced to display.
movementDurationnumber2Motion animation duration passed to motion/react when the glow angle changes.
borderWidthnumber1Border width in pixels used by the masked glow pseudo-element.

Accessibility

  • The component is decorative and renders no text, label, role, or keyboard interaction of its own.
  • Its layers use pointer-events-none, so they do not block interaction with content placed in the same container.
  • Keep meaningful content outside the effect and ensure that content has its own accessible names and sufficient contrast.
  • The source does not implement prefers-reduced-motion handling; consider disabling the effect or providing an application-level reduced-motion preference.
  • Use a relatively positioned parent so the absolute layers remain associated with the intended content.

Docs written by openai:gpt-5.6-luna from the registry source.

Use with Coding Agent

Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.

prompt.md
Use the "Glowing Effect" component (aceternity/glowing-effect) from its shadcn registry.1. Install it with: npx shadcn@latest add @aceternity/glowing-effect2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: blur, inactiveZone, proximity, spread, variant, glow, className, disabled, movementDuration, borderWidth.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport { GlowingEffect } from "@/components/ui/glowing-effect";<div className="relative rounded-xl border p-6">  <GlowingEffect disabled={false} />  <div className="relative">Featured content</div></div>```

Files & dependencies

  • components/ui/glowing-effect.tsx→ components/ui/glowing-effect.tsx
dependencieslucide-react

Looks similar, elsewhere