How do we use micro-interactions to make data-rich interfaces more lively?

CoinGecko · 2025

Motion

UI Design

Prototyping

Time

Type

Price USD

WETH

Value

From

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🦐$2,032.77

✦f6a2e

NOV 2111:33:22 AM

SELL

$2,017.23

0.9974

🐬$2,032.77

f6a2e

NOV 2111:33:22 AM

SELL

$2,017.23

0.9974

🐠$2,032.77

✦f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🦐$2,032.77

f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🐬$2,032.77

✦f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🐋$2,032.77

f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🦐$2,032.77

✦f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🐬$2,032.77

✦f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🐠$2,032.77

f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🦐$2,032.77

✦f6a2e

About

In 2025, we realised that traders can’t watch everything, but they can notice quick movement. Thus, I led a design initiative to introduce purposeful micro-interactions across GeckoTerminal. Rather than adding animation for decoration, we used motion to communicate state changes, direct attention and make frequently repeated actions feel more responsive.

The work was applied across features such as the Swap Table, navigation icons, Watchlist interactions, Price Alerts and token activity signals. It later became a shared interaction language across both GeckoTerminal and CoinGecko.

Team

Yuan Jie · Motion Lead, Product Designer

Ivy Ho · Product Designer

Tiong Woon · Product Lead

Rachel · Software Engineer

Sammie · Mobile Engineer

Outcomes

Expanded micro-interactions from isolated experiments into a team-wide design practice.

Influence

Helped 80% of tested users describe the product as more lively and responsive.

METRIC

Established reusable motion patterns across App and Web.

DESIGN SYSTEM

🕒

We learned that

Crypto terminals update constantly, but often feel static.

GeckoTerminal contains live prices, swaps, alerts, watchlists and rapidly changing token activity. Although the underlying data was always moving (every second!), much of the interface communicated those changes through static numbers and slow state changes.

This created a disconnect: the market felt alive, but the product did not.

For GeckoTerminal, this challenge was not simply to make the interface more animated, but to help traders notice important changes without overwhelming them.

Thus, I embarked on a 6 months journey to kickstart the adoption of Micro-Interactions in GeckoTerminal, and then in the wider design team.

Placeholder image

Micro-Interactions can accentuate information changes. Here are 6 ways we used them.

Motion should accentuate changes in information, helping traders notice what happened, understand system feedback, and direct their attention without adding more clutter.

We applied this principle across 6 recurring moments in the GeckoTerminal experience.

Time

Type

Price USD

WETH

Value

From

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🦐$2,032.77

✦f6a2e

NOV 2111:33:22 AM

SELL

$2,017.23

0.9974

🐬$2,032.77

f6a2e

NOV 2111:33:22 AM

SELL

$2,017.23

0.9974

🐠$2,032.77

✦f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🦐$2,032.77

f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🐬$2,032.77

✦f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🐋$2,032.77

f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🦐$2,032.77

✦f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🐬$2,032.77

✦f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🐠$2,032.77

f6a2e

NOV 2111:33:24 AM

BUY

$0.0₈2234

1.0077

🦐$2,032.77

✦f6a2e

Help traders notice fast data streams by amplifying them.

TRANSACTION TABLE

Frequently used navigation should feel reactive.

SIDEBAR

Keep Watchlist Safe

We will automatically sync watchlisted tokens to your email.

Rich Token Information

Enriched token information such as banners, images and descriptions.

Holders Insights

Peek deep into each token's holders, and analyse what they are up to.

Help new traders learn faster with animated onboarding.

ONBOARDING

Make every conversation feel like talking to our mascot.

UNHAPPY FLOWS

Make common popovers feel smoother.

POPOVERS AND TOOLTIPS

Clearly communicate that information is still loading.

LOADING STATES

DESIGN SYSTEM

Thereafter, Motion Design became part of the design system.

We worked with engineers to bring these patterns into Neptune, our design system. Each transition, timing and animation were stored in a central library.

Reusable states and implementation guidance reduced the need to redesign animations for other designers to recreate those animation. This also helped our App and Web's animation become more consistent.

.swap-row-enter {
  animation:
    slide-in 0.5s cubic-bezier(0.2, 0, 0, 1),
    transaction-fade 2s ease-out;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

DESIGN SYSTEM

Each guideline ensures accessibility.

For example, when there are large amount of streaming information, too much motion can cause discomfort.

In a prototype of the Transaction Table, new transactions originally entered with a 1s slide and a 2s colour fade. Because updates arrived continuously, the prolonged movement became visually intense and could cause discomfort.

We then worked to shorten the slide to 0.5 seconds and adjust the easing curve, allowing each transaction to register at a glance before quickly settling into the table.

When there are large amount of streaming information, too much translation motion can cause discomfort.

TIMING

Hover, Tapped button animations should react in 0.2s.

TIMING

Buy and Sell colours should not overlap, to keep contrast with text.

COLOUR

IMPLEMENTATION

Rive-based implementation require more defined handoff practices to be cross-compatible in React and React Native.

"CSS or Rive?" was a question that got tossed a lot.

We learned quite a lot to ponder about after implementing all of the animations above.

Rive provides designers with greater control over keyframes, whereas regular css-enabled transitions provided engineers having more control over the animation. Having control over keyframes does makes it easier to maintain precise easing curves and to adhere to the principles of animation.

In Rive, timeline and animation names must be consistent and case-sensitive, especially when using React/React Native Rive Library. (We can leave it as "Default")

React Native libraries can't easily enumerate animations so it's safer to split animations into separate files. This is especially important for Light/Dark mode files where colours are different.

Art board padding and background space can cause unexpected layout issues, so export them with minimal empty padding.

State machines and timelines need to be explicitly documented for engineers on Figma files or Linear. Maintaining a shared Figma mockup was still critical to avoid confusion.

GeckoTerminal onboarding screen implementation

GeckoTerminal category interaction implementation

Reflection

Micro-interactions should be implemented thoughtfully, as seemingly simple animations can introduce significant technical complexity.

A colour fade on the Swap Table is largely CSS-driven and requires minimal logic changes. Number transitions, however, become more complex when prices include subscripts, values switch between Price and Market Cap, compact notation changes through localisation, or virtualised table rows update out of order.

In some cases, we simplified the behaviour. For example, enabling transitions only when Market Cap was the primary metric, to preserve the UX intent without introducing disproportionate engineering complexity.

Ultimately, this taught us to weigh an animation’s visual and usability impact against the effort required to build and maintain it.