JavaScript-animated Social Screen in Times Square

MTV's giant HD screen in Times Square is showing Instagram, Twitter, and Facebook posts all day today leading up to the New Year's Eve ball drop. We built the display on top of the FeedMagnet social curation platform using the Isotope JavaScript library and 3D animation using Google Chrome's CSS3 support – creating an effect that looks like video, but is updating it's content in real-time.

Looks like video, but with content updating in real time

We made a screen-capture video of the Chrome output, but the real screen is not video at all. All of the 3d-card flipping and smooth sliding animations are done in the browser using Isotope JavaScript and CSS3 transforms. The content updates in real time via FeedMagnet's curation engine.

Custom Isotope Layout Engine

Isotope is a pretty sweet JavaScript library. By default it has masonry layout and a few simple grid and list layouts. We had a few unique needs with our layout to enable content to loop on the screen - sliding in from the top and exiting to the bottom - inserting branded Verizon sponsor banners, and attempting to fill every single grid block on the screen.

Because Isotope is extensible, we were able to write our own layout engine for it that did all of the above. It positions all of oldest content above the screen (so that when it loops back around it comes in from the top), puts 8 updates in a grid, attempting to fill all the blocks, then positions everything else below the screen.

Content Driven by FeedMagnet SDK

The social content is pulled in by FeedMagnet from social sources including Twitter, Instagram, and Facebook. It is then run through a series of filters and human moderators to weed out the profane and silly posts and return a stream of positive sentiment to ring in the new year.

With the hash tag #my2012moment trending on Twitter, there has been a TON of content coming in. Much of it is junk and people being dumb, so the FeedMagnet curation layer is critical in enabling a quality output for Times Square.

The FeedMagnet JavaScript SDK enables content to be pulled from the FeedMagnet server into the browser and displayed one social posts at a time on a loop. It checks for new content every 20 seconds and interrupts the loop to display it as soon as it is approved by the moderator.

Web Version Also Powered by FeedMagnet and Isotope

The online companion to the screen lives on verizoninsider.com and is powered by the same Isotope animation, but enables filtering by social channel and browser through older content via a load more button.

The whole project was a lot of fun to work on and it's super rewarding to see your work up in Times Square on NYE. Thanks to our client, Verizon, for the second year in a row getting to do this project and to MODAL, the agency responsible for the brilliant design work.

Happy New Year!