Skip to content

MegaJerk/Uniqlock

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Uniqlock Rewind

A modern web standards remastering of an old Flash advertisement campaign by Uniqlo.

Time and motion
Time and tide
All I know and all I have is time, and time and tide is on my side!
— King's Lead Hat, Brian Eno

On June 15th, 2007, the Uniqlock was released online and would go on to become one of the most well received and interesting marketing campaigns on the internet. With 6 seasons of releases, 10 years of time passed, and Adobe Flash's looming death-date on the horizon, the Uniqlock would be unceremoniously taken offline in early 2017. Just 3 years later on December 31st, 2020, Adobe Flash Player would be removed from Microsoft Windows automatically via an update, making running the Uniqlock screensavers (which were just utilizing .swf files at their core) a difficult and potentially dangerous task.

With the official files and website being wiped off the net, anyone wanting to experience the Uniqlock would either need to find a (hopefully safe) archive of the files, or watch from the small collection of captured footage posted to YouTube. With neither experience being particularly fun or practical. Uniqlock usage sank to an all-time low.

That is... Until today!

Using all of the latest available standard web technology, I have painstakingly labored to create the most accurate Uniqlock experience to date, completely and totally Adobe Flash free! Combing through my own personal archives and a well preserved online backup of the Uniqlock, I was able to extract (what is, as far as I can tell) every piece of media used to create every season of the Uniqlock; And have combined them into a near 1:1 experience that runs in almost any modern browser.

Though the era of internet that helped to create the Uniqlock is long gone, Uniqlock Rewind is my attempt at preserving at least some small part of what made those days so special, and to provide, for the generations of people who may have missed it, an opportunity to find themselves helplessly hypnotized by the charm and design of this fun little clock.

How To Use

Simply Click Here!

please see the known issues section if you're a firefox user

If you'd like to run it locally, download the latest release. Just remember that you'll need to open some sort of web server to get it working as this uses Web Workers, which are blocked from running under the file: protocol. An easy way to do that would be to:

  1. Download Visual Studio Code

  2. Open the Directory containing the Uniqlock Rewind project

  3. Open the index.html file

  4. Click on the "Go Live" icon in the bottom right-hand side of the editor. An image showing Visual Studio Code opened to the index html file of this project, and the Go Live button highlighted

That should launch the page locally, and allow everything to work as intended. An animated gif showing the splash screen to this program, a mouse cursor moving into position on the screen, and then a click event which triggers the clock to start counting

Current (Missing) Features

The version 1.x release is all about creating parity with the Flash versions of the clock. Because so much has already been implemented, it's easier to list which features are still missing

Season 3 - Videos

  • Season 3 introduced a series of animated characters (which I will call 'germs' from now on) for a handful of videos. All scenes that feature the germs, with the exception of the On The Hour videos, are all duplicates of non-germ videos. However, the most interesting thing about them is that their color matches the color of the Uniqlock for the given hour it's on.

    Here is a frame taken from a video featuring germs: An image showing the animated characters "germs" and their orange / brownish color, in a typical dance video clip

    And here is an image taken of the actual time clock during that hour: An image showing the Uniqlock's time of 03:11:33 with a orange / brownish background

    But looking at the raw video, we find: An image showing how a Chroma Key is not being applied to animated characters in Season 3 of the Uniqlock Rewind project

    Flash was able to do some sort of Chromakey / Masking that made replacing one color value with another doable, apparently! I have not in any way implemented a similar feature into Uniqlock Rewind, but have done a little research which suggests that something similar is possible if I were to use the <canvas> element and a little magic. It's not high priority but I would like to at least see if I could get it working, and implemented assuming it doesn't destroy performance.

Season 4 - Hour Videos

  • Missing the small clock that appears near the bottom of the screen during Hour Video playback. An image showing a frame from one of the Season 4 On-The-Hour videos, and the mini-clock it shows near the bottom of the screen

    • Missing the 'reflected' image of the small clock during night Hour Video playback. An image showing a frame from one of the Season 4 night time On-The-Hour videos, and the mini-clock and the mini-clock's reflection it shows near the bottom of the screen
  • Missing the ability to specify that the hour videos should follow the Time of Day, but do not care about the current hour.

I can't promise that every feature will be implemented in a quick way, but will do my best to get this as close to the original as possible.

Current Work

Before adding any more features, there are plenty of things that need to be done to the project in the here and now. Code consolidation, full code commenting, and utilizing IndexedDB as a way to cache stuff are just a few of the things I'll be busy with for the moment. I could have tried to get all of those things in before I made it public, but I was simply too excited and wanted to share every comment-based spelling mistake I've ever made with anyone who has access to an active internet connection!

Future Goals

As I work on getting this version as solid as possible, it is my desire to eventually start working on what I think of as Version 2. In that future version I would like to introduce the ability for a user to be able to completely customize their Uniqlock experience. From being able to toggle on or off any particular season, videos, and music. As well as setting things like when the Night Time or Midnight Hours should start or finish.

After that, the tentative idea for a Version 3 would be giving users the ability to upload their own custom music and videos to use with the clock, to either be seamlessly integrated with the existing media, or used to replace it all together!

Somewhere along the line (perhaps version 1.5!) I would also like to package this project up using Atom or some other cross-platform wrapper, that would allow for people to once again run the Uniqlock locally as a screensaver or program in a way that doesn't require any internet connectivity.

Known Issues!

  • Not all videos play correctly in Firefox
  • Volume slider not correctly sized in Firefox

I have really tried to get this thing working across Chrome and Firefox, but there are some issues that make Firefox a less viable choice at the moment. The major issue I've found is that certain videos just won't actually play when using the Firefox browser. All signs point to the video being played, but it just shows a frozen frame despite the fact that the code says that a video is playing and progressing as normal!

I suspect that it has something to do with how the files are encoded as it seems to consistently choke on a handful of videos, but I'm going to have to come up with a reasonable way of testing that hunch (though I do have something in mind).

If you find any more oddities (or have suggestions on how to fix a thing), please open up a ticket or make a request!

Disclaimer

The original Uniqlock project, its media, and all things belonging to the Uniqlo Brand Identity are a product of, belong to, and assumed to be copyrighted by Uniqlo Co., Ltd, and created in part by:

  • Projector Inc.
  • Paragraph
  • Monster Films
  • Monster ULTRA INC.
  • Fantastic Plastic Machine
  • Yuichi Kodama
  • Air:man / Core of Woomin
  • Kashiwa Sato
  • Yugo Nakamura
  • Markus Keirsztan
  • tha.ltd.

For a more thorough breakdown of who worked on what and other information regarding the Uniqlock, see the following sources:

If you believe that this project has violated your copyright, feel free to contact me for clarification / removal.

Thank You.

Special Thanks and Ending Credits

Shout Outs and Special Thanks to:

  • Daniel Tian (https://github.com/danieltian/unique-clock) and Turious (https://github.com/Turious/unique-clock) for creating some sort of starting point out here on GitHub

  • Screensavers Planet™ for hosting the final version of the Uniqlock / Calendar screensaver, which had a complete collection of every video used

  • Rani Baker whose constant progress in hacking and code-work inspired me to shut-up and actually get to the dirty work and the joy of taking something apart and putting it back together - in your own way. You're deeply missed.


This software is dedicated to the countless others who have watched some of the most interesting parts of the internet come and go, and are now left with only vague memories. So much of the online experience is made up of hatred, blasé nihilism, and an endless torrent of speculative get rich schemes; it’s easy to forget that online culture wasn’t always rooted in those insincerities. Though this silly little clock won’t fix the world, I do hope that perhaps at least some people will find the joy in having a simple and fun experience that can be shared across any border or barrier. With any luck, you too may find the inspiration to start working on your own simple and fun experiment.

I look forward to seeing it.