Animated Border Video 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/cta61.tsx instead.

Usage

The file also exports cta61Demo, 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 { Cta61, cta61Demo } from "@/components/blocks/cta/cta61";

export default function Page() {
  return <Cta61 {...cta61Demo} />;
}

Props

Behavior notes

• The border ring is a `conic-gradient` painted onto an oversized absolutely-positioned layer behind an inset video, continuously rotated with a pure CSS `@keyframes` transform: rotate loop, no JS; only the ring color shows past the inset video's edge.
• The float animation reuses the same translateY `@keyframes` pattern as the circular-video CTA, layered on top of the rotating ring so both animations run independently and continuously.
• The blurred glow behind the card is a plain `bg-primary/30 blur-3xl` shape, decorative and `aria-hidden`, not a video or interactive element.
• The video autoplays muted and looped via native HTML attributes only and is marked `aria-hidden`, purely decorative inside the card.