Goal Tally
A fundraiser’s total on big printed drums. They roll up as each pledge lands, beside a feed of named supporters and a lane-rope rail to the goal. Pledge, and your £25 carries through.
Built with Odometer
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Rolling total, Simulated pledge feed, Pausable live updates, Lane rope progress rail, Visibility gated timer, Palette tokens from one table
- Stack
- Vanilla ES modules, CSS, Css 3d transforms
- Needs
- Odometer
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe total stands on the drums engraved “Raised so far”; the rope shows the funded share; four recent pledges with their ages.
- 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.
- Visitor pledgesThe button lands the visitor’s own pledge, highlighted, rolls the drums, and a polite status line confirms it.
- PausedA real toggle (aria-pressed) stops arrivals (WCAG 2.2.2) and the live label reads “Paused”.
- CappedAt most 14 simulated pledges a visit; the feed never loops forever.
- PaletteLido (deep pool water, cream signage, red-and-cream floats) or chalk (white tiles in pool-marking blue); tokens from one table.
- TabletOne column, the feed under the tally, the lane line dropped.
- PhoneStats in three equal columns with the backers counter shrinking to fit, a full-width button, compact feed items.
- Reduced motionTotals change without a roll, the rope does not ease, pledges appear without sliding, the dot does not ping; every number still updates.
- Off screenThe timer is cleared and the drums sleep; arrivals resume on return.
Notes
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.
Anatomy
Rolling total, Simulated pledge feed, Pausable live updates, Lane rope progress rail, Visibility gated timer, Palette tokens from one table
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| org | text | Organisation |
| kicker | text | The small outlined label above the headline. |
| headline | text | Headline |
| lede | text | Lede |
| raised | number | Where the drums start. Pledges roll it up from there. |
| goal | number | Goal |
| stretch | number | The end of the rope. Set it to the goal to have none. |
| stretchNote | text | Stretch goal buys |
| backers | number | Backers |
| daysLeft | number | Days left |
| deadline | text | Deadline |
| currency | enum | Currency |
| pledge | number | What the main button pledges. Press it: the drums roll by that much. |
| live | boolean | |
| palette | enum | Deep pool water, or white tiles in pool-marking blue. |
| finish | enum | Drums |
| light | number | Light from (degrees) |
Methods
- odometers
- raised
- pledge
- update
- destroy
How it works
Original composition; the Harwick Lido Trust, its campaign and every supporter are invented. Imagery is CSS only (tiles, lane line, rope).