Blocks

CTA Starfall

A dark call-to-action under a slow field of drifting stars, lit by a violet bloom.

A ready-made closing section. A field of pinpoint stars drifts slowly down behind the copy, each one on its own speed and sideways drift, under a violet bloom at the top edge. The field is full on the first frame — every star is seeded part-way through its fall rather than spawning over time — and the whole thing pauses off-screen and in background tabs. GSAP-driven.

New tab

Turn content into videos the smarter way

No video editing skills? No problem — we handle the hard part.

Installation

pnpm dlx shadcn@latest add @tween-ui/cta-starfall

Using an AI editor? Set up MCP once, then just ask for it in plain words.

The button is Shiny Button, so the CLI installs that item too.

Usage

app/page.tsx

import CtaStarfall from '@/components/tweenui/cta-starfall';
 
export default function Page() {
  return <CtaStarfall />;
}

Pass your own copy:

app/page.tsx

import CtaStarfall from '@/components/tweenui/cta-starfall';
 
export default function Page() {
  return (
    <CtaStarfall
      title="Ship the whole workflow, not just the design"
      description="Automate the handoff and keep the team in one place."
      action={{ label: 'Start free trial', onClick: () => router.push('/signup') }}
    />
  );
}

Props

Prop	Type	Default	Description
`title`	`ReactNode`	sample heading	Section heading.
`description`	`string`	sample line	Supporting line under the heading.
`action`	`CtaStarfallAction \| null`	Start creating	Button below the copy. `null` hides it.
`starCount`	`number`	`160`	How many stars fill the field.

Extends native <section> attributes (className, style, …).

`CtaStarfallAction`

Field	Type	Description
`label`	`string`	Button text.
`onClick`	`() => void`	Runs when the button is pressed.

The section carries its own dark background — the starfield only reads against one. Raise starCount for a denser sky; each star is a single pixel, so a few hundred stays cheap.

Accessibility

The whole starfield is aria-hidden, so a screen reader meets only the heading, the line under it, and the button. Under prefers-reduced-motion: reduce the stars are scattered once and never animate — the sky stays, the drift does not.

Turn content into videos the smarter way

Installation#

Usage#

Props#

CtaStarfallAction#