Signature / Moleculestable

Blur Spotlight

Cursor-following ambient glow effect for background layers.

@glinui/uiComponent: blur-spotlight

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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

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.

Basic$

Hover Me

TSX

1"use client"
2import { BlurSpotlight } from "@glinui/ui"
3
4export function BlurSpotlightDemo() {
5return (
6  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
7    <BlurSpotlight />
8    <span className="relative z-10 text-3xl font-bold text-white">Hover Me</span>
9  </div>
10)
11}

Examples$

Custom Color and Size$

Pink Glow

TSX

1"use client"
2import { BlurSpotlight } from "@glinui/ui"
3
4export function BlurSpotlightCustomDemo() {
5return (
6  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
7    <BlurSpotlight color="#ec4899" size={400} intensity={0.6} />
8    <span className="relative z-10 text-2xl font-bold text-white">Pink Glow</span>
9  </div>
10)
11}

Subtle Effect$

Subtle

TSX

1"use client"
2import { BlurSpotlight } from "@glinui/ui"
3
4export function BlurSpotlightSubtleDemo() {
5return (
6  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 dark:border-neutral-800">
7    <BlurSpotlight size={200} blur={120} intensity={0.3} />
8    <span className="relative z-10 text-2xl font-bold text-white">Subtle</span>
9  </div>
10)
11}

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	`"#6366f1"`	Spotlight color
`intensity`	`number`	No	`0.5`	Intensity/opacity (0-1)
`size`	`number`	No	`300`	Spotlight radius in px

Source$

TSX

1import { 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-02-19T17:59:28.468Z · 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	`"#6366f1"`	Spotlight color
`intensity`	`number`	No	`0.5`	Intensity/opacity (0-1)
`size`	`number`	No	`300`	Spotlight radius in px