Coming Soon Client Marquee

ComingSoon76: Coming Soon Client Marquee

A references section for the stage where the deals are done but the names are not public yet. The layout keeps the shape of a client wall, eyebrow, heading, description, then an endless strip, except the strip carries no logos at all: an oversized ghost-type label scrolls in its place, so the page holds its social-proof rhythm without claiming anything it cannot.

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

Base UI flavor

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

This installs the block to components/beste/block/comingsoon76.tsx, the badge7 component it uses for its eyebrow, and its dependencies.

Quick start

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

import {
  ComingSoon76,
  comingsoon76Demo,
} from "@/components/beste/block/comingsoon76";

export default function Page() {
  return <ComingSoon76 {...comingsoon76Demo} />;
}

Then replace the demo with your own props. marqueeText is the only string that repeats, so it is the one to change on a Turkish page.

import { ComingSoon76 } from "@/components/beste/block/comingsoon76";

export default function References() {
  return (
    <ComingSoon76
      badge={{ label: "Referanslar" }}
      heading="Yakında burada"
      description="Anlaşmalar tamam, isimler henüz açıklanmadı."
      marqueeText="Yakında"
      note="Dokuz iş ortağı, ilk isimler bu çeyrekte."
      direction="left"
      speed="normal"
    />
  );
}

Props

type Badge = { label: string };

Behavior notes

• The label is repeated six times per half, the track renders both halves and animates to -50%, so the loop closes seamlessly at any viewport width. Hovering anywhere over the strip pauses the animation via [animation-play-state:paused].
• The type is sized in 14vw up to the md breakpoint and then locks to 9rem, so it scales with a phone but stops growing on a wide desktop.
• leading-tight rather than leading-none is deliberate. The strip clips its overflow to hide the loop seam, and a line box of exactly 1em is shorter than the font's ascent plus descent, which cropped the descenders on letters like g, q and p.
• Direction and speed resolve to one of six pre-written Tailwind classes rather than an interpolated one, so nothing depends on a class name assembled at render time. Both props fall back to left and normal when passed an unknown value.
• Left and right edges are masked with from-background gradients, which assumes the section sits on the page background. On a tinted surface, swap those two gradient stops to match.
• The keyframes live in a <style jsx> block scoped by the block name, so two marquee blocks on the same page cannot collide over an animation name.