# Composing Stick

A heading that sets itself in metal type. Slugs drop one at a time into a steel composing stick, a quoin turns to lock the line, and the bodies sink away to leave the page's own text.

Object · With a Pass · https://tactileui.dev/objects/composing-stick

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

## Use it

With a Pass, install it with npx shadcn add @tactile/composing-stick (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/composing-stick/.

Load the stylesheet as well as the module, or it renders unstyled: tactile/composing-stick/composing-stick.css. In a bundler such as Vite, import each CSS file next to the module import; in plain HTML, link it.

Then new ComposingStick(element, options) from tactile/composing-stick/composing-stick.mjs. Every option has a default; tactile/composing-stick-example.html shows it running. The sample copy (headings, labels, figures) is placeholder: replace it with the page's own.

## Anatomy

Split text reveal, Range measured glyphs, Gravity drop and bounce, Rocking spring, Quoin lock, Loose line close up, Per letter or per word, View or manual trigger, Token driven materials, Sleeping loop

## Usage notes

Give a hero, a launch, a section opening or a 404 a headline that arrives with weight instead of a fade: the words are set the way a compositor set them, letter by letter in a steel stick, and locked tight. It is a real heading the whole time, so screen readers, search, copy and find in page get the plain text, and without JavaScript it is simply the heading.

## Options

| Option | Type | Description |
| - | - | - |
| text | text | The words to set. In your page it is the heading’s own text; this sets it for the preview and the example. |
| by | enum | A slug for every letter, or every word dropped as one tied-up block. |
| speed | number | Everything at once: the falls, the turn of the quoin, the bodies going down. |
| stagger | number | Time between one slug (or word) and the next. |
| trigger | enum | When it comes into view, or only when your code calls play(). Manual shows the locked line until then. |
| finish | enum | Auto follows the page’s finish. The glyphs are always the heading’s own colour. |

## Methods

- state
- stats
- play
- update
- destroy

## States

1. **Waiting**: Until the heading comes into view, an empty steel stick waits where the line will be: the head on the left, the knee with its quoin on the right, a pica scale engraved along the lip. The words are already in the page, only not painted yet.
2. **Setting**: Slugs of type metal drop into the stick one at a time, each with its glyph standing on its face. A slug falls leaning a little and turned toward you, so its body shows; it lands with a small bounce, rocks flat, and the stick gives under its weight. The line stands a touch loose and crooked, as type does before it is locked.
3. **Per word**: A whole word drops at once, tied up as one block, its letters leaning together; the spaces are lower blank spacers that go in with the word before.
4. **Locking**: When the line is full, the screw quoin in the knee takes a quarter turn and the line closes up against the head with one short, firm settle: every slug square, the gaps gone. Then the bodies sink down into the stick one after another, leaving only the glyphs.
5. **Locked**: The heading is the page's own text again, selectable and crisp, standing in its stick. Nothing runs.
6. **Wrapping**: A heading that wraps gets a stick for every line, and the lines are set one after the other, each locking before the next begins. Any font, size, alignment or wrap: every slug is measured where the browser lays the letter out.
7. **Manual**: With Plays set to Manual the locked line shows until your code calls play(), which sets it again and resolves when it locks.
8. **Reduced motion**: The locked line, at once. Nothing falls and nothing animates.
9. **Without JavaScript**: A plain heading, as written.

## How it works

Original. The heading's text is never split or moved: each letter is measured with a Range where the browser lays it out, and the slugs are drawn on a canvas behind the transparent text, so the words are always the page's own. The material tokens and colour probe are copied from originals/components/pin-screen (a piece ships as one flat folder, so it cannot import another's). Canvas 2D; no image or font ships.