Skip to content
Pinky UI

Search Results Morph

Use for quiet add/remove/reorder transitions while query results change.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

  • Research interaction
  • Test keyboard path

Purpose

Use for quiet add/remove/reorder transitions while query results change.

Use when

Stable result identity helps the user understand what changed in a filtered collection.

Avoid

Flashy stagger on every keystroke, unstable index keys, or pretending loading is complete.

Accessibility

Expose loading and result counts through a restrained live region and retain readable empty content.

Keyboard and touch

Result actions must be focusable list items or buttons independent of animated position.

Reduced motion and performance

Animate only changed rows and use stable IDs; do not run a pointer or scroll render loop.

Composition and anti-patterns

Pair with Morph Search or a normal input; use a real data-grid for analysis-heavy tables.

Source: packages/skills/search/search-results-morph.md