here's a fixed vertical line on the right edge of every page on the site, one pixel wide, that most visitors will never consciously register. It starts at nothing at the top of the page and grows downward as you scroll, reaching full height exactly when you reach the bottom. It isn't announced anywhere and it doesn't have a label. It's just quietly present the entire time you're on the site, the same brand idea — the seam — running in the background instead of sitting in one hero section waiting for you to find it.
Thedraggableseamintheheroistheideastatedonce,loudly.Thisisthesameidea,saidconstantly,atavolumenobodyhastonotice.
Try it
scroll this box — watch the line on the right
Line 1 — the seam line grows from nothing to full height exactly in step with how far through this box you've scrolled.
Line 2 — the seam line grows from nothing to full height exactly in step with how far through this box you've scrolled.
Line 3 — the seam line grows from nothing to full height exactly in step with how far through this box you've scrolled.
Line 4 — the seam line grows from nothing to full height exactly in step with how far through this box you've scrolled.
Line 5 — the seam line grows from nothing to full height exactly in step with how far through this box you've scrolled.
Line 6 — the seam line grows from nothing to full height exactly in step with how far through this box you've scrolled.
That's the identical technique, just pointed at a small box instead of the whole page — a scaled useScroll reading scroll progress through that specific container, mapped directly onto scaleY with the transform origin pinned to the top. No spring this time, deliberately: the hero's seam is dragged by a hand and needs weight, but this line is reporting a fact — how far down the page you are — and a fact shouldn't lag behind what actually happened.
tsx
const { scrollYProgress } = useScroll(); <motion.div className="fixed right-0 top-0 w-px h-screen bg-gradient-to-b from-white via-white to-transparent" style={{ scaleY: scrollYProgress, transformOrigin: 'top center' }} />
Three seams, one idea, three different jobs
The hero's seam is interactive and demands attention — it's the pitch. The footer's letter-flip is playful and rewards curiosity — it's the signature. This one asks nothing of you and is visible on literally every page you might land on, including ones with no hero and no footer visible yet — it's the ambient reminder that the idea isn't confined to the homepage. Three different implementations of the same four-pixel-wide concept, each doing a job the other two can't.