An immersive, WebGL, scroll-through experience for Subchi — open-format DJ and creator of the Bentley Radio mix series. Built as a portfolio demo by Decks2Web to show the kind of premium, interactive artist site that goes far beyond a template.
The design language is inspired by experiential studio sites like igloo.inc: a persistent, refractive 3D crystal floating in black, razor-thin grotesque caps, frosted-glass panels, a cinematic intro, smooth momentum scroll, and an arctic palette — with a twist for a nightlife brand: the whole scene stays cold until the music plays, then ignites warm.
This is a demo. It uses Subchi's real brand voice, bio, mixes and links; the promo photos and the downloadable EPK are clearly-labelled placeholders meant to be swapped.
- The crystal — a procedurally-faceted glass icosahedron rendered with Three.js
(
MeshPhysicalMaterialtransmission + iridescence, procedural HDRI environment). It rotates and drifts with scroll, parallaxes to the pointer, and reacts to audio: pulsing, warming and fracturing the moment the Sound Reactor plays. - Sound Reactor — a real Web Audio engine. A procedurally-scheduled house groove (kick /
bass / hats / stab) feeds an
AnalyserNodethat drives both an on-canvas ice→ember visualiser and the crystal. Mic mode reacts to a live microphone (with permission). Low / Medium / High energy. Nothing autoplays — audio only starts on a tap. - Mixes — Bentley Radio EP 002–006 as live SoundCloud embeds, recoloured to the ice palette.
- About / Live / EPK — real bio, six bookable set types, a validated booking form with a
success state + pre-filled
mailtohandoff, and a press kit with copy-email and a generated EPK download. - Craft — cinematic intro sequence, frosted-glass UI, custom cursor with aurora glow, film grain + subtle chromatic aberration, a music-player dock with scroll-spy, stat counters.
- Accessible & resilient — semantic HTML, keyboard nav, visible focus, a full
prefers-reduced-motionpath (static crystal, no smooth-scroll), and graceful fallbacks if WebGL / Three / Lenis or the network fail (a CSS frost field replaces the crystal).
Static, no build step. Vanilla HTML / CSS / JS modules, with libraries from CDN:
- Three.js r136 — the refractive crystal (transmission needs ≥ r129, so r136 UMD).
- GSAP + ScrollTrigger — scroll feeding / parallax.
- Lenis — smooth momentum scroll (degrades to native).
- Fonts: Archivo (thin grotesque caps + body) / Space Mono (technical labels).
subchi-epk/
├─ index.html # the whole single-page experience
├─ css/styles.css # frozen-glass design system + responsive + reduced-motion
├─ js/
│ ├─ crystal.js # Three.js refractive crystal (scroll + audio reactive, fallbacks)
│ ├─ reactor.js # Web Audio Sound Reactor (demo groove + mic) -> visualiser + crystal bus
│ ├─ booking.js # form validation + success + mailto
│ ├─ epk.js # copy email + generated EPK download
│ └─ main.js # intro, Lenis, nav, cursor, reveals, dock, scroll-spy
├─ 404.html · netlify.toml · .nojekyll · LICENSE
Any static server works. With Python:
python -m http.server 5720
# open http://localhost:5720- GitHub Pages — push to
main, set Pages source to the repo root (.nojekyllincluded). Live by push, same as the other portfolio repos. - Netlify / Vercel —
netlify.tomlpublishes the folder as-is; no build command.
| Placeholder | Where | Swap for |
|---|---|---|
| Promo portrait | assets/subchi-portrait.jpg |
a real photo (auto-shows when present) |
| EPK photo slots | EPK .photo-grid |
real promo shots / logo |
| EPK download | js/epk.js |
a designed PDF |
| Booking handoff | js/booking.js |
a Formspree (or similar) endpoint to auto-collect |
The crystal uses real-time transmission, which is GPU-bound. Pixel ratio is capped, geometry detail is low, the loop pauses when the tab is hidden, and reduced-motion renders a single static frame — so it stays smooth on normal hardware and degrades safely on weak GPUs.
Demo concept & build by Decks2Web. Brand, music and likeness © Subchi (Sahib Singh).