PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Destination Queue

An interactive dual-deck dispatch queue with layout shared spring animations that transfers cards between a queued card carousel and an active item feed.

When to use

  • Playlist builders, travel itinerary planners, and task queue managers.
  • Allowing users to stage items in an incoming deck and dispatch them directly into a live stack.
  • Seamless shared layout morph transitions between two distinct lists without jarring DOM replacement.

When not to use

  • Static tables where items only require binary checkbox selection.
  • Single-list drag-and-drop sortable widgets.

API Reference

DestinationQueueProps

PropTypeDefaultDescription
itemsDestinationQueueItem[]DEFAULT_ITEMSThe pool of queue and feed destination items.
initialFeedCountnumber3Number of items placed in the active feed upon mount.
maxVisibleFeednumber3Maximum items displayed in the scroll/stack viewport before clipping.
onAdd(item: DestinationQueueItem) => void—Callback fired when an item is added from the queue to the feed.
onRemove(item: DestinationQueueItem) => void—Callback fired when an item is removed from the feed back to the queue.
classNamestring—Additional CSS class names.

DestinationQueueItem

FieldTypeDescription
idstringUnique identifier for each queue item.
titlestringPrimary headline or destination location name.
subtitlestringSubtitle description or highlight tags.
srcstringThumbnail image URL source.

Motion

  • Smooth layoutId="stack-item-{id}" shared layout physics morphing between bottom deck and top feed.
  • Perspective stacking depth with scale reduction (1 - depth * 0.05) and vertical stagger offset (y: depth * 6px).
  • Inverted clipping boundary preventing overflow artifacting during card insertion.