Mark
The mark becomes the interface
The logo is a spiral S wound on a rod. On the page it draws itself in brass, then flies into a fixed rod at the edge of the screen and becomes the scroll thumb, turning as you scroll.
Scrollwork · web design studio
A showreel
you play by scrolling.
How I built a web design showreel you play by scrolling: live sites inside scroll-driven frames, a logo that becomes the scroll bar, and two films made in code.
Visit Scrollwork
Book the free call
Logo, site, films and score by João Queirós · now offered to clients as Scrollwork
The reel
Scrollwork in 60 seconds.
The studio in one minute: the mark draws itself, live sites scroll inside their frames, and the logo assembles on the last chord. Designed, animated and scored in code by me. Turn the sound on.
At a glance
What is Scrollwork?
Scrollwork is my web design studio, and this is how I built its showreel. Instead of a grid of screenshots, the page plays real, live websites: each site is captured as one tall strip, and the visitor's own scroll drives it inside a browser frame. The brass logo I drew, an S wound on a rod, becomes the page's scroll bar. Two 60-second films are made the same way as the sites, in code: one shows the finished work, the other shows how a site is made. The page loads in about 1.5 seconds on a throttled phone test, barely moves while it loads, and has a still version of every animated scene for people who turn motion off.
The Problem
What was broken.
A web design portfolio has an odd problem: the thing being sold moves, and the usual portfolio doesn't. A grid of screenshots shows how a homepage looks at one moment. It can't show what arrives as you scroll, how a section settles, or whether the motion helps the brand or just decorates it.
I spent twelve years designing brands before building websites, so the gap bothered me twice. Buyers judge a site by how it feels to move through, and most portfolios ask them to imagine it.
The Approach
What was built.
So the showreel had to be played, not viewed. I captured each live site the way a visitor sees it, tile by tile while scrolling, and stitched the tiles into one tall strip. On the Scrollwork page those strips sit inside browser frames, and the page scroll drives them, so scrolling my page scrolls theirs.
The brand does the rest of the work. The logo I drew is a spiral S on a rod, which is also a scroll bar and its thumb, so the mark flies into the edge of the page and becomes the scroll instrument. Banknote-style guilloché, engraved plate numbers and a navy and brass palette carry the "scrollwork" idea through every section.
Then I made two films in code, with their own scores: a reel of the finished work, and an exploded view of how a site is made.
The build
Five turns, one scroll.
Capture
Capturing live sites
A small capture tool drives Chrome through each live site at 1440 pixels, scrolling the way a visitor does so lazy images and reveals load, then stitches the views into one strip. Cookie banners are hidden with CSS, never clicked or accepted.
Plates
Plates you scroll
Each featured site is a pinned plate. The page scroll moves the captured strip inside its frame, with a scroll thumb in the site's own colour. Phones get an auto-scroll instead, and reduced motion gets a still.
Films
Two films, made in code
Both films run on a canvas engine where every frame is a function of time, so they export frame-perfect. The music is written in code from the same timeline, so every sound lands on its moment.
Speed
Fast and accessible
Plain HTML, CSS and JavaScript with no libraries. The tall captures load only when their plate is near, both films load only when played, and every animated scene has a finished still version.
The second film
How it’s made, as an exploded view.
The craft behind every Scrollwork site: the drawing, the grid, the easing curve, and real pages pulled apart into their layers. It plays on the Scrollwork page above the process.
Stack
Built with.
Outcomes
What changed.
~1.5 s
largest content painted on a throttled phone test (22 Oct 2026)
< 0.01
layout shift (CLS) on load, same test
2 × 60 s
films made in code, with coded scores
0
animation libraries or frameworks
Scrollwork launched on 22 October 2026 and the films on 23 October. It is too early for honest results, so this page reports only what I measured while building it. At the next checkpoint I will add what the page actually does: which banners bring visitors, which film gets played, which sites people open, and, the one that counts, web design enquiries. One credit: on the Four Sparrows Mahjong site shown in the reel, I designed the brand identity and the base website design, and Beth Varian of Webmaster For Hire developed it in WordPress.
Scrollwork · web design studio
Let's make yours
Let's make yours
move.
Tell me about the brand and what the site has to do. We start with a free 30-minute call, and you get a fixed quote before any work begins.