Barvision Chongqing 2026
A live song contest I organized, art-directed, hosted, and operated, with a custom broadcast system for its three-hour grand final.
- HTML
- CSS
- JavaScript
- Python
- FFmpeg
- OBS
- Timeline
- Jun 2026 – Aug 2026
- Role
- Organizer, Art Director, Host & Broadcast Systems Designer
- Outcome
- Three live broadcasts, including a verifiable allocation draw and a three-hour grand final run from a purpose-built browser system

Section
Reimagining the Broadcast
Inspired by Eurovision, Barvision is an annual song contest within Barboard. The 2026 edition brought together 40 participants across 38 competing entries. As the previous year’s winner, I organized, art-directed, hosted, and operated the Chongqing edition.
Earlier editions relied largely on PowerPoint, which limited motion and live score presentation. For 2026, I wanted the Bilibili broadcasts to feel closer to a produced live show than a sequence of slides.
I used Eurovision 2024 as a production reference and built the Grand Final around an HTML/CSS-based broadcast system. That gave me more control over animation, ranking changes, and reveal pacing.
Echoing Confluence
The 2026 identity began with its host city, Chongqing. I used the confluence of the Jialing and Yangtze rivers as a visual metaphor for sound. Under the theme Echoing Confluence, overlapping ripples and interference patterns became the event’s core visual language. The promo posters carried that language into a modular grid of color blocks.
I built the system around a liquid-neon material defined by dark water-like surfaces, refracted light, and glow. Rather than giving every stage a separate look, I kept the visual language consistent and shifted its color across the competition.
The semi-finals shifted between magenta and cyan-green, and the Grand Final used blue-violet as its base. The same system extended into the broadcast graphics. Each stage could feel distinct without breaking the overall identity.
On Air
Across the Grand Final, I used motion to guide attention and keep the visual rhythm moving upward and forward.
The earlier-stage results and the running-order screens carried dense information, so I staged how each layer entered the frame instead of showing everything at once. I gave each member a compact nameplate: a single Chinese character paired with a photo of the artist or band behind their entry. This gave the 26-row scoreboard a consistent visual anchor without spending space on full usernames.
During the jury vote, scores arrived live and the leaderboard reordered as each juror reported. I gave the 12-point award its own visual effect so each juror’s top score landed as a distinct moment.
How the leaderboard reorders
When a jury score changed the ranking, I did not let the rows simply jump to their new positions. I designed the reorder as a three-beat “gravity stack”: promoted rows are pulled out, displaced rows fall into the gaps, and the promoted rows slide back into their new positions. The board settles like a stack of cards rather than re-sorting like a table.
Falls are timed by distance. A row dropping six places takes longer than one dropping two, so the rows do not land together.
A row leaving the bottom of the left column never crosses the center gap. It keeps falling out of the left stack, re-enters above the right one, and drops into place, so the two columns read as one flow rather than two tables.
The columns do not wait for each other. Each side starts reinserting once enough of its own collapse is done, so the beats overlap and neither side sits idle.
A row that gains points without changing rank stays where it is. Moving it away only to return it to the same position would add motion without adding information.
Televote scores counted upward instead of appearing at once. The count slowed noticeably as a score approached or overtook the current leader, so the timing itself built the suspense.
For the final reveal, I adapted the head-to-head format used at Eurovision 2026. Reducing the screen to the current leader and the final challenger made the ending easier to follow and more dramatic.
At four recap points, I replaced the abstract broadcast background with looping night footage from recognizable parts of Chongqing. The city stayed present without competing with the results.
Behind the Broadcast
The show ran from a browser-based player. I structured its three hours as 26 cues and 242 operator steps, and those steps controlled video playback, graphics, scoreboards, music, and transitions.
Because I was both the on-air host and the sole operator, the broadcast window also had to serve as my control interface. A compact HUD showed the current cue and step, playback status, preload progress, and volume, and I could hide it from the OBS capture. I kept the core workflow keyboard-driven so I could move forward or back, jump between cues, and rehearse specific moments without leaving the player.
Making the player safe to run live
Rebuildable scoring state. Rather than carry a running scoreboard that could drift, the player rebuilt the standings for any step from the timeline. Stepping back, jumping ahead, and moving between cues therefore all arrived at the right scoreboard.
Media watchdog. Playback can stall in a long browser session, so a watchdog monitored it and recovered on its own rather than leaving it for me to catch while hosting.
One-key safe mode. If performance dropped, one keyboard shortcut disabled the decorative video layers. It was a fallback for a bad moment, not a second visual mode.
Preload and fallback. Assets were preloaded before the show, and a missing file drew a labeled fallback rather than a blank frame.
Designing for Trust
Earlier editions had no live allocation draw, so I added one for 2026. Barvision is a community event: members bring songs they care about, and the way those songs are assigned can shape how fair the competition feels. I wanted members to see how those decisions were made, especially when an assignment or a later result was not what someone had hoped for.
Following Eurovision’s allocation-draw format, I grouped entries into pots, then assigned them to Semi-Final 1 or 2 and to the first or second half of the running order. I built the draw around a public seed, so the same input always reproduced the same allocation and members could verify the published result afterward. I also treated it as part of the broadcast rather than a backstage utility: the seed screen carried Chongqing’s skyline into the interface, and the completed allocation became a full result board.
How the draw could be checked
One public seed. The draw ran on a seeded generator rather than on the browser’s own randomness, so the seed string was the whole input, and each stage of the allocation was a separate step from it.
Published with the result. When the draw completed, the seed and its hash were written out to the clipboard, to local storage, and as a downloadable text file. Anyone could recompute the draw from them and compare it with what they had watched.
Building for Future Editions
Barvision is an annual event, so the 2026 production had to be a foundation rather than a one-off. After the show I separated what belonged to Chongqing from what could carry forward: the allocation and scoring logic, the cue structure, and the reveal and animation patterns.
Earlier editions relied on manually arranged PowerPoint layers, duplicated visual states, and position values adjusted screen by screen. Moving the production into HTML, CSS, and JavaScript turned that repeated setup into reusable code and data. A future edition replaces the visual package and the competition data rather than rebuilding the show.
After the 2026 season I published the full results to Barboard’s permanent archive on barboard.space, so the live event joins the community’s longer history.
Credits
- Skills
- Art direction
- Broadcast design
- Motion design
- Broadcast systems design
- Live production
- Tools
- HTML / CSS
- JavaScript
- Figma
- FFmpeg
- OBS
- Roles
Organization, art direction and hosting
- Zhuoqi Liu
Broadcast design, development and live production
- Zhuoqi Liu
Full credits
- Special thanks
- Barboard members
- Note
Selected coding tasks were supported by Claude Code.