001 HALTON & VOSS.
Slot three. Brutalist-Swiss architecture studio template — pure white + deep charcoal + acid yellow #E8FF00 as the single accent. WebGL grain shader reacting to mouse position, morphing custom cursor, GSAP pinned vertical-stack project reveal, split-letter headlines with overshoot, scroll-tied number counters. Loud silence.
— SIGNATURE MOVES · 01–06
- 01 WebGL grain shader Vanilla shader fragment, mouse-reactive, like film stock.
- 02 Morphing custom cursor Circle → arrow → "VIEW" pill over different elements.
- 03 Pinned vertical stack GSAP ScrollTrigger pins each project for a beat.
- 04 Split-letter headlines Per-letter reveals with rotation overshoot.
- 05 Scroll-tied counters Years founded, sqft completed, awards — tied to scroll.
- 06 Warp marquee Project ticker that bends on hover.
— THE BRIEF
Loud silence.
Where Voyages is cinematic and Meridian is restraint, Halton & Voss is the opposite of both. Minimal palette — only one accent colour, used sparingly. Maximal craft — WebGL shader, custom cursor, GSAP pinned reveals, split-letter type animations. Every Unsplash photo ID verified with a HEAD request before bake.
Type-as-architecture: Bricolage Grotesque display, IBM Plex Mono captions, all-caps with absurdly tight tracking. Numerals everywhere — projects numbered 001 through N.
— THE STACK
5 JS modules. Real shader.
- Engine
- Vanilla WebGL fragment shader + GSAP ScrollTrigger
- Modules
- shader.js · cursor.js · stack.js · reveals.js · app.js
- Type
- Bricolage Grotesque + IBM Plex Mono
- Images
- 14 Unsplash IDs, all HEAD-checked at build
- Accent
- #E8FF00 — one colour, used like a punctuation mark
- A11y
- Reduced-motion swaps shader for static noise PNG