> Canonical URL: https://codingcat.dev/mascot-lab

# AJ Mascot Lab & Vector Bone Rig Inspector | CodingCat.dev

🐾 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→](/sign-in?redirect=/mascot-lab)state="idle-wave" · angle="three-quarter-right" · variant="full-body"Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾Purrfect code! 🐾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

Show 14 Bone Pivot Crosshairs

## 2. Animation States & Action Poses

6 Core Page-Context States7 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.

angle="three-quarter-left | three-quarter-right"

## Rigged Vector Bone Hierarchy (`#aj-rig`)

Hover or click any bone row below to highlight that bone group on the active stage.

Bone Group IDPivot (`560x1030`)Motion & Physics Role#aj-headphones295px, 200px2px secondary spring lag on headband arch and earcups#aj-ears-left165px, 225pxLeft ear cone + pink inner ear independent twitch pivot#aj-ears-right415px, 215pxRight ear cone + pink inner ear independent twitch pivot#aj-eyes-group298px, 362pxClamped rAF cursor pupil tracking + randomized double-blink#aj-mouth388px, 505pxSwitchable mouth visemes (smile-open, grin, surprised-o, talking)#aj-head-group295px, 555pxNeck pivot for head tilt, 120 BPM nod, and scroll section glance#aj-hex-tag340px, 585pxOverlapping pendulum swing on pastel-rainbow AJ collar tag#aj-arm-right200px, 615pxForeground left-side shoulder pivot (resting hip follow-through & cheer)#aj-arm-left385px, 615pxArticulated waving, pointing, coding, and celebrating right-side arm#aj-tail186px, 650pxContinuous sine-wave tail wag tucked along 3D shoulder/hip seam#aj-torso295px, 725pxSmooth 3D pear-shaped torso + charcoal oval belly breathing loop#aj-leg-left242px, 860pxPlanted left hind leg squash-and-stretch pivot#aj-leg-right342px, 855pxPlanted right hind leg squash-and-stretch pivot#aj-shadow300px, 1008pxGround 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.

VariantViewBoxCanonical Placementvariant="full-body"0 0 560 1030Homepage Hero, Courses Path Milestones, About Hero, 404 Page, and `/mascot-lab` (`112px to 260px`).variant="head"10 12 540 676Visual Diagram Header Cards, Agent AJ Chat Drawer Header, and inline Pro-Tip Callouts (`40px to 96px`).<AjHeadphones />0 0 276 275Static zero-JS emblem for Top Navbar Medallion, Footer Medallion, and OG Image Renderer (`24px to 40px`).