Skip to the object
Tactile UI

Rotary File

A testimonials section on a motorised rotary card file: each customer a paper card on the drum, the one in front readable, the ones to come leaning back with their name tabs showing. Press a customer’s key on the plinth and the drum riffles round to their card while a fluorescent window counts the cards past.

What it is for

The customer quotes on a product’s home or pricing page, as something to operate rather than a wall of cards.

Installnpx shadcn add https://tactileui.dev/r/rotary-file.jsonWith a Pass: how

Controls

Printed small above the heading. Empty leaves it out.

The card standing up when the section opens. The others follow it round the drum in the order listed.

How many cards on the drum: 3 to 7, one selector key each.

A quote with a figure has it stamped on its card and printed in the window.

Finish

Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. The cards are paper in every finish.

Volume

Auto follows the nearest data-volume on the page. Quiet draws hairlines where Tactile draws depth.

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
Rotary card drum, Unwrapped card angles, Staggered riffle, Fanned tabs, Selector keys as tablist, Counting vfd window, Knob drag notches, Measured card height, Depth tokens for volumes, Finish following
Stack
Vanilla ES modules, CSS, Css 3d transforms, Container queries
Needs
Nothing, no dependencies
States
7 documented
Version
0.1.0
Licence
With a Pass

States

  1. At restThe head beside (or above) the file. One card upright in front; the next three lean back behind it, their tabs fanned above; the cards read hang under the axle. The front key pressed in, its lamp lit; the window prints the count and the figure. Nothing runs.
  2. CalledA key (or an arrow key in the row) turns the drum the shorter way round: the cards between riffle over one after another, 70 ms apart, the window counting them, and the card asked for stands up. rtf-card fires with { index, id }.
  3. Knob and swipeThe knob turns the drum a card per notch as it is dragged up or down, or one card on a click; on a touch screen a swipe across the drum turns it one card.
  4. FiguresA quote with a figure has it stamped on its card, a little askew, and printed in the window. The figures option leaves them out.
  5. PhoneUnder 640px the head stands above the file, the drum takes the width with smaller wheels, and the window and the keys stack on the plinth (44px keys, in two rows under 348px).
  6. Reduced motionThe drum jumps straight to the card asked for; nothing transitions and the window prints the card at once.
  7. Finishes and volumesOn a page with the kit’s finish tokens the machine is drawn from them, in any of the twelve; otherwise aluminium or graphite by data-finish, tone or system. Every shadow reads a kit depth token, so the Quiet volume draws hairlines; no size, word or lamp changes. The cards stay paper.

Notes

Each quote is a paper card: the words, the person, their role and organisation, and a figure stamped in the corner when there is one. The plinth carries a selector key per customer (initials and a lamp), which make a real tablist, and a vacuum-fluorescent window that counts the cards as they pass, then prints the figure. The knob on the right-hand wheel turns the drum a card at a time; a tab peeping over the front card pulls it forward; a swipe across the drum turns it on a touch screen. Real figures, blockquotes and figcaptions; no image; every finish of the kit and both volumes; the cards are paper in every finish.

Original composition. Tallyroll, its customers, every quote and figure are sample copy, invented, and the preview says so. The drum, cards, wheels, keys and window are CSS drawn here, in the kit’s tokens; no image. Faces: Instrument Sans (the kit’s own) and Geist Mono, both SIL OFL 1.1.

Anatomy

Rotary card drum, Unwrapped card angles, Staggered riffle, Fanned tabs, Selector keys as tablist, Counting vfd window, Knob drag notches, Measured card height, Depth tokens for volumes, Finish following

Usage notes

The customer quotes on a product’s home or pricing page, as something to operate rather than a wall of cards. Each quote is a paper card: the words, the person, their role and organisation, and a figure stamped in the corner when there is one. The plinth carries a selector key per customer (initials and a lamp), which make a real tablist, and a vacuum-fluorescent window that counts the cards as they pass, then prints the figure. The knob on the right-hand wheel turns the drum a card at a time; a tab peeping over the front card pulls it forward; a swipe across the drum turns it on a touch screen. Real figures, blockquotes and figcaptions; no image; every finish of the kit and both volumes; the cards are paper in every finish.

Options

OptionTypeDescription
labeltextPrinted small above the heading. Empty leaves it out.
titletextHeading
leadtextSentence
firstenumThe card standing up when the section opens. The others follow it round the drum in the order listed.
countnumberHow many cards on the drum: 3 to 7, one selector key each.
figuresbooleanA quote with a figure has it stamped on its card and printed in the window.
finishenumAuto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. The cards are paper in every finish.
volumeenumAuto follows the nearest data-volume on the page. Quiet draws hairlines where Tactile draws depth.

Methods

  • update
  • destroy

How it works

Original composition. Tallyroll, its customers, every quote and figure are sample copy, invented, and the preview says so. The drum, cards, wheels, keys and window are CSS drawn here, in the kit’s tokens; no image.