01 / 13
JQ AI SYSTEMS
My own studio site. Fourteen services, case studies with films built in code, and hundreds of articles, all designed, written and built by me.
Scrollwork · web design by João Queirós
Websites you play by scrolling.
I'm a brand designer with 12+ years and 1,200+ brands behind me. I design and build websites that move as you scroll: fast, readable, and true to the brand. One person, start to finish.
A website is the one brand asset people move through. So I don't stop at how it looks. I design how it moves: what arrives first, what waits for the scroll, and where you are led next. Then I build it myself, so nothing gets lost in a hand-off.
Selected work · six plates
Keep scrolling. Each site plays inside its frame.
These are real, live websites, captured from the browser. Your scroll drives theirs.
02 / 13
Cairn
My SEO service, from logo to launch in one build: falling-stone physics, a method told in five live scenes, and a 60-second film made in code.
03 / 13
Snapline
Product site for my free screenshot manager for Windows, published on the Microsoft Store. Every capture lands in a real folder, searchable by the text inside it.
04 / 13
Tembr
An open source voice studio that runs on your own GPU. The product page carries a showreel, a guided tour and the setup, in a warm ember palette.
05 / 13
JQ VISIONS
A gallery for my AI-imagined worlds: Midjourney series, stills and films made for Artlist, hung like an exhibition you walk through.
06 / 13
Four Sparrows Mahjong
A boutique mahjong social club in Boca Raton. I designed the brand identity and the base website design. Beth Varian of Webmaster For Hire developed it in WordPress.
Development: Beth Varian, Webmaster For Hire
The cabinet · seven more
Products, tools and my own house.
Hover a card (or let it come into view on a phone) and the page scrolls itself.
-
07
joaoqueiros.com
My branding portfolio: twelve years of identities, packaging and print for clients in 40+ countries.
-
08
OutreachIQ
Product site for my open source outreach workspace: a trailer, a feature tour on real screens and a five-lesson field guide.
-
09
Klatea
Private meeting preparation and live help for client calls, with on-device transcription. A calm, paper-toned product site.
-
10
Thumbnail Studio
Turns one video brief into seven on-brand thumbnail options, then tests them in a real feed and at search size.
-
11
Grid Studio
Twelve free Instagram tools on one page. Everything runs in the browser and nothing is uploaded.
-
12
Atlas Studio
A visual prompt studio: reusable client areas, version sets and a structured library you can actually browse.
-
13
PERTO.
An independent events guide for Porto and Northern Portugal, with date browsing, discovery filters and favourites.
-
14
Yours, next.
The fourteenth drawer is empty. Tell me about the brand and what the site has to do.
From mark to motion
The logo and the website, from the same hand.
Most studios hand a logo to a developer and hope. I've designed identities for twelve years, so the brand that starts in the mark carries all the way into how the site moves.
- Scrollwork
Cairn
Tembr
Snapline
Klatea
OutreachIQ
Grid Studio
Motion lab · films made in code
I don't only animate websites. I make the films too.
Every frame below is designed, animated and timed in code, then exported to video. No stock footage, no templates.
How a Scrollwork site is made
Four turns of the scroll.
01
Read the brand
I start where I've spent twelve years: the identity. Colour, type, voice, and what the brand should feel like once it starts to move. No brand yet? We design it first.
02
Design the movement
Each page is planned as a sequence: what you see first, what arrives as you scroll, and where you're led next. You approve the design and the motion before I build.
03
Build it in code
I build the site myself, with AI tools in the workshop, so the motion survives. It stays fast on phones, and every animated scene has a still version for people who turn motion off.
04
Launch and measure
Copywriting, an SEO baseline and a post-launch audit are in every build. After launch you get real numbers, not guesses: the method behind Cairn.
- ~1 s phone LCP on Cairn, tested on a throttled connection
- <0.01 layout shift (CLS) on this page, same test
- Every animated scene has a reduced-motion version
- One person from the first sketch to launch
Pricing · fixed before work starts
Three ways in. One person behind every one.
2 to 3 weeks
Starter Site
From $3,450 (€3,000)
Typical $3,450 to $5,750
A focused brand site of up to 5 pages. Responsive, with copywriting, SEO baseline, contact form and a post-launch audit.
Recommended
3 to 5 weeks
Full Site
From $6,900 (€6,000)
Typical $6,900 to $10,350
A complete marketing site of 6 to 15 pages, with a blog, several contact flows, copywriting, SEO baseline and a post-launch audit. Scroll-driven scenes where they earn their place.
6+ weeks
Custom Build
From $13,800 (€12,000)
Scoped per project
Product sites, showreel-grade motion, a film made in code, multilingual content, integrations or a move from another platform.
50% on scope approval, 50% on delivery. Every project starts with a free 30-minute call. Full deliverables and FAQs →
Let's make yours move.
Tell me about the brand, the audience 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.