Split Screen Launch

ComingSoon46: Split Screen Launch

A full-height Auralis split coming-soon page with a dark brand panel carrying a wordmark, a monospace parenthetical eyebrow, a heading, and a working email notify form, set beside a full-bleed image with a floating launch label.

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

Base UI flavor

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

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

Quick start

The installed file exports comingsoon46Demo alongside the block: the exact props behind the preview above. Spread it to get a working split launch page in one line.

import { ComingSoon46, comingsoon46Demo } from "@/components/beste/block/comingsoon46";

export default function Page() {
  return <ComingSoon46 {...comingsoon46Demo} />;
}

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

import { ComingSoon46 } from "@/components/beste/block/comingsoon46";

export default function Page() {
  return (
    <ComingSoon46
      brand="Auralis"
      badge={{ label: "Not long now" }}
      labels={{
        placeholder: "you@studio.com",
        success: "You're on the list. We'll open the doors to you first.",
        note: "One email at launch. Nothing before, nothing after.",
        imageLabel: "Opening autumn 2026",
      }}
      heading="A calmer studio is almost ready to open."
      description="The first hundred seats go to the people on this list."
      image={{ src: "/studio.jpg", alt: "A calm, light-filled studio interior" }}
    />
  );
}

Props

type Badge = {
  label: string;
};

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

type ComingSoon46Labels = {
  placeholder?: string;
  success?: string;
  note?: string;
  imageLabel?: string;
};

Behavior notes

• 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 the form has not been submitted, and disappears once the success pill takes its place.
• The brand panel sits on a bg-foreground surface with text-background type; the badge and labels.imageLabel both render through Badge7 as monospace parenthetical eyebrows, the latter floating over the image on a translucent backdrop.
• The image renders on the right only when image is set, as a plain <img> covering the panel, and its floating label renders only when labels.imageLabel is present.
• Every string is plain text with no inline markup parsing, so any HTML passed in shows as escaped text.