Barvision Chongqing 2026

I organized, designed, hosted, and operated a community song contest, creating its visual identity and a browser-based system for the live grand final.

  • HTML
  • CSS
  • JavaScript
  • Python
  • FFmpeg
  • OBS
Timeline
Jun 2026 – Aug 2026
Role
Event organization, visual and motion design, broadcast interaction design, hosting, and live operation
Outcome
Three live broadcasts, including a reproducible allocation draw and a three-hour grand final operated through a custom browser player
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

From slides to a live show

Inspired by Eurovision, Barvision is an annual song contest within the Barboard community. The 2026 edition brought together 40 participants across 38 competing entries. As the previous year’s winner, I organized the Chongqing edition.

Earlier editions relied largely on PowerPoint. For 2026, I wanted more control over how information appeared, how rankings changed, and how each reveal unfolded.

The semifinal remained in PowerPoint because its more complex running order could not be implemented within the available time. I introduced the browser player for the grand final.

Echoing Confluence

The identity began with Chongqing, where the Jialing and Yangtze rivers meet. Under the theme Echoing Confluence, I translated that meeting of currents into overlapping ripples, interference patterns, and refracted light.

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 beneath it and Grand Final in iridescent lettering below.
The Grand Final key visual translates the river-confluence concept into overlapping fields of light.

Eurovision 2024’s posters were the main reference for the promotional layouts. I developed the Chongqing edition’s posters around the Echoing Confluence concept, using a modular grid, ripple imagery, and a coordinated palette across the three broadcasts.

The poster system in blue and violet: Allocation Draw in white over a ripple field, the wordmark at the center, and July 24 with a Beijing time of 21:00 on yellow.
Allocation Draw
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.
Semi-Final
The same poster system in color 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.
Grand Final

For the screen graphics, dark surfaces and luminous color provided a consistent setting for both motion and dense information. I created all of the posters, key visuals, cards, and looping backgrounds.

Opening loop
Closing loop

Making results easy to follow

The grand final needed to move between dense result screens and individual moments of anticipation. I designed the sequence around three tasks: recognizing an entry, following a change in rank, and understanding what the final challenger needed to win. The clips below are edited excerpts from the live final, with selected passages re-recorded to address an audio interruption and presentation pauses.

Recognizing each entry

I gave each entry a compact identifier: a single Chinese character associated with its submitting member, paired with an image of the artist or band. This kept the 26-entry scoreboard compact while providing a consistent visual reference across running-order and scoring screens.

Compact entry identifiers connect the running-order screen with the scoreboard used during the reveal.

Following the points

Jury scores were loaded before the broadcast and revealed live. Each scoring stage first identified the recipients, then updated their totals, and finally reordered the leaderboard. The 12-point award received a longer pause and a distinct visual treatment.

Points are revealed on the right before totals and ranks update on the left.

Making rank changes legible

I used a three-beat reorder to distinguish entries gaining rank from those displaced by them. Entries whose rank stays unchanged remain in place.

The two columns behave as connected stacks. A row passing the column boundary falls out of the left stack and re-enters above the right, preserving the downward direction of movement.

Promoted entries move out, displaced rows fall, and promoted entries return at their new ranks.
Refining the reorder

I refined the movement to remove pauses and competing directions. Entries leave and return from the outer edge of their column, rather than crossing the center gap. Each column begins reinserting entries according to its own timing, overlapping the end of the fall so empty spaces do not linger.

Fall duration increases with travel distance, with a cap on longer moves.

Pacing the final reveal

For the audience scores, I used an upward count and slowed it near the leading totals. I tuned the timing for this edition, giving close results more time to unfold before the leaderboard settled.

The count slows as an entry approaches the leading totals.

For the last reveal, I adapted Eurovision’s head-to-head format to focus on the current leader and the final challenger. The screen shows how many points the challenger needs to win, and expands the scale near the leader so a small difference remains visible.

The final duel shows how many points the challenger needs to take the lead.

After the final duel, I returned to the complete standings, using night footage of Chongqing to reconnect the results with the host city.

The final standings enter column by column over night footage of Chongqing.
Additional broadcast screens
Earlier-stage results presented during the grand final.
The running order before the televote, carrying the jury totals.
A recap screen headed 20 of 40 juries voted: 26 rows of running totals in three columns over night footage of a Chongqing temple roof. A recap screen headed Jury vote results: the completed jury totals for all 26 entries in three columns, over a night skyline of Chongqing. 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 show the standings at checkpoints during the jury and audience-score reveals.

Hosting and operating the show

I was both the on-air host and the sole operator, so the player had to support the pace of presenting. I organized the grand final into 26 cues, with keyboard controls for advancing, stepping back, and moving between segments.

A compact HUD showed the current cue and step, playback status, preload progress, and volume. Some routine transitions advanced automatically, while recorded jury announcements retained manual control so I could follow the speaker’s pace.

As each segment was completed, I rehearsed its playback and checked the animation transitions into and out of adjacent segments.

Playback safeguards

The player rebuilds the scoring state from the timeline when moving backward or jumping to another step. This supports rehearsal and navigation without carrying forward an accidentally accumulated score.

A media watchdog attempts to restart interrupted playback. A separate performance mode pauses decorative video layers to reduce load while retaining the main scoring display.

Making the draw reproducible

I introduced a live allocation draw so members could see how entries were assigned to the semifinals and to the first or second half of the running order.

Following Eurovision’s pot-based format, the draw used a seed assembled from the date, time, and numbers contributed through live chat. With the same seed, ordered pot lists, and algorithm, the allocation can be reproduced.

The allocation draw reveals each assignment within the event’s visual system.

The result export records the seed and its SHA-256 hash alongside the allocation. This provides a record for checking the result against the draw procedure.

The seed screen over the Chongqing skyline: the five pots across the top, the two empty semifinals below them, seed input fields between the semifinals, and the live chat underneath. 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.
The seed input and completed allocation provide the inputs and result of the draw.

Lessons for the next edition

One background-music interruption showed that audio continuity needed more explicit checks alongside the visual transitions rehearsed during development.

For future editions, I want to retain the core playback logic while refreshing the visual package and contest data. The next step is to separate the remaining edition-specific layouts, timing, and cue behavior, then test that approach in another production.

After the season, I published the full results on Barboard, connecting the live event with 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

Event organization, hosting, and live operation

  • Zhuoqi Liu

Visual identity, posters, cards, and motion design

  • Zhuoqi Liu

Broadcast interaction design and implementation review

  • Zhuoqi Liu
Full credits
Special thanks
  • Barboard members
Note

I led the design decisions and implementation review. Claude Code handled most of the code implementation.