Goal Tally

Show money arriving rather than a figure that changed: for a crowdfunder, a charity appeal, a community share offer or a pre-order campaign, the total is a machine people watch, the backers are people with reasons, and the progress rail belongs to the cause.

Copy the goal-tally folder and the odometer 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="odometer/odometer.css">
<link rel="stylesheet" href="goal-tally/goal-tally.css">
<div id="goal-tally"></div>

<script type="module">
  import Odometer from './odometer/odometer.mjs';
  import { mount } from './goal-tally/goal-tally.mjs';

  const goalTally = mount(document.getElementById('goal-tally'), {
    org: 'Harwick Lido Trust',
    kicker: 'Community share offer',
    headline: 'Reopen the Lido.',
  }, { Odometer });

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

mount(element, options, { Odometer })

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

handle.odometers

handle.raised

handle.pledge(p)

Land a pledge from code: { name, place, amount, note }.

handle.update(next_ = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restThe total stands on the drums engraved “Raised so far”; the rope shows the funded share; four recent pledges with their ages.
2. Pledge arrivesEvery 4.5–8 s while in view: a named pledge slides into the feed, the total and backers roll with their carries, the rope pays out over 1.4 s, the live dot pings once.
3. Visitor pledgesThe button lands the visitor’s own pledge, highlighted, rolls the drums, and a polite status line confirms it.
4. PausedA real toggle (aria-pressed) stops arrivals (WCAG 2.2.2) and the live label reads “Paused”.
5. CappedAt most 14 simulated pledges a visit; the feed never loops forever.
6. PaletteLido (deep pool water, cream signage, red-and-cream floats) or chalk (white tiles in pool-marking blue); tokens from one table.
7. TabletOne column, the feed under the tally, the lane line dropped.
8. PhoneStats in three equal columns with the backers counter shrinking to fit, a full-width button, compact feed items.
9. Reduced motionTotals change without a roll, the rope does not ease, pledges appear without sliding, the dot does not ping; every number still updates.
10. Off screenThe timer is cleared and the drums sleep; arrivals resume on return.

Made of: Rolling total, Simulated pledge feed, Pausable live updates, Lane rope progress rail, Visibility gated timer, Palette tokens from one table.

Read more: How the Odometer carries · Odometer, odometer.js, NumberFlow.

Original composition; the Harwick Lido Trust, its campaign and every supporter are invented. Imagery is CSS only (tiles, lane line, rope). Face: National Park (SIL OFL 1.1), Latin subsets as WOFF2.

• 06OdometerA mechanical drum counter.

More blocks on the same object:

• 06.1Pricing DrumsA price printed on brass drums.
• 06.3Trip ComputerAn instrument cluster as a stats band.
• 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.