Animated React components installed as source. Text Reveal, Number Roll, Link, Field and Input are free; the rest comes with a one-time license.
Example usage of Dither.
Text on a dot matrix, five dots wide and seven tall, like a departure board. Unlit dots stay faintly visible, and when the text changes the dots that differ flip in a wave from the left. No JavaScript animation.
Example usage of Dot Matrix.
Example usage of Dot Matrix.
A black pill that changes shape to fit what it is showing. Give it a view key and some content: it springs to the new size, overshooting a touch when it grows, and cross-fades what is inside. No animation library.
Example usage of Dynamic Island.
An icon bar whose active tab says its name, and whose page grows out of the bar. The label, the highlight and the shell move as one, on one clock. No animation library.
Example usage of Expandable Tabs.
A label, a control, a hint and an error, wired together. The label names the control, the hint describes it, and the error appears under it with a short settle when something is wrong.
Example usage of Field.
The form that holds the fields. It validates with the browser’s own rules, shows errors where they belong, takes errors back from your server, and hands you the values as an object.
Example usage of Form.
Soft coloured light that drifts around the inside edge of an element. It follows any rounded shape, brightens and quickens with a level you give it, such as a voice or typing, and spins up and coasts to a stop instead of switching.
Example usage of Glow.
Example usage of Glow.
A mark made over a word or a phrase: a highlighter that wraps with the text, or a pen stroke under, around or round a word. Each is drawn when it comes into view. No JavaScript animation.
Example usage of Highlight.
A placeholder that becomes the picture. A grid of soft tiles moves in a pattern of your choosing while the image is made, takes on its colours the moment it arrives, and swells from the middle until the tiles close into the photograph.
Example usage of Image Generation.
Example usage of Image Generation.
Example usage of Image Generation.
A text input and a textarea that grows as you write. Quiet at rest, lifted on focus, red when wrong.
Example usage of Input.
Your app in the middle and four services around it, joined by routes with small ports. An event comes in along one route, the app lights up, and the answer goes out along the others. Put your own marks on the tiles.
Example usage of Integrations.
On hover each letter slides out and a copy slides in, one after another, optionally into a different word. Pure CSS: the stagger plays forward on enter and back on leave, and can be interrupted anywhere.
Example usage of Letter Swap.
A text link whose underline is drawn on the text: it draws in from the left, leaves to the right, and follows the words when they wrap. Four treatments, hover and keyboard alike, no JavaScript.
Example usage of Link.
Example usage of Link.
Sixteen dots in a square that swell and light up in a pattern: a scan, a wave, a twinkle, an orbit, a pulse, a spiral, rain or rising bars. Round, soft-cornered or square, in the text colour or a palette of your own, and small enough to sit beside a line of text.
Example usage of Loader.
Example usage of Loader.
Example usage of Loader.
A line in a conversation that is not a message: what the agent is doing, what it did, or a labelled break.
Example usage of Marker.
A menu of actions that grows out of the button that opened it and is gone the moment you choose. Items, ticks, choices, groups and key hints. Built on Base UI, animated in CSS.
Example usage of Menu.
Example usage of Menu.
One message in a conversation: who sent it, the bubble, and what is said underneath. Messages from the same person run together, replies quote what they answer, and reactions sit on the bubble’s edge.
Example usage of Message.
A transcript that only moves when the reader asks it to. A new prompt rises to the top with the end of the last answer still in view, the reply streams into the space below it, and scrolling away is respected until you jump back.
Example usage of Message Scroller.
Where a sent message has got to: sending, sent, delivered, read, or not delivered. The clock fades into a tick, a second tick joins it, and read takes on colour.
Example usage of Message Status.
A number you can type, step with the buttons, or nudge with the arrow keys, kept inside its limits.
Example usage of Number Field.
A number whose digits roll to their new value. Each digit is a reel behind a soft-edged window: it rolls the way the number moved, streaks while it is fast, and digits fold in and out when the number changes length.