@bearmenu/ui 0.8.13 → 0.8.14

package/src/components/motion-icon-actions.tsx

@@ -0,0 +1,580 @@
+"use client";
+
+/**
+ * The action vocabulary, character-animated — the glyphs `lib/icon-registry`
+ * names for generic actions (back, see-all, close, clear, call, directions…)
+ * and the handful of app controls beside them (the Bruno composer's send/stop,
+ * the map's locate / expand, sign in / out, settings).
+ *
+ * Same doctrine as `motion-icon-set.tsx`: geometry vendored from lucide on the
+ * 24-unit grid; each glyph performs a behaviour its object performs. Almost
+ * everything here is a MOMENTARY action, so almost everything RETURNS (active
+ * = rest); the exceptions say so. Most of these render at 16px (`Button`'s
+ * `[&_svg]:size-4`), where one unit is 0.67px, so primary travel stays at 8+
+ * units and every apex lands before ~250ms — the layer a close button
+ * dismisses usually leaves under the finger.
+ */
+
+import { motion, type Transition, type Variants } from "framer-motion";
+
+import {
+  MotionIcon,
+  beats,
+  pivot,
+  poses,
+  returnTransition,
+  useSvgId,
+  type MotionIconProps,
+} from "./motion-icon";
+
+export type MotionDirection = "right" | "left";
+
+/** A part that RETURNS: `rest` and `active` are both the gesture's first keyframe. */
+function returning(play: Record<string, number[]>, transition: Transition): Variants {
+  const held: Record<string, number> = {};
+  for (const key of Object.keys(play)) held[key] = play[key][0];
+  return poses(held, held, play, transition);
+}
+
+const flip = (values: number[], direction: MotionDirection) =>
+  direction === "right" ? values : values.map((v) => -v);
+
+// ─── Arrow — the head fires ahead, the shaft chases (detach and return) ───────
+
+const ARROW = beats([0, 0.14, 0.42, 0.58, 0.82, 1], 0.6);
+
+/**
+ * Nocks back, the head fires off the leading edge of the box (apex at x 28),
+ * the shaft stretches from its tail to catch up — the arrow is 1.6× its rest
+ * length at that beat — and both snap home. `arrow-left` is lucide's exact
+ * mirror, so one glyph with a sign flip; a back button plays under a route
+ * transition and does not deserve a second character.
+ */
+function arrowParts(direction: MotionDirection) {
+  const tailX = direction === "right" ? 5 : 19;
+  return {
+    head: returning({ x: flip([0, -2.5, 9, 8, -1, 0], direction) }, ARROW),
+    shaft: returning({ scaleX: [1, 0.82, 1, 1.45, 0.93, 1] }, ARROW),
+    tail: pivot(tailX, 12),
+    headD: direction === "right" ? "m12 5 7 7-7 7" : "m12 19-7-7 7-7",
+    shaftD: direction === "right" ? "M5 12h14" : "M19 12H5",
+  };
+}
+
+const ARROW_RIGHT = arrowParts("right");
+const ARROW_LEFT = arrowParts("left");
+
+export function MotionArrow({
+  direction = "right",
+  ...props
+}: MotionIconProps & { direction?: MotionDirection }) {
+  const parts = direction === "right" ? ARROW_RIGHT : ARROW_LEFT;
+  return (
+    <MotionIcon {...props}>
+      <motion.path variants={parts.shaft} style={parts.tail} d={parts.shaftD} />
+      <motion.path variants={parts.head} d={parts.headD} />
+    </MotionIcon>
+  );
+}
+
+// ─── Caret — coils, darts with its arms folded, springs open (articulate) ─────
+
+const CARET = beats([0, 0.14, 0.4, 0.56, 0.8, 1], 0.56);
+
+/**
+ * The directional `>` (row drill-in, carousel paging) — NOT `MotionChevron`,
+ * which is the 180° disclosure flip that holds. A `>` that flipped to `<` on
+ * a row would say "collapse". The single lucide path is cut at the apex into
+ * two arms so they can fold: at the dart the chevron is 8 wide × 5.8 tall
+ * instead of 6 × 12.
+ */
+function caretParts(direction: MotionDirection) {
+  const apexX = direction === "right" ? 15 : 9;
+  const armX = direction === "right" ? 9 : 15;
+  const upperSwing = flip([0, 8, -25, -20, 6, 0], direction);
+  return {
+    body: returning({ x: flip([0, -2, 7, 6.5, -1, 0], direction) }, CARET),
+    upper: returning({ rotate: upperSwing }, CARET),
+    lower: returning({ rotate: upperSwing.map((v) => -v) }, CARET),
+    apex: pivot(apexX, 12),
+    upperD: `M${apexX} 12 ${armX} 6`,
+    lowerD: `M${apexX} 12 ${armX} 18`,
+  };
+}
+
+const CARET_RIGHT = caretParts("right");
+const CARET_LEFT = caretParts("left");
+
+export function MotionCaret({
+  direction = "right",
+  ...props
+}: MotionIconProps & { direction?: MotionDirection }) {
+  const parts = direction === "right" ? CARET_RIGHT : CARET_LEFT;
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={parts.body}>
+        <motion.path variants={parts.upper} style={parts.apex} d={parts.upperD} />
+        <motion.path variants={parts.lower} style={parts.apex} d={parts.lowerD} />
+      </motion.g>
+    </MotionIcon>
+  );
+}
+
+// ─── X — the blades shut like scissors and reopen (articulate) ───────────────
+
+const X_TIMES = beats([0, 0.15, 0.42, 0.56, 0.8, 1], 0.56);
+
+/**
+ * Close a layer. Flares a touch, slams shut into a single vertical bar with a
+ * 3° cross-over, springs back open. The clack lands at 235ms — before a
+ * sheet's exit has taken the button away. Both blades pivot on the crossing.
+ */
+const bladeA = returning({ rotate: [0, 7, -48, -45, 5, 0] }, X_TIMES);
+const bladeB = returning({ rotate: [0, -7, 48, 45, -5, 0] }, X_TIMES);
+
+export function MotionX(props: MotionIconProps) {
+  const crossing = pivot(12, 12);
+  return (
+    <MotionIcon {...props}>
+      <motion.path variants={bladeA} style={crossing} d="M18 6 6 18" />
+      <motion.path variants={bladeB} style={crossing} d="m6 6 12 12" />
+    </MotionIcon>
+  );
+}
+
+// ─── Circle-X — a clear key: pressed, it ejects its contents (deform + eject) ─
+
+const CLEAR = beats([0, 0.18, 0.4, 0.54, 0.72, 1], 0.6);
+
+/**
+ * Clear a value in place — the registry separates it from close, and so does
+ * the gesture. The ring flattens on its floor under the press, rebounds, and
+ * on the rebound the little X is thrown out of the top (2 units clear of the
+ * box); a fresh X drops back in and the ring takes the impact.
+ */
+const clearRing = returning(
+  { scaleY: [1, 0.66, 1.06, 1, 0.9, 1], scaleX: [1, 1.1, 1, 1, 1, 1] },
+  CLEAR
+);
+const clearX = returning(
+  {
+    y: [0, 0, -11, -11, 1, 0],
+    scaleY: [1, 0.66, 1, 1, 1, 1],
+    opacity: [1, 1, 1, 0, 1, 1],
+  },
+  CLEAR
+);
+
+export function MotionCircleX(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.circle variants={clearRing} style={pivot(12, 22)} cx="12" cy="12" r="10" />
+      <motion.g variants={clearX} style={pivot(12, 12)}>
+        <path d="m15 9-6 6" />
+        <path d="m9 9 6 6" />
+      </motion.g>
+    </MotionIcon>
+  );
+}
+
+// ─── External link — the arrow leaves, the next one loads (detach, no return) ─
+
+const EXTERNAL = beats([0, 0.16, 0.4, 0.5, 0.62, 1], 0.6);
+
+/**
+ * The arrow dips into the box, launches up-right clear of the frame (apex at
+ * (30, −6)), the box recoils under it; the arrow vanishes off the corner and
+ * a fresh one slides up into the notch from inside the box. Rest = active:
+ * the destination opens elsewhere.
+ */
+const leavingArrow = returning(
+  {
+    x: [0, -2, 9, 9, -5, 0],
+    y: [0, 2, -9, -9, 5, 0],
+    opacity: [1, 1, 1, 0, 0, 1],
+  },
+  EXTERNAL
+);
+const recoilingBox = returning({ scaleY: [1, 1, 0.9, 1.03, 1, 1] }, EXTERNAL);
+
+export function MotionExternalLink(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.path
+        variants={recoilingBox}
+        style={pivot(10.5, 21)}
+        d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+      />
+      <motion.g variants={leavingArrow}>
+        <path d="M15 3h6v6" />
+        <path d="M10 14 21 3" />
+      </motion.g>
+    </MotionIcon>
+  );
+}
+
+// ─── Send — the arrow fires out, the stop block drops in (fall and land) ──────
+
+const SEND_TIMES = [0, 0.14, 0.36, 0.5, 0.72, 1];
+const SEND = beats(SEND_TIMES, 0.62);
+
+/**
+ * ONE glyph for the composer's send / stop slot, `active` = generating. Two
+ * swapped glyphs are strictly worse: the send arrow unmounts the instant the
+ * stream starts (~50–100ms after pointer down, cutting the gesture at its
+ * anticipation), and stop → send has no transition at all. The button is a
+ * SLOT: the arrow is fired out of it, the stop block drops into it, filling
+ * on the descent and squashing on impact — the pin's rule.
+ *
+ * HOLDS. Leaving (stop tapped, or the stream ends) is the return spring: the
+ * block sinks and fades, the arrow drops back in from above — gravity agrees
+ * in both directions. Callers bump `replayToken` on the SEND pointer down
+ * only; the stop tap is the `active → false` flip.
+ *
+ * The block is a 14-unit rect, not lucide's 18: at `size-4` that matches the
+ * mass of the `h-3.5` filled square the composer draws today.
+ */
+const sendArrow: Variants = {
+  rest: { y: 0, opacity: 1, transition: returnTransition },
+  active: { y: -18, opacity: 0, transition: returnTransition },
+  play: {
+    y: [0, 2.5, -18, -18, -18, -18],
+    opacity: [1, 1, 1, 0, 0, 0],
+    transition: SEND,
+  },
+};
+const sendShaft: Variants = {
+  rest: { scaleY: 1, transition: returnTransition },
+  active: { scaleY: 1, transition: returnTransition },
+  play: { scaleY: [1, 0.85, 1.25, 1, 1, 1], transition: SEND },
+};
+const stopBlock: Variants = {
+  rest: { y: 6, opacity: 0, fillOpacity: 0, scaleY: 1, transition: returnTransition },
+  active: { y: 0, opacity: 1, fillOpacity: 1, scaleY: 1, transition: returnTransition },
+  play: {
+    y: [-12, -12, -12, -12, 1, 0],
+    opacity: [0, 0, 0, 1, 1, 1],
+    fillOpacity: [0, 0, 0, 0, 1, 1],
+    scaleY: [1, 1, 1, 1, 0.82, 1],
+    transition: SEND,
+  },
+};
+
+export function MotionSend(props: MotionIconProps) {
+  const floor = pivot(12, 19);
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={sendArrow}>
+        <path d="m5 12 7-7 7 7" />
+        <motion.path variants={sendShaft} style={floor} d="M12 19V5" />
+      </motion.g>
+      <motion.rect
+        variants={stopBlock}
+        style={floor}
+        fill="currentColor"
+        fillOpacity={0}
+        opacity={0}
+        x="5"
+        y="5"
+        width="14"
+        height="14"
+        rx="2"
+      />
+    </MotionIcon>
+  );
+}
+
+// ─── Navigation — the course arrow hunts for its bearing (cycle content) ──────
+
+/**
+ * One closed polygon with no separable part, so the only move is rigid — and
+ * the hunt is the one rigid move that is a behaviour rather than a tween: the
+ * needle swings the wrong way, whips back through north, overshoots, settles.
+ * Pivot at (12, 12) keeps the tail notch (11, 13) nearly still, which is what
+ * makes it a needle rather than a spinner.
+ */
+const needle = returning(
+  { rotate: [0, 12, -38, 14, -5, 0] },
+  beats([0, 0.16, 0.44, 0.64, 0.84, 1], 0.62)
+);
+
+export function MotionNavigation(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.polygon variants={needle} style={pivot(12, 12)} points="3 11 22 2 13 21 11 13 3 11" />
+    </MotionIcon>
+  );
+}
+
+// ─── Locate — the reticle hunts off-centre and locks onto the dot ─────────────
+
+const LOCATE = beats([0, 0.16, 0.44, 0.6, 0.8, 1], 0.62);
+
+/**
+ * On a real map the crosshair is fixed and the map moves — but at 16px the
+ * 14-unit ring displaced 7 units is far more legible than a 6-unit dot
+ * displaced the same, and the pictures are identical. So the reticle skids
+ * off-centre (concentric → eccentric is the silhouette change), swings back
+ * and clamps: the ring shrinks, the ticks flick inward, the dot flashes as
+ * the lock lands.
+ */
+const reticle = returning(
+  { x: [0, 2, -7, 0.8, -0.3, 0], y: [0, -1.5, 5, -0.6, 0.2, 0] },
+  LOCATE
+);
+const ring = returning({ scale: [1, 1, 1, 0.9, 1.02, 1] }, LOCATE);
+const tick = (axis: "x" | "y", inward: number) =>
+  axis === "x"
+    ? returning({ x: [0, 0, 0, inward, 0, 0] }, LOCATE)
+    : returning({ y: [0, 0, 0, inward, 0, 0] }, LOCATE);
+const tickLeft = tick("x", 2.5);
+const tickRight = tick("x", -2.5);
+const tickTop = tick("y", 2.5);
+const tickBottom = tick("y", -2.5);
+const lockDot = returning(
+  { scale: [1, 1, 1, 1.35, 1, 1], fillOpacity: [0, 0, 0, 1, 1, 0] },
+  LOCATE
+);
+
+export function MotionLocate(props: MotionIconProps) {
+  const centre = pivot(12, 12);
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={reticle}>
+        <motion.line variants={tickLeft} x1="2" x2="5" y1="12" y2="12" />
+        <motion.line variants={tickRight} x1="19" x2="22" y1="12" y2="12" />
+        <motion.line variants={tickTop} x1="12" x2="12" y1="2" y2="5" />
+        <motion.line variants={tickBottom} x1="12" x2="12" y1="19" y2="22" />
+        <motion.circle variants={ring} style={centre} cx="12" cy="12" r="7" />
+      </motion.g>
+      <motion.circle
+        variants={lockDot}
+        style={centre}
+        fill="currentColor"
+        fillOpacity={0}
+        cx="12"
+        cy="12"
+        r="3"
+      />
+    </MotionIcon>
+  );
+}
+
+// ─── Maximize — the corners shove apart along their diagonal (detach) ─────────
+
+const MAXIMIZE = beats([0, 0.16, 0.44, 0.6, 0.82, 1], 0.6);
+
+/**
+ * The corners pull toward the centre, then shove outward past the box (apex
+ * at (28, −4) and (−4, 28)) with the diagonals stretching to keep hold of
+ * them, and snap back. The diagonal scale is (9.9 + d·√2) / 9.9 so its end
+ * always meets the corner's apex — corners flying with static diagonals open
+ * a gap mid-arm and read as breakage.
+ */
+const CORNER_OFFSET = [0, -2, 7, 6, -0.8, 0];
+const DIAGONAL_STRETCH = CORNER_OFFSET.map((d) => (9.9 + d * Math.SQRT2) / 9.9);
+
+const cornerTopRight = returning(
+  { x: CORNER_OFFSET, y: CORNER_OFFSET.map((d) => -d) },
+  MAXIMIZE
+);
+const cornerBottomLeft = returning(
+  { x: CORNER_OFFSET.map((d) => -d), y: CORNER_OFFSET },
+  MAXIMIZE
+);
+const diagonal = returning({ scale: DIAGONAL_STRETCH }, MAXIMIZE);
+
+export function MotionMaximize(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.path variants={cornerTopRight} d="M15 3h6v6" />
+      <motion.path variants={diagonal} style={pivot(14, 10)} d="m21 3-7 7" />
+      <motion.path variants={diagonal} style={pivot(10, 14)} d="m3 21 7-7" />
+      <motion.path variants={cornerBottomLeft} d="M9 21H3v-6" />
+    </MotionIcon>
+  );
+}
+
+// ─── Phone — the handset is lifted to the ear and dropped back (detach) ───────
+
+const PHONE = beats([0, 0.14, 0.42, 0.56, 0.8, 1], 0.64);
+
+/**
+ * Placing a call, not receiving one — so it is picked up, not rung. The
+ * handset swings from the diagonal to upright around the mouthpiece block
+ * (earpiece ends 3.5 units above the box, inside the button's padding), hangs
+ * at the ear a beat, and drops back onto the hook with a clank. Two origins
+ * need two elements: the rotation on the path, the squash on the group.
+ */
+const handset = returning({ rotate: [0, -6, 46, 40, -5, 0] }, PHONE);
+const cradle = returning({ scaleY: [1, 0.97, 1, 1, 0.92, 1] }, PHONE);
+
+export function MotionPhone(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={cradle} style={pivot(18.5, 22)}>
+        <motion.path
+          variants={handset}
+          style={pivot(18.5, 18.5)}
+          d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"
+        />
+      </motion.g>
+    </MotionIcon>
+  );
+}
+
+// ─── Mail — the flap flips open on its fold and slaps shut (articulate) ───────
+
+const MAIL_TIMES = [0, 0.14, 0.42, 0.56, 0.84, 1];
+
+/**
+ * The flap flips up over the top edge into lucide `mail-open`'s peaked
+ * silhouette, hangs a beat, slams back down and the body flinches. `scaleY`
+ * through zero rather than `rotateX`: WebKit does not do 3D transforms on SVG
+ * children, and the edge-on frame is the same. The fold is at y 5.5, between
+ * the drawn top edge (4) and the V's ends (7), so the open flap attaches at
+ * the crease instead of floating 3 units above it.
+ */
+const flap = returning({ scaleY: [1, 1.12, -1.15, -1, 1.08, 1] }, beats(MAIL_TIMES, 0.64));
+const envelope = returning({ scaleY: [1, 1, 0.92, 1] }, beats([0, 0.84, 0.92, 1], 0.64));
+
+export function MotionMail(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.rect variants={envelope} style={pivot(12, 20)} x="2" y="4" width="20" height="16" rx="2" />
+      <motion.path
+        variants={flap}
+        style={pivot(12, 5.5)}
+        d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"
+      />
+    </MotionIcon>
+  );
+}
+
+// ─── Flag — raised, planted, the cloth whips on the impact (fall and land) ────
+
+const FLAG = beats([0, 0.18, 0.4, 0.56, 0.76, 1], 0.62);
+
+/**
+ * Report a listing: the flag is raised 8 units (cloth clear of the top),
+ * thrust into the ground, the pole compresses on impact and the cloth —
+ * streaming upward from the momentum — whips forward and flops to rest, 100ms
+ * behind the impact. Lucide draws pole and cloth as one path; cut at (4, 4),
+ * where the cloth is fixed to the pole. The cloth ends at (4, 15.5), on the
+ * pole, so the seam sits under the pole stroke at rest.
+ */
+const wholeFlag = returning({ y: [0, -8, 1.2, 0, 0, 0] }, FLAG);
+const pole = returning({ scaleY: [1, 1, 0.88, 1.02, 1, 1] }, FLAG);
+const cloth = returning({ rotate: [0, 5, -22, 12, -4, 0] }, FLAG);
+
+export function MotionFlag(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={wholeFlag}>
+        <motion.path variants={pole} style={pivot(4, 22)} d="M4 22V4" />
+        <motion.path
+          variants={cloth}
+          style={pivot(4, 4)}
+          d="M4 4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"
+        />
+      </motion.g>
+    </MotionIcon>
+  );
+}
+
+// ─── Log in / out — the arrow goes through the door (cycle content) ───────────
+
+const DOOR_REEL = beats([0, 0.16, 0.6, 0.78, 1], 0.6);
+
+/**
+ * A 5-unit slide into the bracket is 3.4px at 16px — invisible — so this is
+ * the calendar's reel: the arrow backs up, runs through the doorway and is
+ * swallowed by it while an identical arrow arrives to take its place, and the
+ * frame shudders as the first one goes through. The reel ends 16 units on
+ * with the picture identical; `useIconGesture` snaps it back. The clip shows
+ * the head 2 units INSIDE the doorway before it vanishes — it goes through,
+ * it does not hit a wall — and stops the arrow at the box edge so it never
+ * draws over the label beside it.
+ */
+const reel = returning({ x: [0, -2, 17.2, 15.6, 16] }, DOOR_REEL);
+
+function DoorArrow({ shaftD, headD, dx }: { shaftD: string; headD: string; dx: number }) {
+  return (
+    <g transform={dx ? `translate(${dx} 0)` : undefined}>
+      <path d={shaftD} />
+      <path d={headD} />
+    </g>
+  );
+}
+
+const doorKickIn = returning({ x: [0, 0, 1.5, -0.4, 0] }, beats([0, 0.5, 0.64, 0.82, 1], 0.6));
+
+export function MotionLogIn(props: MotionIconProps) {
+  const clipId = useSvgId("door-in");
+  return (
+    <MotionIcon {...props}>
+      <defs>
+        <clipPath id={clipId}>
+          <rect x="0" y="3" width="17" height="18" />
+        </clipPath>
+      </defs>
+      <g clipPath={`url(#${clipId})`}>
+        <motion.g variants={reel}>
+          <DoorArrow shaftD="M15 12H3" headD="m10 17 5-5-5-5" dx={0} />
+          <DoorArrow shaftD="M15 12H3" headD="m10 17 5-5-5-5" dx={-16} />
+        </motion.g>
+      </g>
+      <motion.path variants={doorKickIn} d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+    </MotionIcon>
+  );
+}
+
+/** The mirror: the arrow runs off the right edge and a fresh one comes OUT of the doorway behind it. */
+const doorKickOut = returning({ x: [0, 0, -1.5, 0.4, 0] }, beats([0, 0.3, 0.44, 0.62, 1], 0.6));
+
+export function MotionLogOut(props: MotionIconProps) {
+  const clipId = useSvgId("door-out");
+  return (
+    <MotionIcon {...props}>
+      <defs>
+        <clipPath id={clipId}>
+          <rect x="8" y="3" width="16" height="18" />
+        </clipPath>
+      </defs>
+      <g clipPath={`url(#${clipId})`}>
+        <motion.g variants={reel}>
+          <DoorArrow shaftD="M21 12H9" headD="m16 17 5-5-5-5" dx={0} />
+          <DoorArrow shaftD="M21 12H9" headD="m16 17 5-5-5-5" dx={-16} />
+        </motion.g>
+      </g>
+      <motion.path variants={doorKickOut} d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+    </MotionIcon>
+  );
+}
+
+// ─── Settings — the gear turns two teeth and seats (cycle content) ───────────
+
+/**
+ * Winds back, snaps a quarter turn with an overshoot, and the hub pops as the
+ * teeth seat. Two teeth (90° on an 8-tooth gear), not one: 45° is 7.5 units
+ * of rim travel, a click that disappears at 16px. Not 360° — that is
+ * `MotionRefresh`, and a settings gear doing a full turn reads as loading.
+ * The weakest silhouette change in the batch, by its own admission: a near-
+ * round outline turning; the bumps shifting along the rim are what read.
+ */
+const gear = returning({ rotate: [0, -10, 98, 87, 90] }, beats([0, 0.16, 0.62, 0.8, 1], 0.6));
+const hub = returning({ scale: [1, 0.8, 0.8, 1.2, 1] }, beats([0, 0.16, 0.62, 0.78, 1], 0.6));
+
+export function MotionSettings(props: MotionIconProps) {
+  const centre = pivot(12, 12);
+  return (
+    <MotionIcon {...props}>
+      <motion.path
+        variants={gear}
+        style={centre}
+        d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
+      />
+      <motion.circle variants={hub} style={centre} cx="12" cy="12" r="3" />
+    </MotionIcon>
+  );
+}

package/src/components/motion-icon-controls.test.tsx

@@ -22,6 +22,7 @@ vi.mock("framer-motion", () => {
       React.createElement(tag, rest);
   return {
     useAnimationControls: () => ({ set: () => {}, start: () => Promise.resolve() }),
+    useReducedMotion: () => false,
     motion: {
       svg: passthrough("svg"),
       g: passthrough("g"),

package/src/components/motion-icon-controls.tsx

@@ -402,33 +402,38 @@ export function MotionPlayPause(props: MotionIconProps) {
 
 // ─── Eye — password reveal. The lid closes over it (articulate) ──────────────
 
-const EYE_TIMES = [0, 0.3, 0.74, 1];
+const EYE_TIMES = [0, 0.18, 0.4, 0.5, 0.76, 1];
+const EYE = beats(EYE_TIMES, 0.52);
 
 /**
- * `active` is hidden, matching `EyeOff`. The eye does not swap glyph: the
- * pupil shrinks as the lid narrows, and the slash draws across with
- * `pathLength`, which is the one property that can grow a stroke without
- * morphing its `d`.
+ * `active` is hidden, matching `EyeOff`: the full eye with the slash across
+ * it. The held pose used to be the lid crushed to `scaleY 0.18` — a 2px
+ * sliver at 28px — which put the whole character in the state layer and read
+ * as a broken glyph. The gesture is a BLINK: the lid shuts fast, holds shut
+ * one beat, and reopens with overshoot ONTO the slash, which draws through
+ * the shut hold with `pathLength` — the one property that can grow a stroke
+ * without morphing its `d`. The pupil flattens with the lid (occluded, not
+ * receding), so `scaleY` only.
  */
 const lid: Variants = {
   rest: { scaleY: 1, transition: returnTransition },
-  active: { scaleY: 0.18, transition: returnTransition },
-  play: { scaleY: [1, 1.06, 0.14, 0.18], transition: beats(EYE_TIMES, 0.46) },
+  active: { scaleY: 1, transition: returnTransition },
+  play: { scaleY: [1, 1.08, 0.2, 0.2, 1.08, 1], transition: EYE },
 };
 
 const pupil: Variants = {
-  rest: { scale: 1, opacity: 1, transition: returnTransition },
-  active: { scale: 0.2, opacity: 0, transition: returnTransition },
-  play: { scale: [1, 1, 0.2, 0.2], opacity: [1, 1, 0, 0], transition: beats(EYE_TIMES, 0.46) },
+  rest: { scaleY: 1, transition: returnTransition },
+  active: { scaleY: 1, transition: returnTransition },
+  play: { scaleY: [1, 1, 0.2, 0.2, 1, 1], transition: EYE },
 };
 
 const slash: Variants = {
   rest: { pathLength: 0, opacity: 0, transition: { duration: 0.16 } },
   active: { pathLength: 1, opacity: 1, transition: { duration: 0.16 } },
   play: {
-    pathLength: [0, 0, 1, 1],
-    opacity: [0, 1, 1, 1],
-    transition: beats(EYE_TIMES, 0.46),
+    pathLength: [0, 0, 0, 0, 1, 1],
+    opacity: [0, 0, 1, 1, 1, 1],
+    transition: EYE,
   },
 };