🐾 Interactive 2D Vector SVG Rig · 57 Traced Layers
AJ mascot lab.
Toggle animation states, switch 3/4 turnaround angles, test cursor pupil tracking, and inspect bone pivots.
Public Mode (Sign in to save D1 presets)Sign In→
state="idle-wave" · angle="three-quarter-right" · variant="full-body"
Purrfect code! 🐾
Move cursor to test clamped pupil tracking · Click AJ for WAAPI celebrate jumpClicks: 0 🐾
Generated Astro Component Usage
<AjAnimatedMascot state="idle-wave" variant="full-body" angle="three-quarter-right" mouth="smile-open" caption="Purrfect code! 🐾" />
1. Variant & Turnaround Angle
2. Animation States & Action Poses
6 Core Page-Context States
7 Extended Feline & Developer Poses
3. Mouth Visemes & One-Shot Actions
4. Saved Presets (Cloudflare D1)
3/4 Left & Right Turnaround Angles + Action Pose Gallery
Click any card below to load that exact angle and state into the live stage above.
Rigged Vector Bone Hierarchy (`#aj-rig`)
Hover or click any bone row below to highlight that bone group on the active stage.
| Bone Group ID | Pivot (`560x1030`) | Motion & Physics Role |
|---|---|---|
| #aj-headphones | 295px, 200px | 2px secondary spring lag on headband arch and earcups |
| #aj-ears-left | 165px, 225px | Left ear cone + pink inner ear independent twitch pivot |
| #aj-ears-right | 415px, 215px | Right ear cone + pink inner ear independent twitch pivot |
| #aj-eyes-group | 298px, 362px | Clamped rAF cursor pupil tracking + randomized double-blink |
| #aj-mouth | 388px, 505px | Switchable mouth visemes (smile-open, grin, surprised-o, talking) |
| #aj-head-group | 295px, 555px | Neck pivot for head tilt, 120 BPM nod, and scroll section glance |
| #aj-hex-tag | 340px, 585px | Overlapping pendulum swing on pastel-rainbow AJ collar tag |
| #aj-arm-right | 200px, 615px | Foreground left-side shoulder pivot (resting hip follow-through & cheer) |
| #aj-arm-left | 385px, 615px | Articulated waving, pointing, coding, and celebrating right-side arm |
| #aj-tail | 186px, 650px | Continuous sine-wave tail wag tucked along 3D shoulder/hip seam |
| #aj-torso | 295px, 725px | Smooth 3D pear-shaped torso + charcoal oval belly breathing loop |
| #aj-leg-left | 242px, 860px | Planted left hind leg squash-and-stretch pivot |
| #aj-leg-right | 342px, 855px | Planted right hind leg squash-and-stretch pivot |
| #aj-shadow | 300px, 1008px | Ground contact shadow scaling inversely with vertical bounce |
Full-Body vs. Head-Only Design System Rules
Canonical placement rules across Courses, Podcasts, Blog Posts, and Visual Diagrams.
| Variant | ViewBox | Canonical Placement |
|---|---|---|
| variant="full-body" | 0 0 560 1030 | Homepage Hero, Courses Path Milestones, About Hero, 404 Page, and `/mascot-lab` (`112px to 260px`). |
| variant="head" | 10 12 540 676 | Visual Diagram Header Cards, Agent AJ Chat Drawer Header, and inline Pro-Tip Callouts (`40px to 96px`). |
| <AjHeadphones /> | 0 0 276 275 | Static zero-JS emblem for Top Navbar Medallion, Footer Medallion, and OG Image Renderer (`24px to 40px`). |