Letter Effects and Interaction Ideas (Part 2)

A new set of letter effects and animations for playful typography interactions.

By in Playground on
Demo Code

Today we’d like to share some more letter effects with you. Just like in the first set, we play around with hover and click interactions to create some fun typography animations. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters.

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

The crossword demo makes use of the new CSS grid layout. By just giving a set of columns and rows for each word, we can easily position each letter in a grid layout. With a structure like this, we can automatically set each grid-row and grid-column property:

<h2 class="word word--crossword">
	<span class="word__main" data-column="1" data-row="4">Karma</span>
	<span class="word__cross" data-column="1" data-row="4">Kiss</span>
	<span class="word__cross" data-column="2" data-row="2">Heart</span>
	<span class="word__cross" data-column="3" data-row="1">Embrace</span>
	<span class="word__cross" data-column="4" data-row="3">Smile</span>
	<span class="word__cross" data-column="5" data-row="1">Innate</span>
</h2>

The word__main runs horizontally and all word__cross elements vertically. The data-row for the word__cross defines in which row the word starts. Given the number of letters and their cells, we have a 5×7 grid for this example.

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

Here are the previews of the new demos:

LetterInteractions_05

LetterInteractions_06

LetterInteractions_07

LetterInteractions_08

LetterInteractions_09

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 enjoy these new effects and find them useful!

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.

Creating the Effect of Transparent Glass and Plastic in Three.js

On-Scroll Animation and View Switch

Drawing Graphics with the CSS Paint API

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 10

Comments are closed.

  2. I have read both part 1 and part 2. I have learn some amazing stuff. Thanks for sharing.

  5. One of my favorite website I love all your work. You always come up with something new.

  7. Really great stuff, but how the heck do I make those cool typographies to begin with? I don’t know where to start or find resources 🙁

  8. Great insights, gonna test new typos interactions right the way. Thank you very much for sharing it!

  10. First off all, very cool stuff 🙂 I am trying very hard to make the crossword thing work i think its awesome. but i just dont know what to putt in the html part.