A developer reverse-engineered Claude AI's pixel mascot animations by slowing down social media clips, capturing frames, and rebuilding four animations from scratch using SVG, GSAP, and React. The breakdown covers four animations: Walking Claude (continuous GSAP tweens, clip masks, parabolic jump arcs), Flag Waver (hybrid sprite frames + GSAP transforms), Confetti Claude (three synchronized independent timelines), and Gym Claude (36 hand-drawn SVG frames with dynamic per-frame delays). Key techniques include clipPath for ground boundaries, svgOrigin pivoting for leg motion, sprite sheet frame sequencing, and carefully tuned easing values to replicate the weight and personality of the originals.
Sort: