PATCHBAY— Service manual

01The Concept

Nomadic Owls describes itself with a signal metaphor already — “We send beautiful things to the Internet.” PATCHBAY takes that literally. The site is built as a hardware instrument: a bakelite-and-brushed-metal panel where the hero is the input channel, the six services are numbered synth modules in a signal chain, projects are stored patch memories, and the contact section is an external input jack labeled “INPUT YOUR IDEA” that patches straight into the agency's inbox.

The intent is that navigation itself feels like patching. Three SVG patch cables drape across the viewport in catenary-like curves and physically re-patch between jack sockets as you scroll — the cable follows your position through the chain, so reading the page is routing a signal through the studio. All motion is procedural (canvas + SVG + CSS); there is deliberately no video, because the interaction is the concept.

Honestly: this is a maximalist skeuomorphic direction. Its risk is kitsch; its discipline is machining. Every surface detail — engraved legends, screw heads with randomized slot angles, LED glow, inset jack sockets — is drawn with CSS gradients and shadows at hardware scale, and the copy is left verbatim so the instrument never talks over the agency.

02Cited References

• RISK — viewfinder chrome and running timecode as persistent UI. Adapted here as page furniture: a live VU meter driven by scroll velocity, a running SIG timecode in the top rail, and LED indicators throughout.
• Units — a fixed rail of numbered color modules used as navigation. Adapted as the fixed module rail: six services as numbered modules, each with its own knob color, docked left on desktop and bottom on mobile.
• Anti Average® — a logo decomposed into interactive keycap tiles. Adapted as the wordmark: NOMADIC OWLS set as twelve toggle keycaps that press down and light an LED on click or keyboard activation.

03Design System

Spacing follows a rack logic: sections are panels with a shared max-width (1180px) and generous vertical padding (clamp 4–7rem); modules sit on a responsive grid (minmax 280px). Legend type is Michroma at 0.55–0.8rem with 0.16–0.3em tracking and a 1px dark text-shadow to read as engraving. Interactive hardware uses layered box-shadows: an outer drop, an inset top highlight, and a “travel” shadow that collapses on :active so every control clicks visually.

04Tech & Motion

• Patch cables. A fixed full-viewport SVG holds three cables (red, mustard, green), each a quadratic Bézier approximating a catenary: control point at the midpoint, dropped by min(dist × 0.28 + 46, 260) px plus a scroll-velocity term so fast scrolling makes the cables swing. Every jack on the page is a [data-jack] element; each frame the script finds the jack nearest the viewport center and assigns the three cables to consecutive jack pairs around it. Endpoints ease toward their targets (lerp k≈0.09/frame), which produces the un-plug / fly / re-plug behavior on scroll.
• Oscilloscope tagline. “OBSESSIVELY CURIOUS.” is rasterized to an offscreen canvas in Michroma, then sampled column-by-column for the top and bottom lit pixel. The visible trace is a single polyline: inside glyph columns it oscillates rapidly between the glyph's top and bottom (so the letters appear made of signal); between glyphs it rides a low-amplitude sine whose amplitude is modulated by scroll velocity. A sweep cursor draws it left-to-right on load.
• Knobs & VU. Scroll velocity is sampled per frame and exponentially smoothed. It drives knob rotation (alternating direction per module), the VU needle angle (−38°…+38°), and the scope's Hz readout. Clicking a knob steps it 30° with a springy cubic-bezier detent and blinks the module LED.
• Hardware feedback. Every interactive element uses transform + box-shadow :active states (keycaps travel 3px, the CTA loses its 4px shadow ledge, knobs compress). No audio anywhere.
• Performance & a11y. Canvas DPR is capped at 2; the rAF loop stops on visibilitychange and scope drawing pauses via IntersectionObserver. Under prefers-reduced-motion the loop never runs: the scope renders one static complete trace, cables position instantly on scroll, knobs move only on click, and the timecode freezes.

05AI Assets

Three texture/atmosphere images were generated with GPT Image 2 via the Higgsfield CLI (no Kling video — the concept's motion is fully procedural). Prompts verbatim:

06How to Reproduce

1. Scaffold Astro v5, static output: npm create astro@latest, set output: 'static'.
2. Install self-hosted fonts: npm i @fontsource/michroma @fontsource/inter-tight; import only latin 400 (Michroma) and latin 400/500/600 (Inter Tight).
3. Build the panel chrome in pure CSS: layered gradients for brushed metal, inset shadows for jacks, radial gradients + rotated pseudo-elements for screw heads.
4. Add [data-jack] markers wherever cables may land; implement the fixed-SVG cable layer and the nearest-jack assignment described above.
5. Implement the scope with the offscreen-raster envelope technique; drive everything from one rAF loop and one smoothed scroll-velocity value.
6. Gate all continuous motion behind prefers-reduced-motion; verify zero console errors and keyboard operability, then npm run build.