Six Promises

Feature277: Six Promises

Six promises in a numbered grid, each one under a hairline rule that draws itself in from the left as the item arrives.

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

Base UI flavor

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

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

Quick start

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

import { Feature277, feature277Demo } from "@/components/beste/block/feature277";

export default function Page() {
  return <Feature277 {...feature277Demo} />;
}

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

import { Feature277 } from "@/components/beste/block/feature277";

export default function Page() {
  return (
    <Feature277
      eyebrow="What you can count on"
      heading="Six promises we make before you say a word."
      description="They are simple, and we keep them."
      button={{ label: "Read our full commitments", href: "/commitments", tone: "outline" }}
      values={[
        { title: "You will not be rushed", description: "Sessions end when the hour ends, never because the next person is waiting." },
        { title: "Nothing is recorded", description: "No notes leave the room, and the ones we keep are yours to read." },
      ]}
    />
  );
}

Props

type Value = {
  title: string;
  description: string;
};

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

Behavior notes

• Each rule is its own element scaled on scaleX from a left origin, so it draws itself in rather than fading; a border-t could not be animated this way.
• The rules run on a slightly longer delay than the text they sit above (0.15 + index * 0.12 against index * 0.1), so a line arrives just behind its item and the grid resolves as a set of drawn rules rather than a flash.
• Numbers come from the index, padded to two digits and set in tabular-nums, so a column of them stays aligned and nothing has to be kept in sync when a promise is added.
• The list is an ol, so the numbering is real rather than decorative, and the titles inside it are h3 under the section h2.
• The grid steps from one column to two at sm and three at md, and the numbering follows the source order in every arrangement.
• The header row puts the intro at md:col-start-9 and aligns it on md:justify-end, so it sits beside the foot of the heading instead of drifting under it.
• Nothing here is interactive: the promises are copy, and button is the only link in the section.