Hover Animations for Terminal-like Typography

Some fun Terminal-like character hover animations for lines of text.

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:

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.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!