Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Starfield Sparse CTA Block for Svelte

A statement call to action under a sparse sky that spans the whole page column, with stars in your text colour, a few twinkling, and a dashed constellation that draws itself down to the Shine Button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A closing section with a constellation that leads to the button, for Svelte with Ark UI. It has no card: the sky fills the page column between its rails. The stars and the line take your text colour, so they are light dots on a dark page and dark dots on a light one. A few stars twinkle, and a dashed line joins the stars across the top and down the end side, drawing itself once on load until it lands just above the Shine Button. In the middle sit a two-line headline for Nightjar 3, a made-up sleep tracker, one sentence, the Shine Button and an outline button for what's new. It's built from Guides, Shine Button and Button, with plain CSS and SVG for the sky. For launch nights and any closing section that wants a quiet, starry feel.

FAQ

How is the constellation line drawn?

It is one SVG path with a dashed stroke that stays a fixed width at any size. A CSS clip-path transition reveals it from the top down once on load, with no script. Stars sit on its vertices in percent, so they stay on the line at any width. With reduced motion the line is simply there.

How does the line end above the button?

The line's layer stops a fixed distance above the foot of the copy, set in one CSS variable (--cta), so its last point lands just above the buttons. If you change the buttons' size or the spacing, adjust that variable.

How do I change the stars?

Edit the SKY, ROUTE and STRIP lists at the top of the file: each star has a position as a percentage, a size, a tone and an optional twinkle class. Twinkling uses animate-pulse, which stops with reduced motion.

What happens on a phone?

The wide sky and the line would cross the copy on a narrow screen, so below md the block shows a short strip of stars above the headline instead, and the copy and buttons stack.

Do the stars keep moving?

Only a few of them pulse softly, and the sky is decoration. With reduced motion turned on nothing pulses and the line doesn't animate.

Does it work right to left?

Yes. Stars are placed from the inline start and the line layer is mirrored with rtl:-scale-x-100, so the constellation moves to the other side together with the page's direction.

Is it accessible for screen readers?

The stars and the line are decoration, hidden from assistive technology. The page gets one h2, and both calls to action are links named by their text.

All 100 cta blocks