Ink Band CTA

Cta103: Ink Band CTA

A closing band on the ink surface under film grain: a wide heading that settles in word by word on one side, and a short paragraph, a pale pill and a quieter underlined link aligned to its baseline on the other.

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

Base UI flavor

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

This installs the block to components/beste/block/cta103.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Cta103, cta103Demo } from "@/components/beste/block/cta103";

export default function Page() {
  return <Cta103 {...cta103Demo} />;
}

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

import { Cta103 } from "@/components/beste/block/cta103";

export default function Page() {
  return (
    <Cta103
      eyebrow="One more thing"
      heading="If you have read this far, you are already halfway in the door."
      description="The rest is a phone call. Twenty minutes, free, no decisions required."
      button={{ label: "Make the call", href: "/call", tone: "light" }}
      link={{ label: "Or read the questions first", href: "/faq" }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The band is a flat ink surface with only film grain over it, no photograph and no scroll listener, so it carries the set's dark closing look without the weight of an image.
• The grain filter takes its id from useId, so two grain surfaces on one page cannot collide on a global SVG id.
• button falls back to the light tone rather than primary, which is the correct default on a dark band: an unspecified button comes out pale instead of taking the brand colour.
• The two columns align on md:items-end, so the paragraph and its actions sit on the same baseline as the foot of the heading rather than beside its first line.
• The right column waits on 0.3 + heading.split(" ").length * 0.05, matching the word stagger, so it arrives as the heading finishes however long that heading runs.
• The section sets text-background at its root, so everything inside inherits the pale colour and only the deliberately dimmer lines carry an opacity of their own.
• The underlined link uses a decoration-background/30 rule that goes solid on hover, which is quieter than a colour change and keeps the two actions clearly ranked.