Music by Baps: tre släpp och en massa shaders

Bakgrund

Music by Baps är hemmet för de tre släpp jag gjort på skivbolaget Nuits: Sweet Like Stevia, Compliance Carnival och L-Theanine. Låtar om sötningsmedel, regelefterlevnad och aminosyror som finns i te. Jag är medveten om hur det läses som lista.

Sajten är en sida per släpp plus en startsida som håller ihop dem, byggd med GSAP, WebGL-shaders och skrollstyrd animation. Det är mer sajt än tre spår strikt taget kräver. Det är poängen.

Problemet

En artistsida på en streamingtjänst är en rad rutor i ett rutnät du inte styr över, bredvid en algoritmiskt liknande artist du inte bett om att jämföras med. Det är okej. Det är också identiskt för varje levande musiker, vilket betyder att det inte kommunicerar något annat än att du existerar och har laddat upp filer.

Alternativet de flesta oberoende artister griper efter är en länksida, vilket är samma rutor med sämre typografi.

Jag har tre släpp och en stark åsikt om typografi. Glappet mellan vad streamingtjänsterna låter dig säga och vad ett släpp faktiskt är kändes värt att stänga, och att stänga det är helt och hållet ett webbproblem, vilket jag kan lösa.

Min roll

Allt, ensam. Musiken, skivbolaget, omslagen, art directionen, sajten, koden, texten. Nuits har aldrig anställt någon, och i det här projektet är kunden och artisten också jag, vilket tar bort den vanliga ursäkten för en kompromiss.

Angreppssätt

Sajten måste dela typografisystem med min portfölj: MADE Dillan för display, Satoshi för brödtext, samma grader och samma spärrning. Inte för att återanvändning är effektivt, utan för att musiken och designarbetet kommer från samma person och ett annat typsnitt vore en liten lögn om det.

Bortom typografin var regeln att rörelsen tjänar släppet, inte utvecklaren. Varje släppsida öppnar på sitt omslag och animationen bär dig in i spåret, medverkandelistan och streaminglänkarna. Ingenting animeras in och blir sedan kvar och ser nöjt ut med sig självt.

Tre släpp är en liten katalog och jag ville inte fylla ut den. En sajt med tre saker ska kännas medvetet liten snarare än oavsiktligt tom, vilket är ett layoutproblem: generöst utrymme, stor text, en sak i taget.

Så byggde jag det

Astro 7 på Cloudflare. Varje sida är statisk utdata. Det finns ingen data i körtid, inget CMS och inget serverarbete, så hela sajten är en uppsättning filer på ett edge-nätverk och den första målningen är så snabb som nätverket tillåter.

GSAP driver tidslinjearbetet och ScrollTrigger driver de skrollstyrda sekvenserna. Regeln jag höll fast vid är att skrollstyrd animation måste gå att köra baklänges och aldrig får ta kontroll över skrollpositionen i sig. Skrollkapning är det snabbaste sättet att göra en vacker sajt oanvändbar, och det ser alltid bra ut för den som byggt den, eftersom hen vet vart det bär.

Shaderna är där den visuella identiteten bor. Varje släpp har en egen GLSL-fragmentshader knuten till sin omslagspalett, som körs på ett helsvept plan bakom innehållet. De är billiga i grunden: ingen efterbehandlingskedja, inga rendermål, inga texturuppladdningar per bildruta. En fragmentshader som räknar på ett par uniforms kostar nästan ingenting på en modern GPU, och den producerar rörelse som inte finns som videofil, så det finns ingen tio megabyte stor MP4 att ladda ner.

Allt dyrt är avstängbart. Shaderplanet pausar när det skrollar ut ur bild, animationer respekterar inställningen för reducerad rörelse genom att fälla ihop tidslinjer till sluttillståndet i stället för att stängas av, och WebGL-duken rivs ner ordentligt vid Astros vyövergångar i stället för att läcka en kontext per navigering. Den sista kostade mig en eftermiddag och en mycket varm laptop.

Det finns ingen AI i sajten och ingen i musiken. Inte på grund av en ståndpunkt jag vill försvara i detalj, utan för att hela poängen med övningen var att jag gjorde saken.

Resultat

Den ligger live på musicbybaps.com. Tre släpp, ett med en sida var, alla med länkar ut dit folk faktiskt lyssnar.

Det mätbara resultatet är försumbart och jag tänker inte blåsa upp det. Det nyttiga resultatet är att sajten blev referensimplementationen för det typografi- och rörelsesystem jag sedan använde på min portfölj, så shader- och övergångsarbetet betalade sig två gånger.

Vad jag skulle göra annorlunda

Jag skrev en egen shader per släpp innan jag hade ett gemensamt uniform-gränssnitt, så den andra och tredje blev nästan kopior med ändrade siffror. En parametriserad shader med en palett per släpp hade blivit mindre kod och mer konsekvent.

Jag skulle också designa för ett fjärde släpp nästa gång. Startsidans layout är avstämd för exakt tre saker och kommer att behöva göras om i samma stund det finns en till, vilket är en självförvållad deadline.