Speckyboy RSS: 10 Stunning Examples of Text Distortion Effects in Web Design

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

10 Stunning Examples of Text Distortion Effects in Web Design


By Nataly Birch on May 31, 2021 06:13 am


We all love typography. And when type is set in motion, we love it even more!

When used properly, text distortion effects (or, the “glitch” effect) can greatly enhance the typography of a web design, especially when used for drawing attention to a particular headline, tagline, or regular block of text.

Remember, though, that being highly selective with its use is key to the success of the distortion, as users don’t typically like overly obtrusive effects. Tread carefully if you plan to make use of this tiny design trend.

Today, we have ten stunning CSS and JavaScript text distortion effect snippets for your web design inspiration. Enjoy!

Glitched Text by Lucas Bebber

Lucas Bebber has created an analog-like creation with just a slight touch of noise. It has been created using only CSS, so it’s lightweight and fast. The effect does have some subtle pausing throughout, ensuring that the animation doesn’t overly annoy viewers.

See the Pen CSS Glitched Text by Lucas Bebber

Ants! by Bennett Feely

This example makes clever use of Blotter.js, a modern JavaScript library for drawing creative text effects. Each symbol has been composed of hundreds of tiny irregular shapes that move in an almost chaotic fashion. The effect is not overwhelming, annoying, or irritating. On the contrary, it is intriguing and visually appealing.

See the Pen Ants! (with blotter.js) by Bennett Feely

Underwater SVG Text by Katrine-Marie Burmeister

Lately, water-inspired effects have become popular among creative web developers. Katrine-Marie Burmeister has created this simple solution that would give any text a lovely underwater touch.

See the Pen Underwater SVG Text by Katrine-Marie Burmeister

Distortion by Corentin

This text effect example is much less extravagant than Bennet Feely’s and more intriguing than the previous example from Katrine-Marie Burmeister. It has a liquid-like behavior that is revealed when the user hovers over the lettering. It is simple yet eye-catching.

See the Pen distortion by Corentin

Particle Text by Noname

Every letter in this creation is composed of numerous dots that begin to move erratically when the mouse cursor hovers over them. It almost feels like you are going to blow them away.

See the Pen PARTICLE TEXT by al-ro

Text particle by Thibaud Goiffon

Using thousands of solid circles of various sizes and colors, Thibaud Goiffon has created an outstanding distortion concept. He has also provided the viewer with a small control panel to edit such variables as gravity, duration, speed, radius, and resolution.

See the Pen Text particle by Thibaud Goiffon

Dynamic 3D confetti text by Rachel Smith

This example is a playground where you can edit your own text. Each symbol is composed of numerous colorful triangles of various sizes. Here, the distortion effect is quite delicate. The result is that the text looks elegant despite its bold appearance.

See the Pen dynamic 3D confetti text by Rachel Smith

Spark Text SCSS by Tatsuya Azegami

This example has been created to amuse the viewer. Hover your mouse cursor over the text, and you will see a thin straight line blow each letter away like a sharp arrow. Of course, everything comes back to normal almost immediately.

See the Pen Spark Text SCSS by Tatsuya Azegami

Squiggly Text by Lucas Bebber

This text effect feels like it is trembling with fear, so it will certainly come in handy for numerous Halloween-inspired websites. This is another pure CSS creation that cleverly makes use of SVG filters.

See the Pen Squiggly Text by Lucas Bebber

Text Distortion by Joshua Ward

This is another solution that requires user interaction. When the cursor hovers 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.

See the Pen Text Distortion by Jøshüå Wård

Text Scramble Effect by Justin Windle

Justin Windle has taken one of the banalest text effects up to the next level. This typing effect looks simple but stylish. This example is so universal and elegant that it could easily be used on numerous types of projects.

See the Pen Text Scramble Effect by Justin Windle


With these text distortion code snippets, you can bring a playful feel to any project. They don’t require much effort and will all leave a lasting impression on your users and visitors.

The post 10 Stunning Examples of Text Distortion Effects in Web Design appeared first on Speckyboy Design Magazine.



Read in browser »

Recent Articles:

Weekly News for Designers № 594
Inspiring Examples of Brand-Related Splash Screens in Web Design
Getting Past the Limitations of Your Design Skills
Why Web Design Is Never Simple
The Cat’s Meow: 8 CSS and JavaScript Code Snippets Celebrating Our Feline Friends
Share
Tweet
+1
Share
Forward
Copyright © 2021 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Older messages

Speckyboy RSS: Weekly News for Designers № 594

Friday, May 28, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 594 By Speckyboy on May 28, 2021 11:03 am Envato Elements daisyUI

Speckyboy RSS: Inspiring Examples of Brand-Related Splash Screens in Web Design

Thursday, May 27, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Inspiring Examples of Brand-Related Splash Screens in Web Design By Nataly Birch on May 27,

Speckyboy RSS: Getting Past the Limitations of Your Design Skills

Wednesday, May 26, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Getting Past the Limitations of Your Design Skills By Addison Duvall on May 26, 2021 06:02 am

Speckyboy RSS: Why Web Design Is Never Simple

Tuesday, May 25, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Why Web Design Is Never Simple By Eric Karkovack on May 25, 2021 06:18 am When watching a

Speckyboy RSS: The Cat’s Meow: 8 CSS and JavaScript Code Snippets Celebrating Our Feline Friends

Monday, May 24, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration The Cat's Meow: 8 CSS and JavaScript Code Snippets Celebrating Our Feline Friends By Eric

Inside Claude Monet's Home at Giverny

Wednesday, June 16, 2021

(image) Architectural Digest AD PRO Logo Image may contain: Garden, Outdoors, Arbour, and Porch Forget the Gardens: The Best Part of Giverny Is Monet's Kitchen Read More → (image) Condé Nast

Typography Trends, Tutorials UX, Safari 15, Brave Onboarding, Loaf

Wednesday, June 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 16 2021 Typography Trends in 2021: What Should You Know?

Issue 307

Tuesday, June 15, 2021

Fixing up all the table things, equal columns with flexbox, avoiding layout shift when loading web fonts. CSS Layout News Issue 307 By Rachel Andrew – 15 Jun 2021 – View online → It's still sunny

✏ Samsung Redesigns the Save Icon, 22 Exciting New Tools, Typography Trends, and more…

Tuesday, June 15, 2021

Samsung Gives the “obsolete” Floppy Disc Save Icon a Facelift for the 2020s ITSNICETHAT.COM COMMENTS 22 Exciting New Tools for Designers, June 2021 WEBDESIGNERDEPOT.COM COMMENTS Typography Trends in

96 / Not boring avatars for your apps, design resources, iOS 15 UI kit and epic fails

Tuesday, June 15, 2021

Product Disrupt Logo Product Disrupt Half-Monthly Jun 2021 • Part 1 View in browser Image Boring Avatars Tiny JavaScript React library that generates custom, SVG-based, round avatars from any username

Smashing Newsletter #305: Color Palettes Generators and Tools

Tuesday, June 15, 2021

With CSS variables, HSLA, color generators, color combinations and color scales for data visualizations. Issue #305 • June 15, 2021 • View in the browser 💨 Smashing Newsletter Ciao Amici, Color may

👨‍⚕️ Curative Medical UI Kits + 🏆 Challenge Updates

Tuesday, June 15, 2021

Don't Miss This Week's UpLabs Designer Digest 👇 Firstly, we'd like to wish a warm congratulations to Yolan Puspa, the winner of our latest 🎙Clubhouse App Redesign Challenge! Secondly, we

✏ Is A Graphic Design Career For You? Create React Custom Hooks, Health Icons, and more...

Monday, June 14, 2021

Is a Graphic Design Career for You? (7 Questions to Ask Yourself) DRIBBBLE.COM COMMENTS When CSS Isn't Enough: JavaScript Requirements for Accessible Components SMASHINGMAGAZINE.COM COMMENTS Health

A Filmmaker's Kubrickian Loft

Monday, June 14, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room (that's not really a

This New Tabletop Collection Has Us Falling Back in Love With Formality

Monday, June 14, 2021

Plus, 10 kitchen trends taking TikTok by storm (image) Architectural Digest AD PRO Logo The Expert Taps Former Domino EIC Jessica Romm Perez to Lead Partnerships Read More → CeCe Barfield's New