Video Blinds Reveal 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/cta60.tsx instead.

Usage

The file also exports cta60Demo, 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 { Cta60, cta60Demo } from "@/components/blocks/cta/cta60";

export default function Page() {
  return <Cta60 {...cta60Demo} />;
}

Props

Behavior notes

• The reveal is pure CSS: `group`/`group-hover:` on the panel wrapper drives each bar's `-translate-x-full`/`translate-x-full` (alternating direction by index) with a per-bar `transitionDelay` set inline (`index * 60ms`) for the staggered blinds effect, no JS state.
• The background video autoplays muted and looped via native HTML attributes only and is marked `aria-hidden`, purely decorative behind the bars and text.
• Heading, eyebrow, and description text color transitions from the default foreground tones to white on hover (`group-hover:text-white`) since the revealed video needs light text for legibility, an explicitly scoped exception to the semantic-token-only rule for this reveal effect.
• No hover state exists without JS on touch devices; the panel still reads correctly with the bars fully closed (the default, non-hover state shows only the solid bars and legible on-background text).