shadcn.io is not affiliated with official shadcn/ui
Spotlight Vignette CTA Block for Solid
A card-in-card call to action lit like a stage, with slow spotlight cones from above and a vignette that fades the edges into a raised panel that follows your theme, over a two-line headline, a Shine Button and a quiet second action.
Installation
Overview
A call to action for a product reveal, for Solid with Ark UI, that follows your theme. A tinted shell with a + mark on each corner holds a raised panel; three soft cones of light in your text colour shine down on it from above and cross slowly, while a vignette fades the edges into the card so the eye lands in the middle. Over it sit a two-line headline for Halden 2, a made-up deploy platform, one sentence, a Shine Button for the main action, an outline button for the keynote and a status line. It's built from Spotlight, Guides, Shine Button, Button and Status, with the page's own top rule and rails. For launches, keynotes and announcements.
FAQ
How do I change the lights?
Set them on Spotlight: count is 1, 2 or 3 lights, intensity is subtle (here), medium or strong, colors takes up to three CSS colours (here the theme's foreground), and speed is a multiplier for the sweep. interactive adds a light that follows the pointer.
How does the vignette work?
A plain div over the lights with a radial gradient from clear in the middle to --card at the edges, so the edges fade into the card in any theme. Change its stops to fade more or less.
Do the lights move, and can I stop them?
They swing slowly, one swing every 19 to 29 seconds, with CSS transforms only. With reduced motion turned on they hold still. Lower speed to calm them further.
Where do the buttons go?
Both are links (href="#"): point Start deploying at your sign-up and Watch the keynote at your video.
Each button's asChild receives its props: spread them onto your router's link.