Red Alert CSS Animation

August 30, 2013

If you like this article you'll probably like 007, Fair Use and Bahamas too. ^_^

I love Star Trek II: The Wrath of Khan for many reasons; one of them being the Red Alert animation.

The original was so mesmerizing that I had to make a CSS version to express my appreciation!

Red Alert CSS Animation
Chrome, Firefox, IE 10+ and Safari

Recreating Movie Magic

As you might suspect, it took quite a bit of work to recreate the animation. I thought I'd go through the process for those interested and also highlight some of the wonderful software that made it possible.

Source Material

The best source material I could find was on my much watched Blu-ray version of the movie.

First step was to use MakeMKV and convert the disc to a MKV file. Storing the resulting file on my SSD would make subsequent steps that much quicker.

Once I found the Red Alert clips I was interested in; HandBrake made it easy to rough cut clips and save them as MP4 files.

Finally, Premiere Pro was used to make one perfect video loop.

With the source inspiration sorted out it was on to the building phase!

Building Phase

Using a tracing background image I first made the top, right, bottom and left shapes using pure CSS.

Next step was to recreate the unique font used for the text "Alert Condition: Red".

Photoshop to create a cleaned up version of the text. Illustrator to trace the image into vectors. Photoshop again to clean up the paths.

With individual letters ready for further work it was time to create a font. I won't go into details about some of the free stuff I tried, but lets just say it wasn't good. For that reason and more, I was ecstatic to discover the superb Glyphs font software. Learning curve? Yes and worth it.

Using Glyphs I was able to further refine the letter shapes, set the spacing between characters and export it all to an OTF file.

Next step was to recreate the bars that animate towards the Alert text. Hundreds of revisions in Coda 2 assisted by LiveReload until things looked precise.

Actually, too precise. The CSS version was coming out so crisp compared to the original video source. For some elements like the font and large shapes this was good. The moving bars however felt wrong. Very wrong. So, box shadows, gradients and more until they felt right when animated vs. looking perfect when standing still.

Finishing Phase

I've made some neat CSS recreations in the past (007 for example) but this endeavor was way more ambitious. Animations, multiple browser support and zoomable?! Oh yes.

The problem with this ambition was a few persistent issues that only happened at certain zoom levels or in certain browsers. The kind of stuff that would ultimately drive me crazy if left unattended.

The solution would be to use the same tactic as the animated bars. Change things until they had the right feeling and in certain cases even improve upon the original. *GASP*

In the end the CSS version didn't come out like I thought it would. It was better!

Epilogue

I hope this work is seen as a homage to the creators of the original effect that inspired me so. Thank you special effects folks, wherever you are.

Star Trek and CSS together forever. ^_^