Block Process Steps — React Page Block
Three-to-four step process with numbered badges and a connector line that draws itself in on scroll; vertical timeline on narrow screens, replaceable media per step.
Usage
import { BlockProcessSteps } from "@/components/BlockProcessSteps";
export function HowItWorks() {
return (
<BlockProcessSteps
title="From install to insight in an afternoon."
steps={[
{ title: "Connect your repos", text: "One OAuth flow, automatic indexing." },
{ title: "Describe a release", text: "The graph assembles itself." },
{ title: "Ship and watch", text: "Staged rollouts with auto-pause." },
]}
action={{ label: "Read the quickstart", href: "/docs" }}
{...{
title: "Your next release starts here.",
accent: "#d5ed9a",
scheme: "dark"
}}
/>
);
}Implementation notes & API
Purpose: process/how-it-works steps. Copy it, ship it — every string, link and color arrives through props. Runtime: pure DOM + CSS. No WebGPU, canvas, animation library or external assets; SSR-safe on first render. Theming: root custom properties (--vb-bg, --vb-fg, --vb-accent, --vb-border, --vb-radius, --vb-container) or the accent/scheme/className/style props. scheme flips the dark default to light. Guardrails: responsive via container queries down to 320px; interactive behavior degrades on touch; prefers-reduced-motion drops entrance/scroll motion while content stays complete. The connector draws once when the section enters the viewport (IntersectionObserver + CSS transform); reduced motion shows the finished line and settled layout immediately.
| Property | Type | Notes / default |
|---|---|---|
eyebrow / title / description | ReactNode | Section header |
steps | readonly ProcessStep[] | { title, text, media?, label? } — 3-4 recommended |
action | { label, href } | null | Call to action under the steps |
scheme | "dark" | "light" | dark |
accent | string (hex) | Sets --vb-accent for the whole block |
className / style | string / CSSProperties | Applied to the section root |
children | ReactNode | Replaces the default content entirely |