<click-to-play> — a still that plays

Simon Willison's Blog Tools
web-component progressive-enhancement gif click-to-play frontend performance

Summary

A progressive enhancement Web Component that turns a GIF link into a still frame with a click-to-play button, reducing unnecessary GIF loads.

No content available
Original Article
View Cached Full Text

Cached at: 06/17/26, 07:36 AM

# Tool: <click-to-play> — a still that plays Source: [https://simonwillison.net/2026/Jun/17/click-to-play-component/](https://simonwillison.net/2026/Jun/17/click-to-play-component/) 17th June 2026 [Tool](https://simonwillison.net/elsewhere/tool/)[<click\-to\-play\> — a still that plays](https://tools.simonwillison.net/click-to-play-component) A progressive enchantment Web Component that turns this markup: ``` <click-to-play> <a href="URL to GIF"> <img src="URL to first frame" alt="..."> </a> </click-to-play> ``` Into a still frame with a click to play button which loads the GIF on demand\. For when you don't want big GIFs to be loaded unless people want to play them\. Here's[an example](https://simonwillison.net/2026/Jun/16/datasette/)that demonstrates the new row editing tools in Datasette \- in fact I built this Web Component for that post\. Posted[17th June 2026](https://simonwillison.net/2026/Jun/17/)at 3:56 am

Similar Articles

@VincentLogic: In the past, when doing frontend work, I used to either hunt around for GIFs or write CSS until my head ached just to create a loading animation. Recently I came across this open-source library math-curve-loaders, which generates animations purely using mathematical formulas. I took a look — rose curves, Lissajous curves, and other mathematical figures produce extremely elegant animations. Pure HT…

X AI KOLs Timeline

Introduces an open-source frontend library called math-curve-loaders that utilizes mathematical formulas (such as rose curves and Lissajous curves) to generate elegant loading animations. It is implemented purely with HTML+CSS, has zero dependencies, and comes with a visual debugging panel that allows real-time parameter adjustments and one-click code copying.

Pong in S Favicon

Hacker News Top

A full Pong game is playing in the browser tab's favicon; scroll up and down to move the paddle, and the score is shown in the tab title.

heygen-com/hyperframes

GitHub Trending (daily)

HyperFrames is an open-source framework that converts HTML, CSS, and animations into MP4 videos, designed for use by AI coding agents and developers via CLI or integrated skills.