Use VHS to create animated WebP images for quick tutorial (and possibly others)

[bep]

See https://github.com/charmbracelet/vhs

Asciicast was recently removed (I agree about that decision). Having some illustrative CLI animations does look good, though, and they have some documentation value.

I have tested VHS briefly and:

• It's a little bit of a hassle to install (Brew installed without hickups, but it seem to have lots of dependencies)
• The end result looks great.
• One great thing about it is that they're created from a simple text based DSL language, meaning it can be easily redone with new Hugo versions.

[knutov]

.gif are big and not scalable.

I think any solution with svg (as was discussed on #735) is much better.

[bep]

@knutov yea, well:

• I think VHS is about to support webp and the output I have tested has been on the small side.
• I don't find any actively maintained software that does this with SVG animation ...?

[jmooring]

The output is really nice. I futzed with the settings until I was mostly happy. These are the commands at the beginning of the Quick Start guide.

quickstart.tape

# Output
Output quickstart.gif
Output quickstart.mp4
Output quickstart.webm

# Settings
Set FontSize 24
Set Framerate 24
Set Height 800
Set Padding 36
Set Width 1200

# Commands
Type "hugo new site quickstart"
Sleep 1
Enter
Sleep 3

Type "cd quickstart"
Sleep 1
Enter
Sleep 2

Type "git init"
Sleep 1
Enter
Sleep 3

Type "git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke"
Sleep 1
Enter
Sleep 3

Type `echo "theme = 'ananke'" >> config.toml`
Sleep 1
Enter
Sleep 3

Type "hugo server"
Sleep 1
Enter

# Final pause
Sleep 5

quickstart.gif

Sizes

876K quickstart.gif
548K quickstart.mp4
448K quickstart.webm
1.6M quickstart.webp  --> used gif2web with default settings

I proportionally reduced the width, height, font size, and padding by 1/3 (final size 800x533):

564K quickstart.gif
400K quickstart.mp4
456K quickstart.webm

The text gets a bit fuzzy (maybe too fuzzy), but you certainly get some size reduction.

I really like that this is text driven.

[knutov]

I did the same recording with asciicinema for the test. Result file is only 24623 bytes. Link to recording - https://asciinema.org/a/548255

asciinema recording has huge advantages:

1. it can scale and always looks good
2. file is always small
3. it can be paused to view some moment on the screen
4. text from any screen of recording could be copy-and-pasted

asciinema-player.min.js + .css are about 200kb. So even with one recording on page asciinema version will be much smaller in bytes than gif file.

asciinema-player can be easy selfhosted, without full asciinema-server.

asciinema-player can be downloaded from release page, no needs to build it locally, low cost of maintaining.

The only way how it could be better is accept code from quickstart.tape file and record it via asciinema rec (not hard to implement with some scripting)