Generative AI motion

We bring eBay's generative AI framework to life with a distinctive motion language. Each interaction seamlessly blends playfulness with assistance, creating an engaging and dynamic user experience.

Considerations

Personal

AI motion is tailored to context. Together it forms a seamless experience that speaks directly to the individual.

Playful

AI motion moves with a snappy smoothness that evokes a human element while maintaining usability.

Helpful

AI motion is here to help the user journey through clear indication, expectation management, and persistent presence.

Motion

Sparkle badge

Our spectrum icon can be utilized to indicate the magic of AI powered content. When shown in context, a Scale up animation occurs as soon as each block of AI powered content appears. The sparkle badge persists after this one-time animation.

A motion timeline graphic for scale up 400ms (.3, 0, 0, 1).

Loading

When AI generated content is loading, we apply our gradient framework to the familiar skeleton loader as shown.

A motion timeline graphic for loop 833ms (linear).

Write-on

AI generated text writes-on word by word in order to convey a familiar type of communication. Utilize the AI write-on effect whenever personalized messages are created.

Assistant modules

Assistant modules utilize a combination of movements choreographed together. The sequencing blends together to create a seamless transition with a personalized touch.

Two motion timeline graphics. The first is for slide up 550ms (.3, 0, 0, 1). The second is for gradient wipe 1250ms (linear).

In-line agent panel

As the panel expands directionally, each component reveals in sequence. First, the AI badging, then a personalized message, AI prompts, and finally the text-button.

Two motion timeline graphics. The first is for in-line panel expand 167ms (.32, .47, .60, 1.00). The second is for agent content reveal choreography 1550ms (linear).

AI prompts

The gradient outline draws on with fluid easing while the text fades linearly. Prompts shown together are offset by 200 milliseconds.

Two motion timeline graphics. The first is for prompt outline reveal 600ms (.3, 0, 0, 1). The second is for prompt text string 600ms (linear).

Agent introduction

Upon entering the conversation panel for the first time, the AI sparkle badge is elevated for a brief moment while sliding up with the agent panel.

Typing indicator

Just before AI produces a chat bubble, three ellipses appear bouncing in place to convey a human-like input. Each ellipse uses the following motion specifications to move up and invert to move down. Each ellipse is offset by 133 milliseconds.

Two motion timeline graphics. The first is for typing ellipse position 283ms (.88, .14, .12, .86). The second is for typing ellipse opacity 100%-75% 283ms (linear).

Incoming chat bubble

When an incoming message is shown, the chat bubble scales to fit the size of the associated message while it writes on.

Two motion timeline graphics. The first is for bubble scale up 700ms (.3, 0, 0, 1). The second is for message write-on ~800 words per minute.

User chat bubble

When users send messages, their chat bubble slides into place just below the last shown message.

A motion timeline graphic for slide up 283ms (.3, 0, 0, 1).

Agent panel minimize

When minimizing the agent panel, it slides down into place with fluid easing and a hint of gradient color.

Two motion timeline graphics. The first is for panel slide down 650ms (.3, 0, 0, 1). The second is for gradient wipe 2450ms (linear).

Resources

Motion tokens

Learn about our motion tokens.

Brand motion toolkit

Access our motion toolkit to create assets across platforms and software.

Change log

Date	Notes
Jun, 2024	Updated to eBay Evo Added resource section