Comingsoon81: Quiet Waitlist

A quiet waitlist page: wordmark, an eyebrow date, a headline that settles in word by word, one inline email row, and a line of overlapping avatars with a count of the names already down.

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

Base UI flavor

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

This installs the block to components/beste/block/comingsoon81.tsx, the shadcn input primitive the capture is built on, and the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Comingsoon81, comingsoon81Demo } from "@/components/beste/block/comingsoon81";

export default function Page() {
  return <Comingsoon81 {...comingsoon81Demo} />;
}

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

import { Comingsoon81 } from "@/components/beste/block/comingsoon81";

export default function Page() {
  return (
    <Comingsoon81
      brand="Altair"
      eyebrow="Spring 2027"
      heading="Group sessions are coming. Slowly, like everything else here."
      description="Six people, one practitioner, ten weeks. We are taking names now."
      form={{
        placeholder: "you@example.com",
        button: "Put my name down",
        note: "No commitment. We write once, when the group forms.",
      }}
      avatars={[{ src: "/people/one.jpg", alt: "Portrait" }]}
      proof="31 names so far"
    />
  );
}

Props

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

Behavior notes

• Everything under the wordmark is centred in a flex-1 column, so the page stays optically centred on any viewport height rather than being pushed down by a fixed top padding.
• The heading runs with trigger="mount" and a slightly faster 0.06s stagger than the component's default, because a full-screen page is above the fold and a long headline should not still be assembling when the reader arrives.
• Everything after the heading waits on 0.4 + heading.split(" ").length * 0.06, the same arithmetic the stagger uses, so the description lands exactly as the last word does however long the headline is.
• The note is rendered outside the form element rather than inside it, which keeps the input and its button as a single flex row that flips to a column below sm without the note joining that row.
• The Input is deliberately transparent with a border that goes solid on focus and no focus ring, so the row reads as one object with the pill next to it.
• Avatars overlap with -space-x-3 and each carries a border-background ring, which is what separates them rather than a gap.
• The form only calls preventDefault(); no address is captured or sent until you wire it up.