Hover Animations for Terminal-like Typography

If you haven’t seen Jean Dawson’s incredible website yet, I recommend you to check it out! It was made by Mouthwash and Guillaume Colombel and it looks like a 1985 VHS tape was brought to life! As an 80s kid, I have a soft spot for this kind of nostalgia and inspired by the hover effects, I wanted to give it try and do my version of these kind of effect. They play with a cursor like animation and also a background element animation. Inspired by these two I tried my version and added two other variations.

We’ve previously explored shuffle effects and if you enjoy this kind of code font style and effect, you might want to check out these demos:

• Type Shuffle Animation
• Clip-path Hover Effect from Quai Network
• Scrolling Letters Animation

While my version might look a bit more like a terminal coming to life rather than a cool retro VHS tape, I hope this is useful to you and that you find it inspiring.

Here is how it looks using some character shuffling and color play:

And this alteration shows a little cursor effect:

And here we have a little futuristic alteration with a blurry backdrop-filter:

Hope you enjoy these and thanks for checking by!

Here is a little find for Terminal design lovers: VHS is a tool that lets you write terminal GIFs as code for integration testing and demoing your CLI tools. Also, check out these examples of famous scenes.