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.
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Datasheet
- Mechanism
- 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
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Nothing, no dependencies
- States
- 9 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- WaitingUntil 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.
- SettingSlugs 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.
- Per wordA 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.
- LockingWhen 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.
- LockedThe heading is the page's own text again, selectable and crisp, standing in its stick. Nothing runs.
- WrappingA 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.
- ManualWith Plays set to Manual the locked line shows until your code calls play(), which sets it again and resolves when it locks.
- Reduced motionThe locked line, at once. Nothing falls and nothing animates.
- Without JavaScriptA plain heading, as written.
Notes
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.
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.
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
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.