Beta

Spotlight List

Spotlight list, when hovering an item it will highlight it by decreasing the visiblity of the other items.

Open in 21st dev
  • Branding
  • UI UX Design
  • Development
  • Marketing
  • Content Writing

Installation

Usage

<SportlightList className="flex flex-col items-start gap-1 font-medium *:duration-300 ease-in-out">
  <li className="px-2 py-1.5">Branding</li>
  <li className="px-2 py-1.5">UI UX Design</li>
  <li className="px-2 py-1.5">Development</li>
  <li className="px-2 py-1.5">Marketing</li>
  <li className="px-2 py-1.5">Content Writing</li>
</SportlightList>

Props

PropTypeDefault
variant?
"blur" | "scale" | "opacity"
blur

Reveal Mask

Reveal mask animation effect.

Text Scroll Read

Splited text reads depending on the scroll progress.