The low-poly green cat from the alxnko.dev desk: a still poster first, then a tiny WebGL2 renderer whose head follows the pointer.
import { Cat3D } from "@meowerse/ui/cat3d"; · source packages/ui/src/cat3d/Cat3D.tsx
variants and states
the poster — it comes alive on /ui/cat3d/ and on the home page
props
prop
type
default
required
size
number the poster's width and height, in pixels.
160
no
className
string extra class names to append.
—
no
css custom properties
Its rules use no custom properties.
Classes: .mw-cat3d. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
the poster
tsx
import { Cat3D } from "@meowerse/ui/cat3d";
<Cat3D size={160} />
accessibility
Decorative: aria-hidden, with nothing focusable, so a failure costs nothing.
Reduced motion, save-data, no WebGL2 or a failed load all keep the still image.
do and don't
[ ok ] do
Render its markup on the server and call attachAllCat3D() from a small script, or use <Cat3D> in a React island.
