Comingsoon80: Second Address Countdown

A full-screen opening announcement over a photograph that drifts behind film grain: the headline settles in word by word, a live countdown ticks under the description, and a rounded email capture sits opposite it.

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

Base UI flavor

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

This installs the block to components/beste/block/comingsoon80.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 comingsoon80Demo alongside the block: the exact props behind the preview above. Spread it to get a working countdown page in one line.

import { Comingsoon80, comingsoon80Demo } from "@/components/beste/block/comingsoon80";

export default function Page() {
  return <Comingsoon80 {...comingsoon80Demo} />;
}

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

import { Comingsoon80 } from "@/components/beste/block/comingsoon80";

export default function Page() {
  return (
    <Comingsoon80
      eyebrow="A second address"
      heading="Porto opens in the new year."
      description="Two rooms above a bookshop, the same three practitioners on rotation."
      opensAt="2027-01-12T09:00:00Z"
      image={{ src: "/photos/lake.jpg", alt: "A calm lake reflecting mountains at first light" }}
      form={{
        placeholder: "Your email",
        button: "Tell me when",
        note: "One email when the doors open. Nothing before, nothing after.",
      }}
      labels={{ days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" }}
    />
  );
}

Props

type Comingsoon80Labels = {
  days?: string;
  hours?: string;
  minutes?: string;
  seconds?: string;
};

Behavior notes

• The countdown is computed from Date.now() on every tick rather than decremented, so a tab that was backgrounded for an hour shows the correct time the moment it wakes rather than an interval's worth of drift.
• The remaining time is clamped at zero, so a date in the past renders 00 across all four units instead of counting up into negatives.
• Its initial value is produced in a useState initialiser, which means the first paint already carries real numbers rather than four zeroes that snap a second later.
• Units are padded to two digits and set in tabular-nums, so the row does not change width as the seconds roll over.
• The heading runs with trigger="mount": a full-screen page is above the fold, so waiting for a scroll into view would leave it invisible.
• The grain overlay's feTurbulence filter takes its id from useId, so two grain surfaces on one page do not collide on a global SVG id.
• The Input is restyled for a dark surface (a translucent fill, a background/30 border, and the focus ring traded for a solid border), because the shadcn default is drawn for a light one.
• The form only calls preventDefault(); no address is captured or sent until you wire it up.