What is a process rail?
A process rail is a “how it works” section drawn as a row: three to five steps sit on one horizontal line, each with a number, a short title, one sentence and a picture. The section pins to the screen while the reader scrolls; a small bead rides along the line, the line draws itself up to the bead, and each step comes to life as the bead reaches it — the step brightens, its number rolls in like an odometer and its picture fades up.
It is the compact cousin of the Process widget: that one is a tall list beside one big pinned image for a longer walk-through; the rail is the whole process at a glance, in one row.
When to use a process rail
- How it works, in one glance — a row the reader takes in before scrolling through it.
- Onboarding — sign up, connect, launch.
- A three-to-five step method — measure, cut, stitch, deliver.
- A delivery timeline — order, make, ship, enjoy.
Prefer the Process widget when each step needs a big picture and more text.
How it works
Above 768px the section is tall and its stage sticks to the viewport; scroll progress moves a bead along the line and draws the line up to it. Each step has three tiers: resting steps sit at 42%, passed steps at 72%, the current step at full strength — and when the bead reaches a step its number rolls in digit by digit and its picture fades and scales up. Clicking a step scrolls straight to it. On phones the rail turns vertical: the line runs down the left, the steps stack, nothing pins, and the bead follows the step you are reading. Readers who ask their device for reduced motion get the states without the transitions.
Best practices
- Three to five steps; the row gets crowded beyond that.
- Titles of one to three words; one sentence per step.
- Give every step a picture — 4:3 reads best in the row — or switch the ratio to match your photos.
- Keep the title above the rail short; it is a label, not a headline.
How to make a process rail — free
Edit the steps above
Set the title and each step's heading, text and image.Pick the options
Image ratio, numbering on or off, how much scroll each step takes, colours.Embed or download
Copy the embed code or save the self-contained HTML file — or build a whole story in Scrollytelling.
Templates that use a process rail
Want a head start? These ready-made, fully-editable templates put the process rail to work — customize one and publish in minutes.
Process rail — frequently asked questions
Is the process rail widget free?
Yes — customize and export it here with no account.
What happens on phones?
The rail turns vertical: the line runs down the left, the steps stack under each other and the bead follows the step you are reading. Nothing pins, nothing is hidden.
How many steps can I add?
As many as you like, but three to five keeps the row readable; each step adds about half a screen of scroll on desktop.
Can I hide the numbers?
Yes — switch step numbers off. The bead and the line stay.