Spotlight New

A new spotlight component with left and right spotlight, configurable and customizable.

Spotlight
which is not overused.

A subtle yet effective spotlight effect, because the previous version is used a bit too much these days.

npx shadcn@latest add @aceternity/spotlight-new

Prop	Type	Default	Description
gradientFirst	`string`	`"radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .08) 0, hsla(210, 100%, 55%, .02) 50%, hsla(210, 100%, 45%, 0) 80%)"`	First gradient color for the spotlight effect
gradientSecond	`string`	`"radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .06) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%)"`	Second gradient color for the spotlight effect
gradientThird	`string`	`"radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .04) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%)"`	Third gradient color for the spotlight effect
translateY	`number`	`-350`	Vertical translation offset in pixels
width	`number`	`560`	Width of the main spotlight element in pixels
height	`number`	`1380`	Height of the spotlight elements in pixels
smallWidth	`number`	`240`	Width of the smaller spotlight elements in pixels
duration	`number`	`7`	Animation duration in seconds
xOffset	`number`	`100`	Horizontal animation offset in pixels

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

200+ templates and blocks combined

Ready to copy paste component blocks, save days of development time