MTV On-Screen Graphics Recreation

A pixel-accurate recreation of the on-screen graphics used by MTV music channels, built for archival and preservation purposes.

⚠️ Fan-made archival project - not affiliated with MTV or Paramount.

This project is an independent fan recreation and is not affiliated with, endorsed by, sponsored by, or otherwise associated with MTV, Paramount, or any of their subsidiaries or partners.

The MTV name, logos, channel identities, and other related trademarks and visual assets are the property of their respective owners. All rights to those assets remain with their respective rights holders. This project does not claim ownership of any MTV branding or logos.

The source code of this project is released under the MIT License. The MIT License applies to the original code in this repository and does not grant any rights to MTV trademarks, logos, or other third-party assets included in the project.

About

MTV has shut down or discontinued a number of its music channels and their original on-screen presentation has become increasingly difficult to find.

This project attempts to preserve and recreate those graphics as accurately as possible, including their animations, positioning, sizing, typography, colors, and timing.

The goal is archival and preservation, rather than creating a new MTV-branded product.

Currently recreated:

• MTV Club
• MTV Hits
• MTV Live
• MTV Music

These channels shared the same underlying on-screen graphics package, with variations primarily in color and channel branding.

Here are some examples of the recreation in action:

Still missing

• MTV 80s
• MTV 90s

Contributions and pull requests for the missing channel variants are welcome!

Accuracy

The recreations were made with the original broadcasts as reference material.

Particular attention was paid to:

• Animation timing
• Element positioning
• Element dimensions
• Typography and text placement
• Colors
• Transitions
• Movement and easing
• Channel-specific variations

The intention is not merely to create something visually similar, but to reproduce the behavior and appearance of the original on-screen graphics as closely as possible.

How to use

The recreation is a browser-based implementation using HTML, CSS, and JavaScript.

There is no application backend or build system required. Open index.html in a browser and use the browser's Developer Console to control the on-screen graphics.

Start a local HTTP server with:

python3 -m http.server 8000

Then open http://localhost:8000 and use the browser's Developer Console to control the graphics.

The graphics are hidden by default. Start by selecting a channel, then enable the elements you want to display:

switchChannel('club-mtv')
setProgrammeText('Best of MTV')
setLogoVisibility(true)
showNextSong({ artist: 'Daft Punk', song: 'Get Lucky', year: '2013' })
showCounter(10)

You can omit any elements you don't need.

Available functions:

switchChannel(channel)

setProgrammeText(text)

setLogoVisibility(show = true)

showNextSong({ artist = '', song = '', year = '' } = {})
hideNextSong()

showCounter(number)
hideCounter()

Available channels:

• club-mtv
• mtv-hits
• mtv-live
• mtv-music

The background is transparent, so the graphics can be overlaid on top of a video, webpage, or other content. When opened directly in a browser, the transparent background will normally appear white, which can make some elements difficult to see.

For example, to make the background black, run this in the Developer Console:

document.body.style.background = 'black'

Demo

Following snippet demonstrates how to use the on-screen graphics functions in a sequence similar to an actual broadcast.

(async (ms) => {
  // Randomly select one of the available channels
  const channel = [
    'club-mtv', 'mtv-hits', 'mtv-live', 'mtv-music'
  ][Math.floor(Math.random() * 4)]

  //
  // Set initial background and channel information
  //
  document.body.style.background = 'black'
  switchChannel(channel)
  setProgrammeText('Best of MTV')
  setLogoVisibility(true)
  showCounter(10)

  //
  // Song 1
  //

  await ms(3000) // Wait for 3 seconds before showing the next song
  showNextSong({ artist: 'Talking Heads', song: 'Once in a Lifetime', year: '1980' })
  await ms(3000) // Wait for 3 seconds before hiding the next song
  hideNextSong()

  //
  // Switch programme name
  //
  await ms(3000) // Wait for 3 seconds before switching the programme name
  setLogoVisibility(false)
  await ms(1500) // Wait until the logo is hidden before switching the programme name
  setProgrammeText('Last of MTV')
  setLogoVisibility(true)

  //
  // Song 2
  //

  await ms(3000) // Wait for 3 seconds before showing the next song
  showNextSong({ artist: 'Pink Floyd', song: 'Comfortably Numb', year: '1979' })
  showCounter(9)
  await ms(3000) // Wait for 3 seconds after showing the next song
  hideNextSong()
})((ms) => new Promise(resolve => setTimeout(resolve, ms)))

Repository structure

.
├── index.html
├── style.css
├── logo_club_mtv.svg
├── logo_mtv_hits.svg
├── logo_mtv_live.svg
├── logo_mtv_music.svg
└── LICENSE

Files

Fonts

The original recreation used Helvetica font files during development to reproduce the original typography as accurately as possible.

However, the Helvetica font files are not distributed with this repository because their redistribution rights have not been established.

If you want to run the recreation locally, you will need to provide an appropriately licensed font yourself, or the project will need to be updated to use a suitable open-source alternative.

Finding a freely redistributable font that provides sufficiently close typography to the original is still a TODO.

TODO

• Recreate MTV 80s
• Recreate MTV 90s
• Replace the non-redistributable Helvetica dependency with a suitable open-source font
• Improve/document the JavaScript API
• Add more reference recordings and comparisons where available

Contributing

If you have recordings, references, measurements, or other material that can help improve the accuracy of the recreations, contributions are welcome.

In particular, contributions for the currently missing MTV 80s and MTV 90s variants would be appreciated.

When contributing, please try to preserve the same level of accuracy in:

• Positioning
• Scaling
• Typography
• Colors
• Animation timing
• Transitions

If you have access to original broadcast recordings, they can also be useful for comparing animation timing and behavior.

Licensing

Source code

The original source code in this repository is licensed under the MIT License.

See LICENSE for the full license text.

MTV branding and logos

MTV logos, names, channel identities, and other third-party branding included in this project are not covered by the MIT License.

Those assets are used solely as part of this independent archival recreation. All rights, trademarks, and ownership of the MTV branding remain with their respective owners.

Nothing in this repository should be interpreted as granting permission to use MTV's trademarks or branding beyond whatever rights may otherwise exist under applicable law.

Disclaimer

This is an independent, fan-made archival project.

It is not an official MTV project and has no affiliation with MTV or Paramount.

The project is intended to document and preserve the appearance of historical MTV on-screen graphics and is not intended to represent MTV, Paramount, or any other rights holder.