PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Avatar Flight

An interactive dual-stack avatar transfer widget with spring physics, trajectory flight arcs, rotation, and grayscale state transitions.

When to use

  • Team member assignments, active vs. inactive user queues, and collaborator reassignment widgets.
  • Interactive flight path physics that visually trace an avatar moving from one group capsule to another.
  • Dual state transitions where avatars toggle between vibrant full color and subtle grayscale.

When not to use

  • Static avatar stacks that simply display profile pictures without state movement.
  • High-density participant lists with dozens of users visible at once.

API Reference

AvatarFlightProps

PropTypeDefaultDescription
rollingbooleanfalseWhether avatars execute a 360-degree barrel roll rotation while in flight.
initialActiveAvatarsAvatarItem[]INITIAL_1Initial list of active (colored) avatars in the left pill.
initialInactiveAvatarsAvatarItem[]INITIAL_2Initial list of inactive (grayscale) avatars in the right pill.
autoPlayIntervalMsnumber5000Interval in milliseconds between automated idle flight transfers.
classNamestring—Additional CSS class names.

AvatarItem

FieldTypeDescription
idstringUnique identifier for each avatar.
namestringDisplay name of the user or member.
imgstringImage source URL for the avatar profile picture.

Motion

  • Flight duration of 0.9s with custom cubic-bezier trajectory easing curve [0.32, 0, 0.2, 1].
  • Container expansion springs with stiffness 220 and damping 30 for seamless pill width resizing.
  • GPU compositor-accelerated opacity crossfade for grayscale filter transitions.