Cattiva — A Café Website with a Live 3D Cat Who Watches You

A one-page café website built around one character: Signora Panna, a very fluffy, very unimpressed 3D cat who runs the espresso bar. She is a real 3D model, not a video, so she can look anywhere. Her eyes follow the visitor's cursor first and her head a beat later; when the cursor rests she turns her eyes on you with her head still turned away; get close to her face and she squints; click and she gives a slow blink back; drag and she turns round, then turns back to face the room. Shell fur, real eyeballs with lids and a breathing, tail-swaying idle make her feel alive, and the card pictures are rendered from the live model. Under her, the page is practical: the menu with prices and her paw ratings, house rules, hours and address, order-ahead pickup times, questions — all plain HTML that works without the model. English and Korean pages with SEO built in, a lighter fur budget on phones and drag that never blocks scrolling. The kit holds the React + Vite + three.js source, a built copy, English and Korean blueprints, the rigged GLB, and the Meshy prompt and Blender scripts to make your own mascot. Cattiva and its cat are fictional.

Stack

React 19 · Vite 8 · Tailwind 4 · three.js

3D

Meshy image-to-3D → Blender rig (head, tail, eye anchors, fur mask) → live shell fur, eyeballs and lids

Motion

Cursor gaze (eyes lead, head follows) · side-eye · squint · slow blink · drag to turn

Languages

English + Korean

Kit

Source · build · EN/KO blueprint · rigged GLB · Meshy + Blender workflow