08 Astro 5 static site + React islands · WebGL
Urban-pop recording artist · official site
A hand-written GLSL shader that replaced a three.js background at roughly 1% of its weight — inside an identity built as a code system.
AThe problem
An urban-pop artist — reggaeton, dancehall, trap and R&B — needed a web presence at the level of a first-tier act, on a brand that was still moving. It also had to switch between pre-release mode and full artist mode without a redesign each time.
BWhat we built
A static Astro 5 site with React islands, a custom liquid WebGL background written in vanilla GLSL, and the entire visual identity implemented as a code system. A single switch — `RELEASE.active` — flips the whole site between pre-release and artist mode.
CSignature pieces
The parts worth looking at.
- 01
A custom shader at ~1% of the library’s weight
Value noise with five-octave FBM and double domain warping, a per-era color ramp, mouse tracking, pause-on-hidden and a static frame under reduced-motion. Roughly 2 KB gzipped, against about 259 KB for the three.js / R3F version it replaced — around 99% smaller, with no library in the bundle at all.
- 02
Identity as a system, not a folder of files
An SVG logo (woven monogram plus a glowing star), an animated preloader combining SVG stroke draw, wordmark stagger and a clip-path wipe, and a pipeline that regenerates the favicon and OG image from source SVG with sharp. It carried four complete visual eras, rebranded through Tailwind tokens, with the page structure untouched.
- 03
Automated visual QA before deploy
Headless screenshots with mobile emulation run as a pre-deploy gate — and caught real rendering bugs before anyone published them.
- 04
DNS debugged at the authoritative level
A domain incident resolved the same day by querying over DoH and comparing CDN against origin headers, instead of waiting on propagation and hoping.
- 05
Brand material beyond the site
A 13-page “Branding Menu” PDF covering five eras and characters, laid out in HTML/CSS and verified with MuPDF; an art-direction prompt book; and a content marketing system living in the repo — ICP, content pillars, 40+ hooks and captions, a shotlist and a weekly plan.
EOutcome
Stable in production across four rebrands, with the final era aligned one-to-one with the artist’s Instagram. Full technical SEO shipped: Open Graph, Twitter cards, JSON-LD MusicGroup, sitemap and canonical.
FStack
- Astro 5
- React 19
- TypeScript
- Tailwind CSS 3
- WebGL / GLSL
- Lenis
- sharp
- Programmatic SVG
- Netlify
- Cloudflare (DNS / Registrar)
- puppeteer-core
- MuPDF
GStill to supply
- [TODO-DUEÑO] Lighthouse scores, traffic, and conversion to socials/Spotify, if you want numbers here.
- [TODO-DUEÑO] Screenshots.