Pricing Drums

Make the one number a pricing page exists for into the thing a visitor plays with: toggling the plan is how they compare, and the price rolling like a register makes the change legible and memorable. Ships as a finished catalogue-style section for a software product, ready to re-word.

Copy the pricing-drums 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="pricing-drums/pricing-drums.css">
<div id="pricing-drums"></div>

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

  const pricingDrums = mount(document.getElementById('pricing-drums'), {
    brand: 'Halden Tape Works',
    product: 'HT-7 Tape Machine',
    headline: 'Pay once.',
  }, { Odometer });

  // pricingDrums.update({ … });   change any option in place
  // pricingDrums.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.setSeats(n)

The real count from your store: the tally rolls to it.

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restThe configured period and currency show; the drums stand on the price with the period engraved on the plate; nothing runs.
2. Period switchA radio change slides the ink thumb, changes badge, terms and button, re-engraves the plate and rolls the price with its carries.
3. Currency switchA select change swaps the symbol on the plate and rolls to that currency’s list price (priced to end in 9 above 20).
4. Seat soldsetSeats(n) with the real count rolls the founders’ tally to it; it is never announced. Nothing is simulated unless a preview asks for demo.
5. PalettePaper (warm catalogue stock, oxblood accent) or night (walnut-dark stock, brass accent); tokens written from one table.
6. TabletOne column; the reel drawing is dropped; the features run in two columns under the founders row.
7. PhoneControls stack full width, the price instrument fills the column, features in one column, the button full width.
8. Reduced motionEvery roll and slide becomes an instant change; prices, terms and the seat count still update.
9. Off screenThe drums sleep; nothing runs until the section returns.

Made of: Rolling price, Engraved period plate, List price per currency, Visibility gated scarcity tally, Native radio segmented control, Palette tokens from one table.

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

Original composition; the product (Halden Tape Works, HT-7) and all copy are invented. The reel drawing is hand-built SVG. Faces: Instrument Serif and Work Sans (SIL OFL 1.1), Latin subsets as WOFF2. The canvas-fonts source had no licence file for Instrument Serif, so InstrumentSerif-OFL.txt is the standard OFL 1.1 text under the copyright line from the font’s own name table.

• 06OdometerA mechanical drum counter.

More blocks on the same object:

• 06.2Goal TallyA fundraiser’s total on big printed 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.