Sprite-Based Mascot Animations Integration Into Educational Chess Website

I’m upgrading the reward experience on my chess site for students age 8-14 and need help bringing a set of animations to life. The sprite sheets for every character are complete; what’s missing is the front-end logic that moves each mascot smoothly through walking, jumping and rolling states, then lets me reuse that same logic for future characters with minimal effort. There are several places on my site I would like the characters to appear so they will need to be integrated into the existing code for the pages.

Here’s what I need from you:

• Build a lightweight animation system that swaps sprite frames to produce fluid walking, jumping and rolling cycles, triggered by simple DOM events.
• Wrap the solution in a clean TypeScript module or other component so I can drop in new sprites and instantly get the same behavior.
• Plug the new system into the existing reward flow so the mascots appear at the right moments without breaking current UI, game mechanics or my back-end APIs.
• Refactor any surrounding code that gets in the way of smooth integration—my priority is the animation upgrade, but I’ll green-light small UI tweaks if they reduce tech debt.
• Coordinate with my back-end developer for data hooks, auth checks and deployment steps.

Tech expectations
Core: DOM manipulation, TypeScript, JavaScript, modern CSS.
Nice-to-haves: snabbdom, SCSS, Phaser, ScalaTags or any frame-based animation tricks you like—there’s no strict library mandate, so use what lets you ship stable, readable code fastest.

Acceptance Criteria
1. Each mascot can enter and exit various animations such as walking, jumping and rolling on demand with no dropped frames across modern browsers.
2. Adding a new character requires only swapping sprite assets and updating a JSON config or similar—no major code rewrites.
3. Existing site pages load and perform as before, Lighthouse performance unaffected.
4. All code is typed, commented and arrives via a pull request I can review.

This is the first of many projects I have in mind!