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
The contest title card, showing the Barvision wordmark, its V replaced by a pentagon, over curved streaks of cyan, violet and magenta light, above the lines Song Contest and Chongqing 2026.
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.

The Grand Final key visual: the Barvision wordmark, its V a pentagon, over curved streaks of violet, magenta and cyan light, with Song Contest and Chongqing 2026 set beneath it.
Grand Final cover
A poster built from colour blocks: the Barvision wordmark on blue, the theme name on purple, Grand Final in white over an orange and magenta ripple field, and August 22 with a Beijing time of 21:00 on yellow. The same poster system in orange and magenta: Semi-Final and Second Chance in white over a ripple field, the wordmark on purple, and August 8 with a Beijing time of 21:00 on yellow. The same poster system in blue and violet: Allocation Draw in white over a ripple field, the wordmark at the centre, and July 24 with a Beijing time of 21:00 on yellow.
Promo posters

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

Grand Final opening
Grand Final closing

Across the Grand Final, I used motion to guide attention and keep the visual rhythm moving upward and forward.

Earlier-stage results
Grand Final order: Jury Vote
Grand Final order: Tele Vote

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.

Grand Final: Jury Vote

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
Grand Final: 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.

Grand Final: Tele Vote

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.

Grand Final: Final Duel

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.

Grand Final: Final Results
A recap screen headed 20 of 40 juries voted: twenty-six rows of running totals in three columns over night footage of a Chongqing temple roof. A recap screen headed Jury vote results, the same three columns with the completed jury totals, over a night skyline. A recap screen headed 18 of 26 tele votes revealed, the standings reordered by the combined score, over a night view of the city from above.
Recap screens

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

Allocation Draw

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.

The completed allocation over night footage of Chongqing: Semi-Final 1 and Semi-Final 2 side by side, each split into a first half and a second half, with every entrant listed under its own mark.
Semi-Final draw results

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
The seed screen: the five pots above the two empty semi-finals, and a row of six numbers in the centre being collected from the live chat below it.
Seed input screen

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.