chore: use vhs to create demo.gif (#390)

The bug that prevented braille rendering is fixed, so switch to VHS for
rendering the demo gif

![Demo of Ratatui](https://vhs.charm.sh/vhs-tF0QbuPbtHgUeG0sTVgFr.gif)

README.md

@@ -16,7 +16,7 @@ Status](https://deps.rs/repo/github/ratatui-org/ratatui/status.svg?style=flat-sq
 [![Discord](https://img.shields.io/discord/1070692720437383208?label=discord&logo=discord&style=flat-square)](https://discord.gg/pMCEU9hNEj)
 
 <!-- See RELEASE.md for instructions on creating the demo gif --->
-![Demo of Ratatui](https://github.com/ratatui-org/ratatui/assets/24392180/93ab0e38-93e0-4ae0-a31b-91ae6c393185)
+![Demo of Ratatui](https://vhs.charm.sh/vhs-tF0QbuPbtHgUeG0sTVgFr.gif)
 
 <details>
 <summary>Table of Contents</summary>

RELEASE.md

@@ -3,22 +3,16 @@
 [crates.io](https://crates.io/crates/ratatui) releases are automated via [GitHub
 actions](.github/workflows/cd.yml) and triggered by pushing a tag.
 
-1. Record a new demo gif. The preferred tool for this is [ttyrec](http://0xcc.net/ttyrec/) and
+1. Record a new demo gif if necessary. The preferred tool for this is
-   [ttygif](https://github.com/icholy/ttygif). [Asciinema](https://asciinema.org/) handles block
+[vhs](https://github.com/charmbracelet/vhs) (installation instructions in README).
-   character height poorly, [termanilizer](https://www.terminalizer.com/) takes forever to render,
-   [vhs](https://github.com/charmbracelet/vhs) handles braille
-   characters poorly (though if <https://github.com/charmbracelet/vhs/issues/322> is fixed, then
-   it's probably the best option).
 
    ```shell
    cargo build --example demo
-   ttyrec -e 'cargo --quiet run --release --example demo -- --tick-rate 100' demo.rec
+   vhs examples/demo.tape --publish --quiet
-   ttygif demo.rec
    ```
 
-   Then upload it somewhere (e.g. use `vhs publish tty.gif` to publish it or upload it to a GitHub
+   Then update the link in the [examples README](./examples/README) and the main README. Avoid
-   wiki page as an attachment). Avoid adding the gif to the git repo as binary files tend to bloat
+   adding the gif to the git repo as binary files tend to bloat repositories.
-   repositories.
 
 1. Bump the version in [Cargo.toml](Cargo.toml).
 1. Bump versions in the doc comments of [lib.rs](src/lib.rs).

examples/README.md

@@ -6,6 +6,18 @@ VHS has a problem rendering some background color transitions, which shows up in
 below. See <https://github.com/charmbracelet/vhs/issues/344> for more info. These problems don't
 occur in a terminal.
 
+## Demo ([demo.rs](./demo/))
+
+This is the demo example from the main README. It is available for each of the backends.
+
+```shell
+cargo run --example=demo --features=crossterm
+cargo run --example=demo --no-default-features --features=termion
+cargo run --example=demo --no-default-features --features=termwiz
+```
+
+![Demo][demo.gif]
+
 ## Barchart ([barchart.rs](./barchart.rs)
 
 ```shell
@@ -211,6 +223,7 @@ done
 [chart.gif]: https://vhs.charm.sh/vhs-zRzsE2AwRixQhcWMTAeF1.gif
 [colors.gif]: https://vhs.charm.sh/vhs-2ZCqYbTbXAaASncUeWkt1z.gif
 [custom_widget.gif]: https://vhs.charm.sh/vhs-32mW1TpkrovTcm79QXmBSu.gif
+[demo.gif]: https://vhs.charm.sh/vhs-tF0QbuPbtHgUeG0sTVgFr.gif
 [gauge.gif]: https://vhs.charm.sh/vhs-2rvSeP5r4lRkGTzNCKpm9a.gif
 [hello_world.gif]: https://vhs.charm.sh/vhs-3CKUwxFuQi8oKQMS5zkPfQ.gif
 [inline.gif]: https://vhs.charm.sh/vhs-miRl1mosKFoJV7LjjvF4T.gif

examples/demo.tape

@@ -0,0 +1,18 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/block.tape`
+Output "target/demo.gif"
+Set Theme "OceanicMaterial"
+Set Width 1200
+Set Height 1200
+Set PlaybackSpeed 0.5
+Hide
+Type "cargo run --example demo"
+Enter
+Sleep 2s
+Show
+Sleep 1s
+Down@1s 12
+Right
+Sleep 4s
+Right
+Sleep 4s

src/lib.rs

@@ -3,7 +3,7 @@
 //! [ratatui](https://github.com/ratatui-org/ratatui) is a library used to build rich
 //! terminal users interfaces and dashboards.
 //!
-//! ![](https://raw.githubusercontent.com/ratatui-org/ratatui/master/assets/demo.gif)
+//! ![Demo](https://vhs.charm.sh/vhs-tF0QbuPbtHgUeG0sTVgFr.gif)
 //!
 //! # Get started
 //!