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 role on a segmented control sets the permission switches, and changing one marks the access as custom with a way back
A loop of logos, chips or cards driven by CSS, horizontal or vertical, that pauses under the pointer and on focus.
Neutral drawn marks with fictional names that scroll in a continuous loop, pause under the pointer and wrap into a still row when motion is reduced.
A license plate field that follows a fixed pattern.
A responsive masonry layout for items of different heights.
Recording and playback times written as 0:07 and read aloud as 7 seconds.
The column labels and every member card share one grid: presence, current task with its status, time today, estimate and a total that opens the day.
A member card whose Details button turns it over to the email, local time, teams and hours of the week.
Presence on the avatar, contact rows, the day split by project in one bar that morphs between today and yesterday
One member with presence on the avatar, the current task and time today, a role menu, and removal that turns into Undo.
The members of a team with a role menu on each row, a last manager who cannot step down, and a pending invite to revoke.
The same members and columns as one table surface, sortable by name and by time, with pending invitations at the end.
A comment field where @ lists the team, arrows and Enter pick a name and each mention is tinted in the text
Mentions and replies with the quoted comment cut at two lines, opened in place when it runs longer
The menu takes at least the width of the button that opens it.
Three lines that fold into a cross when the menu opens.
Each group of actions opens with a short label.
Each action leads with a muted icon.
Grouped actions with keyboard shortcuts and a submenu.
Icons, shortcuts and submenus holding a radio group and checkboxes.
The quiet bar under a reply: Copy that turns into a check, Regenerate with versions that crossfade, thumbs with a reason picker, Read aloud with a live equalizer and a menu.
A search button that opens into a field, centred icon links, messages and notifications.
Milestone titles on a vertical line, the first three done.
A rounded bar with four links under a highlight that follows the pointer, and a sheet that holds the links on phones.
Steps that hold an avatar, a spinner and an icon.
An effort slider with four stops you drag and flick, with every model’s time and cost rolling under your finger, also folded into a chip for a composer.
Models answer one prompt side by side with live meters, blind until you vote, when the names roll in, rounds reshuffle and a leaderboard sums them; a narrow piece swipes between tabs.
Models grouped by lab with context, speed, price and skills, searched and picked from the keyboard, with a compare view that widens the panel.
Two selects replace the arrows to jump to any month.
The month name opens a list of years to jump to any month between 1980 and 2030.
A month of events where spans read as bars and timed events as a dot with their time, and busy days fold into a list
A small month with a dot on busy days beside the events of the picked day, which change in place
Five round faces, from angry to laughing.
A button whose label morphs from the action to its work and to its result.
A dialog that morphs from its trigger element with smooth transitions.
A popover component that morphs from its trigger with fluid animations.
A formatted number whose digits roll to their new value in the direction of the change.
The easings, springs and presence presets the AI pieces share, each with its reduced-motion fallback.
Several days picked one by one.
An always open list where several options are picked.
Picked options become removable chips in the field.
Chips in the field and one button that removes them all.
A browser list where several options can be picked.
A browser select on the field recipe, with a label.
The browser select on the control recipe.
The hairline and the focus halo take the brand colour.
An invalid field with the message that says how to fix it.
The label sits on the top edge of the field.