Homepage review: artrixstudio.com

The first version opened with Stop waiting on design. Ship faster. Read cold, that could be any studio’s line: it names neither who the studio is for nor what arrives. Two more things were buried: one-off projects were only mentioned near the bottom of the pricing section, and the price of the job most founders come for — a new site plus a raise deck — sat inside an FAQ answer.

The first line decides whether anyone reads the second. A buyer who can’t tell in a few seconds that this is for them, and roughly what it costs, leaves; the answers further down never get read.

The hero builds the Artrix mark out of particles: 1,100 of them on a phone, 3,400 on a laptop, redrawn on every frame. On a phone the field fades out once you scroll past the hero — but only the picture fades. The drawing loop runs every frame for as long as the page is open, visible or not. It also doesn’t check whether the visitor has asked their phone to reduce motion.

We slowed Chrome’s processor down four times to stand in for a mid-range phone, waited for the intro to settle, and watched the main thread for 10 seconds at a time. In the hero it was busy about a third of the time; with only the particle script blocked, 8%. Further down the page, with the field faded, it was still 16–24% against 8%. Two runs each; the table has both.

One more detail: on a phone, the field comes back at 28% opacity behind the pricing section. A later rule for laptops (body.past-work #field{opacity:.28}) wins over the phone’s opacity:0.

None of this counts as “blocking time”, because each frame is short — which is why Lighthouse doesn’t flag it (0–90 ms). But a quarter to a third of a phone’s main thread spent on decoration nobody is looking at is battery and heat, and less room left for scrolling and taps. On a page that sells speed, the page itself shouldn’t be doing slow work in the background.

When the work section scrolls into view, the event walkthrough card swaps its screenshot for the live 3D scene. That is a nice touch, and it waits until it’s needed. But it brings 34 files and 5.2 MB with it — 2.3 MB of textures, 1.4 MB of three.js and loaders, a 1.4 MB model — while the whole homepage is 0.7 MB on arrival.

Once started, the scene never pauses. We scrolled on to the pricing section, three sections past the card, and measured for 8 seconds: the main thread was busy 43% of the time (3.4 s), and 47% at the FAQ. At the top of the page, before the scene loads, it was 10%. The profile is mostly three.js preparing frames nobody can see. This was in a visible Chrome window on a desktop graphics card (RTX 3080), so it is script work, not a slow GPU. With the particles blocked, the pricing number didn’t drop, so this one is all the walkthrough.

The visitor reading our prices has a 3D renderer running out of sight: fans, battery, and less smooth scrolling on an ordinary laptop. The 5.2 MB is seven times the page itself, spent on everyone who scrolls past the work, including people who never look at that card.

Every other work card fits the column: 350 px wide on a 390 px phone. The walkthrough’s picture is 416 by 260 px at every screen width up to 900 px, so on a phone it runs 46 px past the right edge and its right side is cut off. On a 768 px tablet the same small picture sits in a 704 px card, with an empty strip beside it. We checked 375, 390, 414, 700 and 768 px.

The cause is two CSS rules. The full-width card has a fixed height, .bento .piece.full .piece-shot{height:clamp(260px,32vw,480px)}, which applies at every width and beats the phone rule’s height:auto. With a 16:10 ratio, 260 px of height forces 416 px of width. overflow-x:hidden on the page stops it from scrolling sideways, which hides the problem instead of fixing it.

It is the only piece of work that looks broken on a phone, and it is the 3D piece, the one meant to impress. A prospect judging a design studio on their phone notices a cut-off card before they notice anything else about it.

We computed the contrast of every piece of text on the page, in both themes, after every fade-in had finished. In the light theme, the small gray (#8D8F96 on paper) is 2.83 to 1: the FAQ numbers, the counts on the FAQ tabs, the note under the budget bars, and the footer links. Teal text on paper is 2.91 to 1, including the two links on “Proof before you pay”: See a sample review and Ask for yours. In the dark theme the same small gray is 3.37 to 1.

The “Pricing” label is the odd one out. The pricing panel flips color with the theme, but its label keeps the rest of the page’s gray: 2.93 to 1 on the dark panel, 2.37 to 1 on the light one. The usual standard (WCAG AA) asks for 4.5 to 1 at these sizes. Lighthouse flags the gray text on both runs, and the teal links and the Pricing label on the laptop run; with the missing landmark below, that is why accessibility is 94 and not 100.

These are the small labels people steer by: which FAQ tab has what, where the terms are, and above all the links to the free review, the offer we most want clicked. Faint text is the first thing lost on a bright screen or to weaker eyes.