I Built a Website With a Speed Gauge That Actually Syncs to Your Scroll

Jawad Ali — Sun, 09 Aug 2026 20:40:02 +0000

Quick note: I link to a template I sell near the end of this. The story above it stands on its own either way.)

I spent a week building a website template. Not for a client. For nobody, really — just because I wanted to see if I could make one detail work.

Here’s the detail: a small circular gauge in the corner of the screen. As you scroll, it fills up and the number inside counts up with it. Scroll back up, it winds back down. It’s not a video. It’s not a pre-baked animation. It’s tied directly to your scroll position, live.

That’s it. That’s the whole idea I was chasing.

Why I cared about one gauge so much
Most “cinematic” templates fake it. Dark background, a fade-in here, a parallax layer there — and underneath, it’s still just a regular page in a costume.

I wanted one thing on the page that actually reacted to you. Not decoration. A response.

It took three tries to get right
First version: a timed animation. Press scroll, watch it play. Looked great in my test. Fell apart the second I scrolled faster or slower than I’d planned for — because it wasn’t actually listening to me, it was just running on its own clock next to me.

Write on Medium
Second version: I tried to fix that by linking the same animation to scroll progress. Better, but it always felt half a step behind, like dragging a rock through water.

Third version — the one that shipped — I stopped trying to animate it at all. No animation library doing the work. The scroll position is the gauge value, directly. No smoothing, no easing fighting the input. Just: wherever you are on the page, that’s where the gauge is.

Sounds obvious now. Took two wrong versions to get there.

What else is in the page
The gauge is the part I’m proud of. The rest is there to support it, not compete with it:

A scroll-pinned story sequence — four short chapters instead of one long scroll
Cards that tilt slightly toward your mouse, so the page still responds to you outside the scroll sequence
A macro photo gallery — because a launch page that never shows the details doesn’t earn the word “premium”
One HTML file. No build step. No framework. Open it, it works.
If you’re solving the same problem
If you’ve ever tried to sync UI to scroll and had it feel disconnected from the actual input — the timed-animation trap I fell into twice — I’d genuinely like to hear how you solved it. Drop it in the comments.

And if you want to see the gauge doing its thing rather than take my word for it, here’s the live demo: raven-5a231.netlify.app

Full source, ready to customize, is on Gumroad — 20% off with code 728: jawadaliyour.gumroad.com/l/wmbber/728

I Don't Own My Dream Bike Yet. So I Built It a Website Instead.

Jawad Ali — Sun, 09 Aug 2026 20:32:46 +0000

I've wanted a bike like this since before I could afford one. Not any bike - a specific kind. Low, dark, quiet until it isn't. The kind you see once in a parking lot and think about for the rest of the day.
I still don't own it. Maybe not this year either.
So I did the next best thing I actually know how to do: I built it a home on the internet.
Where this actually started
It wasn't really about the bike, at first. It was about a feeling I couldn't shake - that most "product" websites don't feel like the product they're selling. A motorcycle is loud, physical, alive. Most motorcycle websites are quiet, flat, and forgettable. A spec sheet with a stock photo on top.
That gap bothered me more than it probably should have.
I kept thinking: if I ever get close to a bike like that, I want the website to feel like standing next to it. Not a brochure. Something closer to the moment right before the engine turns on.
So I built the bike I couldn't buy yet
I named it RAVEN. Not a real motorcycle - my version of the one I keep picturing. Electric, minimal, no wasted lines. I gave it a story instead of just a spec sheet: four short chapters that play as you scroll, each one a different reason the bike exists.
And then I gave it the one detail that took the longest to get right - a small gauge that fills up and counts as you scroll, live, tied to nothing but your own hand on the mouse or your thumb on the screen. Scroll down, it climbs. Scroll back, it falls. No timer running in the background pretending to be you.
That detail is the closest I could get to the actual feeling - the needle moving because you asked it to, not because a script decided it should.
Why build a website for a bike I don't own
Because wanting something for years teaches you its shape, even without ever touching it. I know what that bike would sound like pulling away. I know the angle I'd want to see it from in a driveway at dusk. I've never sat on it, and I could still draw you the exact curve of its tank from memory.
Building RAVEN was a way to put that shape somewhere real, instead of just carrying it around in my head. A rendering, four chapters, one gauge that listens to you - it's not the bike. But it's the closest I've gotten so far.
If you're chasing something similar
Maybe it's not a bike for you. Maybe it's a car, a guitar, an apartment with good light. The thing you don't have yet but already know the shape of.
I'd genuinely like to hear what it is, if you want to share it in the comments.
And if you build things for a living - pages, launches, brands - and you want to see what "the website feels like standing next to the product" actually looks like in practice, RAVEN's up as a template. Full source, live demo:
raven-5a231.netlify.app
Full source on Gumroad, 20% off with code 728:

jawadaliyour.gumroad.com/l/wmbber

DEV Community: Jawad Ali

I Built a Website With a Speed Gauge That Actually Syncs to Your Scroll

I Don't Own My Dream Bike Yet. So I Built It a Website Instead.