cat3d

The low-poly green cat from the alxnko.dev desk, drawn by a dependency-free WebGL2 renderer with flat shading and one light. Its head eases toward your pointer, or your finger on touch screens.

live

the still fallback

The same pose as a still image. You get it when WebGL2 isn't available, when motion is reduced, when the browser asks to save data, or when loading fails. The cat is decorative (aria-hidden), so the fallback costs nothing.

what it costs

The renderer is about 2 KB gzipped (budget 3 KB), and the mesh is 7.8 KB (budget 10 KB). The poster is a 5 KB webp (budget 6 KB).
Nothing loads before the page is idle and the cat is near the screen; nothing redraws while the head is still.
No three.js: one small shader, and the mesh quantised to 16-bit positions.

use it

astro

---
// in an .astro page: server-rendered markup, no React shipped
import { Cat3D } from "@meowerse/ui/cat3d";
---
<Cat3D size={220} />
<script>
  import { attachAllCat3D } from "@meowerse/ui/cat3d/attach";
  requestIdleCallback(() => attachAllCat3D());
</script>