Add code-generated animations and build the gallery from public/

Each animation is its own file in gen/<subject>/<action>.js; npm run gen
renders the missing ones to public/ as webp + gif. The homepage grid is
now generated at build time by a small Vite plugin.

First four: ghost/float, heart/beat, cloud/rain, coffee/steam.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-22 19:28:07 +00:00
co-authored by Claude Opus 5.5
parent 9c9f796e97
commit ac5081d294
17 changed files with 1063 additions and 8 deletions
+5 -7
View File
@@ -13,7 +13,10 @@ h1{font-weight:400;font-size:clamp(22px,5vw,44px);line-height:1.2;margin:8px aut
p{font-size:clamp(16px,3vw,22px);margin-bottom:16px}
iframe{border:0;border-radius:6px;margin-bottom:28px}
main{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;max-width:1400px;margin:auto}
a{display:flex;align-items:center;justify-content:center;aspect-ratio:1}
figure>a{display:flex;align-items:center;justify-content:center;aspect-ratio:1}
figcaption{font-size:14px;margin-top:4px}
figcaption a{color:#888;text-decoration:none;margin:0 4px}
figcaption a:hover{color:#000;text-decoration:underline}
img{width:100%;height:100%;object-fit:contain}
@media(max-width:480px){main{grid-template-columns:repeat(3,1fr);gap:10px}}
</style>
@@ -23,12 +26,7 @@ img{width:100%;height:100%;object-fit:contain}
<p>feel free to hot link them</p>
<iframe src="https://github.com/sponsors/multipleof4/button" title="Sponsor multipleof4" height="32" width="114"></iframe>
<main>
<a href="/bird/wave.webp"><img src="/bird/wave.webp" alt="bird wave" width="256" height="256" loading="lazy" decoding="async"></a>
<a href="/cat/blink.webp"><img src="/cat/blink.webp" alt="cat blink" width="100" height="67" loading="lazy" decoding="async"></a>
<a href="/cat/tail.webp"><img src="/cat/tail.webp" alt="cat tail" width="256" height="171" loading="lazy" decoding="async"></a>
<a href="/cat/wink.webp"><img src="/cat/wink.webp" alt="cat wink" width="256" height="171" loading="lazy" decoding="async"></a>
<a href="/cat/tail.gif"><img src="/cat/tail.gif" alt="cat tail" width="120" height="90" loading="lazy" decoding="async"></a>
<a href="/heart/wink.gif"><img src="/heart/wink.gif" alt="heart wink" width="128" height="128" loading="lazy" decoding="async"></a>
<!--gallery-->
</main>
</body>
</html>