This was the NodeCG-bundle used for the bracket graphic in the Florida Polytechnic University's E-Sports-Event-Committee League of Legends Tournament Livestream. Only the bracket and the countdown graphic were utilized.
-
The bracket video backing was a blank version of this After Effects template.
-
To achieve transparent video (for layering in OBS), .webm video was utilized.
-
This only shows the winners bracket and is single elimination while the bundle bracket logic is based on a double elimination bracket.
-
The text is animted via CSS Transitions. They are timed to specific video frames via JS. The current video frame is found via HTMLMediaElement.currentTime polled every 5 ms. It is mostly reliable but not 100%.
Made with haste (and love) by Jason Chua