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.
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.
The post 12 Stunning Examples of Text Distortion Effects in Web Design appeared first on Speckyboy Design Magazine.
