Retro Typography

One of my favorite movies as a kid was “Wargames” with Matthew Broderick and Ally Sheedy. Watched it a few days ago and decided to animate one of the classic scenes in Hype. Emulating a 1980’s computer terminal is harder than I thought it would be. Had to use the Google Font VT323 to get the right look.

Would love any feedback.

http://darrenscorner.com/wargames/

4 Likes

This is great! This was one of my favorites :smiley:.

What about doing an overlay (ignoring pointer events) to fake scanlines of those older CRTs?
You could also apply a backdrop filter on this to blur the display a little, since those monitors weren’t perfectly sharp.

1 Like

It looks like there's an element over the letters. Is that right?

The letters could pop in with a loop counter and the length property. That would be more like a typewriter / keyboard effect. That's harder to do though. If you don't want to program, each letter could be added per keyframe by changing the innerHTML. Super tedious, but effective. You then could better sync the typing sounds with the letters appearing.

1 Like

Tried doing it that way at first. Unfortunately, had problems with the text and mask positioning. Could get everything to work in Chrome but positioning would be just a little off in Firefox. Solution was to put all the text into a giant image and use rectangle elements as masks to display the text and have the flashing cursor “follow” the mask.

Have a search for typewriter, I wrote a few version that emulates typewriting.

Here is a link to one.

Hi Darren.
This is a very good example of Hype’s features and a very polished product.

I’m going to watch this movie now!

Getting a CRT pattern and glow would make this even better.

1 Like