Ascension — Pegassi

A record's website usually means a cover, a paragraph and a row of platform buttons. This one moves the parts of the physical object onto the page one at a time.

A record sleeve floats in the middle of a heavily grained black field, printed with ASCENSION and a figure standing in a doorway of light. Nothing else is on the opening screen.

Scroll down to the tracklist, written the way a vinyl label writes one: Ascension as A1, Circles as A2, Forest Walk as B1, Twinflame as B2, each with its running time. The track currently playing is white and the rest are grey, and the difference between those two greys is the entire status indicator.

Below that comes the artist bio, and its layout is not polite about it. Long passages of dark grey sit on black at nearly headline size, sentences overlapping each other, with a meme GIF wedged into the middle of them, Lincoln in headphones beside a floating phone volume slider.

That is an imitation of how this music actually appears online. Its listeners meet it on Instagram and in short video, so importing that vocabulary verbatim gets closer to the people the record is addressing than a properly written artist statement would.

The /listen route is a full player. On the left a white vinyl turns, with aSide and bSide tabs above it and a waveform transport with BPM 145 below, while the right holds live footage and the writing notes for that track.

The /sequencer route is where the project actually lands.

A grid sixteen columns wide, with rows for Kick, Clap, Bass, Pluck 01, Pluck 02, Pluck 03 and Pad. It opens on the pattern for Ascension, and the lit cells are where that song's hits actually fall. The row of buttons above reads Play, Stop, BPM 145, Clear all, Copy, Paste, Reset loop, Follow on, with four Pattern slots. A line at the bottom reads Share sequence.

Taking a song apart into a pattern anyone can rewrite explains how the record was made better than any paragraph could. The listener stops listening and starts dismantling, and having dismantled it can reassemble a version and send it out. A release site exists to get the record talked about, and this step hands people something to talk about directly.

The whole site runs on one typeface, one colour and a screenful of grain.

The family is named sans in the CSS and the actual files are PP Neue Montreal Semibold and Bold, 118 KB together. Across the site there are 2,773 visible characters ranging from 16px to 60px.

Colour is more extreme still. Three text values are measurable: a dark grey #7D7D7D on 439 elements, white on 2, and a semi-transparent white on 2 more. Nearly every word on the page is the same grey, and white is reserved for one job only, marking which track is playing.

Writing everything in one grey and keeping white as the only highlight holds up well on a dense page. The reader learns no legend, and the eye simply goes to the white one first. People building product interfaces often do the reverse, assigning a colour to each class of information until there are too many for any of them to emphasise anything.

The ground is a near-black #121314 under a layer of grain. A grain-ready class appears on the html element, which says the grain is switched on once assets settle rather than being a static texture. It presses the whole page into the quality of a dubbed tape, which is the same thing the EP sounds like.

The page holds 443 elements, 9 of them with a border radius. Navigation is a single line of text at the top reading Listen, Sequencer, About, with Buy at the right.

Handing the page typography to WebGL is the move worth studying here, and the handover lives in two files.

The page pulls two files from a /glyphs/ directory, sans-600.bin and sans-700.bin, each exactly 278,528 bytes, 544 KB together. Those two identical sizes correspond to the two loaded weights. They are pre-generated glyph data, letting the 3D layer set type in the same face without parsing font outlines at runtime.

Where the canvas sits says even more. It lives in a container classed fixed inset-0 z-60 pointer-events-none, meaning it fills the viewport, sits above every piece of DOM content, and accepts no mouse events at all. Most 3D sites put the canvas at the bottom as a background. This one inverts that and uses it as a filter laid over the top, which is the only way to get grain, glow and transitions that have to cover the text.

Placing it that way carries one precondition. The canvas can carry no interaction, so everything clickable has to stay in the DOM beneath. Measured, all 22 interactive controls have names and 2,411 characters of page text genuinely live in the DOM where a screen reader can reach them. That is what this structure buys. The 3D handles appearance only, and the content never leaves native elements.

The dimensional wordmark takes another route. The page separately loads logo-final.glb at just 148 KB plus a 192 KB draco_decoder.wasm from a path reading /wordmark/draco/. Carrying a 192 KB decoder for one wordmark looks like poor value at first, except that a Draco decoder is a fixed cost reusable across models, so if the site adds more 3D later the bill is already paid.

The bundle holds 161 matches for three, 62 for gsap, 29 for lenis, 5 for ScrollTrigger, 19 for InstancedMesh, 16 for ShaderMaterial and 5 for WebGLRenderTarget. Five render targets says the picture passes through several offscreen composites.

One detail lines up with that sequencer. AnalyserNode appears once in the code. Visualisation during playback is computed by analysing the audio live rather than read from baked data. For a site that lets visitors program their own drum patterns that is a requirement, since a pattern the visitor invented cannot have been analysed in advance.

Scrolling is Lenis. Across 6,904 pixels and 7.3 screens it measures 60 fps throughout with a p95 frame cost of 18ms and 0% janky frames.

A reduced-motion preference changes nothing here. No prefers-reduced-motion rule appears in the stylesheet, and turning the preference on leaves the grain moving.

Nuxt sits underneath, with 44 script files totalling about 1.34 MB of uncompressed text, of which the entry file D_NF2dyi.js is only 93 KB.

A first visit actually transfers 8.1 MB across 87 files. Video accounts for 3.60 MB, images 3.19 MB, the 3D and glyph data arriving via fetch 769 KB, script 378 KB, fonts 118 KB.

One number inside that 3.19 MB of imagery stands out. GIF accounts for 1.74 MB, of which a single 3.gif is 1.26 MB. That is the meme set into the artist bio. The same content as webm or animated webp would usually come in under a third of the size. Choosing GIF here is most likely because the source was already a GIF lifted from a social platform, and changing format means reprocessing it. That is also why GIF stays alive on content-driven sites.

Those 8.1 MB do not include the four songs. The EP's four mp3 files total 24 MB, the largest of them pegassi-forest-walk.mp3 at 6.33 MB, and none of them appears in the network log for a first visit. The site fetches them only when somebody actually wants to listen, so the opening screen never pays for the music. Making its principal asset load on demand is the right call for a release site, since a good share of arrivals only ever look at the cover and the tracklist.

The slow part is at the server end. First byte takes 2,508ms, the slowest in this library, with first contentful paint at 2,908ms right behind it and load at 3,026ms. The front end is actually frugal, and three hundred-odd KB of script after the document cannot account for that delay, so the 2.5 seconds are essentially spent waiting for the first byte. Loading also contains 4 long tasks, the longest 1,114ms.

On the good side, cumulative layout shift is 0, with not a single jump.

Accessibility fundamentals are sound. The page declares its language, header, main and footer landmarks are all present, all 22 interactive controls have names, all 6 images carry alt text, and no positive tabindex appears.

Two things fall short. The stylesheet carries one focus rule, and a sequencer page with 147 controls is resting on that single rule, so a keyboard user struggles to see which cell they are on. The other is headings: the whole document has one H1, and the tracklist, the bio and the sequencer are not divided by heading elements at all.

Eighty-three points, taken on day 6. The FWA publishes no category breakdown, and the team's statement is a single sentence saying this is the site for the launch of Pegassi's debut EP Ascension. A one-line statement attached to a site carrying a working sequencer is underselling it somewhat.

Gil Huybrecht is in Belgium, describing himself on his profile as solving design problems for companies worldwide in a minimalistic way, with 13 FWAs going back to 2019. Jesper Landberg holds 40, of which 38 are Site of the Day and 2 Site of the Month, dating back to 2018, and his is a name that appears twice in this library, since he is also credited on See What Eye See.

One coincidence is worth recording. Pegassi is the alias of the Belgian musician Sam Huybrecht, who shares a surname with this site's designer, and both are based in Belgium.

This site never appeared at Awwwards.