Components

The signature instrument: a raised bulb carrying the action, fused to a recessed stem holding the label. On hover the liquid flows from the bulb through the stem. One per view, for the action that matters.

The quiet variant: the same bulb with the label breathing free, no stem chrome. The liquid wells up in the bulb only and the label leans in. Add .inverse on dark ground.

The standalone capsule for dense Arodum Engine surfaces: toolbars, forms, table rows. Raised metal, same liquid fill, optional trailing icon.

The orb is the bulb alone, for compact icon actions. The glass button is the quiet workhorse: doctrine says burnt gold is rare, so most in-Engine actions wear glass and gold only rims them on hover.

Hover pours gently; pressing floods the vessel at once, and the whole instrument sinks. Force any state with .is-hover, .is-pressed, .is-loading, or the disabled attribute. The first thermo below is live: click it to run a 2.5s load.

While the Engine works, the dial spins in the bulb and the liquid sloshes in the stem. For measured work, the thermo progress reads the value in its channel; the loader orb radiates ripples while the amount is unknown.

Recessed channels for input; the pour marks every state change. Toggles fill their track, checks fill their vessel. Focus draws the gold ring. All native inputs underneath, fully keyboard-operable.

Archival tags in glass; the metal chip is the rare gold stamp. The glass card is the standard vessel for content on any gradient ground.

The vessel family. Default glass expects gradient or dark ground; add .on-light for parchment. Interactive cards lift and take the gold rim. Stat cards read like gauges; source cards file saved clips.

A recessed trigger opening a frosted panel; the liquid stamps the chosen option. Add data-searchable for the filter box. With .multi, choices collect as liquid tags in the trigger and the panel stays open while you pick; Backspace in an empty search removes the last tag. Add data-tagging and Enter mints a new option from whatever you typed. arodum.js wires values to the hidden input, comma-joined in multi.

A recessed rail; the liquid slug slides beneath the active tab. Wire panels with data-tab and data-tab-panel and arodum.js switches them.

Tooltips are pure CSS: put data-tip on anything. The modal frosts the whole Engine behind a scrim; Esc, the scrim, or any data-modal-close control dismisses it.

Called from anywhere: arodumToast(message, { kind, duration }). The liquid drain along the bottom reads the time left. Kinds: gold (default), paper, mid.

Archival lines, calm rows, a gold wash on hover. Mono numerals in .num cells.

The playback instruments. The scrubber is the thermometer: liquid fills the channel as time passes, the faint pre-pour behind it is the buffer, and the metal knob seeks. Insight markers pin key moments on the timeline; click one to jump. Hover shows the time bubble; tap the stage to toggle with an orb flash. The rate pill cycles speed, and with the player focused: space or k plays, j and l jump 10s, arrows 5s, m mutes, f goes fullscreen. Simulate with data-duration or point data-media at a real element. Press play.