Staaarter

Marquee CTA

A simple, high-impact call-to-action: a giant, low-opacity word or phrase loops horizontally across the full width behind the content, while a heading, description, and two buttons sit centered on top at full opacity.

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/marquee-cta.json

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

Usage

The file also exports cta66Demo, 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 { Cta66, cta66Demo } from "@/components/blocks/cta/cta66";

export default function Page() {
  return <Cta66 {...cta66Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Ready when you are"Foreground heading.
descriptionstringnoneSupporting paragraph under the heading.
primaryLabelstring"Start for free"Label for the primary button.
primaryHrefstring"#"Href for the primary button.
secondaryLabelstring"Talk to sales"Label for the secondary button.
secondaryHrefstring"#"Href for the secondary button.
marqueeTextstring"LAUNCH"Word/phrase repeated in the looping background marquee.
marqueeSpeednumber26Marquee 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.
  • The marqueeSpeed prop only changes the CSS animation-duration via an inline style, it is never read in an effect or event handler.
  • Fully static Server Component: no event handlers, no client state.