Coming Soon Client Marquee

Installation

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

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon76.tsx instead.

Usage

The file also exports comingsoon76Demo, 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 { ComingSoon76, comingsoon76Demo } from "@/components/blocks/coming-soon/comingsoon76";

export default function Page() {
  return <ComingSoon76 {...comingsoon76Demo} />;
}

Props

Behavior notes

• Plain Server Component: the marquee is pure CSS (a scoped @keyframes translateX loop plus animation-direction/animation-duration inline styles), no client JS runs.
• The label text is duplicated once so the loop is seamless, and the second copy is aria-hidden to avoid announcing the repeated text to screen readers.
• direction and speed are real props: direction flips animation-direction between normal/reverse, speed sets the animation-duration in seconds.
• Edge fades are two absolutely positioned gradient strips over the marquee track, purely decorative.