01 / Component
Scramble Text
Letters resolve out of random glyphs, left to right. Every glyph is drawn on top of the letter it replaces, so lines never reflow and the final text is exactly what you typed.
How to use → Insert Scramble Text, type your copy, pick a trigger.
Mono labels · In View · Delay
> SYSTEM STATUS: ONLINE
> DEPLOYING TO 312 EDGES
> BUILD 2026.09 PASSED
In View + Hover · Symbols
Wrapping paragraph · Binary
02 / Component
Rolling Text
Each letter rolls up to a copy of itself on hover, in a wave. It works as a link, in a navigation, or inside any button: set Hover Target to Parent and the whole button triggers it.
How to use → Drop Rolling Text inside a button and set Hover Target to Parent.
Inside buttons · Hover Target: Parent
Navigation · Stagger 0.35
Large · Direction: Down · Hover Color
03 / Component
Count Up
Type the figure the way it should end — 1,400+, $2.5M or 98% — and it counts up when it scrolls into view. Prefix, suffix, decimals and separators are kept, and the box never changes size.
How to use → Type the final figure into Value. Nothing else to set.
Prefix · decimal · suffix
Thousands separator
From 0 · Ease Out · 2 s
04 / Component
Slide Link
On hover the link text slides out while a copy slides in from the other side. The clip is exactly as wide as the text, so nothing shows next to it, and it runs on plain CSS: it works before the page hydrates and on keyboard focus too.
How to use → Insert Slide Link, type the text, set Link and a direction.
05 / Component
Arrow Button
A complete call-to-action: the label rolls letter by letter while the arrow slides out and a fresh one slides in. Pick →, ↗ or a chevron, put it in a filled circle, left or right. It renders a real link or button and reacts to keyboard focus.
How to use → Insert Arrow Button, set Label and Link, style the pill in the panel.
© 2026 Plainware