Motion-first React components and blocks for shadcn, with tuned springs, light and dark themes, and an MCP server for AI agents.
Disclosures whose height springs open with no overshoot, content fading in as the height lands and the chevron turning on the same spring. Base UI Accordion behaviour.
A billing FAQ with answers of different lengths.
A small living orb for an assistant's state: colour fields drift inside a glassy sphere and it breathes, idle, listening, thinking or speaking, with its speed tied to the token rate so it keeps pace with the stream.
A voice assistant: switch between idle, listening, thinking and speaking; speaking streams a reply in bursts and the orb speeds up and slows with the token rate.
A chat attachment: images as a thumbnail that sharpens from a blur once decoded, files as a typed chip. Upload progress is a ring that springs between reports; a failure shakes once and offers Retry; removing one lets its neighbours slide into the gap.
A message draft with an upload in flight, a finished deck and a failed CSV with Retry.
The height:auto spring primitive: a wrapper whose height springs to its content, opens and closes with the content fading in after the height lands, and rests at height:auto with no clipping.
Avatar and AvatarGroup on Base UI Avatar: images fade in from a 4px blur once loaded so initials never flash; overlapping stacks with a cut-out ring spread apart on hover; the overflow count rolls.
A members card: a stacked group with a rolling +N, a list with photos, initials and a failed image, and Invite.
A status or count chip. Counts roll their digits; a count-only badge pops in above zero and leaves when cleared; a live dot breathes slowly and stops under reduced motion.
A mail sidebar with rolling unread counts (98 → 99+) and service status badges with a live dot.
A trail from the root to the current page that folds its middle crumbs into a menu when it runs out of room, measured rather than guessed, with links that underline on hover.
A file browser five folders deep: open folders to grow the trail, click a crumb or the … menu to climb back.
A Base UI button whose press scale depends on its width, whose label swaps with y + blur while the width springs, and whose loading spinner overlays the label so the width never changes. Popover triggers never scale.
An invoice with Send (loading, then “Sent”), Download and a two-step Void.
Month, week and day grids, click-click and drag range selection over days or time slots with disabled units and length limits, WAI-ARIA grid keyboard movement, timed-item placement with overlap columns, and availability maths (free time, everyone-free overlap, slot starts). Native Date helpers with date-fns names.
A scroll-snap carousel with native momentum, mouse drag and arrow keys. Its dot stretches between pages as you scroll and its edges fade only where there is more.
Customer stories for a finance product, one metric and quote per slide.
Table cells that make rows look finished: avatar with name, status badge, number with a rolling value and coloured delta, a progress meter that fills on view, a self-updating relative time, and a mono ID with a copy button.
An accounts table: advance a month and MRR rolls, deltas recolour, onboarding meters glide, and active accounts breathe.
The engine under every Eased chart: nice scales, container sizing, path morphs on shared x samples, a slider-model scrub with a trailing tooltip, sliding gridlines, a hidden data table, ChartRangeContext and the validated --eased-chart-1…6 palette.
The chat model and hooks behind Eased's chat components: AI SDK UIMessage-compatible types, useStickToBottom, message grouping, the attachment model with useAttachments, composer key handling with slash/mention triggers, and a useChat adapter.
Shiki-highlighted code in warm stone and cream themes, with a file title bar and language pill, a copy button that morphs into a check while "Copied" slides out, highlighted and focused lines, and long blocks that collapse under a progressive blur with "Show 22 more lines".
A docs excerpt: a 34-line debounce hook with line numbers and highlighted lines, collapsed after 12.
The engine behind Eased code components: a lazily loaded Shiki singleton (shiki/core + the JavaScript regex engine, grammars for tsx, ts, js, jsx, json, css, bash, html, md, python and diff loaded on demand), the eased-stone (dark) and eased-cream (light) themes, light/dark token lines rendered with CSS light-dark(), the line decoration model (highlight, focus, added, removed, plus the DiffHunk contract), the copy → check morph, collapse-after under a progressive blur, and a page-wide synced choice store.
Several files, or one command per package manager, in one code block: the underline glides between tabs, the code cross-fades 6px in the direction of travel while the height springs, and with a groupId every block on the page switches together and remembers the choice.
An install block synced across package managers, then three files of different heights and languages.
Shared pieces for Eased e-commerce blocks: drawn product art, colour swatches, the price line, a rolling quantity stepper, the bag button and money and stock formats.
A chat composer that grows on a spring, opens an attachments row with Auto Height, and morphs its Send arrow into a Stop square while a reply streams. Enter sends, Shift+Enter breaks the line, Escape stops; files can be picked, dropped or pasted. Wires straight into AI SDK useChat.
A working mini chat: send, attach, stop mid-reply, scroll up while it streams.
A layout primitive that exposes outer, padding and inner radius as CSS variables so nested corners stay concentric.
Demo for Concentric Frame.
The copy → check morph: a clipboard write with a textarea fallback, a useCopy hook that holds the copied state for 1.6s, the copy icon that swaps to a check with a blur, and the CopyButton built on them. Shared by the code components, Wallet Card and Connect Wallet.
Shared pieces for Eased crypto blocks: a monochrome token glyph, chain tints as tokens with a ≤10% glow, address truncation, and USD price, token amount and signed change formats.
A date field with a calendar popover on Base UI and calendar-core. Typed dates parse in the field's locale, months slide the way you page, the selection glides between days, and ranges preview as you hover.
Time off: an away range that can't start in the past, and a typed handover date that must fall before it on a weekday.
The shell every Eased demo renders in: 420px tall, shrinks to its container, one 48px header style.
Documents for contract review and docs: a paragraph/clause model with numbering and a text parser, word redlines on the diff package grouped into accept-or-reject changes, block-level version diffs, DiffHunk-shaped line hunks, and durable text anchors for comments and AI suggestions that survive edits.
A menu that opens on mousedown 4px from its trigger, with one highlight gliding between rows and a macOS blink before it closes. Checkbox and radio rows, shortcuts and submenus share three aligned tracks.
A document's options menu: duplicate, rename, a Move to submenu, copy link, Show completed, Sort by and a danger Delete with undo.
The design skill Eased is built with, as an agent skill: alignment, the 1:2 spacing ratio, concentric radii, springs per role, enter and exit, focus rings, reduced motion, and how to install and compose Eased components.
Alignment recipes for repeating rows: rowGrid and rowGridRow share a leading, a flexible and a fixed trailing track, so every row's role or value starts on one x.
The macOS look the Mac pack shares: the San Francisco font stack, frosted popover and HUD materials in light and dark, hairlines and macOS corner radii, with a native mode that leaves vibrancy to a Tauri or Electron window and a hook that follows the system appearance there.
The named springs (snappy, smooth, bouncy), tweens, a hydration-safe useSafeReducedMotion and press classes every Eased component shares, matching the springs in the Eased stylesheet, plus small DOM and platform helpers (isEditable, useScrollFades, useIsMac) and a true-minus number formatter.
The colours, shadows, radius roles, UI type sizes, springs, utilities (radius-nested, hit-area, focus-ring …) and variants (hover-fine, reduced) every Eased component reads. Installs into your global CSS without touching shadcn/ui's theme or Tailwind's defaults: every raw variable is prefixed --eased-, light follows :root, dark follows .dark.
Label, control and one message line on Base UI Field. The description and the error share the line and swap with y + blur; inside Base UI's Form, submitting focuses the first invalid field.
A sign-up form on Base UI Form: submit focuses the first invalid field and a server error routes to its field.
Label, description ⇄ error message slot and the bordered input group, on Base UI Field. Focus is the border alone; turning invalid shakes the group once, 6px, and the message swaps with y + blur while its height springs.