@bearmenu/ui 0.8.3 → 0.8.4

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

@@ -0,0 +1,552 @@
+"use client";
+
+/**
+ * Character-animated CONTROL glyphs — the toggles and one-shot actions.
+ *
+ * `motion-icon-set.tsx` holds glyphs that depict things (a house, a calendar).
+ * This file holds glyphs that depict controls (a heart you press, sliders you
+ * adjust). Same three-variant model, same amplitude and beat rules; see
+ * `motion-icon.tsx`.
+ *
+ * Geometry is vendored from lucide (ISC) on its 24-unit grid.
+ */
+
+import * as React from "react";
+import { motion, type Variants } from "framer-motion";
+
+import { MotionIcon, beats, returnTransition, type MotionIconProps } from "./motion-icon";
+
+// ─── Heart — favorite. Squash, then inflate (deform) ──────────────────────────
+
+const HEART_TIMES = [0, 0.18, 0.5, 0.76, 1];
+
+/**
+ * Classic squash and stretch: it compresses wide-and-flat first (anticipation),
+ * then inflates past its size and settles. The fill arrives on the inflate, so
+ * the colour change is the payoff of the swell rather than a separate event.
+ */
+const heartBody: Variants = {
+  rest: { scaleX: 1, scaleY: 1, fillOpacity: 0, transition: returnTransition },
+  active: { scaleX: 1, scaleY: 1, fillOpacity: 1, transition: returnTransition },
+  play: {
+    scaleX: [1, 1.14, 0.9, 1.03, 1],
+    scaleY: [1, 0.82, 1.26, 0.96, 1],
+    fillOpacity: [0, 0, 1, 1, 1],
+    transition: beats(HEART_TIMES, 0.58),
+  },
+};
+
+export function MotionHeart(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.path
+        variants={heartBody}
+        style={{ originX: "12px", originY: "13px" }}
+        fill="currentColor"
+        fillOpacity={0}
+        d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
+      />
+    </MotionIcon>
+  );
+}
+
+// ─── Bookmark — want to try. Drops in and tucks (fall and land) ───────────────
+
+const BOOKMARK_TIMES = [0, 0.2, 0.56, 0.8, 1];
+
+const bookmarkBody: Variants = {
+  rest: { y: 0, scaleY: 1, fillOpacity: 0, transition: returnTransition },
+  active: { y: 0, scaleY: 1, fillOpacity: 1, transition: returnTransition },
+  play: {
+    // Lifts clear, drops, compresses against the notch, settles filled.
+    y: [0, -7, 1.5, 0, 0],
+    scaleY: [1, 1.07, 0.88, 1.02, 1],
+    fillOpacity: [0, 0, 0, 1, 1],
+    transition: beats(BOOKMARK_TIMES, 0.6),
+  },
+};
+
+export function MotionBookmark(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.path
+        variants={bookmarkBody}
+        style={{ originX: "12px", originY: "21px" }}
+        fill="currentColor"
+        fillOpacity={0}
+        d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"
+      />
+    </MotionIcon>
+  );
+}
+
+// ─── Sliders — filter. The handles travel their tracks (cycle content) ────────
+
+const SLIDER_ROWS = [5, 12, 19];
+/** Resting handle positions, matching lucide's rest silhouette. */
+const HANDLE_X = [14, 8, 16];
+/** Where each handle travels to and holds while the sheet is open. */
+const HANDLE_ACTIVE_DX = [-6, 7, -4];
+
+/**
+ * Deviation from stock lucide, deliberate: lucide breaks each track into two
+ * segments with a gap where the handle sits. A gap cannot move, so a sliding
+ * handle would leave it stranded. Tracks are drawn full-width here and the
+ * handles ride on top. At 22px the difference at rest is sub-pixel.
+ */
+function sliderHandle(index: number): Variants {
+  const dx = HANDLE_ACTIVE_DX[index];
+  return {
+    rest: { x: 0, transition: returnTransition },
+    active: { x: dx, transition: returnTransition },
+    play: {
+      x: [0, -dx * 0.12, dx * 1.12, dx],
+      transition: beats([0, 0.16, 0.72, 1], 0.55 + index * 0.04),
+    },
+  };
+}
+
+export function MotionSliders(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      {SLIDER_ROWS.map((y) => (
+        <path key={`track-${y}`} d={`M3 ${y}h18`} opacity={0.45} />
+      ))}
+      {SLIDER_ROWS.map((y, i) => (
+        <motion.path key={`handle-${y}`} variants={sliderHandle(i)} d={`M${HANDLE_X[i]} ${y - 2}v4`} />
+      ))}
+    </MotionIcon>
+  );
+}
+
+// ─── Search — the lens sweeps and finds (cycle + payoff) ──────────────────────
+
+const lens: Variants = {
+  rest: { rotate: 0, transition: returnTransition },
+  active: { rotate: 0, transition: returnTransition },
+  play: {
+    // Pivots on the handle end, so the glass sweeps an arc like someone scanning.
+    rotate: [0, 9, -16, 4, 0],
+    transition: beats([0, 0.16, 0.48, 0.78, 1], 0.6),
+  },
+};
+
+const found: Variants = {
+  rest: { scale: 0, opacity: 0, transition: { duration: 0.15 } },
+  active: { scale: 1, opacity: 1, transition: { duration: 0.15 } },
+  play: {
+    scale: [0, 0, 0, 1.3, 1],
+    opacity: [0, 0, 0, 1, 1],
+    transition: beats([0, 0.16, 0.48, 0.78, 1], 0.6),
+  },
+};
+
+export function MotionSearch(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={lens} style={{ originX: "21px", originY: "21px" }}>
+        <circle cx="11" cy="11" r="8" />
+        <path d="m21 21-4.34-4.34" />
+        {/* Something turns up in the glass on the return stroke. */}
+        <motion.circle
+          variants={found}
+          opacity={0}
+          style={{ originX: "11px", originY: "11px" }}
+          fill="currentColor"
+          cx="11"
+          cy="11"
+          r="2.5"
+        />
+      </motion.g>
+    </MotionIcon>
+  );
+}
+
+// ─── Share — the outer nodes depart (detach, no return) ───────────────────────
+
+const SHARE_TIMES = [0, 0.2, 0.62, 1];
+
+/** Each node launches along its own connecting line, then comes back. */
+function shareNode(dx: number, dy: number): Variants {
+  return {
+    rest: { x: 0, y: 0, opacity: 1, transition: returnTransition },
+    active: { x: 0, y: 0, opacity: 1, transition: returnTransition },
+    play: {
+      x: [0, -dx * 0.18, dx, 0],
+      y: [0, -dy * 0.18, dy, 0],
+      opacity: [1, 1, 0.15, 1],
+      transition: beats(SHARE_TIMES, 0.58),
+    },
+  };
+}
+
+const shareTop = shareNode(7, -4);
+const shareBottom = shareNode(7, 4);
+
+export function MotionShare(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <circle cx="6" cy="12" r="3" />
+      <motion.g variants={shareTop}>
+        <circle cx="18" cy="5" r="3" />
+        <line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
+      </motion.g>
+      <motion.g variants={shareBottom}>
+        <circle cx="18" cy="19" r="3" />
+        <line x1="8.59" x2="15.42" y1="13.51" y2="17.49" />
+      </motion.g>
+    </MotionIcon>
+  );
+}
+
+// ─── Sort — the two arrows trade ends (articulate) ────────────────────────────
+
+const SORT_TIMES = [0, 0.18, 0.6, 1];
+
+function sortArm(dy: number): Variants {
+  return {
+    rest: { y: 0, transition: returnTransition },
+    active: { y: 0, transition: returnTransition },
+    play: {
+      y: [0, -dy * 0.2, dy, 0],
+      transition: beats(SORT_TIMES, 0.56),
+    },
+  };
+}
+
+const sortDown = sortArm(6);
+const sortUp = sortArm(-6);
+
+export function MotionSort(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={sortDown}>
+        <path d="m21 16-4 4-4-4" />
+        <path d="M17 20V4" />
+      </motion.g>
+      <motion.g variants={sortUp}>
+        <path d="m3 8 4-4 4 4" />
+        <path d="M7 4v16" />
+      </motion.g>
+    </MotionIcon>
+  );
+}
+
+// ─── Check — confirm. Draws itself on ────────────────────────────────────────
+
+/**
+ * `pathLength` is normalised by framer, so 0 → 1 gives the stroke-draw with no
+ * dash arithmetic. Kept short: a slow-drawing check feels laggy on a tap.
+ */
+const checkStroke: Variants = {
+  rest: { pathLength: 0, opacity: 0, transition: { duration: 0.15 } },
+  active: { pathLength: 1, opacity: 1, transition: { duration: 0.15 } },
+  play: {
+    pathLength: [0, 1],
+    opacity: [1, 1],
+    transition: { duration: 0.26, ease: "easeOut" },
+  },
+};
+
+export function MotionCheck(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      {/* Static `opacity={0}`: `controls.set()` runs in an effect, i.e. after
+          first paint, so without a rest-matching SVG attribute every inactive
+          instance paints one frame of fully-drawn check. Very visible in a
+          selection list where most rows are inactive. Applies to every part
+          below whose rest pose is hidden. */}
+      <motion.path variants={checkStroke} opacity={0} d="M20 6 9 17l-5-5" />
+    </MotionIcon>
+  );
+}
+
+// ─── Theme — the sun's rays retract and the moon carves in (articulate) ──────
+
+const SUN_RAYS = [
+  "M12 2v2",
+  "M12 20v2",
+  "m4.93 4.93 1.41 1.41",
+  "m17.66 17.66 1.41 1.41",
+  "M2 12h2",
+  "M20 12h2",
+  "m6.34 17.66-1.41 1.41",
+  "m19.07 4.93-1.41 1.41",
+];
+
+const THEME_TIMES = [0, 0.3, 0.7, 1];
+
+const rays: Variants = {
+  rest: { scale: 1, opacity: 1, transition: returnTransition },
+  active: { scale: 0, opacity: 0, transition: returnTransition },
+  play: {
+    scale: [1, 0.4, 0, 0],
+    opacity: [1, 0.5, 0, 0],
+    transition: beats(THEME_TIMES, 0.5),
+  },
+};
+
+const disc: Variants = {
+  rest: { scale: 1, opacity: 1, transition: returnTransition },
+  active: { scale: 0.6, opacity: 0, transition: returnTransition },
+  play: { scale: [1, 0.85, 0.6, 0.6], opacity: [1, 1, 0, 0], transition: beats(THEME_TIMES, 0.5) },
+};
+
+const crescent: Variants = {
+  rest: { scale: 0.6, opacity: 0, rotate: -35, transition: returnTransition },
+  active: { scale: 1, opacity: 1, rotate: 0, transition: returnTransition },
+  play: {
+    scale: [0.6, 0.7, 1.06, 1],
+    opacity: [0, 0, 1, 1],
+    rotate: [-35, -22, 4, 0],
+    transition: beats(THEME_TIMES, 0.5),
+  },
+};
+
+/**
+ * `active` is dark mode. The sun does not fade into the moon — its rays pull
+ * into the disc first, then the crescent swings in, so the two shapes never
+ * cross-dissolve into visual mush at 20px.
+ */
+export function MotionTheme(props: MotionIconProps) {
+  const origin = { originX: "12px", originY: "12px" } as const;
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={rays} style={origin}>
+        {SUN_RAYS.map((d) => (
+          <path key={d} d={d} />
+        ))}
+      </motion.g>
+      <motion.circle variants={disc} style={origin} cx="12" cy="12" r="4" />
+      <motion.path
+        variants={crescent}
+        opacity={0}
+        style={origin}
+        d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+      />
+    </MotionIcon>
+  );
+}
+
+// ─── Chevron — disclosure. Rotates, and overshoots on the way ────────────────
+
+/**
+ * The one gesture already half-present in the app: seven sites rotate a
+ * disclosure chevron and four forgot to. The overshoot is what separates this
+ * from a plain CSS rotate — the arrow arrives, tips past, and settles.
+ */
+const chevron: Variants = {
+  rest: { rotate: 0, y: 0, transition: returnTransition },
+  active: { rotate: 180, y: 0, transition: returnTransition },
+  play: {
+    rotate: [0, -12, 196, 180],
+    y: [0, 1, -1, 0],
+    transition: beats([0, 0.16, 0.72, 1], 0.44),
+  },
+};
+
+export function MotionChevron(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.path variants={chevron} style={{ originX: "12px", originY: "12px" }} d="m6 9 6 6 6-6" />
+    </MotionIcon>
+  );
+}
+
+// ─── Play / Pause — the bars converge into the triangle (articulate) ─────────
+
+const PLAYPAUSE_TIMES = [0, 0.24, 0.72, 1];
+
+/**
+ * `active` is playing, so `rest` shows the play triangle and `active` the two
+ * pause bars. The bars do not cross-fade with the triangle: they slide in from
+ * the triangle's own edges and straighten, so the shape reads as folding rather
+ * than as two icons dissolving.
+ */
+const playHead: Variants = {
+  rest: { scale: 1, opacity: 1, transition: returnTransition },
+  active: { scale: 0.2, opacity: 0, transition: returnTransition },
+  play: { scale: [1, 1.1, 0.2, 0.2], opacity: [1, 1, 0, 0], transition: beats(PLAYPAUSE_TIMES, 0.46) },
+};
+
+function pauseBar(dx: number): Variants {
+  return {
+    rest: { x: dx, scaleY: 0.2, opacity: 0, transition: returnTransition },
+    active: { x: 0, scaleY: 1, opacity: 1, transition: returnTransition },
+    play: {
+      x: [dx, dx * 0.7, -dx * 0.08, 0],
+      scaleY: [0.2, 0.4, 1.08, 1],
+      opacity: [0, 0.4, 1, 1],
+      transition: beats(PLAYPAUSE_TIMES, 0.46),
+    },
+  };
+}
+
+const barLeft = pauseBar(5);
+const barRight = pauseBar(-5);
+
+export function MotionPlayPause(props: MotionIconProps) {
+  const origin = { originX: "12px", originY: "12px" } as const;
+  return (
+    <MotionIcon {...props}>
+      <motion.path
+        variants={playHead}
+        style={origin}
+        d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
+      />
+      <motion.rect variants={barLeft} opacity={0} style={origin} x="5" y="3" width="5" height="18" rx="1" />
+      <motion.rect variants={barRight} opacity={0} style={origin} x="14" y="3" width="5" height="18" rx="1" />
+    </MotionIcon>
+  );
+}
+
+// ─── Eye — password reveal. The lid closes over it (articulate) ──────────────
+
+const EYE_TIMES = [0, 0.3, 0.74, 1];
+
+/**
+ * `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`.
+ */
+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) },
+};
+
+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) },
+};
+
+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),
+  },
+};
+
+export function MotionEye(props: MotionIconProps) {
+  const origin = { originX: "12px", originY: "12px" } as const;
+  return (
+    <MotionIcon {...props}>
+      <motion.path
+        variants={lid}
+        style={origin}
+        d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
+      />
+      <motion.circle variants={pupil} style={origin} cx="12" cy="12" r="3" />
+      <motion.path variants={slash} opacity={0} d="m2 2 20 20" />
+    </MotionIcon>
+  );
+}
+
+// ─── Star — rating filter. The points spring out (articulate) ───────────────
+
+const STAR_TIMES = [0, 0.2, 0.62, 1];
+
+/**
+ * The star grows its points rather than fading a fill in: it pulls in tight
+ * first, then springs out past full size, filling as it goes.
+ */
+const starBody: Variants = {
+  rest: { scale: 1, rotate: 0, fillOpacity: 0, transition: returnTransition },
+  active: { scale: 1, rotate: 0, fillOpacity: 1, transition: returnTransition },
+  play: {
+    scale: [1, 0.72, 1.22, 1],
+    rotate: [0, -14, 6, 0],
+    fillOpacity: [0, 0, 1, 1],
+    transition: beats(STAR_TIMES, 0.5),
+  },
+};
+
+export function MotionStar(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.path
+        variants={starBody}
+        style={{ originX: "12px", originY: "12px" }}
+        fill="currentColor"
+        fillOpacity={0}
+        d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
+      />
+    </MotionIcon>
+  );
+}
+
+// ─── Copy — the sheet slides out, then the check lands (cycle + draw) ───────
+
+const COPY_TIMES = [0, 0.22, 0.5, 0.76, 1];
+
+/** The front sheet peels off the back one and returns. */
+const copySheet: Variants = {
+  rest: { x: 0, y: 0, opacity: 1, transition: returnTransition },
+  active: { x: 0, y: 0, opacity: 0, transition: returnTransition },
+  play: {
+    x: [0, 2.5, 4, 0, 0],
+    y: [0, -2.5, -4, 0, 0],
+    opacity: [1, 1, 1, 0, 0],
+    transition: beats(COPY_TIMES, 0.6),
+  },
+};
+
+const copyBack: Variants = {
+  rest: { opacity: 1, transition: returnTransition },
+  active: { opacity: 0, transition: returnTransition },
+  play: { opacity: [1, 1, 1, 0, 0], transition: beats(COPY_TIMES, 0.6) },
+};
+
+/** The confirmation draws on only once the sheet has come back. */
+const copyCheck: Variants = {
+  rest: { pathLength: 0, opacity: 0, transition: { duration: 0.14 } },
+  active: { pathLength: 1, opacity: 1, transition: { duration: 0.14 } },
+  play: {
+    pathLength: [0, 0, 0, 0, 1],
+    opacity: [0, 0, 0, 1, 1],
+    transition: beats(COPY_TIMES, 0.6),
+  },
+};
+
+export function MotionCopy(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.path variants={copyBack} d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+      <motion.rect variants={copySheet} width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <motion.path variants={copyCheck} opacity={0} d="M20 6 9 17l-5-5" />
+    </MotionIcon>
+  );
+}
+
+// ─── Refresh — one full turn, overshooting and settling (cycle) ─────────────
+
+/**
+ * The object does its one job. A full 360 rather than a partial sweep, so the
+ * arrowheads end exactly where they started and the rest pose is untouched.
+ */
+const refreshRing: Variants = {
+  rest: { rotate: 0, transition: returnTransition },
+  active: { rotate: 0, transition: returnTransition },
+  play: {
+    rotate: [0, -18, 372, 360],
+    transition: beats([0, 0.14, 0.8, 1], 0.66),
+  },
+};
+
+export function MotionRefresh(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <motion.g variants={refreshRing} style={{ originX: "12px", originY: "12px" }}>
+        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+        <path d="M21 3v5h-5" />
+        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+        <path d="M8 16H3v5" />
+      </motion.g>
+    </MotionIcon>
+  );
+}