# 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.

Block · With a Pass · https://tactileui.dev/blocks/pricing-drums

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **At rest**: The configured period and currency show; the drums stand on the price with the period engraved on the plate; nothing runs.
2. **Period switch**: A radio change slides the ink thumb, changes badge, terms and button, re-engraves the plate and rolls the price with its carries.
3. **Currency switch**: 
4. **Seat sold**: setSeats(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. **Palette**: Paper (warm catalogue stock, oxblood accent) or night (walnut-dark stock, brass accent); tokens written from one table.
6. **Tablet**: One column; the reel drawing is dropped; the features run in two columns under the founders row.
7. **Phone**: Controls stack full width, the price instrument fills the column, features in one column, the button full width.
8. **Reduced motion**: Every roll and slide becomes an instant change; prices, terms and the seat count still update.
9. **Off screen**: The drums sleep; nothing runs until the section returns.

## How it works

Original composition; the product (Halden Tape Works, HT-7) and all copy are invented. The reel drawing is hand-built SVG.