menu
HomePostsGalleryToolsAbout
search
...
Posts/Series/Add a Cat Following the Mouse
Series · 02Add a Cat Following the Mouse
Series · 02In progress

Add a Cat Following the Mouse

Recreate the classic oneko.js sprite cat in React — sprite sheets, animation states, and smooth cursor tracking on the page.

javascriptcanvasanimation
0 / 6 chaptersStarted May 2026·May 26

For whom

Anyone curious about sprite animation and playful UI. Basic React knowledge is enough; we build step by step.

You'll learn

  • How sprite sheets and frame animation work
  • Tracking the cursor and picking animation states
  • Building a reusable React overlay component
  • Performance tips for always-on animations

Chapters

Click any chapter to preview →
01Sprite Sheet Anatomy6 min readNew
02Rendering the Cat on Canvas8 min read
03Cursor Tracking Math7 min read
04Animation State Machine10 min read
05React Component API9 min read
06
Polish & Edge Cases
6 min read