Spotlight

A soft light that follows the pointer across a section.

Installation

bash

npx @smicolon/cli add spotlight

Run init once per project before adding components. See Installation.

Preview

Meet the autumn edit

Move your pointer across this panel.

Spotlight card

SpotlightCard is a card that lights up under the pointer while you hover over it.

Free delivery

On every order in Riyadh this week.

Accessibility

The light follows a mouse or trackpad only. Keyboard and touch users never see it, so put nothing in it that they need.
With prefers-reduced-motion set, there is no light at all.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content on top of the light.
`color`	`string`	`"color-mix(in oklch, var(--primary) 15%, transparent)"`	Colour of the light.
`size`	`number`	`400`	Diameter of the light in pixels.
`blur`	`number`	`80`	Softness of the edge in pixels.
`opacity`	`number`	`1`	Strength, from 0 to 1.
`SpotlightCard`	`{ spotlightColor, spotlightSize }`	—	A card that lights up under the pointer.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { Spotlight, SpotlightCard } from "@/components/ui/spotlight"

<Spotlight className="h-64 rounded-lg border bg-card" size={300}>
  <h3>Meet the autumn edit</h3>
</Spotlight>

<SpotlightCard>
  <p>Free delivery</p>
</SpotlightCard>