I thought somehow the animation was playing "by itself," but I guess it was accomplished by holding down the '.' key? The font code swaps a run of N dots with the glyph corresponding to the Nth frame of animation.
Obviously the thought comes up of the fact that this feels unsafe to have WASM in font files, but, I'm also aware that font layout engines are already turing complete, which leads me to wonder: have there been any high profile malware font examples? That entire stack feels a lot like an attack surface to me, especially given stuff like the fact that windows used to render fonts in the kernel layer.
The blog post talks a lot about how he got the frames into the font, but very little about how the animation works.<p>AFAICT this is how it is done (edit: I am wrong, it uses Wasm):<p>- The frames of the video are simply stored as glyphs in the font<p>- There is a ligature mapping for sequences of dots to glyphs (for example "." is mapped to glyph 1, ".." is mapped to glyph 2, "..." is mapped to glyph 3, etc.<p>- If you use the font in an editable part of the browser and hold the "." key pressed, dots get added by autorepeat and a growing a sequence of dots is inserted. This sequence of dots is converted by the font's ligature mapping to different animation frame glyphs, thus showing the animation.<p>I have no idea why WASM and HarfBuzz are needed (it should work in any modern browser without them), but it looks like a fun little experiment.
This reminds me of a torrent on Nyaa that implemented Bad Apple!! in ASS subtitles by retracing the frames into SVG (seems to be better quality than simply using potrace by itself), converting the SVGs into ASS Dialogue events, and muxing it into a Matroska container with a placeholder video. Therefore the "video" window can be resized without rescaling raster images (and it actually runs well on most hardware and players, unlike his other torrents putting whole anime episodes in subtitles). The subtitle attachment could also be extracted from the container and executed as a valid shell script which would run mpv or ffplay, use the respective options to create a libavfilter filter to create a blank video (to overlay the subtitles on), use its own filename for subtitles, and play the song by decoding and piping a base64 string at the bottom of the script to mpv/ffmpeg's stdin.
The post also links to some examples of using Wasm to solve complex typographical problems, which I found interesting.<p><a href="https://github.com/harfbuzz/harfbuzz-wasm-examples">https://github.com/harfbuzz/harfbuzz-wasm-examples</a>
Stupid question: Is this an entire blog post about an animated font without showing the animation in action, or does it simply not work on my device? (iOS 15) I’m not sure where to look.
Hey, I'm the person who made SmilApple (typo'd here as SmllApple)! Super great to see my quick and dirty project used like this, I just wish I'd thought of it first<p><a href="https://github.com/Eiim/SmilApple">https://github.com/Eiim/SmilApple</a>
Cool idea. Something very similar is possible without WASM in the font renderer. I remember a font that displayed its own size, so it changed zooming in and out. I think you could adapt that to play a short animation.
A bit offtopic: In principle I like the design of the bloc, but I recently searched for a technical-looking font that is not monospaced. I like the design of the blog, but reading prose in monospaced font is just not very pleasant I think. All (freely available) coding I found fonts only have monospaced variants and all non-monospaced fonts didn't look like coding fonts. Any ideas?
Stuff like this does get me excited, as a web developer who's always wanted to explore graphics but never really dipped into native development.<p>On the other hand, I know enough to know that Chromium uses Harfbuzz and Skia to render a webpage that, in itself, is going to use another instance of Harfbuzz and Skia to render into a canvas element. Intuitively, it feels dirty.