A Look at Text Distortion Effects in Web Design


0

We all love typography. And when type is set in motion or spiced-up with some dynamic effects, we love it even more.

There are so many powerful instruments that encourage us to let our imaginations run wild, so it’s not surprising that there is a rich diversity of solutions. It seems that the sky’s the limit when it comes to prettifying the headlines, taglines or just regular blocks of text.

Text distortion effects have recently caught our attention. The “glitch” effect is one of the brightest representatives of this direction. We can see it everywhere: it enhances backgrounds, animations, videos and of course headlines.

The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets

DOWNLOAD NOW

Glitched Text by Lucas Bebber

Here, the artist offers a traditional realization that looks analog-like with some beautiful touches of noise. It was created only with the help of CSS, so it is lightweight and fast. The effect has some pauses so that text does not annoy us, but instead casually reminds us about itself. Neat and clean.

However, this is far from the only example. There are some other fantastic solutions where the distortion stands behind their beauty and overall impact. Let’s consider some of them.

Ants! by Bennett Feely

Using Blotter.js, a modern JavaScript API for drawing text effects with some aces in the hole, Bennet managed to bring his outstanding idea to life. Here, each symbol is composed of a hundred tiny irregular shapes that are set to chaotic motion. Together they remind us of a swarm of ants. The effect is not overwhelming, annoying or irritating. On the contrary, it is intriguing and visually appealing.

Underwater SVG Text by Katrine-Marie Burmeister

These days, water-inspired effects are incredibly popular among web developers. You can see various takes on water surfaces that prettify the backgrounds of hero areas. And typography is no exception. For those who follow the tendency, Katrine-Marie Burmeister has prepared a simple solution that gives any text a lovely underwater touch.

Distortion by Corentin

Let’s make things a bit more interactive and try to engage visitors with action. This artist’s idea is less extravagant than Bennet Feely’s and more intriguing than the previous one created by Katrine-Marie Burmeister. It has a liquid-like behavior that is revealed when the user hovers the mouse cursor over the lettering. It is simple, yet eye-catching.

Particle Text by Noname

This is another solution that requires the user’s interaction to show its irrepressible nature. Every letter is composed of numerous dots that begin to move in various directions when the mouse cursor touches them. It feels like you are going to blow them away. Still, there is some glue that ties everything together and does not allow the symbol to break up completely.

Text particle by Thibaud Goiffon

If the previous solution feels a bit gloomy, then this snippet will undoubtedly cheer you up with its bright appearance and playful mood.

Using thousands of solid circles of various size and color, Thibaud Goiffon has pulled off an outstanding concept. He has also provided the audience with a small control panel where they can change such variables as gravity, duration, speed, radius, and resolution. Play with settings to create your own artwork.

Dynamic 3D confetti text by Rachel Smith

This example has the same charisma as the previous one. It is a playground where you can add your own text. Each symbol is composed of numerous colorful triangles of various size. Here, the distortion effect is neat and delicate. The result is that the text looks elegant despite its bold appearance. Move it along the axes to explore it from various angles.

Spark Text SCSS by Tatsuya Azegami

Much like the project created by Corentin, this solution is intended to amuse the audience. Hover your mouse cursor over the text, and you will see a thin straight line pierce and blow each letter away like a sharp arrow. Of course, everything comes back to normal almost immediately. Nevertheless, this is enough to make an impression.

Squiggly Text by Lucas Bebber

Squiggly Text by Lucas Bebber looks a bit glitchy. Still, in essence, it is a squiggly effect. It feels like it is trembling with fear, so it will certainly come in handy for numerous Halloween-inspired websites. This is another pure CSS realization based on SVG filters. The solution was tested only in Chrome, but with some tricks, it can work in other popular browsers as well.

Text Distortion by Joshua Ward

This is another solution that requires user interaction. When the mouse cursor hits the text, a second layer appears. It consists of blue and pink colors that give each letter a mock 3D anaglyphic touch. It also has a slight vibrating effect that forces the text to pulsate, thereby unobtrusively drawing attention.

Text Scramble Effect by Justin Windle

Justin Windle has taken one of the most banal text effects to the next level. The rejuvenated typing effect looks simple-but-stylish here. The decoding portion of the effect is neat and nifty. It is so universal and elegant that it is easily suited to numerous projects.

If you’re looking for more scramble effects, then there are some other helpful code snippets. For example, you can try Text Distort by Will Naugle, which is reminiscent Justin’s work.

Text shuffle & distort fx by Blaz Kemperle requires users to scroll down to reveal the shuffling. Although both of them are based on the same concept, they still differ and have their own charm.

Distorted Reality

In some cases, text distortion is used to establish a playful atmosphere like in the example of Text particle by Thibaud Goiffon. Whereas, in others it sets up a businesslike atmosphere like we saw in Text shuffle & distort fx by Blaz Kemperle.

With the text distortion effect, you can bring various emotions to a project, throw a spotlight on the headline and save the interface from looking trivial. It does not require much effort to create something similar for your next project, yet it will certainly add to the user experience and overall impression.


Like it? Share with your friends!

0
admin

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format