The CSS 'Scrabble' writer — The next gen typewriter

Temani Afif - Aug 29 '21 - - Dev Community

Get tired of the classic typewriter and its blinking caret? I am here to the rescue with my 'Scrabble' writer. A new and innovative way to type your text.

Impress your visitor with such unexpected animation!

CSS scrabble writer

See the Demo

The HTML code is pretty basic and all you have to do is to adjust a CSS variable (for the number of letters) and the font-size:

<span class="scrabble"><span>CSS</span></span>
<span class="scrabble"><span>is</span></span>
<span class="scrabble animate" style="--n:5"><span>crazy</span></span>
Enter fullscreen mode Exit fullscreen mode

You can easily animate any text you want:

PS: click on the "rerun" button to see the animation again


A quick overview of the previous events:

@alvaromontoro started the war with his CSS-only typewriter:

I replied with my "simple-code" implementation

He strike back with a cartoon 0-element version

Another warrior (@auroratide) is trying to defeat us with an SVG version!

But, I am here with my secret weapon: the Scrabble writer!

to be continued

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .