Image Marquee CTA

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot 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/cta/cta44.tsx instead.

Usage

The file also exports cta44Demo, 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 { Cta44, cta44Demo } from "@/components/blocks/cta/cta44";

export default function Page() {
  return <Cta44 {...cta44Demo} />;
}

Props

Behavior notes

• Both rows are a pure CSS @keyframes translateX loop on a doubled (duplicated) image list, no JavaScript animates the motion; the leftward and rightward rows use two distinct, uniquely-named keyframes (cta44-marquee-left/right) so their directions never collide.
• Both marquee tracks carry `motion-reduce:animate-none` so the scrolling stops for users who prefer reduced motion; the tiles themselves are `aria-hidden` since they're decorative.
• The overlay card uses `bg-background/90 backdrop-blur` so the heading and buttons stay legible regardless of what photos are passed in; the card sits in a `pointer-events-none` wrapper with `pointer-events-auto` re-enabled on the card itself so the buttons stay clickable without blocking interaction with anything behind the marquee rows.
• Fully static Server Component: no event handlers, no client state.