Floating Video Circle CTA

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.

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

Usage

The file also exports cta57Demo, 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 { Cta57, cta57Demo } from "@/components/blocks/cta/cta57";

export default function Page() {
  return <Cta57 {...cta57Demo} />;
}

Props

Behavior notes

• The video loops continuously and is purely decorative, marked `aria-hidden`, muted and autoplaying via native HTML video attributes only, no client-side JS.
• The float animation is a pure CSS `@keyframes` translateY loop on the circular wrapper, 6s ease-in-out infinite, no scroll or hover trigger.
• The video wrapper has a definite size (`size-64 sm:size-80`) so the `size-full object-cover` video always resolves its height, independent of the circular clipping.