Spotlight

A soft light that follows the pointer across a section.

Installation

bash

npx @smicolon/fasla-ui@latest 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

Spotlight

tsx

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

export function CollectionPanel() {
  return (
    <Spotlight className="h-64 rounded-lg border bg-card" size={300}>
      <h2>Meet the autumn edit</h2>
    </Spotlight>
  )
}

SpotlightCard

tsx

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

export function DeliveryCard() {
  return (
    <SpotlightCard>
      <p>Free delivery</p>
    </SpotlightCard>
  )
}