Spotlight New
A new spotlight component with left and right spotlight, configurable and customizable.
Installation
Run the following command
npx shadcn@latest add @aceternity/spotlight-newProps
| 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 |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
