Spotlight Content

Mouse-tracked ripple effect applied to headline text.

0px

Installation

pnpm dlx shadcn@latest add https://ui.perxel.com/r/spotlight-content.json

Example component not found for “spotlight-content”.

Name	Type	Default
`color`	`string` Background color or gradient for the spotlight area.	`"#fbbf24"`
`duration`	`number` Duration of the smooth motion in seconds.	`0.4`
`ease`	`string` Easing function used for the tween animation.	`"power2.out"`
`rangeY`	`[number, number]` Vertical clip range in percent [min, max].	`[20, 70]`
`rangeX`	`[number, number]` Horizontal clip range in percent [min, max].	`[20, 70]`
`reverseX`	`boolean` Reverse the X-axis direction when moving the mouse.	`true`
`initial`	`{ x: number; y: number; }` Initial clip position before any mouse movement.	`{x:45, y:45}`
`className`	`string` Additional class names applied to the root section.