@eased

The colours, shadows, radius roles, UI type sizes, springs, utilities (radius-nested, hit-area, focus-ring …) and variants (hover-fine, reduced) every Eased co…

The named springs (snappy, smooth, bouncy), tweens, a hydration-safe useSafeReducedMotion and press classes every Eased component shares, matching the springs …

The shell every Eased demo renders in: 420px tall, shrinks to its container, one 48px header style.

Undo toast for React and shadcn: a pill with a draining countdown ring that commits the destructive action only when it runs out.

A file list where deleting a row shows the Undo Pill.

Concentric border radius frame for React and shadcn: nested corners take the outer radius minus padding and border, through CSS variables.

Demo for Concentric Frame.

A billing FAQ with answers of different lengths.

Animated accordion for React and shadcn: panels open to their real height, one or several at a time, built on Base UI.

A members card: a stacked group with a rolling +N, a list with photos, initials and a failed image, and Invite.

Animated avatar for React and shadcn: images fade in from a soft blur, initials fill in when they fail, and avatar groups spread apart on hover.

A mail sidebar with rolling unread counts (98 → 99+) and service status badges with a live dot.

Animated badge for React and shadcn for statuses and counts: counts roll their digits, and a count-only badge leaves at zero.

An invoice with Send (loading, then “Sent”), Download and a two-step Void.

Animated button for React and shadcn: labels swap while the width springs, and the loading spinner keeps its width.

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 …

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, …

One popover per side; each enters toward its trigger and flips on collision.

The motion and material every Eased popup shares: grows from the trigger's transform-origin, enters a few pixels toward the trigger, closes at half the distanc…

A three-detent sheet over a map: flicks project onto detents, pulls past the top rubber-band, and the list hands its scroll over to the sheet.

useDrag: one-axis drag with Apple's rubber-band past the ends, velocity projection onto snap points, scroll handoff from an inner scroller, interruptible relea…

The shared-layout highlight primitive: render <Indicator> inside whichever item is active and it glides there on the snappy spring, with corners kept round whi…

The rolling-digits engine every Eased number uses: Intl-formatted parts, each digit a ten-face cylinder on a spring that rolls in the direction of change, with…

Edge feathers that appear only where there is more to scroll (scrollFadeMask, useScrollEdges) and the stacked masked backdrop layers behind Progressive Blur (b…

The text-change engine: outgoing text lifts 3px and blurs out, incoming rises 4px and sharpens, and the box springs to the new width. Shared by Button, Field m…

A sign-up form on Base UI Form: submit focuses the first invalid field and a server error routes to its field.

Form field for React and shadcn: a label, a control and one message line where help text and errors swap in place.

Workspace settings with a URL prefix, live validation and a disabled field.

Text input for React and shadcn on Base UI, with leading and trailing addons and an error state that shakes once.

A keyboard shortcuts list whose keycaps press and rows light up as you hold the real keys.

Keyboard shortcut keycap (kbd) for React and shadcn that presses down while the real key is held.

A revenue card: switch the range or the number format and every figure rolls; live orders tick the total up.

Animated number counter for React and shadcn: each digit rolls to its new value, formatted for the user's locale.

A Share popover with an invite field, people with access and a concentric footer.

Animated popover for React and shadcn that grows out of its trigger, moves focus inside and closes on Esc, built on Base UI.

An upload list: uneven chunks, an indeterminate processing step, then complete; plus a storage meter.

Animated progress bar for React and shadcn on Base UI, with a spring-driven bar, a rolling value and an indeterminate sweep.

A music library whose header and mini player blur the covers scrolling under them, with a flat-blur comparison.

Progressive blur for React and shadcn: a backdrop blur that ramps up to 20px toward an edge, under sticky headers, bottom bars and composers.

A checkout delivery step: speed as radio cards, drop-off as radios that depend on it.

Radio group for React and shadcn, with plain radios or selectable cards whose selected border travels between them.

An activity feed with a horizontally scrolling filter row and a vertical list.

Custom scrollbar for React and shadcn: a thin overlay bar on a native scroller, with edge fades only where more remains.

A traffic card: a metric switch in the header and a date-range control that redraws the chart.

Segmented control for React and shadcn: a thumb glides to the chosen option, with radio semantics that submit with a form.

An activity feed that loads behind skeletons shaped by its own content, then hands off without moving a pixel.

Skeleton loader for React and shadcn: every placeholder on the page shares one shimmer, and the real content fades in in place.

A deploy that walks its steps, each spinner swapping to a check, with the size scale underneath.

Loading spinner for React and shadcn: a CSS arc that keeps turning while the main thread is busy and announces itself to screen readers.

A project page with Overview, Activity, Members and Settings tabs of different heights.

Animated tabs for React and shadcn: an underline or pill indicator glides to the active tab and panels cross-fade.

An order tracker, a billing toggle and a copy button, each changing text with Text Swap.

Animated text change for React and shadcn: a label or value swaps with a lift and blur while the width springs to fit.

A support reply that springs open as you write, with a rolling counter.

Auto-resizing textarea for React and shadcn: it grows with its text on a spring, with a character counter whose digits roll.

An editor toolbar: bold, italic, underline and strikethrough (multiple) beside text alignment (single).

Toggle button group for React and shadcn, single or multiple selection, for toolbars like bold, italic and underline.

An editor toolbar whose tooltips form one delay group, with keyboard shortcuts.

Animated tooltip for React and shadcn with an optional keyboard shortcut; after the first, neighbours open instantly.

An accounts table: advance a month and MRR rolls, deltas recolour, onboarding meters glide, and active accounts breathe.

Table cells for React and shadcn: avatars with names, status badges, rolling numbers with coloured deltas, progress meters, times and IDs.

The layer under every Eased table: a TanStack Table v9 feature set with typed column meta, hairline rules, dense and comfortable densities, a hover-revealed so…

An invoices table with mono IDs you can copy, avatars, status badges, amounts and relative dates, with a density toggle.

Data table for React and shadcn on TanStack Table, with half-pixel row rules, a sticky header and 36px or 48px rows.

A message draft with an upload in flight, a finished deck and a failed CSV with Retry.

File attachment chip for React and shadcn: image thumbnails sharpen as they load, a ring tracks the upload, and failures offer Retry.

A working mini chat: send, attach, stop mid-reply, scroll up while it streams.

AI chat input for React and shadcn: the box grows as you type, files drop or paste in, and Send morphs into Stop while a reply streams.

The chat model and hooks behind Eased's chat components: AI SDK UIMessage-compatible types, useStickToBottom, message grouping, the attachment model with useAt…

Follow-ups that merge into one run of bubbles, corners tightening as each lands.

Chat message bubble for React and shadcn that renders AI SDK messages, tightening the corners where consecutive bubbles meet.

The clocks, models and contracts behind Eased's thinking states: useElapsed (seconds on the start's own grid), useTokenRate (a smoothed stream rate as motion v…

An agent's activity: a research status rotating mid-sweep, and a task list whose running row shimmers and settles as each task finishes.

Shimmer text effect for React and shadcn: a band of light sweeps a loading label, in one phase shared by every shimmer on the page.

A billing question: the assistant thinks for six seconds with its reasoning streaming in, then answers while the bar settles to "Thought for 6s" and folds away.

AI reasoning indicator for React and shadcn: "Thinking 4s" counts up while the model reasons, then reads "Thought for 12s" and folds away.

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 rat…

AI agent orb for React and shadcn showing idle, listening, thinking or speaking, with a swirl that speeds up with the token rate.

The engine under every Eased chart: nice scales, container sizing, path morphs on shared x samples, keyed arc layouts and morphs, a sequential colour scale, ro…

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…

A product-health card: a scrubbable daily-active-users line over four metric rows, all morphing with the range.

Sparkline chart for React and shadcn: a word-sized line that draws in once and morphs to new values, with an optional scrub readout.

A docs excerpt: a 34-line debounce hook with line numbers and highlighted lines, collapsed after 12.

Code block for React and shadcn with Shiki syntax highlighting, a copy button, line highlights and long blocks that collapse under a blur.

An install block synced across package managers, then three files of different heights and languages.

Code tabs for React and shadcn: several files or one install command per package manager, with the pnpm or npm choice synced across the page.

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, b…

An install card: a package-manager switch drives two commands, plus a long git clone that scrolls under edge fades.

Copyable command snippet for React and shadcn: one shell line with a $ prompt that is never copied, and a copy button that turns into a check.

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, red…

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…

A small macOS desktop with media keys: nudge volume, brightness and keyboard backlight (hold to repeat, or use the arrow keys) and switch between the classic a…

macOS volume and brightness HUD for React and shadcn, square or macOS 26 pill, updating in place and holding 1.1s after each change.

A menu bar usage tracker: session and weekly plan usage, a reset countdown and app actions, over a frosted desktop.

macOS menu bar popover for React and shadcn, for Tauri and Electron apps: the panel grows from its arrow tip and reverses mid-flight.

The small macOS screen the Mac pack demos share: a soft wallpaper with a few files, a translucent menu bar with the app's menus, status items, Wi-Fi, battery a…

useInertia: hand a MotionValue the release velocity and it coasts with UIScrollView friction onto the snap point the flick would reach (points, a step or a fun…

Plain vs Eased: the same share card as a default kit draws it and as Eased does, with a Loading mode that compares the skeleton with the loaded card.

Before and after image comparison slider for React and shadcn: drag the divider, flick it to 0, 50 or 100, or move it by keyboard.

A changelog post with replies: like it for the burst while other readers keep the count rolling.

Animated like button for React and shadcn: the heart pops with a burst of sparks, and the optimistic count reverts if saving fails.

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,…

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-rej…

Realistic, deterministic sample data per industry (AI, devtools, finance, crypto, SaaS, legal, e-commerce, real estate, health, HR), seeded and anchored to a f…

Node/edge graphs for CI pipelines, agent runs, payment routes and approval flows: a typed graph on thinking-core's StepStatus, a small-DAG auto layout (ranks, …

Deterministic live data: a seeded RNG and tick stream (prices, rates, vitals), useClock and useTicker that pause off-screen and in hidden tabs and slow under r…

Events and timelines for matter histories, ledgers, deploy logs and activity feeds: a typed event model, Intl day grouping (Today, Yesterday, weekday), relativ…

Billing: a failed payment that retries into a success, and a note you can dismiss.

Inline alert for React and shadcn for info, success, warning and error messages, with optional actions and a dismiss button.

An export dialog: All columns follows the columns below it.

Animated checkbox for React and shadcn: the check draws itself and morphs into a dash for indeterminate parent checkboxes.

What every Eased overlay shares: panel, menu and modal surfaces, the blurred scrim, menu rows on shared tracks with a gliding highlight, a drawn check and shor…

A type scale from 48 to 16px, each size with its own weight and tracking.

Heading component for React and shadcn: size, weight, tracking and leading set together from 16 to 60px, separate from the h1–h6 level.

Release notes that switch between chat and document density.

Prose typography for rendered markdown in React and shadcn, with a chat density for AI replies and a document density for long reads.

Usage limits: a spend cap, a price range and an alert threshold.

Range slider for React and shadcn, single or two-thumb, with a value readout whose digits roll as it steps.

Notification settings with switches on one right edge.

Toggle switch for React and shadcn: the thumb stretches toward where it is going, and a label turns it into a settings row.

API keys: a create-key dialog whose Cancel asks in a nested alert dialog, and a revoke alert dialog per key.

Modal dialog for React and shadcn, with confirm (alert) dialogs and nested dialogs, built on Base UI.

An issue tracker header whose search trigger (and ⌘K, while the demo is on screen) opens a palette of suggestions, navigation, theme and team commands.

Command palette for React and shadcn: ⌘K opens it at once, commands filter as you type, and Enter runs the first match.

A grid of brand assets: right-click or press and hold a file to open, duplicate, tag, star or move it to Trash with undo.

Right-click context menu for React and shadcn on Base UI: it opens at the pointer, or on a 500ms long press on touch, with submenus.

A document's options menu: duplicate, rename, a Move to submenu, copy link, Show completed, Sort by and a danger Delete with undo.

Dropdown menu for React and shadcn: one highlight glides between rows, and a chosen row blinks before the menu closes, as on macOS.

An orders list whose Filters open a right sheet (a bottom sheet on phones) with a nested Ship to sheet, and each order opens a bottom sheet.

Sheet and side drawer for React and shadcn on Base UI Drawer: swipe to dismiss, and side sheets become bottom sheets under 640px.

A pull request's sidebar: a repository combobox, reviewers with avatars in grouped teams, and colour-dotted labels as chips.

Searchable select (combobox) for React and shadcn, with filtering, a clear button and multi-select chips, on Base UI.

Workspace settings: a grouped data-region select, a timezone list that scrolls, and a fixed-width role select per member.

Select dropdown for React and shadcn that opens with the chosen option over its trigger, like a macOS pop-up button.

A project screen whose Deploy, Move to Done and Retry buttons fire a promise toast, an Undo toast and an error toast into the frame.

Toast notifications for React and shadcn: toasts stack behind the newest, fan out on hover and pause their timers, with an Undo action.

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 si…

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 wi…

Hold-to-confirm: a time-true linear fill while the pointer, Space or Enter is held, a quick no-overshoot drain when let go early, and a button that reveals its…

A file browser five folders deep: open folders to grow the trail, click a crumb or the … menu to climb back.

Animated breadcrumb for React and shadcn that folds the middle crumbs into a menu when the trail runs out of room.

An invoices list whose footer pages through 64 invoices, numbered in a wide tile and compact in a narrow one.

Animated pagination for React and shadcn: the selected page chip glides on a spring, and the width never changes as you page.

A recipe's reviews: an average with a count that rolls when you rate, a large rating with a word that follows the pointer, and recent reviews.

Star rating for React and shadcn on Base UI RadioGroup, with hover preview, half stars and a read-only mode for any fraction.

Customer stories for a finance product, one metric and quote per slide.

Carousel for React and shadcn on native scroll snapping, with mouse drag, arrow keys and a dot that stretches between pages.

Lease documents with a simulated upload: one file is too large, one drops its connection once.

Drag and drop file upload for React and shadcn: the dropzone wakes when files cross the page, with per-file progress and retry.

A Next.js repository with git status markers and the selected path in the footer.

React file tree for shadcn: folders spring open, one selection glides between rows, and arrow keys and typeahead follow WAI-ARIA.

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.

Date picker for React and shadcn with a calendar popover and ranges, reading typed dates such as 24 Oct or tomorrow in the field's locale.

A limit order: shares with split steppers, a USD limit price and a scrubbable percent stop loss, with a rolling cost summary.

Number input for React and shadcn on Base UI: steppers speed up the longer you hold them, and each step rolls the digits.

Email verification with a 3-3 code, auto-verify on the last digit, a wrong-code error and a resend countdown.

OTP input for React and shadcn on Base UI: SMS autofill, password managers and a pasted code fill every cell at once.

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 f…

The Ridgeline Down Jacket in three colourways, one marked down, with thin stock and a sold-out size.

Product variant picker for React and shadcn: colour swatches and sizes on Base UI radio groups, with sold-out sizes struck through.

Shared pieces for Eased SaaS-admin blocks: a rolling delta chip that falls in warning, a usage meter that turns warning at 80%, relative times and compact mone…

Shared pieces for Eased real-estate blocks: CRE units (SF, $/SF, terms, cap rates), lease-expiry status and its tints, the vacancy hatch and an expiry legend.

Shared pieces for Eased HR and recruiting blocks: the 1–4 interview scale and its labels, four pips that fill to a rating, and the short time-in-stage clock.

Shared pieces for Eased legal blocks: the inline redline, the clause number track, deadline countdown wording, legal date and confidence formats, and the AI ma…

Shared pieces for Eased health blocks: where a value sits against its range, a warning flag that pops in and out, and clinic clock times.

Weekly signups against the previous period, with a headline that follows the crosshair and a range switch that morphs the area.

Area chart for React and shadcn that draws in once, morphs to new data while its scale springs, and has a crosshair tooltip.

A workspace overview: a plan card with an action, a plain stat, two project cards that are links, and an activity card that grows.

Card component for React and shadcn with shadcn's parts and slots, plus a CardLink that makes the whole card one clickable link.

Booking a 20-minute follow-up at Willow Health across three clinicians and the next five weekdays.

Appointment booking for React and shadcn: pick a provider, day and time, and the chosen slot lifts into the confirmation card.

Four onboarding captions on their own clock, each with its own timing, lighting the step they describe.

An animated caption ticker for React and shadcn, stepping short captions in under a scene one line at a time.

A settings panel where every press rings at the point you click, on the canvas and on the buttons, played once on its own first.

An animated click ripple for React and shadcn, a ring that spreads from the exact press point.

An attachments panel played by Ama's cursor: it picks up a file, drags it into the drop zone, then glides to Attach and presses it.

An animated demo cursor for React and shadcn, a scripted pointer that glides to real elements and presses them.

The Product demo set on one timeline: a cursor presses Deploy, a ripple rings, the label swaps, the build count rolls, a caption steps on and the view pushes i…

What the Product demo set shares: useDemoTimeline, one drift-free clock of named steps that plays, loops, seeks, pauses off-screen and in hidden tabs, and rest…

Fathom's usage overview pushing in on p95 latency, springing back, then lighting the latest deploy.

An animated zoom spotlight for React and shadcn, pushing in on one region of live UI and dimming the rest.

Client names as wordmarks in a ruled grid, then three numbers that roll up once.

The question, a line on how the studio replies, and the email set large with a copy button.

Every word of the agency template and its client projects, plus the palette, tile mark, column, section labels, page heading, entrance, the drawn client sites …

A newsletter sign-up, the studio's links and address, and the legal line with its local time.

One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.

What the studio is in one serif sentence, the page's heading, with one way into the work.

News, writing and a role as cards with drawn covers, then the open roles as a ruled list.

An ink-blue panel with a browser and a rail of projects: the address bar types each client's domain and the site loads line by line.

The studio's claim beside its four services as an accordion, each with what it delivers.

Every project in one ruled grid: a small cover, the client, the project, its disciplines and its year.

A grid of project covers with a filter by discipline; the grid reflows on a spring.

A site for an independent design studio: its name across the page, a reel of client sites, the work, services, clients, news and contact, plus case studies, se…

The open roles as one ruled grid with what everyone gets and how the studio hires, and a job post per role with its facts and an apply link.

A project's story on its own page: the client's site drawn as wide as the page, the challenge beside the facts, what the studio made, three outcomes, the credi…

The email and the studio's address beside a project enquiry form with budget and timeline, checked on submit, that gives way to a sent state.

The journal index as a ruled list with drawn covers, and a post page with its author, a wide cover, the text in one reading column and more posts.

Privacy and imprint as a ruled list of parts, under a note that the text is a sample to replace.

The template's 404: the code beside the studio's mark with its tile missing, a line and the pages people usually want.

The services index as one ruled list, and a page per service with a typical project's facts, what it delivers, how it runs week by week and recent work.

What the studio is, its people with initials avatars and how a project runs, with a line to the open roles.

The headless step engine under Eased onboarding flows: useSteps holds the open step, the direction of the last move, the data, per-step validity, branching, sk…