Alibaba’s 618 Interactive: Front‑End Animation, Shake‑to‑Shake & On‑Device AI

Preface

Another 618 shopping festival arrived, and the Taobao interactive team reused the "Super Star Show Cat" IP from last year’s Double‑11, launching a new star‑chef cultivation world. While retaining the main growth gameplay, the event replaced intense PK battles with a relaxed boss‑hunting mode and introduced a near‑field social mechanism that lets users enjoy cat‑raising fun together and easily win promotional red‑packet rewards.

Technology Behind the Animations

In e‑commerce, interactive games drive user growth, and animations are a key expression of gamification. This year’s 618 interactive added more complex animations, increasing main character count from one to three and adding entry effects for earning cat coins, self‑production, and fertilizer collection.

Animation Production

The animations fall into two categories: the main Star Show Cat character and entry guide effects.

Before the project started, the team discussed technical and artistic tool selections. Options included frame‑by‑frame animation, skeletal animation, and Lottie animation exported from Adobe After Effects.

Because skeletal animation suits a single main character, the team chose 2D skeletal animation with Spine, leveraging mesh deformation and skinning to achieve a "3D‑axis" visual effect.

For the numerous entry guide effects that require frequent adjustments, designers preferred Lottie because they are familiar with After Effects; Lottie also consumes less resources than APNG or GIF for longer animations.

Stability Guarantee

Interactive scenes contain many animations and videos, which can cause high memory usage and client crashes, especially on low‑performance devices. To balance visual richness with performance, the team implemented an experience grading system that filters content based on device scores (system version, app version, device model, memory, GPU, etc.). Animations are categorized into high, medium, and low levels, showing full effects on high‑score devices and reduced effects on lower‑score devices, achieving 21 days of zero failures during the 618 event.

Face‑to‑Face Shake‑to‑Shake Partnership Gameplay

The 618 event added a partnership mode where users can share tasks via a shake‑to‑shake interaction.

The matching logic splits into two sub‑features: the shake detection (implemented via a hybrid API listening to device motion) and the "face‑to‑face" proximity matching. Three matching schemes were considered: coarse location‑time matching, Bluetooth broadcasting, and NFC broadcasting. Due to current API limitations, the team used the first scheme, calculating distance between users with GeoHash. By comparing the prefix length of GeoHash strings, the system determines whether two users are within a specified distance and time window.

Once two users are matched, both see a countdown confirmation page. Only if both agree before the timer expires does the partnership succeed; otherwise it fails.

The timeout logic uses setTimeout or setInterval, but browsers may throttle these timers when the tab is inactive, so the implementation also listens for page visibility changes to handle background scenarios correctly.

Exploring On‑Device Intelligence

With AI permeating many domains, the front‑end team explored on‑device intelligent guidance. User actions on interactive pages are richer than simple clicks, providing real‑time behavior data that can be used for product optimization, user intent prediction, and personalized experiences.

The team built an on‑device intelligence pipeline where a decentralized client‑side engine executes rule matching and hooks, while a central strategy center distributes policies and collects behavior data. This setup enables dynamic guidance, real‑time behavior collection, and AI‑driven analysis, improving the effectiveness of interactive features.

Future work aims to systematize this approach to cover onboarding, side quests, and main storyline logic, ultimately achieving a "one‑size‑fits‑all" personalization for interactive experiences.