Show HN: Glorious Demo – Create animations for your code samples | Hacker News Reader

Show HN: Glorious Demo – Create animations for your code samples

glorious.codes

135 pointsDaktest15 comments

Or you can just literally record it with https://asciinema.org/ and embed like a video. The text will be selectable even!

And for added hotness around asciinema, try svg-term-cli. https://github.com/marionebl/svg-term-cli

Asciinema looks fantastic.

Maybe I'm missing something here, but it doesn't seem like it actually runs anything, it just has you provide "commands" and "responses", so you have to fake out your entire interaction. Which means that when you change something in your program's input or output, you'll need to manually edit the script, instead of being able to regenerate it.

This was my thought exactly. Also thought seeing 6 lines being typed was too much, got the feeling I wanted to close the page. Animation went too slow and didnt really add anything anymore at that point. The power of gif-based samples is for the range 1-3 sec gifs I'd say.

What this can provide over gifs, is accessibility, although I haven't checked it with a screen reader.

Most of the time that a demo is done where the presenter is typing, it feels like I'm better served by the result of the code itself than watching someone stand quietly, type, and frantically hit backspace to fix the errors. If the actual code is relevant, why not have the block above or below the demo to review it line by line?

I think the point it's not to run anything. It's just a pure HTML/CSS/JS way of providing an example of how a CLI might work on a landing page. You don't need to record or make the user load a gif/mp4.

Like this one for example https://wedeploy.com/

BTW, I didn't make this - I thought it was a really cool tool and wanted to share it.

Credit for this tool goes to Rafael Camargo:

https://glorious.codes/author

https://rafaelcamargo.com/?utm_source=glorious-codes&utm_med...

Looks smooth!

Similar tool would be https://asciinema.org/

This is super nice to look at. I think it’s acceptable for 1 line of code but watching 5 lines being typed out felt a bit extreme.

This will be perfect for an SDK developer onboarding electron app I'm building

What is the license? You should add it to the project.

Well noticed TekMol. Just added MIT license to the project. Thanks for your feedback!

Very good job!

Reply on news.ycombinator.com