Annoyingly, the canvas is hard-coded to use only the "Simple Console" font; if your browser doesn't load the font for whatever reason, it shows up in a proportional typeface which ruins the effect.

Changing `font-family: "Simple Console"` to `font-family: "Simple Console", monospace` would fix it.

Thank you, will fix!

Note: some CSS attributes for the pre (or canvas) can be set trough an exported “settings” object:

  export const settings = { fontFamily : 'Monaco' }

Another commercial website that heavily uses ASCII animation: https://oxide.computer/

That’s a very slick page!

By inspecting the animated diagrams they switch from text rendering in a PRE element to a CANVAS renderer when the page width shrinks below a certain size.

I thought this was running on a canvas element, but no.. characters are nested inside spans. That's amazing.

Very cool! There's another site I used to frequent with a similar bent, focused on golfing: https://www.dwitter.net/

I made a similar feature as a Tumblr post type during an internal hackathon -- shame that never got to see the light of day as a production feature. Processing post types, that allowed others to reblog and make revisions. Would've been painful to get it ready for a mobile release unfortunately.

Friendly plug: design and run ASCII art animations in the browser and export to animated GIF: https://animasci.com/

It's cool but the "r" in that font is distracting.

The “r”, which looks a bit like a hook, is what makes this font special. The reason it was chosen is that the name of the website contains an “r”…

I kinda liked the font, but agree with you on the 'r', looks like a something bent over lol

I love it. Just a small nitpick, it broke my back button :(

Strange. In which situation exactly if I may ask (sorry if I’m using the thread for debugging purposes)?

Is this a non-GPU variant of shadertoy?

what is the monospace font used for the code shown there?

after a little digging it looks like a custom font called 'Simple Console', though it's not available anywhere I can find other than through the website (which states it's licensed only for use on their website, not for download or use on other sites)

It is a custom version of “Simple” by Norm made to include some of the box drawing glyphs.

https://lineto.com/typefaces/simple

Two examples with the box drawing glyphs:

https://play.ertdfgcvb.xyz/#/1612272092088

https://play.ertdfgcvb.xyz/#/1625307783449

looks like jetbrains mono?

It should come with an epilepsia warning.