Design Library
View site

Step Timeline

A short sequence told as you scroll. The heading is sticky on the left; the steps sit on a vertical rail on the right that fills in accent as they pass the middle of the screen. The step whose top has crossed the middle is active — full strength, accent numeral, filled node — while the rest wait at reduced opacity. Used for “Audit, then project, then retainer” on /services, and for “How it works” on /services/ux-audit, where it sits on the white ground — every colour is a token, so the light ladder applies with no extra styles.

Live Preview

Scroll the page to drive it. The scroll-driven states (sticky heading, dimming, the 60vh step spacing) apply from lg; below that the steps stack and fade in one after another.

Audit, then project, then retainer

Most clients start small and stay.

  1. 01

    Start with a UX audit

    Find what's costing you customers, ranked by impact. A fixed price, quoted upfront.

  2. 02

    Fix it with a project

    Website, web app or mobile app design, quoted as a fixed price from the audit's findings.

  3. 03

    Keep improving on a retainer

    A set block of senior design hours each month, without the cost of a hire.

tsx
<StepTimeline
  title="Audit, then project, then retainer"
  subtitle="Most clients start small and stay."
  steps={[{ title: 'Start with a UX audit', body: '…' }, …]}
/>

Design Details

Active step

Measured from the steps themselves (the last one whose top has passed the middle of the screen), not as a fraction of progress — the last step is deliberately shorter than the others.

Classes

.step-timeline-item, .step-timeline-num, .step-timeline-node and .step-timeline-fill in globals.css. Base styles are the mobile / reduced-motion reading; the lg block adds the dimming and spacing.

Reduced motion

Every step is visible at full strength, the rail is drawn complete, and the tall step spacing goes — no long empty scroll.

Props

PropTypeDefaultDescription
title*string-Section heading — sticky on the left from lg.
subtitlestring-Intro paragraph under the heading.
steps*{ title: string; body: string; meta?: string }[]-The sequence, in order. Numbered 01–NN automatically. Best at 3–4 steps: each takes about 60vh of scroll on desktop. Optional meta is a quiet line between the numeral and the title — the step timing on /services/ux-audit ("Day 1").

Import

tsx
import { StepTimeline } from '@/components/sections/StepTimeline'