Three Steps Process

Workflow57: Three Steps Process

Three steps in a row, each under a hairline that draws itself in from the left, with an oversized ghosted number, a title, a paragraph and a duration line, closed by a wide photographic band.

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

Base UI flavor

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

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

Quick start

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

import { Workflow57, workflow57Demo } from "@/components/beste/block/workflow57";

export default function Page() {
  return <Workflow57 {...workflow57Demo} />;
}

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

import { Workflow57 } from "@/components/beste/block/workflow57";

export default function Page() {
  return (
    <Workflow57
      eyebrow="How it begins"
      heading="Three small steps, none of them a leap."
      description="You do not need a diagnosis, a goal or a good reason."
      button={{ label: "Take the first step", href: "/call" }}
      steps={[
        {
          title: "A first call",
          description: "Twenty minutes on the phone or on video.",
          meta: "20 minutes, free",
        },
      ]}
      image={{ src: "/photos/valley.jpg", alt: "A wide green valley under soft evening light" }}
    />
  );
}

Props

type Step = {
  title: string;
  description: string;
  meta: 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 longer delay than the steps they sit above (0.2 + index * 0.2 against index * 0.15), so each line arrives just behind its step and the row reads as three rules being drawn in turn.
• The meta line carries mt-auto, so the three duration lines sit on one baseline however uneven the descriptions above them are.
• Numbers come from the index, padded to two digits and set at text-foreground/25, so they read as a watermark rather than as content competing with the titles.
• The steps are an ol, so the sequence is real for a screen reader rather than implied by the printed numbers.
• The closing band drifts -14% to 14% against a 1.3 scale inside a 21/9 frame, wide enough to carry that much travel without ever showing an edge.
• The band is optional; without it the section ends on the third step's duration line.