Signature / Molecule

Blur Spotlight

Cursor-following ambient glow effect for background layers.

Edit on GitHub

pnpm dlx @glinui/cli@latest add blur-spotlight

Hover Me

Installation$

Install from

pnpm dlx @glinui/cli@latest add blur-spotlight

Prefer the package?

Usage$

BlurSpotlight is a "use client" component. Place it inside a relative container. The glow follows the cursor within the parent element. Great for cards, hero sections, and interactive backgrounds.

Examples$

Custom Color and Size$

Pink Glow

"use client"
import { BlurSpotlight } from "@glinui/ui"


export function BlurSpotlightCustomDemo() {
return (
  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--surface-1)]">
    <BlurSpotlight color="#ec4899" size={400} intensity={0.6} />
    <span className="relative z-10 text-2xl font-bold text-[var(--color-foreground)]">Pink Glow</span>
  </div>
)
}

Subtle Effect$

Subtle

"use client"
import { BlurSpotlight } from "@glinui/ui"


export function BlurSpotlightSubtleDemo() {
return (
  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--color-border)] bg-[var(--surface-1)]">
    <BlurSpotlight size={200} blur={120} intensity={0.3} />
    <span className="relative z-10 text-2xl font-bold text-[var(--color-foreground)]">Subtle</span>
  </div>
)
}

Accessibility$

The component renders with aria-hidden, invisible to assistive technologies.
Purely decorative; carries no semantic meaning.
pointer-events-none ensures content beneath remains interactive.

Reduced Motion$

The entire spotlight layer is hidden via motion-reduce:hidden when reduced motion is preferred.

API Reference$

Prop	Type	Required	Default	Description
`blur`	`number`	No	`80`	Blur amount in px
`color`	`string`	No	`"var(--color-accent)"`	Spotlight color
`intensity`	`number`	No	`0.5`	Intensity/opacity (0-1)
`size`	`number`	No	`300`	Spotlight radius in px

Source$

import { BlurSpotlight } from "@glinui/ui"

packages/ui/src/components/blur-spotlight.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/blur-spotlight.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

BlurSpotlightProps

`BlurSpotlightProps`

Prop	Type	Required	Default	Description
`blur`	`number`	No	`80`	Blur amount in px
`color`	`string`	No	`"var(--color-accent)"`	Spotlight color
`intensity`	`number`	No	`0.5`	Intensity/opacity (0-1)
`size`	`number`	No	`300`	Spotlight radius in px