DEV Community

Cover image for Retro Vibes: ASCII Hot Coffee Animation in (Node.js)
Bek Brace
Bek Brace

Posted on

Retro Vibes: ASCII Hot Coffee Animation in (Node.js)

Written by Amir - @bekbrace

Hey everyone! It's Amir here, aka Bek Brace.
Today, I want to share something really fun and nostalgic that I recently createdβ€”a retro ASCII animation featuring a steaming cup of coffee. If you're a fan of retro computing and love coffee as much as I do, then this is for you!

The Inspiration

I've always been fascinated by the simplicity and charm of ASCII art. It takes me back to the good old days when computers were a bit more basic but equally fascinating. Combining that love for retro aesthetics with my daily fuelβ€”coffeeβ€”I came up with a simple yet delightful ASCII animation.

The Animation

The animation shows a steaming cup of coffee with "Bek Brace" proudly displayed above it. The steam rises and falls, simulating the cozy feeling of enjoying a hot cup of coffee while coding away.
Try it yourself:

Breaking It Down

Frames Array:

This array contains the different frames of the coffee cup with rising steam. Each frame is a snapshot of the cup in different states to create the illusion of movement.

Animation Loop:

The setInterval function cycles through these frames every 500 milliseconds, clearing the console and printing the next frame to create a smooth animation.

Conclusion

This little project was not just fun to create but also a perfect blend of my love for retro computing and coffee. I hope you enjoy it as much as I did making it. Feel free to tweak it, add your own spin, and share your versions!

Stay caffeinated and keep coding, friends!

About the Author

Hey, I'm Amir, but you might know me as Bek Brace.
I'm passionate about all things coding and have a soft spot for retro tech. Follow my journey as I explore programming, sip on endless cups of coffee, and share fun projects like this one!
You can also follow me on social media:
𝕏: https://twitter.com/BekBrace
IG: https://www.instagram.com/bek_brace/
tiktok: https://www.tiktok.com/@bekbrace

Top comments (6)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Hey, interesting idea! It would have been pretty cool that you would have added this in NPM so we could see this with the terminal using NPX.

Collapse
 
bekbrace profile image
Bek Brace

This is an awesome idea, Rodrigo !!
I will do it and make another video/post and you'll be updated on this one :)
Thanks again for your idea !

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Let me know then!

Thread Thread
 
bekbrace profile image
Bek Brace • Edited

npm i bektux
that's a different animation, you'll get the package.json, but I'm not sure what should happen next

Thread Thread
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

Hey! I already checked the code and tested that on my terminal! Cool duck animation. Hey, would you like to connect through X (Twitter)? @schemetastic

Thread Thread
 
bekbrace profile image
Bek Brace

Awesome!
Sure :)