5 ms·

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

135 points by Daktest 8y ago

jtreminio 8y ago
Looks smooth! Similar tool would be https://asciinema.org/ https://asciinema.org/
oliverx0 8y ago
Very good job!
Daktest 8y ago
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://glorious.codes/author https://rafaelcamargo.com/?utm_source=glorious-codes&utm_medium=author https://rafaelcamargo.com/?utm_source=glorious-codes&utm_med...
- deleted 8y ago
  [deleted]
imdyingboys 8y ago
I really like this. I'm constantly trying to explain how programs work to my boss who doesn't know much more than how to declare variables...
jdpigeon 8y ago
This will be perfect for an SDK developer onboarding electron app I'm building
mcphage 8y ago
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.
- bastijn 8y ago
  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.
  - bigblind 8y ago
    What this can provide over gifs, is accessibility, although I haven't checked it with a screen reader.
- noxToken 8y ago
  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?
- lucasfcunha 8y ago
  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/ https://wedeploy.com/
Walkman 8y ago
Or you can just literally record it with https://asciinema.org/ https://asciinema.org/ and embed like a video. The text will be selectable even!
- andrew_ 8y ago
  And for added hotness around asciinema, try svg-term-cli. https://github.com/marionebl/svg-term-cli https://github.com/marionebl/svg-term-cli
- aminmemon 8y ago
  Asciinema looks fantastic.
ryanbertrand 8y ago
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.
TekMol 8y ago
What is the license? You should add it to the project.
- rcamargo 8y ago
  Well noticed TekMol. Just added MIT license to the project. Thanks for your feedback!

135 points by Daktest 8y ago

jtreminio 8y ago

Looks smooth! Similar tool would be https://asciinema.org/ https://asciinema.org/

oliverx0 8y ago

Very good job!

Daktest 8y ago

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://glorious.codes/author https://rafaelcamargo.com/?utm_source=glorious-codes&utm_medium=author https://rafaelcamargo.com/?utm_source=glorious-codes&utm_med...

deleted 8y ago
[deleted]

imdyingboys 8y ago

I really like this. I'm constantly trying to explain how programs work to my boss who doesn't know much more than how to declare variables...

jdpigeon 8y ago

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

mcphage 8y ago

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.

bastijn 8y ago
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.
- bigblind 8y ago
  What this can provide over gifs, is accessibility, although I haven't checked it with a screen reader.
noxToken 8y ago
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?
lucasfcunha 8y ago
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/ https://wedeploy.com/

Walkman 8y ago

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

andrew_ 8y ago
And for added hotness around asciinema, try svg-term-cli. https://github.com/marionebl/svg-term-cli https://github.com/marionebl/svg-term-cli
aminmemon 8y ago
Asciinema looks fantastic.

ryanbertrand 8y ago

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.

TekMol 8y ago

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

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