Broadcast graphics in the EBU's open OGraf format, ready for any OGraf renderer and made to be changed: commented code, a list of fields, and a guide to where the data, the look and the motion live.
A minimal name and title strap.
Good first read: two data fields, one entrance, the cleanest possible graphic.mjs.
A persistent glass corner ident that stays up through the whole show.
Teaches: a long-running graphic. Play once, leave it on air, stop at the end.
A scrolling news ticker with a kicker tab and a continuous crawl.
Teaches: content-driven motion, where the crawl measures the operator's text at play time.
A compact scorebug for two teams, built for live updates.
Teaches: updateAction during playout, so data changes without replaying the graphic.
A stat card for one big number.
Teaches: typography-led design in the :root style contract, so you restyle without touching layout.
A full-screen starting-soon or break screen.
Teaches: a full-frame graphic, with steps as states and an exit that clears to the programme.
<name>.ograf.json: the OGraf v1 manifest (the entry point)graphic.mjs: the Graphic Web Component, commented for readingGUIDE.md: where the fields, the look and the motion liveFIELDS.md: the data contract, every field, type and defaultlib/gsap.min.js + fonts/*.woff2: self-contained, no networkOGraf is the EBU's open standard for HTML broadcast graphics, one format any OGraf renderer can load. Try a package in the community OGraf DevTool.
Open the studio to change one, or read where NoaCG is taking the standard.
Made with NoaCG Studio, free and open source broadcast graphics: create, control, and put them on air from your browser. The starters are free to use and modify in your productions.