Ticker Ring CTA

CTAs 9

About

A closing call-to-action banner whose small-print facts (dates, seats left, location) scroll continuously around its border like a news ticker, slowing down to a readable crawl when you hover or focus the button.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ticker Ring CTA to your project and fits it to your theme.

Code

How Ticker Ring CTA is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import TickerRingCta from "@/components/ui/ticker-ring-cta";

export default function Demo() {
  return (
    <div className="flex min-h-full w-full">
      <TickerRingCta
        theme="night"
        eyebrow="Majlis Design School · Product design"
        headline="Learn product design in twelve evenings."
        sub="Small groups, real briefs from Muscat companies, and a portfolio piece you can show by the end of February."
        action="Apply for January"
        secondary={{ label: "Read the syllabus", href: "#" }}
        ticker={[
          "Next intake 12 Jan",
          "18 of 24 seats left",
          "Muscat & online",
          "Applications close 20 Dec",
          "OMR 290 · instalments",
        ]}
      />
    </div>
  );
}