Bad Apple ASCII Animation

Demo

Explanation

Per a conversation on the HTMX meme discord channel there was an offhand remark about adding the Bad Apple Music video as a benchmark. Thought it’d be fun to do so.

We take the already converted frames of video and turn them into a ZSTD compressed Gob file that’s embedded in the server binary. This makes the whole animation about 1.9MB. We then stream the frames to the client and update the contents of a pre tag with the frames. The percentage is updated with the current frame number.

Code

<div
  id="contents"
  data-store="{_contents: 'bad apple frames go here', percentage: 0}"
  data-on-load="$$get('/examples/bad_apple/updates')"
>
  <div>
    <input type="range" min="1" max="100" data-model="percentage" disabled />
    <div><span data-text="$percentage.toFixed(2)"></span>%</div>
  </div>
  <div>
    <pre data-text="$_contents"></pre>
  </div>
</div>

Note

This is using Datastar’s ability to patch signal directly. No need to generate html fragments, as the contents are already bound to existing elements.

We could also stream down the raster frames using base64 encoded images and update the src of an image tag. Either way works, you would just have to use data-bind-src on an image tag.

Open your DevTool’s Elements tab for the contents of the pre tag. You’ll see the frames being updated in real-time (in this case 30fps).