Here is a keymap finger placement color assist generator.

[eliezersouzareis]

When I learned touch typing on QWERTY, the site I used had a finger placement assist. After "mastering" touch typing on QWERTY, I became interested in switching to Dvorak. As I practiced on Monkeytype, I felt the need for a color assist for finger placement. Since I wasn't keen on doing the CSS manually, I wrote a generator.

Gravacao.de.tela.de.2024-10-16.10-27-41.webm

https://gist.github.com/eliezersouzareis/bfdc65b420649389cb0e3edc3a1bfa15
Use the generated CSS with an extension that overrides the site's CSS (such as Stylus).

Learning Dvorak didn't pan out for me, but I hope this can be helpful to anyone who needs something similar.

[eliezersouzareis]

I do recon this is somewhat a duplicate of this discussion, but my approach is different (that is, just highlight the key being typed / to be typed)

[alexchexes]

Is something wrong with the video or is it my browser?

[eliezersouzareis]

I tried again using other format. I hope this works for you.

monkeytype-2024-10-16-16-57-47.mp4