Wizards Unite Threat Clock
Wizards Unite Threat Clock

Recently, a number of wizards on our Discord server reported that the magical exposure clock featured on the Wizards Unite official website has changed position / animation. Curious as I am, I decided to went in and investigate the code behind the website in an effort to gather more information about this phenomena.

Readers, I have to warn you ahead of time: this is a code / tech heavy post and I’ll try my best to explain everything as we go down the rabbit hole.

Exposure clock basics

The threat clock is created by overlaying a number of different HTML elements:

  • Spinner fill – holds background fill for each clock segment
  • Spinner center – holds the outer circular elements, the inner clock and segment notches
  • “Arm hand” – used as hour hand (also the one pointing to a green segment)
  • “Arm pointer” – used as minute hand (the one pointing to an empty segment)

Unsurprisingly, it’s very similar to the MACUSA magical exposure clock featured in the first Fantastic Beasts movie:

Image credits: Pottermore
Image credits: Pottermore

Code wise, the webpage contains a handful of references to the clock, but they all boil down to doing the same thing: if possible, when the user scrolls, play the exposure-spinner-active animation. The animation has been recently added, but has no connection to any date or any wizarding world references: it’s simply played on scroll.

Once played, the animation will leave the “hand arm” twitching, as defined in this code snippet:

.exposure-spinner.exposure-spinner.exposure-spinner--active .exposure-spinner__arm-hand svg {
    -webkit-animation: twitch-exposure-spinner-hand 2s;
    animation: twitch-exposure-spinner-hand 2s;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

In addition, background colors for each segment are also controlled by the animation and they have the following values:

Segment Color code Color visual
1 #1A742C
2 #529141
3 #88B36C
4 #AFBF81
5 #E3B73F
6 #DB702D
7 #B93627
8 #93191F

These colors are, again, very similar to the MACUSA clock, but there is notably no “High Alert” blue color. Black color which indicates extreme exposure also seems non existent. We are very curious to see real, lore and cannon approved, colors implemented and not used for more than a simple animation. It is speculated that the position of clock’s hand and pointer arms will change as we get closer to the release date, and these colors certainly support that theory.

Javascript code analysis did not reveal anything significant (aside from the earlier discovery that the animation is played on scroll), but we did get a better understanding of the overall website structure:

  • The website is powered by Angular 1.6.10, which is an older version of one the most currently popular Javascript frameworks
  • Google Analytics tracking is used to provide Niantic with website traffic and visitor information
  • Two custom fonts are used (Oswald and Vollkorn) and both are served using Google Fonts

With all of this being said, what do we know now that we did not know before?

Conclusions

  • The threat clock is a visual element that is currently fixed on the first green segment. There are no references to dates or special events in the code base.
  • The website is developed with modern standards in mind and there are some curiously unused elements, such as colors for other clock segments

Thank you for reading and we hope this post clarifies a few the mysteries surrounding the Threat Clock! Make sure to follow us on Twitter and to hop on to our Discord server – it’s a truly great place to be.

Advertisement