React components, blocks and templates that animate every change of state, built on Base UI, motion and Tailwind CSS 4, with an MCP server.
A discussion that folds into one resolved line, opens again to read and can be reopened
An add button that keeps only its icon on small screens.
Weekly sign-up cohorts as a grid shaded by how many still subscribe, weeks to come as empty slots, a selection ring that travels with the arrow keys and a panel whose figure rolls to the picked week.
Filter reviews by star rating, each option with its count.
Each letter rolls up on hover and its copy rolls in from below, one after the other.
A circular crop area for avatars.
The picked day drawn as a full circle.
Circular range ends joined by a tinted band.
An event, conditions and actions on one rail: rows open and close in place, the rule reads back as a sentence as you edit, mistakes fold in under their row and Save becomes Saving then Saved.
A macOS browser window drawn in CSS around a picture, a video or live UI, with a chrome that follows the theme.
An offer with the hours, minutes and seconds left until midnight.
The illustrated avatars the examples use, copied into public/avatars.
The flat landscapes the image examples use, copied into public/images/scenes.
A disabled pill with a spinning loader while work runs.
Attendees as chips, the next free slots, a duration and a meeting link, summed up in one sentence that rewrites itself
A joined scale from 0 to 5 with its two ends named below.
A long FAQ that scrolls with the native scrollbar.
The same FAQ inside a scroll area with a thin scrollbar.
Reveals that play once when an element scrolls into view, and a parallax layer that drifts with the scroll.
Thin scrollbars that show while you scroll.
Six tabs with icons, a count and a badge that scroll sideways when space runs out.
A component that visualizes scroll progress with animated indicators.
Text that reveals word by word, letter by letter or under a highlight as it scrolls through the viewport.
A large line of text that loops sideways and speeds up with the scroll.
Stacked rows of text or pictures that loop sideways, speed up with the scroll, turn around when it scrolls up and lean into their speed.
Countries grouped by continent, narrowed by a search field.
A search field at the top of the list narrows the options.
Service categories with an icon and a count on each row.
Every time zone of the browser, found by typing part of its name.
Typing opens every folder and highlights the matches.
An @ mention search over members, pending invitations and guests, with highlighted matches and arrow-key picking
A search icon before the query and a submit arrow after it.
The search icon turns into a spinner while results load.
A people list whose search and role filter match nobody, saying what is applied and how to get everyone back with Clear filters.
A search field that shows its keyboard shortcut on a key cap.
A grey pill with a cross icon for dismissing.
A card security code field.
A full-width control whose indicator slides to the chosen option.
Four segments fill in turn as the password gets stronger and the strength label slides in the same direction.
A wide track whose raised half slides under the chosen icon.
A raised plate slides to the active tab on a grey track.
Icons, a count and a New badge that dim on inactive tabs.
A select on the control recipe with a menu popup.
A custom select with a value picked by default.
A badge that toggles like a checkbox and shows a check when on.
Checkboxes select rows one by one or all at once.
The mark of the picked row in a menu.
Team members with their avatar, in the list and in the trigger.