IOPA Apparel
A concept site for a premium Perth streetwear label staged as a live broadcast — a tuner along the bottom edge scrubs the whole site like a radio dial.
Overview
IOPA is a self-initiated concept for a premium Perth streetwear label, staged as a live radio broadcast. Its signature is THE TUNER — a hairline brass-needle band fixed along the very bottom of the screen: drag or thumb-scrub it and the entire page scrubs 1:1 like tuning a radio, the nav becomes a live channel and frequency readout, and the needle detents into each 'station' (section) on release. Around it the broadcast metaphor holds: a next-drop countdown that resolves out of animated ASCII static, a 3D story corridor receding to a vanishing point, a 1-bit dithered 'transmission orb' hero reacting to the cursor under kinetic Anton type, and a formalised shop — 'THE ASCEND FILE' — with a live featured piece and open/closed channel rails. It's a complete, deployable brand site built to prove a Perth label can carry a genuinely distinctive interaction system end to end. Available to license or commission.
Screenshots
What I Delivered
- A complete, art-directed brand site staged as a live broadcast, with per-section entrances (stamp / rack-slide / teletype) replacing uniform fades.
- THE TUNER — a fixed bottom-edge tuning band that scrubs the whole site 1:1 like a radio; the nav reads the live channel and it detents into the nearest section on release.
- A scroll-decode "next drop" readout that resolves out of animated ASCII static, locks, then re-scrambles.
- A 3D story corridor receding to a vanishing point.
- An interactive 1-bit Bayer dither "transmission orb" hero reacting to the cursor, under kinetic Anton type and a spotlight word-morph CTA.
- A formalised shop — "THE ASCEND FILE" — with a live featured piece and OPEN CHANNEL / CLOSED SIGNAL archive rails.
- A deterministic, capture-safe reduced-motion path (preloader skips, orb frozen at a seeded frame).
Key Features
- THE TUNER — drag / thumb-scrub the whole site like a radio dial; live channel readout; detents into each station.
- Scroll-decode signal — the next-drop countdown resolves from ASCII static.
- 3D story corridor in receding perspective.
- Interactive 1-bit dither transmission-orb hero reacting to the cursor.
- Spotlight word-morph CTA (ASCEND to ELEVATE).
- Formalised shop with a live featured piece and open / closed channel rails.
Stack & Tooling
- Next.js (App Router, Turbopack), served on Vercel.
- Lenis — the smooth-scroll engine THE TUNER scrubs 1:1.
- Canvas — the 1-bit Bayer dither transmission orb.
- Anton (display) and Inter (UI) type.
- A prefers-reduced-motion path that freezes the hero at a seeded frame for determinism.
- Hosting: Vercel.
Integrations & Backend
- Vercel — hosting and deploy.
Performance / SEO / Accessibility
- Reduced-motion is a first-class deterministic capture state — the preloader skips, there is no entrance, and the dither orb freezes at its seeded frame.
- Boot and entrance timings tightened so the finished hero arrives fast; no black or blank flash, no layout shift.
- Verified clean across desktop and mobile and both motion paths.
Challenges & Constraints
- Building THE TUNER — a fixed band that scrubs the entire Lenis timeline 1:1, reads a live channel, and detents into sections — without it fighting normal scroll.
- A 1-bit Bayer dither orb that reads as a premium instrument rather than a gimmick, and stays cheap enough to run smoothly.
- A deterministic reduced-motion path good enough to be the canonical capture state.
What I'd Improve Next
- Wire the shop to real commerce (cart and checkout).
- Connect the drop countdown and newsletter to a backend.
- Add product detail pages behind the channel rails.