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

Show HN: Glorious Demo – Create animations for your code samples(glorious.codes)

135 points by Daktest 7 years ago | 15 comments

Walkman 7 years ago |

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

andrew_ 7 years ago | |

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

aminmemon 7 years ago | |

Asciinema looks fantastic.

mcphage 7 years 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.

lucasfcunha 7 years 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/

bastijn 7 years 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 7 years ago | | |

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

noxToken 7 years 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?

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

jtreminio 7 years ago |

Looks smooth!

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

ryanbertrand 7 years 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.

jdpigeon 7 years ago |

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

TekMol 7 years ago |

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

rcamargo 7 years ago | |

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

oliverx0 7 years ago |

Very good job!