Hi-Fi Volume

A product-page hero for premium audio or any instrument with a meter: the unit is shown switched on. Two Detent Dials do the jobs detents were invented for: a selector that snaps between named sources and a stepped attenuator. Spring-damped VU needles driven by a deterministic programme through the source level and the volume make the product perform once, then rest.

Copy the hifi-volume folder and the detent-dial folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="detent-dial/detent-dial.css">
<link rel="stylesheet" href="hifi-volume/hifi-volume.css">
<div id="hifi-volume"></div>

<script type="module">
  import DetentDial from './detent-dial/detent-dial.mjs';
  import { mount } from './hifi-volume/hifi-volume.mjs';

  const hifiVolume = mount(document.getElementById('hifi-volume'), {
    kicker: 'Model Forty · Integrated amplifier',
    headline: 'Forty watts, and every one of them warm.',
    lede: 'Class A for the first eight watts, wired point to point by hand in Sheffield, in a case of oiled walnut you will want to leave out on the sideboard.',
  }, { DetentDial });

  // hifiVolume.update({ … });   change any option in place
  // hifiVolume.destroy();        and take it away again
</script>

mount(element, options, { DetentDial })

Builds the block inside the element and returns its handle. Hand it the Detent Dial it is built with.

handle.playing

handle.needles

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. Playing a sideOnce, when the unit is first 35% visible, a finite programme (kick, phrase, texture) drives both needles through the chosen source's level and the attenuator; the loop ends with the side.
2. At restAfter the side, on pause, off-screen or in a hidden tab the needles fall to the stop, settle, and the loop sleeps.
3. Selecting a sourceThe selector snaps between PHONO, CD, STREAM and AUX; the chosen legend lights as if backlit and the source name glows in the meter window.
4. Stepping the volumeTwenty-four 2 dB clicks from −46 dB to 0 dB, mute below; the needles follow within 300 ms.
5. Power offThe meter lamps dim, the jewel lamp and legends go dark, the needles fall.
6. MaterialsWalnut, oak or ebony cheeks drawn with SVG fractal noise; any dial finish; one lamp angle.
7. Reduced motionNo needle flight: Play puts the needles on the programme's steady reading; all transitions go.
8. TabletA landscape faceplate with smaller meters and knobs from 760 px; a portrait faceplate below.
9. PhoneThe portrait faceplate: meters across the top, selector and volume side by side, the maker's mark at the foot; no sideways scroll at 390 px.

Made of: Stepped attenuator, Snapping input selector, Vu ballistics, Finite programme, Svg wood grain, Container queries.

Original. Ashgrove and the Model Forty are fictional; the warm cream meters are deliberately not the blue-lit windows of any real maker. The VU scale is voltage-true and the needle is a damped spring tuned to VU ballistics. Fonts: Crimson Pro and Arsenal SC, both OFL 1.1, shipped as WOFF2 with their licences.

• 02Detent DialA rotary control you count by feel.

More blocks on the same object:

• 02.1Synth PanelA synthesiser’s live front panel.
• 02.2ThermostatA home-climate section with a glazed ceramic dial.
• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.