Music by Baps: three releases and a lot of shaders

Context

Music by Baps is the home for the three releases I have put out on the Nuits label: Sweet Like Stevia, Compliance Carnival and L-Theanine. Songs about sweeteners, compliance, and amino acids found in tea. I am aware of how that reads as a list.

The site is one page per release plus a home page that holds them, built with GSAP, WebGL shaders and scroll-linked animation. It is more site than three tracks strictly require. That is the point.

The problem

An artist page on a streaming platform is a row of squares in a grid you do not control, next to an algorithmically similar artist you did not ask to be compared to. It is fine. It is also identical for every musician alive, which means it communicates nothing except that you exist and have uploaded files.

The alternative most independent artists reach for is a link-in-bio page, which is the same squares with worse typography.

I have three releases and a strong opinion about type. The gap between what streaming platforms let you say and what a release actually is seemed worth closing, and closing it is entirely a web problem, which I can solve.

My role

Everything, solo. The music, the label, the covers, the art direction, the site, the code, the copy. Nuits has never hired anyone, and on this project the client and the artist are also me, which removes the usual excuse for a compromise.

Approach

The site had to share a type system with my portfolio: MADE Dillan for display, Satoshi for body, the same sizes and the same tracking. Not because reuse is efficient, but because the music and the design work come from the same person and a different typeface would be a small lie about that.

Beyond type, the rule was that motion serves the release, not the developer. Each release page opens on its cover and the animation carries you into the track, the credits and the streaming links. Nothing animates in and then sits there having proved it can.

Three releases is a small catalogue and I did not want to pad it. A site with three items should feel deliberately small rather than accidentally empty, which is a layout problem: generous space, large type, one thing at a time.

Building it

Astro 7 on Cloudflare. Every page is static output. There is no runtime data, no CMS and no server work, so the entire site is a set of files on an edge network and the first paint is as fast as the network allows.

GSAP drives the timeline work and ScrollTrigger drives the scroll-linked sequences. The rule I held to is that scroll-linked animation must be reversible and must never take control of the scroll position itself. Scroll hijacking is the fastest way to make a beautiful site unusable, and it always looks fine to the person who built it, because they know where they are going.

The shaders are where the visual identity lives. Each release has its own GLSL fragment shader tied to its cover palette, running on a full-bleed plane behind the content. They are cheap by design: no post-processing chain, no render targets, no per-frame texture uploads. A fragment shader doing arithmetic on a couple of uniforms costs almost nothing on a modern GPU, and it produces motion that does not exist as a video file, so there is no ten-megabyte MP4 to download.

Everything expensive is gated. The shader plane pauses when it scrolls out of view, animation respects the reduced-motion preference by collapsing timelines to their end state rather than disabling them, and the WebGL canvas is torn down properly on Astro view transitions instead of leaking a context per navigation. That last one cost me an afternoon and a very hot laptop.

There is no AI in the site and none in the music. Not because of a position I want to defend at length, but because the whole point of the exercise was that I made the thing.

Outcome

It is live at musicbybaps.com. Three releases, each with a page, each linking out to wherever people actually listen.

The measurable outcome is negligible and I am not going to inflate it. The useful outcome is that the site became the reference implementation for the type and motion system I then used on my portfolio, so the shader and transition work paid for itself twice.

What I’d do differently

I wrote a separate shader per release before I had a shared uniform interface, so the second and third were near-copies with the numbers changed. One parameterised shader with a palette per release would have been less code and more consistent.

I would also design for a fourth release next time. The home page layout is tuned for exactly three items and it will need reworking the moment there is another one, which is a self-inflicted deadline.