Preview

npx shadcn@latest add @atroui/spotlight

Low-opacity wash on dark Imageory media.

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/spotlight

Source lands in your repo. Installation · Registry

Usage

Pair with dark media surfaces. Keep opacity low. Reduced motion skips the wash.

tsx

import { Spotlight } from "@/components/ui/spotlight"
import { IMAGEORY } from "@/lib/imageory"

<Spotlight opacity={0.12}>
  <img src={IMAGEORY.darkVoid} alt="" />
</Spotlight>

import { Spotlight } from "@/components/ui/spotlight"
import { IMAGEORY } from "@/lib/imageory"

<Spotlight opacity={0.12}>
  <img src={IMAGEORY.darkVoid} alt="" />
</Spotlight>

API reference

Prop	Type	Default	Description
size	number	240	Spotlight diameter in px.
opacity	number	0.12	Wash opacity.
color	string	"#ffffff"	Spotlight color.