Client: WunderBeast (for State Farm) Event: NBA All-Star Weekend 2026, Celebrity Three Point Contest Timeline: 3 weeks Deliverable: Single interactive Rive animation file Surfaces: LED court floor + LED wall behind the hoop

WunderBeast needed interactive graphics for the State Farm Celebrity Three Point Contest at NBA All-Star Weekend 2026. Two physical LED surfaces, the court floor and the wall behind the hoop, both driven from a single Rive file, operated live by their production team during the event.

One file, two surfaces, real-time control from their backend. No room for lag or failure.

A single Rive file with everything the production team needed to run the contest graphics live.

The court floor showed animated court markings and seven shooting position indicators that light up and go dark on demand. A difficulty system with three tiers (Rookie, Starter, All-Star) changes the court layout with animated transitions between them.

The wall behind the hoop handled the rest: player introductions for all nine contestants, a live game timer, running score, a 10-row animated leaderboard, game-over sequences with staggered score/time/rank reveals, and a game intro with synced sound effects.

Celebrity mode added player-vs-player matchups, runtime-loaded contestant photos, and floor/wall name displays sized individually so every name fits to the surface cleanly, whether it's a short name or long.

The production team controlled everything through a ViewModel API: fire a trigger to start a sequence, set a string to update a name, write a number to change the score. I organized all the controls into a hierarchy that mirrored the visual structure, so the leaderboard controls lived inside a leaderboard container, court indicators had their own group, and so on.

They needed to know exactly where the animation was at any given moment. When a transition started, when it finished, when the system hit an idle state, when the leaderboard was done populating. Their backend had to stay in sync to cue the next action at the right time. But events fired inside nested components aren't visible to the main Rive instance. So I built a chain of listeners that catch every state change inside the nested pieces and rebroadcast them up to the top level. The production backend subscribes to one event stream and gets full visibility into what's happening everywhere in the file.

Two things, both in the last few days.

The client's event backend wasn't compatible with the WebGL2 runtime. I had to switch to Canvas, which meant replacing the vector glow effects with pre-rendered PNG textures. Repositioned everything, re-tested, moved on.

The bigger problem was the scripting. I'd built the celebrity animations with scripts that dynamically sized the text based on name length. The contestant names weren't confirmed yet, so it had to be flexible. But the scripts kept crashing. Random, no clear pattern, and I couldn't pin it down in time. With days left, I pulled out all the scripting and rebuilt the celebrity system manually. By then the final contestant list had come in (Druski, Caleb Williams, PlaqueBoyMax, Nigel Sylvester, Richard Jefferson, Jared McCain, Jake From State Farm, Lethal Shooter, Drew Hanlen), so I could set every name, font size, and layout by hand. More work, but it ran clean.

The event went off without a hitch. No crashes, no glitches, no surprises.