⚠️ Mobile is not supported yet.

Filter Result Transition

component

A transition layer for filtered/searched collections your app drives: cards enter, leave, and reorder with layout continuity, the result count morphs, and empty/loading/error states cross-fade. If the focused item is filtered out, onFocusFallback fires so focus never drops to the page root. Capped entrance stagger; results are never delayed for animation; reduced motion is an instant swap. Not a data table or a search library.

Provided by motiq

Open in

motion

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://motiq.dev/r/filter-result-transition.json"

Files

Styles

Light Mode

--color-accent:

#315fea

--color-accent-fg:

#ffffff

--color-accent-hover:

#244fd1

--color-accent-text:

#244fd1

--color-bg:

#f7f9fc

--color-bg-elevated:

#f0f4f9

--color-bg-secondary:

#f0f4f9

--color-border:

#dce4ef

--color-border-strong:

#c5d1e1

--color-code-bg:

--color-code-fg:

#2a3444

--color-error:

#d92d4a

--color-error-foreground:

#ffffff

--color-fg-secondary:

#344054

--color-focus:

#315fea

--color-info:

#087dbd

--color-info-foreground:

#ffffff

--color-muted:

#667085

--color-neutral:

#475467

--color-neutral-foreground:

#ffffff

--color-secondary-accent:

#009fb3

--color-signature:

#e9564a

--color-success:

#128a55

--color-success-foreground:

#ffffff

--color-surface:

#ffffff

--color-surface-2:

#f8fafd

--color-warning:

#b86e00

--color-warning-foreground:

#ffffff

Dark Mode

--color-accent:

#4f7cff

--color-accent-fg:

#080c14

--color-accent-hover:

#6f91ff

--color-accent-text:

#7f9fff

--color-bg:

#080c14

--color-bg-elevated:

#0d1420

--color-bg-secondary:

#0d1420

--color-border:

#263449

--color-border-strong:

#354863

--color-code-bg:

#0d1420

--color-code-fg:

#cbd5e1

--color-error:

#ff5c70

--color-error-foreground:

#2a0308

--color-fg:

#f8fafc

--color-fg-secondary:

#cbd5e1

--color-focus:

#4f7cff

--color-info:

#38bdf8

--color-info-foreground:

#04121f

--color-muted:

#9caabd

--color-neutral:

#b2bccd

--color-neutral-foreground:

#111827

--color-secondary-accent:

#22c7d9

--color-signature:

#ff6b5e

--color-success:

#32d583

--color-success-foreground:

#04150c

--color-surface:

#111827

--color-surface-2:

#192337

--color-warning:

#f6b94a

--color-warning-foreground:

#2a1a00

Theme

No variables found.

Filter Result Transition

Installation

Files

components

Styles