Factor out CreatureAnimators.

lib/creature-animator.tsx

@@ -60,22 +60,28 @@ const animateSpin: CreatureAnimate = (animPct, symbol) => {
   return [svgTransformOrigin(origin, [svgRotate(animPct * 360)])];
 };
 
-export const hoverAnimator: CreatureAnimator = {
-  animate: animateHover,
-  getChildAnimator: () => hoverAnimator,
-};
-
 const spinAnimator: CreatureAnimator = {
   animate: animateSpin,
   getChildAnimator: () => spinAnimator,
 };
 
-export const hoverAndSpinAnimator: CreatureAnimator = {
+export const CREATURE_ANIMATOR_NAMES = ["none", "breathe", "spin"] as const;
-  animate: animateHover,
-  getChildAnimator: () => spinAnimator,
-};
 
-export const nullAnimator: CreatureAnimator = {
+type CreatureAnimatorName = typeof CREATURE_ANIMATOR_NAMES[number];
-  animate: () => [],
+
-  getChildAnimator: () => nullAnimator,
+export const CreatureAnimators: {
+  [k in CreatureAnimatorName]: CreatureAnimator;
+} = {
+  none: {
+    animate: () => [],
+    getChildAnimator: () => CreatureAnimators.none,
+  },
+  breathe: {
+    animate: animateHover,
+    getChildAnimator: () => CreatureAnimators.breathe,
+  },
+  spin: {
+    animate: animateHover,
+    getChildAnimator: () => spinAnimator,
+  },
 };

lib/creature-symbol.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from "react";
 import { BBox, Point } from "../vendor/bezier-js";
 import { getAttachmentTransforms } from "./attach";
 import { getBoundingBoxCenter, uniformlyScaleToFit } from "./bounding-box";
-import { CreatureAnimator, nullAnimator } from "./creature-animator";
+import { CreatureAnimator, CreatureAnimators } from "./creature-animator";
 import { scalePointXY, subtractPoints } from "./point";
 import { AttachmentPointType } from "./specs";
 import {
@@ -218,7 +218,7 @@ export const CreatureSymbol: React.FC<CreatureSymbolProps> = (props) => {
   let ctx = useContext(CreatureContext);
   const { data, attachments, nests } = props;
   const attachmentCtx: CreatureContextType = { ...ctx, parent: data };
-  const animator = props.animator ?? nullAnimator;
+  const animator = props.animator ?? CreatureAnimators.none;
   const animPct = props.animPct ?? 0;
   const svgTransforms = useMemo(
     () => animator.animate(animPct, data),

lib/pages/creature-page/core.tsx

@@ -47,7 +47,7 @@ import { GalleryWidget } from "../../gallery-widget";
 import { serializeCreatureDesign } from "./serialization";
 import { CreatureEditorWidget } from "./creature-editor";
 import { useAnimationPct } from "../../animation";
-import { hoverAndSpinAnimator } from "../../creature-animator";
+import { CreatureAnimators } from "../../creature-animator";
 
 /**
  * The minimum number of attachment points that any symbol used as the main body
@@ -384,7 +384,7 @@ function createCreatureAnimationRenderer(
           <CreatureSymbol
             {...creature}
             animPct={animPct}
-            animator={hoverAndSpinAnimator}
+            animator={CreatureAnimators.spin}
           />
         </CreatureContext.Provider>
       </SvgTransform>