Catalog
Every one accessible, themeable, and installed as source you own. Play with a card’s preview; open it to customise and install.
59 components
Molten metal flowing behind your content, lit like a photo studio: the pointer drags ripples and carries the highlight, and a press drops a ripple. A WebGL surface in chrome, gold or iridescent, with no libraries.
Backgrounds
A button with a gentle magnetic field: it leans toward the pointer as you come near, a few pixels at most, its label following a little further for depth, and settles back without a wobble.
Actions
Content that loops past across or up and down with no gaps, at a steady speed, with soft faded edges. Pauses on hover and keyboard focus.
Text & Motion
A card that grows into its own story: the photo, eyebrow and title fly to their places, and you pull the story down to fold it back into the grid. Built on the native modal dialog.
Cards
Pick several options from a searchable list: chips pop in and slide aside as others leave, matches are highlighted, and creatable turns it into a tag input. Limits, icons and forms.
Forms
A number whose digits roll into place like an odometer: each column turns on its own, new places slide in and separators make room. Currency, percent, compact and every locale.
Data
A one-time-code field drawn as boxes, built on a single real input: the focus ring glides box to box, a wrong code shakes, a right one lights up in a wave. Paste, SMS autofill, PIN masking and screen readers just work.
Forms
Tens of thousands of particles form your word or logo, scatter from the pointer and spring back; a press sends a shock wave through them. A WebGL particle simulation in your theme colours, with no libraries.
Backgrounds
An AI agent's plan as it works through it: the current step pulses, a step waiting on you turns amber, finished steps tick and the line fills down to the next, so you see where it is at a glance.
AI & Agents
One plan in a pricing table, set large: a price that rolls when billing changes, a highlighted plan on a dark surface lit by your accent, and features read as included or not.
Cards
A monthly/yearly switch with the saving shown, three plans whose prices roll to their new value (the monthly price struck through on yearly), a full comparison table and a no-script FAQ.
Marketing blocks
A circular progress indicator whose gradient follows the arc, with a shadowed cap at the tip as it closes. Arc and number move together; indeterminate spin, a tick when full, stack several for activity rings.
Data
Stars that light up in a wave as you hover; the one you choose pops and throws off sparks. Optional words per value, and a read-only mode with partly filled stars for scores like 4.6.
Forms
A story told as you scroll: steps of text pass a pinned stage, and each visual you have read falls back into a tilted deck as the next rises into place. Works in the page or any scrolling container.
Marketing blocks
A row of choices with a thumb that springs to the selected one — drag it like iOS, and the selected text colour is clipped to the thumb as it glides. A real radio group that submits with forms.
Forms
An account settings screen: profile, notifications and appearance, a side navigation that follows your place and marks edited sections, and a save bar that counts changes, spins, ticks and shakes on failure.
App screens
A panel from any edge that follows your finger: swipe or flick it away, rest a bottom sheet at snap points, and let the page behind shrink back. Built on the native modal dialog.
Navigation
Text with a band of light that sweeps across it, sized to the text so short labels and long headings move at the same pace. Settles to plain text when the work is done. Pure CSS, renders on the server.
Text & Motion
A complete sign-in: social providers, email and password, or a one-time code by email — with validation, busy states and errors.
App screens
A site footer: brand and status line, link columns with growing underlines, a newsletter sign-up that draws a tick, socials, back to top and the brand set huge along the bottom, lit by the pointer.
Marketing blocks
A scroll-aware site header: a highlight that glides between links, menus with descriptions, a bar that floats into a rounded island (and can tuck away while you read), and an animated mobile menu.
Marketing blocks
A range slider on the native input: pull past either end and the track stretches like rubber, then springs back. Value bubble, labelled marks, end icons and formatted values for screen readers.
Forms
Reorder by dragging, or entirely by keyboard: the row lifts and leans into fast moves, the others glide aside, it settles with an accent edge, and every move is announced.
Data
A card lit by a soft light that glides after the pointer, with a lit edge and an optional texture that shows only under the light. Group several and the light carries across their borders. Keyboard focus lights it too.
Cards
Have a project in mind?
Let's make it together
“Swapped our whole pricing page in an afternoon.”
“The reduced-motion handling alone sold me.”
“Studio export matched the preview to the pixel.”
“Finally a marquee that pauses for keyboard users.”