Hello, I'm Nick. I design insane websites and user interfaces.
This is where I talk about all of the cool sites I find online.
I keep coming back to a scroll progress indicator on a fintech homepage. Not the pinned section it lives inside, not the four product screenshots it measures, and not the mint-green button that spawns a leaf when you hover it. Just the rail: four pixels wide, one hundred and eighty tall, filling itself in as you scroll.
The site is Fruitful, a financial-planning membership that spends 45% of its homepage on a single sticky section called How it works. That section is 7,313 pixels of scroll for four product visuals, which is a lot to ask. The rail is what makes the ask honest.
The move that made me stop
Fruitful's rail sits on the left edge of the active step card in the pinned runway. The track is rgba(0,0,0,0.1) at 4×180px. Inside it, a #039855 fill layer whose height is scrubbed to the scroll position within that step. Sample points along the scroll: 162px filled at scrollY 2166, 172px at 2301, 180px full at 2953. Because the rail is exactly the height of the card, the effect reads as the card writing itself in from the top as you move.
Two divs. That is the whole trick. And it does something almost nothing else on the page does. It turns "I have no idea how much of this I have left" into "I can see I'm three-quarters through step two." On a section that demands 6.9 viewport heights of your attention, that answer is not a nicety. That answer is the contract.
Why this scroll progress indicator lands
Most sites I review treat progress as a static widget. A dot pagination. A ticker in the corner. Some kind of chrome that lives outside the content and points at it. The problem with that solution is that the pointer and the thing being pointed at are two different objects, so your eye keeps switching between them. Fruitful's rail lives inside the content. It is welded to the card it measures. When the card is active, the rail is filling. When the card retires, the rail vanishes with it. There is nothing to look at that isn't the story.
The other reason the rail lands is what surrounds it. Fruitful's inactive step cards sit at opacity 0.18, never at zero. So while the active step is alive with its rail filling, you can still faintly see the past step above and the future step below. The rail says "how far through this step." The 0.18 ghosts say "how many steps." Two motion constants doing the job of a whole navigation UI.
I watched the five-minute narrated walkthrough of the Fruitful homepage. The narrator called the pricing "pretty standard," the FAQ "pretty standard," the footer "pretty standard." The only specific mechanism he praised, out loud, three separate times, was the rail. "That's a really nice touch here."
The part I'll steal
Three things I'm taking from this into my own work.
First, when you ask for a lot of scroll, you owe the visitor a way to measure it. That measure should be welded to the thing they're moving through. A courtesy widget in the corner is worse than nothing, because it points away from the content.
Second, attach the measurement to the content object, not to the frame. A rail on the card, not a bar at the top of the viewport. The visitor should never have to break attention to check where they are.
Third, pick a motion constant that turns a slideshow into a table of contents. Fruitful's 0.18 is that constant. Any inactive item at exactly that opacity stays legible enough to count without competing for attention. Zero would have hidden the shape of the section. One would have flattened it.
The honest tradeoff
Fruitful's stylesheet has no prefers-reduced-motion block anywhere, which is the one real gap on an otherwise careful site. The rail itself is fine under reduced motion. It is a height change, nothing more. The rest of the section runs 0.6-to-1.0 scale ramps on four layered visuals during a 6.9-viewport pin, which is precisely the pattern that provokes vestibular discomfort. A team this attentive would have caught it if it had come up. It reads as an oversight, not a stance. Fixable in twenty lines of CSS. The rail keeps its power either way.
Want a homepage that thinks this hard about the small stuff?
If you're building anything with a long scroll story, a financial product, an onboarding flow, a marketing site that has to actually explain what your company does, this is the level of attention that makes the whole thing work. Small mechanisms doing exactly the right job at exactly the right moment. That is the kind of work Crazy Creative builds. See what we've made at crazycreative.design.