Process Steps

Sticky image stack
No extra packages
3–5 steps

Live preview

Loading preview…

Scroll & click inside the frame — it's the real section running with demo content

Step 1 — your customization message

Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]

Step 2 — the prompt · Process Steps211 lines · 9,397 chars

You are given a task to integrate an existing React component in the codebase

The codebase should support:
- shadcn project structure
- Tailwind CSS
- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

What it is

A “how we work” walkthrough where the step descriptions scroll on one side while the matching image sticks and swaps on the other. As the visitor scrolls through step 01 → 04, the visuals follow along automatically.

Perfect for

Explaining your process or methodology: how a project runs from first call to handover, how onboarding works, how an order is fulfilled. Trust is built here — people buy from businesses whose process they can picture.

What to prepare

3–5 steps, each with: a number, a stage label, a punchy title, a 2–3 sentence body, three bullet points, and an image

Good to know

Write the step titles like statements, not labels — “It starts on paper, not on site.” beats “Step 1: Planning.” The demo copy in the prompt is a masterclass in this tone; match its energy with your own content.