A collection of beautifully crafted motion components built with React, Framer Motion, and TailwindCSS. Designed to elevate microinteractions, each component focuses on smooth animations, subtle feedback, and delightful UX. Perfect for designers and developers who want to add refined motion to their interfaces — copy, paste, and make your UI come alive.
Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away.
Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading.
Inline citation pill that opens an origin-aware source card, anchored to the pill it came from.
Context window meter whose ring fills and shifts hue at the warning threshold, never changing size.
Thread scroll container that follows the bottom only while the reader is already there, offering a jump-to-latest pill when it stops.
Shared AI state contract, per-state motion presets and microphone amplitude hooks for SmoothUI AI components.
Proposed code or data edit where added lines wipe in from the left and rejected lines collapse to nothing.
Deprecated alias for morph-surface. Kept for one release so existing installs keep resolving.
Family of AI waiting indicators — dots, sweep bar and pixel grid — sharing one cycle length, with an optional elapsed counter.
Chat message bubble whose action row slides out of the bubble's own edge, revealed on hover and on focus.
Cartoon character orb whose expression carries the AI state — cursor-following gaze, natural blinks, thinking saccades, happy arcs and spiral eyes.
AI prompt composer with autogrowing textarea, attachment chips and a send-to-stop path morph.
Collapsible AI reasoning trace that shimmers only while the model works, reports how long it took and gets out of the way.
Streaming assistant text where words animate in as they arrive, with a caret that rides the last glyph and inline citation pills.
Favicon stack that fans out on hover and expands into a source list, with each favicon morphing into its row.
Prompt suggestion chips that radiate in from the centre of the row rather than sweeping left to right.
Live agent plan with nested steps, a drawn checkmark on completion and a travelling underline on whatever is running.
Collapsible tool invocation whose status badge is one ring that evolves — breathing, spinning, then drawing a check or a cross.
Persistent WebGL shader transition wrapper that swaps content behind a cinematic aperture bloom.
Full ChatGPT-style chat surface — sidebar, transcript and composer — wired to a simulated agent so every AI component is on screen.
An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations.
Persistent WebGL shader transition wrapper that swaps content under a soft chromatic blur wash.
CLI to install SmoothUI components - beautifully designed React components with smooth animations