Match Night

A live 3D podium for a netball club: five players under the lights, partners on an LED band and the mascot on the sofa, in about 2 MB.

What was delivered

Your stage: squad and crest
Your film on the back wall
Your sponsors on the stage
Your mascot, with its own moment
Each player up close, with her sponsor
Move from player to player
Player details in your design
The same stage on a phone

Match Night puts a netball squad on a lit podium on a night court. Five players stand on the dais, giant banners of the squad hang on the back wall, the partners run around the dais on an LED band and the club mascot lounges on a sofa. The club, players and mascot shown here are fictional.

Hover a player and a neon line traces her outline. Click, and the camera brings her forward with her name and her sponsor. The scene runs live in the browser and loads in about 2 MB.

Step into Match Night

Netball players on a lit 3D podium carrying the partners’ logos

The first template of

The scene runs live in your browser. Hover a player, click to bring her forward, and find The mascot on the sofa.

How it came together

A scene sponsors can point to

Every sponsor has a place inside the scene. The main partners light up the LED band around the dais, and each player’s own partner appears beside her when she steps forward.
Made for the phone in the stands
On a phone the camera frames the three central players, the title keeps its width and a tapped player comes forward large enough to read her name and number.
- A key light follows the pointer across the court.
- Camera flashes, dust in the lights and a reflective floor carry the match night mood.
- Reduced motion keeps a still frame with every word readable.
Fast to load, hard to lift

The first frame needs about 460 KB. Everything else streams in behind a loader that shows real progress, so a slow connection still sees the scene start.

The scene code is obfuscated and locked to the hosts allowed to serve it, and its files reach only an approved embed. The club gets one snippet for its site, and the scene itself stays on my servers.

The outcome

The full scene loads in about 2 MB, down from 10.7 MB in the first build, and passes a 24-check gate on desktop and phone before each release.

Match Night became the first template of Unveil3D, my 3D showcase app for sports clubs.

Continue with Walkerville Netball Club

From five players in 2010 to 47 teams and 500+ players and families. A Webflow build on 13 CMS collections, four templates and a 30-token system, fronted by Clawdia the mascot.

Read the case