Pricing Drums
A price printed on brass drums. Switch the period or the currency and the figure rolls to its new value with the period engraved beneath; a tally shows the founder seats actually left.
Built with Odometer
What it is for
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.
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 price, Engraved period plate, List price per currency, Visibility gated scarcity tally, Native radio segmented control, Palette tokens from one table
- Stack
- Vanilla ES modules, CSS, Css 3d transforms, SVG
- Needs
- Odometer
- States
- 9 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe configured period and currency show; the drums stand on the price with the period engraved on the plate; nothing runs.
- Period switchA radio change slides the ink thumb, changes badge, terms and button, re-engraves the plate and rolls the price with its carries.
- 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).
- 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.
- PalettePaper (warm catalogue stock, oxblood accent) or night (walnut-dark stock, brass accent); tokens written from one table.
- TabletOne column; the reel drawing is dropped; the features run in two columns under the founders row.
- PhoneControls stack full width, the price instrument fills the column, features in one column, the button full width.
- Reduced motionEvery roll and slide becomes an instant change; prices, terms and the seat count still update.
- Off screenThe drums sleep; nothing runs until the section returns.
Notes
Ships as a finished catalogue-style section for a software product, ready to re-word.
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.
Anatomy
Rolling price, Engraved period plate, List price per currency, Visibility gated scarcity tally, Native radio segmented control, Palette tokens from one table
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| brand | text | Set small above the headline. |
| product | text | Product |
| headline | text | Headline |
| accent | text | The second half of the headline, in the accent colour. |
| lede | text | Lede |
| period | enum | The period the switch starts on. Visitors roll the price by switching it. |
| currency | enum | |
| monthly | number | Monthly price (USD) |
| yearly | number | Yearly price (USD) |
| lifetime | number | Lifetime price (USD) |
| seats | number | The small counter: set it from your real sales, and call setSeats(n) when one goes. |
| pressing | number | Founders’ seats in all |
| ctaTrial | text | Button, monthly and yearly |
| ctaOnce | text | Button, lifetime |
| palette | enum | Warm paper, or the same catalogue on walnut-dark stock. |
| finish | enum | The Odometer’s finish, and the housing that comes with it. |
| light | number | The drums’ lamp: 0 from above, clockwise. |
Methods
- odometers
- setSeats
- update
- destroy
How it works
Original composition; the product (Halden Tape Works, HT-7) and all copy are invented. The reel drawing is hand-built SVG.