USAvionix

A company selling an aircraft usually gives you a spec sheet and a few renders. This one takes the spec sheet apart and lays it out as a complete mission.

The first screen has the aircraft cruising over a valley, three lines of headline at top left about securing the skies with autonomous intelligence, and a paragraph with a down arrow at bottom right. The terrain is rendered live, not a video.

Scroll and a strip of tick marks appears at the top of the frame with the current section named in the middle. The menu lists all ten: SPECS, SWARM, MISSION, SYNC, DETECTION, PHALANX AI, SYS ANALYSIS, INT ALERTS, COORDINATION, RESPONSE. That strip is the only position indicator in all 71 screens.

Reaching DETECTION, a run of telemetry starts printing in the bottom right corner. SCAN MODE: ACTIVE, COORD: [37.4419°N / 119.8772°W], ALT 1,240M | SPEED 74 KM/H, and a final line reading 32 CAR / 4 TRUCK / 1 PERSON / 2 UAV.

That run of numbers is how the site argues. Rather than claiming the aircraft identifies things well, it itemises what was identified in one concrete scene and lets the reader draw the conclusion. The same move appears elsewhere. COORDINATION shows a wireframe terrain map with two zones outlined, one marked SERVICES ON SITE in cyan and one marked SENSITIVE AREA in amber, with 2 DRONES ASSIGNED TO TARGET AREA and 2 WILDFIRES + 1 ROADBLOCK DETECTED in the corner.

The scenarios the site chooses for itself are worth noting. The product has obvious military application, but the examples on the page are spreading wildfires, damaged power infrastructure and wide-area search, and the hiring panel asks people to join a team of engineers building a sentient drone for good. No weapons vocabulary appears anywhere on the site.

After the last section the aircraft lands. The footer shows it on the ground with the gear down, an enormous outlined USAvionix behind it. Seventy-one screens close the loop, taking off at the start and landing at the end.

There are two typefaces on the site, and both are free, Geist and Geist Mono.

The division is by kind of information and it is absolute. Geist Mono writes 2,458 characters, all between 11 and 13px, carrying every piece of telemetry, every section label, every coordinate and status line. Geist writes 1,266 characters from 17px to 76px, carrying all three headings and the handful of explanatory paragraphs.

The comparison says it plainly. The monospace has twice the characters of the sans and only four tenths of its rendered area. Nearly all the text on this site is small machine readout, and there are very few sentences written for a person. That fits what it is pretending to be, since the reader is not meant to be looking at a website but at an instrument display.

Colour follows the same instrument logic. White lands on 1,238 elements and black on 281, and the other three colours each hold a post: cyan #7AEBFF marks confirmed and secured, amber #FFCB71 marks needs attention, red #FF6666 marks a detected threat. There is no brand colour on this site, only status colours.

That division transfers directly to any interface that has to express state, and it is far steadier than inventing a palette, because cyan, amber and red have meant the same thing on flight decks and dispatch desks for decades and need no explaining.

Of 1,628 elements, only 60 carry a border radius, mostly buttons and cards. The menu is a black panel that slides in from the right listing Delta, Phalanx AI, SARA and Athena, with hiring and partnership below. While it is open the scene behind it freezes, with lenis-stopped added to the html element.

Splicing two completely different rendering techniques onto one scroll line, with no visible join, is the craft worth studying here.

Most of the journey is real-time 3D. The page loads four glTF models, terrain.glb at 2.05 MB, delta-pbr.glb at 898 KB, city-terrain.glb at 343 KB and loading-delta.glb at 92 KB, all Draco compressed with a separate 87 KB draco_decoder.wasm. Lighting comes from a 146 KB env.exr. Three WebGL2 canvases sit on the page, two at 1905×945 and one at 1378×994, all rendering at display size with no supersampling.

The landing is done differently. It is not rendered at all, it is 96 AVIF images played against scroll position, served from /assets/images/landing-sequence/ numbered 0001 to 0096 at roughly 38 KB each, 2.82 MB in total.

The reasoning behind the split is clear. Live rendering suits passages where the camera moves freely with the scroll, because there is no knowing which frame a visitor will stop on. The landing is a locked-off shot where every frame is decided in advance, so there is no reason to make the GPU recompute it. Pre-rendering the sequence buys lighting quality real-time cannot reach, and it moves the cost from the GPU to the decoder, which is far steadier.

What anyone copying it needs to weigh is which side they are on. Those 96 frames are 2.82 MB, the same order as the entire 3.59 MB of 3D, and they buy only the last few screens. A sequence costs more the longer it runs, while a model costs once. Locked camera and short duration makes the sequence worth it. A free camera or a long passage flips the answer.

What drives all of this is simpler than it looks. The bundle holds 243 matches for three, 25 for lenis, 23 for ShaderMaterial and 20 for InstancedMesh, and not one for GSAP or ScrollTrigger. Seventy-one screens of scroll narrative use no animation library at all, with scroll position converted straight into camera parameters and a frame index.

Which is exactly why the frame rate is flat. There are no sections on the page and no elements that relayout as it scrolls, and the three pinned layers are a 56px navbar, a 945px sticky stage and a 945px fixed sequence layer. All the browser has to do across those 71 screens is hand a number to the render loop, with nothing to reflow. Measured continuous scrolling averages 60 fps at a p95 frame cost of 18ms with 0.1% janky frames, and all twelve segments read 60.

Reduced motion is not handled at all. There is no prefers-reduced-motion rule anywhere in the stylesheet, and turning the preference on changes neither the page height, nor the canvas count, nor any behaviour. A site that advances 71 screens purely by moving a camera leaves a motion-sensitive visitor nowhere to go.

Loading it cold pulls 9.23 MB across 174 files. The 3D models account for 3.59 MB, the landing sequence for 2.82 MB, other textures 1.66 MB, script 759 KB, the environment map 146 KB, wasm 87 KB, and fonts only 52 KB.

Third-party content comes to 99 KB from gstatic, and nothing else. No Google Tag Manager, no pixel, no session recorder, no analytics of any kind. On a 9 MB site, that list is unusually clean.

The opening numbers are good too: 259ms to first byte, 512ms to first contentful paint, 577ms to load, cumulative layout shift 0.

The problem is the stretch before anything responds. Largest contentful paint lands at 10,860ms, close to eleven seconds. Loading produces 9 long tasks with the longest at 3,782ms, nearly four straight seconds in which the main thread answers neither clicks nor keys. That is the cost of Draco-decoding a 2 MB terrain model and building the scene, which is a different thing from the 512ms first paint. Something is on screen very early, and using it takes a long time.

The standard remedies are to move the decode into a worker, or to split the terrain into chunks loaded on demand so only the first screen's worth is decoded up front. Neither is done here.

WPO still took 7.60, which is not low. The jury presumably scored what happens once it is scrolling, and that part is faultless.

Accessibility looks good by the numbers and is not. The page has 9 focusable controls, all 9 images carry alt text, no positive tabindex appears, the language is declared, and nav and main landmarks are both present.

But there is exactly one link on the page, pointing at notes.usavionix.com. The navigation entries are not in the DOM at all while the menu is closed, and opening it takes the link count from 1 to 8. For a screen reader or a crawler, the page with its menu shut has almost no way out. Two buttons on the page also carry neither text nor an aria-label, and one of them is the hamburger at top right, which is the only control that opens that navigation.

Heading structure is as thin, with one H1 and two H2s covering 71 screens and ten chapters. Semantics scored 8.00, highest of the six developer categories, while accessibility scored 7.00, the lowest, and the gap between them lands precisely on the points above.

Creativity at 8.00 is the only one of the four to reach 8, nearly a full point above Usability at 7.03. That gap describes the site's position exactly. It wins on nobody having done this before, and loses on 71 screens, ten chapters and one position indicator, with no real way to get back to a section. Fernando Puente of Spain returned 8.70 with a 9, 8, 9, 9, while the other four judges all sat between 7.0 and 7.6, so one card is visibly carrying the total.

At 7.74 the developer award runs 0.33 ahead of the site total, with five of six categories at 7.6 or better. Animations at 8.20 is the highest, matching 71 screens without a dropped frame, and semantics at 8.00 follows. Accessibility at 7.00 is last, and four of the five judges marked it a 7, so opinion on that one is consistent.

One credit, and only one. basement studio has turned 21 works into 12 Sites of the Day and 20 honourable mentions, describing itself as a studio making cool things that perform, available in house or remote, with no budget stated. A few works listed under Studio Freight also appear on their profile, which says the two have shared people.

A single studio delivering a full-screen 3D product site with a 71-screen narrative and nothing subcontracted is rare in this library.

No record of this site exists at The FWA.