Letter Effects and Interaction Ideas

A couple of ideas for typography animations and letter (hover) effects for playful interactions.

By in Playground on
Demo Code

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters.

Update: We’ve created some additional demos, read more about them here: Letter Effects and Interaction Ideas (Part 2)

Attention: We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.

Please note that some of the effects are specifically made for hover so mobile support is limited.

Here are the previews of the demos:

LetterInteractions_01

LetterInteractions_02

LetterInteractions_03

LetterInteractions_04

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you have fun with these little effects and find them inspiring!

References and Credits

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.

How to Animate SVG Shapes on Scroll

Gooey cursor with svg filters and css blend modes

Gooey Cursor Effect

Reflection Scroll Effect

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

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 14

Comments are closed.

  4. Manoela: (I know you like to be called Mary Lou, but I just like the sound of Manoela). I have a suggestion. Instead of having a error message script for IE why not have a redirect to some other page like Google? It took me several hours to search the net to find the answer.

    So for those who do not wish to to their own hunting

    1. Delete Manoela’s crept from the head section
    2. Paste following code

    if(navigator.appName.indexOf(“Internet Explorer”)!=-1 || navigator.userAgent.match(/Trident.*rv[ :]*11\./))
    {
    //This user uses Internet Explorer
    window.location = “http://www.gigiyut.com/”;
    }

    It works for me. I have no clue if it follows proper programming conventions or not.

  7. Sorry, but I’m not an expert. I wanna know why the user only can see the links names in responsive design mode but not in the PC display design mode? The concept is beautiful, but some users maybe will find difficult to navigate through it.