AT&T MLS Kick Results and Leaderboard

Wunder Beast / AT&T / 2026

A kick, measured. A board that runs itself.

Motion graphics for an AT&T soccer activation tied to MLS: an animated speed-and-distance results screen and a self-driving Rive leaderboard.

My role: Motion design, Rive animation and runtime logic

Delivered: A kick-results overlay animated in After Effects (video plus source files) and a Rive leaderboard with an embedded Luau controller, a standalone HTML preview and developer documentation

Tools: After Effects, Rive (ViewModel lists, Luau scripting), Adobe Illustrator

The brief

Wunder Beast's design team had the screens in Figma and Illustrator. They needed them animated: a results screen that reports the speed and distance of a fan's kick, and a leaderboard that can show the top ten or jump to any player's place.

The build

I animated the results screen in After Effects from the supplied UI files, then refined it over several rounds: spacing between the speed and distance readouts, a slower ease-out, a pulse on the final number, imperial units first, and later a distance arc built with trim paths so it scales with the distance. The leaderboard is a Rive file whose rank ordering, row numbering, selection highlight, staggered intro and scrolling all run inside the file in a Luau controller. The host page only writes ViewModel properties: player count, player data, and the rank to feature.

The constraint

The board had to work for any number of players, not a fixed table. Rows are addressed by rank, the board grows or shrinks live when the player count changes, and the scroll duration is derived from the distance travelled, so featuring rank 7 or rank 150 looks deliberate. The reference demo runs 200 players.

The delivered experience

The leaderboard was delivered as a .riv with an interactive HTML preview and documentation, then adjusted after client feedback. The results screen was delivered as a rendered video and After Effects source.