Staaarter

Worth Keeping CTA

A minimal, full-bleed closing call-to-action on an inverted (bg-foreground text-background) monochrome treatment: a giant, faint word-marquee loops behind a single centered circular seal-style button, with no heading or paragraph at all.

By Staaarter Team
CTA
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/worth-keeping-cta.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta69.tsx instead.

Usage

The file also exports cta69Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta69, cta69Demo } from "@/components/blocks/cta/cta69";

export default function Page() {
  return <Cta69 {...cta69Demo} />;
}

Props

PropTypeDefaultDescription
buttonLabelstring"Worth keeping"Label inside the circular seal button.
buttonHrefstring"#"Href for the seal button.
marqueeTextstring"BUILT TO LAST"Word/phrase repeated in the looping background marquee.
marqueeSpeednumber30Marquee loop duration in seconds, lower is faster.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The marquee is pure CSS: a scoped @keyframes translateX loop on a duplicated, doubled-width text row (aria-hidden, non-interactive, `motion-reduce:animate-none`), no JavaScript animates it.
  • Deliberately monochrome/inverted (`bg-foreground text-background`) as a one-off closing-CTA treatment, same semantic-token discipline as the rest of the category, just flipped; the seal button overrides the outline variant's default colors with `border-background`/`text-background` so it reads correctly against the dark section.
  • No heading or paragraph by design, just the marquee and a single button, this is the minimal 'last thing on the page' variant.
  • Fully static Server Component: no event handlers, no client state.