Vessel

Show a quantity as something a visitor already understands with their hands: how full a glass is. Reading progress that fills as the page is read, an upload that pours in, a fundraising goal, a level: the number is exact and announced, the liquid makes it felt.

Copy the vessel folder from its package next to your page, link its stylesheet and construct 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="vessel/vessel.css">
<div id="vessel" style="width: min(92vw, 640px); display: grid; place-items: center; --vs-max-h: 88vh"></div>

<script type="module">
  import Vessel from './vessel/vessel.mjs';

  const vessel = new Vessel(document.getElementById('vessel'), {
    shape: 'flask',
    orientation: 'vertical',
    liquid: 'honey',
  });

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

new Vessel(element, options)

Builds it inside the element with these options.

level

The level being shown, 0…1 (it lags the value while pouring).

value

The value the gauge reports, 0…1.

state

setLevel(v)

Set the value, 0…1.

tap(nx = 0.5, strength = 1)

Tap the glass at a point across it (0…1): a ripple, and its note if sound is on.

fizz(rate = 1)

Keep the liquid fizzing — processing, brewing, thinking: bubbles rise off the floor at rate (about 20 a second at 1) until fizz(0).

tiltTo(deg)

Hold the glass at an angle (degrees, + leans right): the surface stays level.

update(opts = {})

Change options in place.

destroy()

Stops it and cleans up after it.

1. At restThe level stands still and flat; the loop is asleep and costs nothing.
2. First paintA half-resolution draft is on screen within a task of the glass being created, resized or reconfigured; the full-resolution glass follows in idle slices, no slice over 50 ms.
3. Pouring inWhen the value rises a stream falls from above the rim, lands, dents the surface and carries bubbles down; the level rises only once it has landed, at a pour's rate.
4. DrainingWhen the value falls the level drops at once, smoothly, from below.
5. SloshingA scroll jolt, or a sideways drag that slides the glass, tilts the effective gravity: the liquid piles against a wall, swings back, and settles.
6. TappedA tap on the glass sends a ripple across from where it landed, reflecting off the walls; with the tap tone on, the glass rings a note that falls as it fills.
7. TiltedWith device tilt on, a phone leaned in the hand keeps the surface level while the glass leans; that slope is a rest state and the loop sleeps on it.
8. Scroll-drivenThe level is the reading progress of the page or a scroller; the value and its announcement follow the scroll exactly.
9. FizzingWhile a host asks (fizz), bubbles rise in trains off a handful of sites on the floor (processing, brewing) and the loop sleeps once fizz(0) has let the last one pop.
10. Backdrop changedA theme switch or a new stage colour is noticed on the ancestors (or given as the backdrop option); the glass re-bakes for it, lit dark-field on a dark stage (bright edges, a luminous seam where the liquid meets the glass) and its markings reprint in bone or ink.
11. Lying downThe tube held across the page as a bar: its column slumps toward the bottom of the bore and leans further while it advances; a scroll jolt sloshes it across the bore.
12. Off screen or hiddenThe loop pauses; a returning tab advances one clamped frame, so nothing is launched.
13. Reduced motionThe true level with a still, flat surface on first paint: no pour, no stream, no bubbles, no frames requested. It repaints only when the value changes.

Made of: Shallow water heightfield, Volume conserving flux, Fixed step symplectic, Inertial forcing, Poured stream, Rising bubbles, Baked per pixel shading, Beer lambert liquid, Volume graduations, Sleeping loop, Synthesised tap tone, Progressive bake, Backdrop watch, Dark field lighting, Element tracked progress, Nucleated fizz.

Original. Drawn from lab glassware and the physics of a glass of water (volume, shallow-water waves, the meniscus, Beer–Lambert colour, the caustic in a glass's shadow), not from a catalogue reference, so references is honestly empty. Canvas 2D only; the glass is shaded per pixel into sprites when its size or options change, so no image ships.

• 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.
• 07.1Reading ProgressA long read with a test tube for a progress bar.
• 07.2Crowdfund FlaskA fundraiser where the total is honey in a flask.
• 07.3Upload VesselA file-import dialog where the upload fills a beaker.