The Wireless Set

01 · Concept

Four stations on one dial

Advisor OS is presented as a mid-century wireless set: the four products are four stations on a single tuning scale, visited in career order — get licensed, fill the calendar, do the work, read the room. Scrolling is tuning: the needle slides, the active station lamps up amber, the VU meters settle to that product’s honest numbers, and headings pass through 200 ms of typographic static before locking in.

02 · Palette

Bakelite, walnut, brass, lamp

Warm material colours carry the whole page; the four product colours appear only as small station-preset dots, the way coloured band markers sit on a real dial glass.

03 · Type system

A slab for the dial, a grotesque for the air

04 · Signature element

The tuning dial

A horizontal tuning scale sits in the hero cabinet and reappears as a sticky instrument strip above the four station sections. Scroll position maps to a continuous position between station centres; a spring-damped needle chases it with a little analogue overshoot. The active station’s name lamps up amber, its preset dot glows, and a pair of VU meters settles to that station’s real numbers.

Why: the four products already run in a fixed order — a career order — and a dial is the one instrument whose entire job is moving through a fixed band in sequence. It also keeps the page honest: the frequencies are the real numbers worn openly as a wink (3.684 kc/s is the question bank; 48 kc/s is one kilocycle per assessment item).

05 · Techniques

How the set is machined

• Scroll-as-tuner mappingSection centres against the viewport midline give a continuous 0–3 tuning index; smoothstep interpolation between station positions drives the needle target. No scroll library — plain rAF.
• Spring-damped needle physicsNeedle and both VU pointers integrate a simple spring (accelerate toward target, damp velocity) each frame, so arrivals overshoot and settle like real meter movements. VU targets carry a faint sinusoidal programme flutter.
• CSS-machined hardwareKnurled knobs from repeating-conic-gradient, wood grain from stacked repeating-linear-gradients, woven speaker grille from crossed 45° gradients, brass bezels and screws from radial gradients. No images anywhere on the site.
• Accessible glyph scrambleStation headings hold their real text in aria-label; an aria-hidden span takes 200 ms of scrambled glyphs before locking in, so screen readers never hear the static.
• Sticky instrument stripposition: sticky keeps a slim copy of the dial on screen through the station band; both dials are driven from one shared spring state.
• Reduced-motion end stateprefers-reduced-motion parks the needle on station 1, softly lights every lamp, freezes the VU needles at station 1’s readings and removes the scramble — a finished still, not a blank.