How to Hallucinate using Web Components

Say, you want the smooth convenience of consuming content that feels like it’s generated in real time without having to deal with the tradeoffs of a Large Language Model née Artificial Intelligence.

Why not use animation? It’s the perfect metaphor for a Hollywood-esque veneer of complexity without substance, in no way similar to how an entire industry is currently being oversold and at no risk of imminent collapse.

This approach animates each blog post’s content (already generated by a human, manually) progressively to emulate existing chatbox user experience patterns for hallucinating text. You can try it out right now by hitting the Hallucinate toggle above.

How does it work?

This makes use of the <squirm-inal> Web Component, originally for Netlify’s Your Year on Netlify microsite and using lessons learned from Queue Code (a way to live code without live coding).

// It works with any arbitrary HTML content
// including this syntax highlighted code block
"use AI"

To implement this yourself, just wrap any arbitrary content (say <main>) in a newly created <squirm-inal autoplay speed="0.6"> element and you’re off to the races.

<script
	src="https://unpkg.com/@zachleat/squirminal@3.0.1/squirminal.js"
	integrity="sha384-m+pplzdzdfZuwjyxmM9pOkp/ALfMMjZll/b2g2mR6mhurvj1ZZAe8xXNj7BSp4XM"
	crossorigin="anonymous"></script>
<script type="module">
let main = document.querySelector("main");
let squirm = document.createElement("squirm-inal");
squirm.setAttribute("speed", "0.6");
squirm.setAttribute("autoplay", "");
squirm.append(...main.children);
main.append(squirm);
</script>

You could swap the <script src> above to use import() instead but that would remove the option for subresource integrity (always important for CDN use).

That’s it!