# Hi-Fi Volume

An amplifier hero in walnut and brushed brass. The input selector snaps and lights its legend, the attenuator clicks 2 dB a step, and two VU needles swing to what the music would read.

Block · With a Pass · https://tactileui.dev/blocks/hifi-volume

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Stepped attenuator, Snapping input selector, Vu ballistics, Finite programme, Svg wood grain, Container queries

## Usage notes

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.

## Options

| Option | Type | Description |
| - | - | - |
| headline | text | Text after the first comma is set in italic on its own line. |
| kicker | text | Kicker |
| lede | text | Lede |
| cta | text | Button |
| price | text | Price |
| input | enum | Where the selector starts. Each source arrives at its own level. |
| volume | number | The stepped attenuator. |
| autoplay | boolean | Once, when the hero is first seen; then it stops. Play starts it again. |
| side | number | Side length (s) |
| wood | enum | Cheeks |
| finish | enum | Knob finish |
| light | number | Light from (degrees) |

## Methods

- playing
- needles
- update
- destroy

## States

1. **Playing a side**: 
2. **At rest**: After 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 source**: The 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 volume**: 
5. **Power off**: The meter lamps dim, the jewel lamp and legends go dark, the needles fall.
6. **Materials**: Walnut, oak or ebony cheeks drawn with SVG fractal noise; any dial finish; one lamp angle.
7. **Reduced motion**: No needle flight: Play puts the needles on the programme's steady reading; all transitions go.
8. **Tablet**: 
9. **Phone**: The portrait faceplate.

## How it works

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.