Trending Society

Animated Button | UI components | Trending Society

More from @motiq, 85 components

All @motiq

Activity Stream component
@motiq
A collaboration/product activity feed that goes beyond a timeline: groups repeated actions, date separators, an unread divider, live arrival insertion, and event-type/actor filtering. Presentation-only — the app supplies events.
Data display2 registry deps · 1 package
Adaptive Safe-Zone Grid component
@motiq
A content-aware structural grid for hero sections: the grid quiets inside one or many safe areas (via an SVG mask) so foreground copy stays readable, while detail collects toward the frame edges. Optional perspective skew, highlighted cells, and a restrained accent shimmer. Deterministic (SSR-safe), light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused. SVG + CSS only.
Backgrounds2 registry deps
Agent Run Timeline component
@motiq
A presentation-only timeline for a multi-step agent / automation run: an ordered rail of steps with tool calls, outputs, errors, retry attempts, optional nested sub-stages, human approval checkpoints, and run-level lifecycle controls (cancel / resume). The app owns the run and every status; the component never executes an agent, generates reasoning, invents confidence, or claims a step succeeded on its own.
AI2 registry deps · 1 package
AI Response Stream component
@motiq
Renders a streaming assistant response supplied by your app — text, fenced code with copy, inline [n] citations to a sources rail, and streaming/stopped/complete/error states with Stop, Retry, and Copy. Presentation only: it never calls a model. Reduced-motion shows text instantly; a polite live region announces completion, not tokens.
AI2 registry deps · 1 package
Animated Accordion component
@motiq
Radix Accordion with Motion height/opacity reveal and a rotating chevron. Single/multiple modes, keyboard, and disabled state preserved. Reduced-motion safe.
Motion and effects1 registry dep · 2 packages
Animated Dialog component
@motiq
Radix Dialog with Motion enter/exit choreography (scale, slide-up, fade). Preserves portal, focus trap, Esc, and overlay. Reduced-motion safe.
Overlays1 registry dep · 2 packages
Animated Grid component
@motiq
A CSS-only animated grid background layer with a slow drift, optional radial fade mask, and a prefers-reduced-motion stop. No canvas, no JS loop. Decorative.
Backgrounds1 registry dep · 2 packages
Animated Icons component
@motiq
Two inline-SVG animated icons — AnimatedArrow (nudge) and AnimatedCopy (copy-to-check swap) — triggered on hover, tap, focus, or mount. Decorative and inherit their label from a parent control. Reduced-motion safe.
Icons1 registry dep · 1 package
Animated List component
@motiq
A semantic list whose items fade/slide in with a stagger and animate out cleanly on removal, with layout-based reordering. Requires stable keys. Reduced-motion safe.
Data display1 registry dep · 1 package
Animated Tabs component
@motiq
Radix Tabs with a Motion layoutId sliding active indicator and cross-faded, direction-aware content. Keyboard and roles preserved. Reduced-motion safe.
Navigation1 registry dep · 2 packages
API Request Inspector component
@motiq
A presentation-only inspection surface for a single HTTP request/response your app already has — method/url/status/duration/timing phases, headers/query/body, error, requestId, environment, retryCount, and an auth summary. Credential headers and fields are redacted by default and can never be revealed from inside the component. Expandable sections, in-payload search, formatted/raw + wrapped/scrolling views, and copy of url/request/response. It never sends anything.
Other2 registry deps · 1 package
Approval Workflow component
@motiq
Display and control an app-owned approval process — sequential or parallel stages, required/optional reviewers, minimum approvals, current-user actions (approve / reject / request changes / comment / cancel / resubmit), decision history, and collapsing completed stages. The app owns authorization; the component surfaces app-provided disabled reasons. Status is icon + label; reduced-motion safe.
Other2 registry deps · 1 package

Animated Button

Install

Live preview

Registry dependencies1

Packages1

Animated Button

Install

Live preview

Registry dependencies1

Packages1

Source

More from @motiq, 85 components

The Signal

Install

Live preview

Registry dependencies1

Packages1

Install

Live preview

Registry dependencies1

Packages1

Source

More from @motiq85, 85 components

More from @motiq, 85 components