# Process steps
How it works section with a connecting line that draws on scroll and step cards that activate as you pass.
- Type: block
- Category: Sections
- Tier: Free
- Dependencies: lucide-react, motion
## Install
```bash
npx shadcn@latest add https://facadeui.com/r/process-steps.json
```
## Usage
```tsx
import { ProcessSteps } from "@/components/facade/process-steps";
export default function Page() {
return ;
}
```
## Source
```tsx
"use client";
import * as React from "react";
import {
motion,
useMotionValueEvent,
useReducedMotion,
useScroll,
useSpring,
useTransform,
} from "motion/react";
import { ArrowRight, Calendar, Check, CircleCheck, Phone, Wrench } from "lucide-react";
import { cn } from "@/lib/utils";
export interface ProcessStep {
title: string;
description: string;
/** Small meta label, e.g. "Takes 2 minutes". */
meta?: string;
icon?: React.ComponentType<{ className?: string }>;
}
export interface ProcessStepsProps {
eyebrow?: string;
title?: string;
description?: string;
steps?: ProcessStep[];
cta?: { label: string; href: string };
className?: string;
}
const EASE = [0.22, 1, 0.36, 1] as const;
const DEFAULT_STEPS: ProcessStep[] = [
{
title: "Tell us what's going on",
description: "Call, text or book online. Share a few photos and we'll confirm the issue before anyone rolls a truck.",
meta: "Takes 2 minutes",
icon: Phone,
},
{
title: "Get a flat-rate quote",
description: "You'll see the full price upfront, in writing. No overtime fees, no surprises on the invoice.",
meta: "Same day",
icon: Calendar,
},
{
title: "We do the work right",
description: "A licensed, background-checked tech arrives in a stocked van and treats your home like their own.",
meta: "Most jobs in one visit",
icon: Wrench,
},
{
title: "Backed for five years",
description: "Every repair is covered by our 5-year workmanship warranty. If it's not right, we come back free.",
meta: "In writing",
icon: CircleCheck,
},
];
export function ProcessSteps({
eyebrow = "How it works",
title = "From first call to fixed, in four simple steps",
description = "We've refined this process over 9,000 jobs in Denver. It's built around one idea: you should never have to chase us.",
steps = DEFAULT_STEPS,
cta = { label: "Start with step one", href: "#quote" },
className,
}: ProcessStepsProps) {
const reduce = useReducedMotion();
const listRef = React.useRef(null);
const { scrollYProgress } = useScroll({
target: listRef,
offset: ["start 75%", "end 55%"],
});
const progress = useSpring(scrollYProgress, { stiffness: 200, damping: 40, restDelta: 0.001 });
const scaleY = useTransform(progress, [0, 1], [0, 1]);
const [progressIndex, setProgressIndex] = React.useState(-1);
useMotionValueEvent(scrollYProgress, "change", (v) => {
const n = steps.length;
// Marker i sits at fraction i / (n - 1) of the line; activate slightly before the line reaches it.
const idx = v < 0.01 ? -1 : Math.min(n - 1, Math.floor(v * Math.max(n - 1, 1) + 0.25));
setProgressIndex(idx);
});
const active = reduce ? steps.length - 1 : progressIndex;
return (