Video Teaser RevealPRO

ComingSoon33: Video Teaser Reveal

A monochrome, editorial full-bleed image pre-launch teaser with a dark overlay, centering a parenthetical eyebrow, a large play button that opens the teaser video in a modal, a heading and supporting line, and a light outline waitlist pill button.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/comingsoon33?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon33?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon33.tsx.

Quick start

The installed file exports comingsoon33Demo alongside the block: the exact props behind the preview above. Spread it to get a working teaser in one line.

import { ComingSoon33, comingsoon33Demo } from "@/components/beste/block/comingsoon33";

export default function Page() {
  return <ComingSoon33 {...comingsoon33Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { ComingSoon33 } from "@/components/beste/block/comingsoon33";

export default function Page() {
  return (
    <ComingSoon33
      badge={{ label: "First look" }}
      heading="Two minutes on what we've been building."
      description="Watch the studio walk through the first release, then leave your address."
      videoUrl="https://www.youtube.com/watch?v=LTBIvdxPvDA"
      button={{ label: "Join the waitlist", href: "/waitlist" }}
      image={{ src: "/teaser.jpg", alt: "A studio team at work, still from the launch teaser" }}
      labels={{ playLabel: "Play the teaser", closeLabel: "Close video" }}
    />
  );
}

Props

type ComingSoon33Labels = {
  playLabel?: string;
  closeLabel?: string;
};

type ActionLink = {
  label: string;
  href: string;
};

type ImageItem = {
  src: string;
  alt: string;
};

Behavior notes

• The play button toggles a local open state that renders a fixed modal overlay; the modal appears only when both open is true and a videoUrl is set, so with no videoUrl the play button itself is hidden.
• The modal loads the video in an <iframe> whose URL is derived from videoUrl with an autoplay=1 query appended (joined with & or ? depending on whether the URL already has a query), so the teaser starts on open.
• The modal closes on the Escape key (via a keydown listener mounted while open), on a click of the backdrop, and on the close button; a click inside the video frame calls stopPropagation so it does not dismiss.
• The button is a real navigation via Button12 asChild wrapping a Next.js <Link href={button.href} /> with the outline tone, so it always points at a URL.
• The eyebrow, heading, description, and button each render only when their prop is present, over a plain <img> background under a fixed bg-foreground/60 overlay.
• Every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.