@dotcraft/avatar 0.6.4 → 0.6.5

package/src/composer/styles/idle.css

@@ -2,74 +2,84 @@
   opacity: 0;
 }
 
-.composer-mascot-active-idle .composer-mascot-motion {
+/* A trip heads `--mascot-idle-dir`; each leg moves along `--mascot-idle-travel-sign` (left is -1). */
+.composer-mascot-active-idle {
+  --mascot-idle-dir: -1;
+  --mascot-idle-travel-sign: -1;
+}
+
+.composer-mascot-active-idle[data-mascot-idle-direction='right'] {
+  --mascot-idle-dir: 1;
+}
+
+.composer-mascot-active-idle[data-mascot-idle-travel='right'] {
+  --mascot-idle-travel-sign: 1;
+}
+
+.composer-mascot-active-idle .composer-mascot-stage {
+  position: relative;
   top: 0;
   left: 0;
 }
 
-.composer-mascot-active-idle[data-mascot-idle-phase='away'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-idle-phase='away'] .composer-mascot-body {
   animation: none;
   transform: scale(1);
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='away'] .composer-mascot-motion,
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-motion {
-  left: -210px;
+/* The stage parks at the far end in its own (possibly scaled) space while the travel layer rests at zero. */
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='away'] .composer-mascot-stage,
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-stage {
+  left: calc(280px * var(--mascot-idle-stage-scale, 1) * var(--mascot-idle-dir, -1));
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='away'] .composer-mascot-motion,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion {
-  left: -220px;
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='away'] .composer-mascot-stage,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-stage {
+  left: calc(293.33px * var(--mascot-idle-stage-scale, 1) * var(--mascot-idle-dir, -1));
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-motion,
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-motion {
-  top: -96px;
-  left: -150px;
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-stage,
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-stage {
+  top: calc(-128px * var(--mascot-idle-stage-scale, 1));
+  left: calc(200px * var(--mascot-idle-stage-scale, 1) * var(--mascot-idle-dir, -1));
 }
 
-.composer-mascot-active-idle .composer-mascot-motion > div:first-child,
-.composer-mascot-active-idle .composer-mascot-motion > div:first-child > div:first-child,
-.composer-mascot-active-idle .composer-mascot-breathe {
+.composer-mascot-active-idle .composer-mascot-travel,
+.composer-mascot-active-idle .composer-mascot-lift,
+.composer-mascot-active-idle .composer-mascot-body {
   transform-origin: bottom center;
   will-change: transform;
 }
 
-.composer-mascot-active-idle .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle .composer-mascot-travel {
+  position: relative;
+}
+
+.composer-mascot-active-idle .composer-mascot-lift {
   position: relative;
   z-index: 1;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child,
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-travel,
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-travel {
   --mascot-hop-compress-y: 0.82px;
   --mascot-hop-apex-y: -11.44px;
   --mascot-hop-fall-y: -2.86px;
   --mascot-hop-land-y: 0.41px;
+  --mascot-hop-distance: calc(280px * var(--mascot-idle-travel-sign, -1));
+  --mascot-hop-x-1: calc(70px * var(--mascot-idle-travel-sign, -1));
+  --mascot-hop-x-2: calc(140px * var(--mascot-idle-travel-sign, -1));
+  --mascot-hop-x-3: calc(210px * var(--mascot-idle-travel-sign, -1));
   animation: composer-mascot-idle-hop-travel 2.4s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child {
-  --mascot-hop-distance: -280px;
-  --mascot-hop-x-1: -70px;
-  --mascot-hop-x-2: -140px;
-  --mascot-hop-x-3: -210px;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
-  --mascot-hop-distance: 280px;
-  --mascot-hop-x-1: 70px;
-  --mascot-hop-x-2: 140px;
-  --mascot-hop-x-3: 210px;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-breathe,
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-body,
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-body {
   animation: composer-mascot-idle-hop-body 600ms linear 4;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'] .composer-mascot-motion > div:first-child::before,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'] .composer-mascot-motion > div:first-child::before {
+.composer-mascot-active-idle[data-mascot-active-idle='hop'] .composer-mascot-travel::before,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'] .composer-mascot-travel::before {
   content: '';
   position: absolute;
   bottom: -1px;
@@ -85,8 +95,8 @@
   transform-origin: center;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child::before,
-.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child::before {
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='outbound'] .composer-mascot-travel::before,
+.composer-mascot-active-idle[data-mascot-active-idle='hop'][data-mascot-idle-phase='inbound'] .composer-mascot-travel::before {
   animation: composer-mascot-idle-hop-shadow 600ms ease-in-out 4;
 }
 
@@ -115,48 +125,40 @@
   90% { opacity: 0.76; transform: translateX(-50%) scaleX(1.12); }
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-travel,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-travel {
   --mascot-rocket-apex-y: -66.99px;
   --mascot-rocket-crouch-y: 1.23px;
   --mascot-rocket-air-y: -2.04px;
   --mascot-rocket-approach-y: -0.82px;
   --mascot-rocket-rebound-y: -1.23px;
+  --mascot-flight-distance: calc(293.33px * var(--mascot-idle-travel-sign, -1));
+  --mascot-rocket-tilt: calc(8deg * var(--mascot-idle-travel-sign, -1));
   animation: composer-mascot-idle-rocket-flight-x 1.8s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child {
-  --mascot-flight-distance: -293.33px;
-  --mascot-rocket-tilt: -8deg;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
-  --mascot-flight-distance: 293.33px;
-  --mascot-rocket-tilt: 8deg;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child > div:first-child,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-lift,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-lift {
   animation: composer-mascot-idle-rocket-flight-y 1.8s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-breathe,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-body,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-body {
   animation: composer-mascot-idle-rocket-body 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child::before,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child::before {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-travel::before,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-travel::before {
   animation: composer-mascot-idle-flight-shadow 1.8s ease-in-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'] .composer-mascot-jelly {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'] .composer-mascot-trail {
   position: relative;
   isolation: isolate;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-jelly::before,
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-jelly::before {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-trail::before,
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-trail::before {
   content: '';
   position: absolute;
   top: 17px;
@@ -169,7 +171,8 @@
   animation: composer-mascot-idle-rocket-trail 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='outbound'] .composer-mascot-jelly::before {
+/* The exhaust streams behind the leg's direction of travel. */
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-travel='left'] .composer-mascot-trail::before {
   left: calc(100% - 2px);
   background:
     linear-gradient(90deg, #f5f7fa, #8fa5ff 28%, transparent 100%) 0 1px / 34px 2px no-repeat,
@@ -178,7 +181,7 @@
   transform-origin: left center;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-phase='inbound'] .composer-mascot-jelly::before {
+.composer-mascot-active-idle[data-mascot-active-idle='rocket'][data-mascot-idle-travel='right'] .composer-mascot-trail::before {
   right: calc(100% - 2px);
   background:
     linear-gradient(90deg, transparent 0%, #8fa5ff 72%, #f5f7fa 100%) 100% 1px / 34px 2px no-repeat,
@@ -224,77 +227,78 @@
   86%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1.12); }
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child {
-  --mascot-hover-x: -200px;
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-travel {
+  --mascot-hover-x: calc(200px * var(--mascot-idle-travel-sign, -1));
   --mascot-hover-y: -128px;
   animation: composer-mascot-idle-hover-rise-x 1.8s cubic-bezier(0.26, 0.55, 0.24, 1) forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-lift {
   animation: composer-mascot-idle-hover-rise-y 1.8s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-lift {
   animation: composer-mascot-idle-hover-float 2.8s ease-in-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child {
-  --mascot-hover-x: 200px;
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-travel {
+  --mascot-hover-x: calc(200px * var(--mascot-idle-travel-sign, -1));
   --mascot-hover-y: 128px;
   animation: composer-mascot-idle-hover-return-x 1.8s cubic-bezier(0.38, 0.04, 0.34, 1) forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-motion > div:first-child > div:first-child {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-lift {
   animation: composer-mascot-idle-hover-return-y 1.8s linear forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-body {
   animation: composer-mascot-idle-hover-launch-body 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-body {
   animation: composer-mascot-idle-hover-hold-body 2.8s ease-in-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-breathe {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-body {
   animation: composer-mascot-idle-hover-land-body 1.8s ease-in forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-jelly {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-trail {
   animation: composer-mascot-idle-hover-scan-body 2.8s ease-in-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-jelly {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-trail {
   position: relative;
   isolation: isolate;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-jelly::before {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-trail::before {
   content: '';
   position: absolute;
   top: 16px;
-  left: 40px;
   z-index: 1;
   width: 58px;
   height: 32px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* The side jet fires against the leg's direction of travel. */
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-travel='left'] .composer-mascot-trail::before {
+  --mascot-idle-jet-tilt: 22deg;
+  left: 40px;
   background:
     linear-gradient(90deg, #f8fbff 0%, #9fb5ff 28%, transparent 94%) 0 3px / 42px 3px no-repeat,
     linear-gradient(90deg, #f8fbff 0%, #7894f8 26%, transparent 96%) 0 14px / 58px 3px no-repeat,
     linear-gradient(90deg, #dce6ff 0%, #6f8cf5 32%, transparent 94%) 0 25px / 34px 3px no-repeat;
   filter: drop-shadow(6px 3px 5px color-mix(in srgb, #6f8dff 54%, transparent));
-  opacity: 0;
-  pointer-events: none;
   transform: rotate(22deg) scaleX(0.18);
   transform-origin: left center;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-jelly::before {
-  animation: composer-mascot-idle-hover-side-jet-launch 1.8s ease-out forwards;
-}
-
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-jelly::before {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-travel='right'] .composer-mascot-trail::before {
+  --mascot-idle-jet-tilt: -18deg;
   right: 40px;
-  left: auto;
   background:
     linear-gradient(90deg, transparent 6%, #9fb5ff 72%, #f8fbff 100%) 100% 3px / 42px 3px no-repeat,
     linear-gradient(90deg, transparent 4%, #7894f8 74%, #f8fbff 100%) 100% 14px / 58px 3px no-repeat,
@@ -302,10 +306,17 @@
   filter: drop-shadow(-5px 3px 5px color-mix(in srgb, #6f8dff 54%, transparent));
   transform: rotate(-18deg) scaleX(0.18);
   transform-origin: right center;
+}
+
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-trail::before {
+  animation: composer-mascot-idle-hover-side-jet-launch 1.8s ease-out forwards;
+}
+
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-trail::before {
   animation: composer-mascot-idle-hover-side-jet-return 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-jelly::after {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'] .composer-mascot-trail::after {
   content: '';
   position: absolute;
   top: 46px;
@@ -327,15 +338,15 @@
   transform-origin: top center;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-jelly::after {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='outbound'] .composer-mascot-trail::after {
   animation: composer-mascot-idle-hover-bottom-handoff 1.8s ease-out forwards;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-jelly::after {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='away'] .composer-mascot-trail::after {
   animation: composer-mascot-idle-hover-bottom-hold 360ms ease-in-out infinite;
 }
 
-.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-jelly::after {
+.composer-mascot-active-idle[data-mascot-active-idle='hover'][data-mascot-idle-phase='inbound'] .composer-mascot-trail::after {
   animation: composer-mascot-idle-hover-bottom-return 1.8s linear forwards;
 }
 
@@ -373,9 +384,9 @@
 @keyframes composer-mascot-idle-hover-launch-body {
   0% { transform: translateY(0) scale(1); }
   10% { transform: translateY(2px) scale(1.12, 0.82); }
-  22% { transform: translateY(-3px) rotate(-8deg) scale(0.94, 1.09); }
-  72% { transform: translateY(-2px) rotate(-5deg) scale(0.98, 1.035); }
-  90% { transform: translateY(1px) rotate(-2deg) scale(1.02, 0.98); }
+  22% { transform: translateY(-3px) rotate(calc(8deg * var(--mascot-idle-travel-sign, -1))) scale(0.94, 1.09); }
+  72% { transform: translateY(-2px) rotate(calc(5deg * var(--mascot-idle-travel-sign, -1))) scale(0.98, 1.035); }
+  90% { transform: translateY(1px) rotate(calc(2deg * var(--mascot-idle-travel-sign, -1))) scale(1.02, 0.98); }
   100% { transform: translateY(0) rotate(0) scale(1); }
 }
 
@@ -387,8 +398,8 @@
 
 @keyframes composer-mascot-idle-hover-land-body {
   0% { transform: translateY(0) rotate(0) scale(1); }
-  18% { transform: translateY(-1px) rotate(5deg) scale(0.99, 1.02); }
-  66% { transform: translateY(-1px) rotate(3deg) scale(0.99, 1.02); }
+  18% { transform: translateY(-1px) rotate(calc(5deg * var(--mascot-idle-travel-sign, -1))) scale(0.99, 1.02); }
+  66% { transform: translateY(-1px) rotate(calc(3deg * var(--mascot-idle-travel-sign, -1))) scale(0.99, 1.02); }
   86% { transform: translateY(0) rotate(0) scale(1); }
   91% { transform: translateY(1px) rotate(0) scale(1.1, 0.88); }
   95% { transform: translateY(-1px) rotate(0) scale(0.99, 1.02); }
@@ -402,19 +413,19 @@
 }
 
 @keyframes composer-mascot-idle-hover-side-jet-launch {
-  0% { opacity: 0.34; transform: rotate(22deg) scaleX(0.34); }
-  12% { opacity: 0.94; transform: rotate(22deg) scaleX(1.08); }
-  68% { opacity: 0.76; transform: rotate(22deg) scaleX(0.84); }
-  84% { opacity: 0.42; transform: rotate(22deg) scaleX(0.48); }
-  100% { opacity: 0; transform: rotate(22deg) scaleX(0.12); }
+  0% { opacity: 0.34; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(0.34); }
+  12% { opacity: 0.94; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(1.08); }
+  68% { opacity: 0.76; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(0.84); }
+  84% { opacity: 0.42; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(0.48); }
+  100% { opacity: 0; transform: rotate(var(--mascot-idle-jet-tilt, 22deg)) scaleX(0.12); }
 }
 
 @keyframes composer-mascot-idle-hover-side-jet-return {
-  0% { opacity: 0.28; transform: rotate(-18deg) scaleX(0.28); }
-  12% { opacity: 0.88; transform: rotate(-18deg) scaleX(0.92); }
-  52% { opacity: 0.66; transform: rotate(-18deg) scaleX(0.62); }
-  74% { opacity: 0.3; transform: rotate(-18deg) scaleX(0.34); }
-  86%, 100% { opacity: 0; transform: rotate(-18deg) scaleX(0.12); }
+  0% { opacity: 0.28; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.28); }
+  12% { opacity: 0.88; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.92); }
+  52% { opacity: 0.66; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.62); }
+  74% { opacity: 0.3; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.34); }
+  86%, 100% { opacity: 0; transform: rotate(var(--mascot-idle-jet-tilt, -18deg)) scaleX(0.12); }
 }
 
 @keyframes composer-mascot-idle-hover-bottom-handoff {
@@ -430,9 +441,9 @@
 
 @keyframes composer-mascot-idle-hover-bottom-return {
   0% { opacity: 0.78; transform: translateX(-50%) rotate(0) scaleY(0.72); animation-timing-function: ease-in-out; }
-  24% { opacity: 0.68; transform: translateX(-50%) rotate(8deg) scaleY(0.58); }
-  58% { opacity: 0.44; transform: translateX(-50%) rotate(7deg) scaleY(0.38); }
-  78% { opacity: 0.86; transform: translateX(-50%) rotate(3deg) scaleY(0.84); }
+  24% { opacity: 0.68; transform: translateX(-50%) rotate(calc(8deg * var(--mascot-idle-travel-sign, -1))) scaleY(0.58); }
+  58% { opacity: 0.44; transform: translateX(-50%) rotate(calc(7deg * var(--mascot-idle-travel-sign, -1))) scaleY(0.38); }
+  78% { opacity: 0.86; transform: translateX(-50%) rotate(calc(3deg * var(--mascot-idle-travel-sign, -1))) scaleY(0.84); }
   91% { opacity: 0.98; transform: translateX(-50%) rotate(0) scaleY(1.04); }
   100% { opacity: 0; transform: translateX(-50%) rotate(0) scaleY(0.14); }
 }

package/src/composer/useComposerAvatarBehavior.ts

@@ -14,6 +14,7 @@ interface ComposerAvatarBehaviorOptions {
   activeIdle: boolean
   bounceSignal: number
   reducedMotion: boolean
+  directionalGestures?: boolean
 }
 
 export function useComposerAvatarBehavior(options: ComposerAvatarBehaviorOptions): {
@@ -60,7 +61,7 @@ export function useComposerAvatarBehavior(options: ComposerAvatarBehaviorOptions
               : value < 0.86
                 ? 'antenna-bob'
                 : undefined
-          if (next) {
+          if (next && (options.directionalGestures !== false || (next !== 'look-left' && next !== 'look-right'))) {
             setGesture(next)
             setGestureSequence((sequence) => sequence + 1)
           }
@@ -70,7 +71,7 @@ export function useComposerAvatarBehavior(options: ComposerAvatarBehaviorOptions
     }
     schedule()
     return () => { window.clearTimeout(timer) }
-  }, [options.sleeping, options.activeIdle, options.reducedMotion, options.baseExpression])
+  }, [options.sleeping, options.activeIdle, options.reducedMotion, options.baseExpression, options.directionalGestures])
 
   const clearGesture = useCallback(() => setGesture(undefined), [])
   const completeGesture = useCallback((sequence: number) => {

package/src/composer/useMascotActiveIdle.ts

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useRef, useState, type AnimationEvent } from 'react'
+import {
+  MASCOT_ACTIVE_IDLE_ACTIVITY_THROTTLE_MS,
+  MASCOT_ACTIVE_IDLE_HOLD_MS,
+  MASCOT_ACTIVE_IDLE_JITTER_MS,
+  MASCOT_ACTIVE_IDLE_MIN_MS,
+  MASCOT_ACTIVE_IDLE_TRAVEL_MS,
+  pickMascotActiveIdle,
+  type MascotActiveIdle,
+  type MascotActiveIdleMotion,
+  type MascotActiveIdlePhase,
+  type MascotActiveIdlePlan,
+  type MascotIdleDirection
+} from './constants.js'
+
+export interface MascotActiveIdleAttributes {
+  'data-mascot-active-idle'?: MascotActiveIdleMotion
+  'data-mascot-idle-phase'?: MascotActiveIdlePhase
+  'data-mascot-idle-direction'?: MascotIdleDirection
+  'data-mascot-idle-travel'?: MascotIdleDirection
+}
+
+export interface MascotActiveIdleOptions {
+  /** True while the character is free to wander: idle, awake, unfocused, and motion allowed. */
+  enabled: boolean
+  onStart?: () => void
+  /** Runs on user activity, before the schedule-reset throttle. */
+  onActivity?: () => void
+  /** Decides direction and motion pool at launch; `null` skips this round. */
+  plan?: () => MascotActiveIdlePlan | null
+  /** Whether pointer movement aborts a trip in flight; it always defers the next one. */
+  interruptOnPointerMove?: boolean
+}
+
+export interface MascotActiveIdleHandle {
+  activeIdle: MascotActiveIdle | null
+  activityRevision: number
+  className: 'composer-mascot-active-idle' | undefined
+  attributes: MascotActiveIdleAttributes
+  cancel: () => void
+  onAnimationEnd: (event: AnimationEvent<Element>) => void
+}
+
+const RETRY_MS = 5000
+const LEG_SETTLE_MS = 160
+
+function opposite(direction: MascotIdleDirection): MascotIdleDirection {
+  return direction === 'left' ? 'right' : 'left'
+}
+
+function finisherOf(trip: MascotActiveIdle): string {
+  if (trip.motion === 'hop') return 'composer-mascot-idle-hop-travel'
+  if (trip.motion === 'rocket') return 'composer-mascot-idle-rocket-flight-x'
+  return trip.phase === 'outbound' ? 'composer-mascot-idle-hover-launch-body' : 'composer-mascot-idle-hover-land-body'
+}
+
+function advance(trip: MascotActiveIdle | null): MascotActiveIdle | null {
+  if (!trip) return null
+  if (trip.phase === 'outbound') return { ...trip, phase: 'away' }
+  if (trip.phase === 'away') return { ...trip, phase: 'inbound', travel: opposite(trip.direction) }
+  return null
+}
+
+/**
+ * Schedules the traveling idle antics (hop, rocket, hover) after a quiet stretch. Any host that
+ * renders the stage classes (see MascotIdleStage) can spread the returned attributes on its root.
+ */
+export function useMascotActiveIdle(options: MascotActiveIdleOptions): MascotActiveIdleHandle {
+  const { enabled, interruptOnPointerMove = true } = options
+  const [activeIdle, setActiveIdle] = useState<MascotActiveIdle | null>(null)
+  const [activityRevision, setActivityRevision] = useState(0)
+  const optionsRef = useRef(options)
+  optionsRef.current = options
+  const activeRef = useRef(activeIdle)
+  activeRef.current = activeIdle
+  const lastActivityRef = useRef(0)
+  const lastMotionRef = useRef<MascotActiveIdleMotion | null>(null)
+
+  const cancel = useCallback(() => setActiveIdle(null), [])
+
+  const markActivity = useCallback((interrupt: boolean) => {
+    if (interrupt) setActiveIdle(null)
+    optionsRef.current.onActivity?.()
+    const now = Date.now()
+    if (now - lastActivityRef.current < MASCOT_ACTIVE_IDLE_ACTIVITY_THROTTLE_MS) return
+    lastActivityRef.current = now
+    setActivityRevision((value) => value + 1)
+  }, [])
+
+  useEffect(() => {
+    const interrupt = (): void => markActivity(true)
+    const pointerMove = (): void => {
+      if (Date.now() - lastActivityRef.current >= MASCOT_ACTIVE_IDLE_ACTIVITY_THROTTLE_MS) {
+        markActivity(interruptOnPointerMove)
+      }
+    }
+    window.addEventListener('keydown', interrupt)
+    window.addEventListener('pointerdown', interrupt)
+    window.addEventListener('pointermove', pointerMove, { passive: true })
+    window.addEventListener('wheel', interrupt, { passive: true })
+    window.addEventListener('focusin', interrupt)
+    return () => {
+      window.removeEventListener('keydown', interrupt)
+      window.removeEventListener('pointerdown', interrupt)
+      window.removeEventListener('pointermove', pointerMove)
+      window.removeEventListener('wheel', interrupt)
+      window.removeEventListener('focusin', interrupt)
+    }
+  }, [markActivity, interruptOnPointerMove])
+
+  useEffect(() => {
+    if (!enabled) {
+      setActiveIdle(null)
+      return undefined
+    }
+    let timer = 0
+    const wait = (): number => MASCOT_ACTIVE_IDLE_MIN_MS + Math.random() * MASCOT_ACTIVE_IDLE_JITTER_MS
+    const start = (): void => {
+      if (document.hidden || activeRef.current) {
+        timer = window.setTimeout(start, RETRY_MS)
+        return
+      }
+      const plan = optionsRef.current.plan?.()
+      if (plan === null) {
+        timer = window.setTimeout(start, wait())
+        return
+      }
+      const motion = pickMascotActiveIdle(Math.random(), lastMotionRef.current, plan?.motions)
+      lastMotionRef.current = motion
+      optionsRef.current.onStart?.()
+      const direction = plan?.direction ?? 'left'
+      setActiveIdle({ motion, phase: 'outbound', direction, travel: direction })
+    }
+    timer = window.setTimeout(start, wait())
+    return () => window.clearTimeout(timer)
+  }, [enabled, activityRevision])
+
+  useEffect(() => {
+    if (!activeIdle) return undefined
+    const delay = activeIdle.phase === 'away'
+      ? MASCOT_ACTIVE_IDLE_HOLD_MS[activeIdle.motion]
+      : MASCOT_ACTIVE_IDLE_TRAVEL_MS[activeIdle.motion] + LEG_SETTLE_MS
+    const timer = window.setTimeout(() => setActiveIdle(advance), delay)
+    return () => window.clearTimeout(timer)
+  }, [activeIdle])
+
+  const onAnimationEnd = useCallback((event: AnimationEvent<Element>) => {
+    setActiveIdle((current) => {
+      if (!current || event.animationName !== finisherOf(current)) return current
+      return current.phase === 'outbound' ? { ...current, phase: 'away' } : null
+    })
+  }, [])
+
+  const attributes: MascotActiveIdleAttributes = activeIdle
+    ? {
+        'data-mascot-active-idle': activeIdle.motion,
+        'data-mascot-idle-phase': activeIdle.phase,
+        'data-mascot-idle-direction': activeIdle.direction,
+        'data-mascot-idle-travel': activeIdle.travel
+      }
+    : {}
+  return {
+    activeIdle,
+    activityRevision,
+    className: activeIdle ? 'composer-mascot-active-idle' : undefined,
+    attributes,
+    cancel,
+    onAnimationEnd
+  }
+}

package/src/react.ts

@@ -4,3 +4,8 @@ export { DecorationSwatch, PrimaryDecoration, SecondaryDecoration } from './Deco
 export { ComposerMascot } from './composer/ComposerMascot.js'
 export type { ComposerMascotProps, ComposerMascotContext, MascotExpression, MascotLight } from './composer/types.js'
 export { ComposerMascotShadow } from './composer/ComposerMascotShadow.js'
+export { useComposerAvatarBehavior } from './composer/useComposerAvatarBehavior.js'
+export { useMascotActiveIdle, type MascotActiveIdleAttributes, type MascotActiveIdleHandle, type MascotActiveIdleOptions } from './composer/useMascotActiveIdle.js'
+export { MascotIdleStage } from './composer/MascotIdleStage.js'
+export { MASCOT_SLEEP_AFTER_MS } from './composer/constants.js'
+export type { MascotActiveIdle, MascotActiveIdleMotion, MascotActiveIdlePhase, MascotActiveIdlePlan, MascotIdleDirection } from './composer/constants.js'