MIDREAL

Animated ASCII Art for Web Pages

https://ascii.rest/ (ascii.rest)

442 points | 29h ago | Discuss on Hacker News | Back to Radar

Comments

lordkrandel 28h ago on HN
wonderful
bas3line 28h ago on HN
Thank you!
kirth_gersen 28h ago on HN
beautiful. i don't see the pieces as animated, however. perhaps I am missing something?
crisnoble 28h ago on HN
> plays it while it is on screen, and holds the first frame for anyone who prefers reduced motion.
herpdyderp 27h ago on HN
Wish I could force it to play!
slig 10h ago on HN
There's a "play anyway" button at the top right (on Desktop).
bas3line 28h ago on HN
Thanks, Let me know if you face any issues!
mapshog 26h ago on HN
Is it mobile only? I'm on a mac, it doesn't work in chrome / safari / firefox - no js errors, no apparent 404s or missing resources, all the pages load, the ascii art is first black and white then colors appear quickly but no animation. It's a shame because it looks beautiful on mobile.
bas3line 26h ago on HN
Hi, sorry for this :) I am talking a look at it right now ^^
mapshog 15h ago on HN
you fixed it! <3 thank you
Sardtok 27h ago on HN
Click on one to go to a page and see only that animation. The framerate is super low on my phone on the front page.
robbomacrae 27h ago on HN
Thats awesome. I did something similar (much smaller scale) for Claude Code/Pi to show how much it's working https://github.com/robdmac/flow

But this ASCII Art reminds me of my original desire to have something for each server I SSH into to help me keep a mental map of where I am. I'm not SSH'ing into servers anymore but if I was, I'd totally be trying to remake these scenes on the terminal!

conesus 27h ago on HN
Flow is gorgeous and fits this ascii art theme beautifully. I've installed it and have lots of changes I'd like to make. Are you open to PRs or should I maintain my own fork without expectation of upstreaming anything?

Examples of changes I'd like to see:

    1. I want a decay on the flame, so on every state change, the flame slowly works its way back down to a base rate, say at 2 minutes. That would imply that a strong fire is a recently changed state, while a decayed flame is a stale state that hasn't changed in a while.
    2. Automatic choosing of a different animation on every open. I run half a dozen to a dozen agents on a single terminal window (full screened on a 27" monitor) and I already built a way to distinguish sessions from other other with my pre-plugin psuedoterminal crabigator and I'd like to do the same for these animations. Basically a way to distinguish sessions from other other.
    3. More so than just changing animations, I'd like to have a random palette chosen per-animation, so there's multiple flames, but there's the purple-esque flames, the blue-esque flames, the red ones, the orange ones, the yellow ones, and so on.
    4. I'd like a way to integrate the plugin into crabigator so its takes a single section instead of being full width.
Regardless, this is a beautiful mod, reminds me of the type of MUD hacking in the early-to-mid 90s that I used to love as a child, and I'm going to be stealing/integrating this into my workflows immediately.

BTW, I used to have different ASCII art images on each of my servers. Here's a sampling:

https://github.com/samuelclay/NewsBlur/blob/main/ansible/rol... https://github.com/samuelclay/NewsBlur/blob/main/ansible/rol... https://github.com/samuelclay/NewsBlur/blob/main/ansible/rol...

robbomacrae 24h ago on HN
Thank you! Love that you did the server art!

I'm absolutely open to PR's. I tried to make it easy to add your own scenes. It's also MIT so feel free to take it and run with it..

1. Yep that makes sense. I haven't really tuned the phase progression much and it def needs a lot of work. For the rocket themes for now they are progressive only until they end but id like to give them the possibility of a bumpy ride so to speak.

2. Yep definitely. Going back to the original server idea.. I'd say it would be even necessary to be able to have a config to make one session have a specific (or random) scene.

3. Yes! I was just thinking about color palettes. ie company or flag colors.

4. https://github.com/samuelclay/crabigator https://drinkcrabigator.com to save others looking it up like I did. Looks great go for it!

I've got some different features in progression so feel free to throw these up as PR's. Otherwise I might get to the config or color palette one day.

Thanks!

bredren 27h ago on HN
Neat. Some of my earliest online contributions were to local dial-up BBSs. I spent entire days making animated ascii sequences in the theme of the board.
shevy-java 27h ago on HN
Watching Star Wars in ASCII is fun.
cromka 27h ago on HN
Cool, but the rows are shuffled here for about a half of those animations
tsukurimashou 27h ago on HN
are you using firefox mobile?
cromka 26h ago on HN
Brave on Android.
boguscoder 27h ago on HN
This looks aesthetically pleasing but this is not ASCII Art it seems, where’s ascii? All those differently sized dots are not ascii chars, are they? Perhaps this is unicode-art?
elevaet 27h ago on HN
There are lots in there with proper ASCII check out https://ascii.rest/julia-set/ for example
moralestapia 26h ago on HN
Your point is valid, I just want to add that deriving ASCII versions of them should be trivial as ASCII already has dots of different pitch, etc.
ghurtado 26h ago on HN
The point is that what you've described is no longer a useful definition of "ASCII art". That's now "art with dots". The fact that it's "technically" ASCII is as irrelevant as it is unimpressive.

"ASCII art", defined honestly, means "limited set ASCII art".

mynameisvlad 26h ago on HN
Please, go right ahead and make your own trueascii.rest and show it to the class.
nomel 25h ago on HN
You're asking for the impossible!
ghurtado 24h ago on HN
nomel 24h ago on HN
This isn't ascii art either, since nearly all of the information is in the color. This is, what we used to call, ANSI art [1].

[1] https://en.wikipedia.org/wiki/ANSI_art

ghurtado 24h ago on HN
Well, it's technically PETSCII art, but the model can be trained on any bitmap charset. So you can make ATARIART or SPECCYART or whatever.

It's not correct to say that most of the information is in the color, though.

I can't remember if it's explained in the readme or not, but what makes this different from other converters is that it matches 1bit 8x8 blocks from the source image to the best matching character, increasing the perceived resolution of the output image.

It's a dumb idea I wanted to implement to amuse myself, and it's not better or worse than any similar tools, but AFAIK it uses a novel approach: fast by using a custom trained NN and uniquely looking output, similar to what a human artist might create by hand.

econ 21h ago on HN
For no particular reason I will share with you my favorite by an unknown artist.

____\o/______/\__

It's called Help shark.

emmelaich 20h ago on HN
Reminiscent of Frank Zappa's album "Ship_Arriving_Too_Late_to_Save_a_Drowning_Witch"

    ---7
       /
      /
     /        /\
    /________/  \__
https://en.wikipedia.org/wiki/Ship_Arriving_Too_Late_to_Save...

from the WP article: https://en.wikipedia.org/wiki/Droodles Interesting!

ktm5j 24h ago on HN
I love how prepared for this you were.
gfat 27h ago on HN
Beautiful work. I did a similar effect for docs using a page turning animation. Might reach for this in the future.
gavmor 27h ago on HN
Gorgeous, impressive, well done—

But it strikes me as an affectation of technical austerity, i.e. you’re borrowing the credibility of a constrained medium without embracing its constraints.

Again, it's very pretty but... it's a bit like reconfiguring your Tesla to look more like a Citroën 2CV.

graypegg 27h ago on HN
Ayyy that's a much more articulate way to put what I was also thinking.

"Being constructed of text characters" is a very loose definition of ASCII art. Not to say it's not visually interesting, but just that it's on the far ends of the histogram of what people think of when they hear "ASCII art".

Personally, I think the fact this is relying on colour for contrast makes this feel more like a shader that quantizes the input into little dots that just happen to be 1 of 3 characters, than ASCII Art. It's a vague border between that and an ASCII shader, and then ASCII art, but there's definitely some measureable distance between those peaks.

wuliwong 26h ago on HN
What do you think they should have called it? Any suggestion that is an unfamiliar term would mean that almost nobody would have clicked on the link and therefore it would not have risen to the top of HN and therefore none of us would even know this exists. I think I think I can accept a loose definition of ASCII art for actually being able to see this page.

(=ᵔᗜᵔ=)

ghurtado 26h ago on HN
So your point is that it's cool to misrepresent what things actually are in order to promote them, because if you were honest about what it actually is, nobody would be interested?
graypegg 26h ago on HN
Nahhhh you don't need a new term. It's just like... on the fringes of what the term means.

I'd call it an "ASCII-Art inspired shader", but some % of people would look at it and immediately call it "ASCII Art" with no confusion. Some other % of people are also going to scoff at me saying it's "ASCII-Art inspired" at all.

Should mention, I have no issue with this little project! I'm just agreeing with the parent comment that this is just hinting at the limitations of ASCII art without actually working with them, in our opinion. Thinking about art being an important step in appreciating art, and all of that.

ghurtado 26h ago on HN
> affectation of technical austerity,

How does one learn to write like this? Damn.

reaperducer 24h ago on HN
How does one learn to write like this?

Read books. Actual books. The kind made from dead trees.

The more you read, the better you write. That's why our teachers drilled the importance of reading into us at such an early age.

watwut 9h ago on HN
But it was not a good expression or sign of a good writing.

I would not mind that much, but you are turning "reading a lot" into a cause of clunky writing. It is not so.

nicbou 18h ago on HN
Read and write a lot. Read from varied sources. Write every day, about different topics.

Look words up often, even when you think you know what they mean. Nowadays LLMs are really helpful dictionaries and reverse dictionaries too.

watwut 9h ago on HN
Reading a lot and writing a lot does not necessary leads to clunky unusual expressions. If you put a little effort in it, you can easily come up with more natural sounding expressions.
frabia 25h ago on HN
Agree, though that’s the current trend of UI design. As you expressed eloquently, the purpose is exactly that: to try to project some values previously attributed by these visuals (eg slow craft, effort) to today’s products.
dspillett 10h ago on HN
Agreed. It seems to be using a much more flexible set of colours than the two-shades-of-6-plus-black-white-and-2-greys limitation that some would expect even if allowing colour at all. And fully updating a full-screen of text like this to get the animated effect would create quite some flicker on a lot of hardware of the relevant eras (heck, also on some console/terminal apps now).

This is still very pretty though, and despite the above I do feel it gives off a good enough retro impression to elicit a pleasant nostalgia reaction.

ape4 8h ago on HN
Yeah, the webpage doesn't have the ASCII in it. It's images.
BugsJustFindMe 27h ago on HN
I see nothing being animated because my system is set to prefer reduced motion. That's a cool accommodation, but I wish at least the demo page made that more obvious.

Also, the art scenes section is not ASCII.

bas3line 26h ago on HN
Should be now fixed!
BugsJustFindMe 25h ago on HN
I see you added a button (thanks!), but that doesn't solve the information problem where the person won't know why it isn't working and that they need to click the button. I suggest a simple highlighted message right above or below the image. Your "holds the first frame for anyone who prefers reduced motion" blurb is _buried_, and in my case I didn't even know that I had that enabled.
thih9 27h ago on HN
“Scenes” look like some roundabout attempt at dithering - not what I expected.

The rest is also very maximalist and ornamental. I like them as animations but wouldn’t like them as part of UI or TUI.

melicerte 8h ago on HN
marinhero 27h ago on HN
I was mesmerized by the animation in https://omp.sh/ yesterday but this takes it to the next level. What makes something like this be prevalent now if ASCII has been around for so long? is it just the trend?
moritzwarhier 27h ago on HN
this is not ASCII, it looks like Unicode, but it's not even that, it's scripting and canvas rendering.

Text art itself is s prevalent because it borrows the appearance of careful crafting while it's generated by a program. Also, CLIs and text are more popular than GUIs these days, with many people.

Chat interfaces are almost like CLI! Markdown is getting more popular than binary Office text files!

Vibe coding with AI now commodifies the remaining manual steps: obtaining nice raster images, and feeding them into a text-art generator.

Or creating a script that renders them as dots on a canvas (what's done here).

ramblurr 27h ago on HN
It's definitely a trend. But it's also arguably not ASCII art. But maybe I'm just moving the goal posts.
ZeWaka 26h ago on HN
Your spinners page is vibrating extremely angrily: https://ascii.rest/spinners, also some other components like the progress bar - whenever width changes.
davidcollantes 26h ago on HN
It would be awesome to be able to create these. If author is around, would you consider a creation tool as well?
bas3line 26h ago on HN
Yes, I will take a look at this Thanks for the recommendation :D
burmask 26h ago on HN
I kept scrolling down and my amazement grew as I could see all fun the op had making this library. Split-flap [https://ascii.rest/split-flap/] is awesome. And the nature ones [https://ascii.rest/fern/] got me thinking I need a digital frame to display them on. Would be some cool wall art. This ASCII sets a relaxed mood - except for that vibrating spinners page @ZeWaka :). Thank you for your contribution op!
sosodev 26h ago on HN
Not ASCII and a lot of art looks off and has broken animations.

I’m not one to say that all AI art is slop, but there’s so little effort here. Why exactly are so many praising this?

katzenq 23h ago on HN
I don't understand the point of praising somebody for their 'great work' when they clearly did none of the work and love to brag about that fact, and everybody here is aware of that
smusamashah 26h ago on HN
This reminds of another awesome actually ASCII animation library https://play.ertdfgcvb.xyz/
arikwald 25h ago on HN
Beautiful! that's the true meaning of converting digits into art through custom algorithms. I reviewed the code and it's quite impressive. What I'm curious about is whether you had a predefined "bitmap-like" file which already contained all the values and then once loaded you applied the specific modification/animation algorithm to generate this unique effect. Reminds me the fascinating game graphics we had during the 80s on computers back then :). Yes back then I was fascinated with this kind of graphics, still am :)
5-0 25h ago on HN
For new/young people who might wonder why old geezers sound all gatekeepy, this is what "ASCII art" used to mean in the before times: https://asciiarena.se
cousin_it 25h ago on HN
This looks cool! I wonder if the same feeling can be achieved without a fixed grid though. Some kind of pointilist or halftone rendering, but with free positioning of points.
cush 24h ago on HN
That dithering is on point
bas3line 24h ago on HN
Thank you!
fsckboy 16h ago on HN
>Animated ASCII Art...

I deeply, deeply admire the ascii art

>...for Web Pages

No, we got rid of the <blink> tag for a reason

plus, ascii art rendered as images is not really ASCII art any more.

now lets talk about ANSI art: any DECUS heads here who can find the JACK.OFF file for me? I've tried finding it but it's nowhere I've looked. I first saw it at a Vax installation in '85. so good.

brunzema 14h ago on HN
super impressive, thank you and will adopt it for some easter eggs on my website!
karim79 9h ago on HN
What is the method to create these gorgeous scenes from source art/photography? Damn that's a rabbit hole I need to fall into.
zeroq 8h ago on HN
If you're asking about the ASCII alone then it's quite simple.

You resize the image to fit your text area dimension, then probe each pixel for luminance, and based on how bright the pixel is, you swap it for a ascii character that takes more or less space.

If you're asking about animation it's called color cycling and was quite popular back in the days where there was no space to pack a real animations: https://www.effectgames.com/demos/canvascycle/?sound=0

adamddev1 7h ago on HN
This is one of the most wonderful things I've seen on the internet in a long time.
shoknawe 7h ago on HN
Very cool! - I have Figlet configured to greet me when I open a term window, but this is so much more! Well done!
yipinwong 6h ago on HN
Looks so simple but yet beatiful as the creator has been consistenly been griding.
ralgo 5h ago on HN
Interesting work, are there any plans to extend it / tackle bigger concepts?
otistropo 3h ago on HN
I truely like the aesthetics so i manage to do it in plain C https://forge.heeboo.org/thunerbl/dotsaver

Comments are loaded live from Hacker News and are not stored by Mid or Real.