Spotlight

display

Mouse-tracking spotlight overlay effect for dark backgrounds.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system
Import
import { Spotlight } from "@launchapp/design-system";

Examples

Spotlight hero

<div className="relative min-h-[300px] bg-black rounded-xl overflow-hidden">  <Spotlight fill="rgba(100, 200, 255, 0.3)" />  <div className="relative z-10 flex items-center justify-center h-64 text-white text-2xl font-bold">    Move your cursor over me  </div></div>

Props

PropTypeDefaultDescription
children*
React.ReactNode—Content over the spotlight background.
fill
string"white"Spotlight color.
← PreviousSparkline
Next →Staggered List