Between Sessions Line

Workflow58: Between Sessions Line

Four things that happen between sessions, strung along a line that draws itself across the row as the steps arrive, each with a circled icon, a number, a title and a paragraph.

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

Base UI flavor

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

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

Quick start

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

import { Workflow58, workflow58Demo } from "@/components/beste/block/workflow58";

export default function Page() {
  return <Workflow58 {...workflow58Demo} />;
}

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

import { Workflow58 } from "@/components/beste/block/workflow58";

export default function Page() {
  return (
    <Workflow58
      eyebrow="Between sessions"
      heading="The week is where most of the work happens."
      description="An hour a week is not much. What we do around it is what makes it enough."
      button={{ label: "See a sample week", href: "/week", tone: "outline" }}
      steps={[
        { icon: NotebookPen, title: "A short note", description: "Within a day of each session, a few lines from us." },
        { icon: Phone, title: "A call if you need it", description: "Not a crisis line, but a person." },
      ]}
    />
  );
}

Props

type Step = {
  icon: LucideIcon;
  title: string;
  description: string;
};

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

Behavior notes

• The connecting line is two rules stacked: a pale track and a dark one scaled on scaleX over 2.4s, so the line appears to be drawn along the row while the track shows where it is going.
• The steps are given a long 0.35s stagger, unusually wide for this set, so they land roughly in time with the line reaching them rather than all arriving before it does.
• Both rules are hidden md:block, since a horizontal connector has no meaning once the steps stack into a single column on a phone.
• The icon circles are filled with bg-background, which is what lets them sit on the line without it showing through the middle of each mark.
• icon takes the Lucide component itself, not a name string, so icons are tree-shaken with your bundle and there is no map to maintain.
• Numbers come from the index in tabular-nums, and the list is an ol, so the sequence is real rather than decorative.
• The grid is fixed at four across from md, which is what keeps the line and the circles aligned; a fifth step wraps to a new row and leaves the connector behind.