Free Framer component
Mile Markers
A timeline or a list of steps. A line grows down the list as people read, and each step lights up when the line reaches it.
How a project runs
Week 1
Listen
A call to learn what you need, who it is for and what has to be ready by when.
Week 2
Plan
Pages, content and a schedule on one page, so everyone agrees before work starts.
Weeks 3–5
Design and build
The site takes shape in Framer. You see progress every week and comment on the real thing.
Week 6
Launch
Final checks on phones and laptops, then the site goes live on your domain.
Alternate, with numbers
Steps on both sides of the line. Under 640px wide it turns into one column, so it reads well on phones.
2016
Two people, one desk
The studio starts in a shared office with one client and a borrowed printer.
2018
First book cover
A small publisher asks for a cover. Forty more follow over the next three years.
2021
A team of eight
Designers, a writer and a developer, working from two cities.
2024
Our own room
A street-level studio with space for workshops and open evenings.
Today
Still drawing first
Every project starts on paper, then moves to the screen.
Details
Follows the reader
The line grows as people scroll and each marker lights up when the line reaches it. Scroll back and it shrinks again, or keep it lit with Once.
Two layouts
Line on the left, or steps on both sides of the line. Alternate turns into one column under 640px wide.
Dots, rings or numbers
Three marker styles with your own size, line width and colors.
Label, title and text
Each step has an optional label (a year, a week, a price), a title and a short text. Pick H2, H3, H4 or P for the titles.
Plain HTML
The steps are an ordered list in the page, so search engines and screen readers read all of them.
Reduced motion
Visitors who turn off motion see every step lit, with no movement.
Settings
Steps
Add, remove and reorder steps. Each has a label, a title and a text.
Layout
Line on the left, or alternate (both sides, one column under 640px).
Marker
Dot, ring or number, with its size.
Title tag / Fonts
H2, H3, H4 or P for titles, and fonts for the label, title and text.
Colors
Title, text, line (the growing line and lit markers), track (before they light up) and the inside of the markers.
Line width / Rail width / Gap
How thick the line is, the column it sits in, and the space between steps.
Unlit text
How faint the steps are before the line reaches them. 1 keeps them as they are.
Reading line / Once
Where on the screen a step lights up (0.6 = 60% down), and whether steps stay lit when people scroll back up.
How to use it
01
Open the component on the Framer Marketplace and copy it.
02
Paste it on any page of your Framer project (⌘V).
03
Change the settings in the right panel. Preview to see it move.
From the same maker
Framer templates by H SHIFT WORKS
CIRCLED
Booking site for portrait and wedding photographers.
View template →
AGENDA
Conference site with schedule, speakers and venue.
View template →
OFFSET
Studio site for an independent digital agency.
View template →
TRUSS
Site for renovation and design-build companies.
View template →
GAZE
Dark, photo-led portfolio for one visual artist.
View template →
© 2026 H SHIFT WORKS. Framer templates, plugins and components.
framer.com/@hshiftworks
X: @hshiftworks