Most studio sites end the same way: a lime band, a "Have a project in mind?" headline, an arrow. We had it for two versions. Then we replaced it with a three-act pinned theatre — and the bounce rate on long pages dropped enough to make the rebuild worth writing about.
This is what we shipped, what we tried that didn’t work, and the small details that made it feel inevitable instead of clever.
The shape
FinalTheater pins for ~130% of viewport scroll and scrubs through three acts:
- Act 1 (0–40%)
- The question — "Have a project in mind?"
- Act 2 (40–70%)
- Live status panel — London time, bookings, latest launch
- Act 3 (70–100%)
- "Let’s build something extraordinary." + magnetic CTA
Each act fades out as the next fades in, but the editorial chrome (Vol. marker top-right, ghost numeral bottom-left) stays anchored throughout. The result is that the closing feels like flipping the last page of a magazine spread rather than scrolling past a marketing CTA.
What didn’t work
The first heading was too big
Our first version of Act 3 used var(--text-5xl) for the closing line. On a 14-inch laptop it broke to three lines and pushed the CTA below the fold. We dropped to var(--text-3xl), removed the manual <br /> between “Let’s build” and “something”, and capped the heading at max-w-4xl. The CTA snapped back above the fold and the line started breathing.
Bleed-through above the pin
We initially set the pin trigger to start: ‘top top+=120’ thinking the 120px gap would help readers finish the FAQ on /pricing before the theatre captured the viewport. Instead it created a 120px window where the previous testimonial section bled through above the pinned theatre. We reverted to flush start: ‘top top’ and added a 40vh reading buffer below the FAQ instead. The buffer gives readers time to finish the last question; the pin engages cleanly with no bleed.
The fix is almost never “add a 120px offset”. It’s usually “add a 40vh buffer”.
Faux-italic on Syne
Act 3 highlights the word “extraordinary” in accent. We tried italicising it for emphasis. Syne doesn’t have a true italic — the browser fakes it with a skew, which on a display weight at 72px looks subtly broken. Plain accent color, no italic, did the work. Sometimes the rule is just: don’t.
What did work
We put the most-recently-launched project in Act 2 directly because we noticed in analytics that visitors who reached FinalTheater on the home page often clicked through to a case study before clicking the CTA. Surfacing the latest launch inside the closing scene gave them a shortcut.
Pin engagement uses anticipatePin: 1, which gives ScrollTrigger a single frame of warning before the pin engages. Without it, fast-scroll into the section feels like the page hiccups. With it, the transition is invisible.
Mobile is a different page
We don’t pin on mobile. Pinning a 130% scroll section on a 6″ phone means a third of the user’s scrolling does nothing visually until the pin completes — which feels broken even when it’s correct. The mobile FinalTheater is a stacked layout with the same three acts but no pin. Same content, different shape. The reader gets the message; the device doesn’t fight them.
Closing notes
FinalTheater is the closing scene of every long page on this site — the home, the pricing page, the journal, the studio dashboard. The whole reason it works is that it doesn’t repeat itself: the editorial chrome stays anchored, but the live signals are different by the time you reach the bottom of the next page. Refresh and the time has moved. Scroll past it again and the latest launch might have changed.
That’s the goal: a closing scene that ages well because it ages live.