Marquee Launch Hero

ComingSoon47: Marquee Launch Hero

An Auralis coming-soon hero with an oversized looping background marquee behind a centered monospace parenthetical eyebrow, a bold wordmark, a tagline, and a working email notify form with a success state.

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/comingsoon47?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { ComingSoon47, comingsoon47Demo } from "@/components/beste/block/comingsoon47";

export default function Page() {
  return <ComingSoon47 {...comingsoon47Demo} />;
}

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

import { ComingSoon47 } from "@/components/beste/block/comingsoon47";

export default function Page() {
  return (
    <ComingSoon47
      badge={{ label: "On its way" }}
      labels={{
        placeholder: "you@studio.com",
        success: "You're on the list. Watch your inbox on launch day.",
        note: "No spam. Just one note when the doors open.",
      }}
      marqueeText="Coming soon"
      wordmark="Auralis"
      tagline="An independent studio for brands that plan to stick around."
    />
  );
}

Props

type Badge = {
  label: string;
};

type ComingSoon47Labels = {
  placeholder?: string;
  success?: string;
  note?: string;
};

Behavior notes

• When marqueeText is set it is expanded into six copies, then that run is doubled, so a CSS translateX keyframe can loop seamlessly; the animation runs 40s linear infinite and pauses on section hover.
• The marquee layer is pointer-events-none, sits at -z-10 behind the content at a faint text-foreground/[0.06], so it is purely decorative and never intercepts clicks.
• The email form owns its own state; handleSubmit calls preventDefault and only flips to the success pill when the trimmed email is non-empty, so there is no external callback to wire.
• The labels.note line renders under the form only while it has not been submitted, and disappears once the success pill takes its place.
• The eyebrow, wordmark, and tagline each render only when their prop is present, and every string is plain text with no inline markup parsing, so any HTML passed in shows as escaped text.