@make-pictures/kits 0.0.0-stage → 2.0.1

package/dist/isometric-3d/index.cjs

@@ -0,0 +1,611 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/kits/src/isometric-3d/index.ts
+var isometric_3d_exports = {};
+__export(isometric_3d_exports, {
+  IsometricStudioEnvironment: () => IsometricStudioEnvironment,
+  Stylized3DCharacter: () => Stylized3DCharacter
+});
+module.exports = __toCommonJS(isometric_3d_exports);
+
+// packages/kits/src/isometric-3d/Stylized3DCharacter.tsx
+var import_remotion = require("remotion");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Stylized3DCharacter = ({
+  position,
+  rotationY,
+  primaryColor,
+  accentColor,
+  speechEnergy,
+  speakingWeight,
+  gestureWeights,
+  enterFrame = 2,
+  headYawOffset = 0
+}) => {
+  const frame = (0, import_remotion.useCurrentFrame)();
+  const { fps } = (0, import_remotion.useVideoConfig)();
+  const enterProgress = (0, import_remotion.spring)({
+    frame: frame - enterFrame,
+    fps,
+    config: { damping: 200, stiffness: 55, mass: 1.2 }
+  });
+  const isShrug = gestureWeights.shrug ?? 0;
+  const isPresentR = gestureWeights.presentRight ?? 0;
+  const isPresentL = gestureWeights.presentLeft ?? 0;
+  const isCelebrate = gestureWeights.celebrate ?? 0;
+  const isNod = gestureWeights.listenNod ?? 0;
+  const breath = Math.sin(frame * 0.038) * 0.012;
+  const talkCadenceA = Math.sin(frame * 0.048) * speakingWeight;
+  const talkCadenceB = Math.cos(frame * 0.038) * speakingWeight;
+  const headPitch = -0.04 * speakingWeight + Math.sin(frame * 0.052) * 0.035 * speakingWeight + isNod * Math.sin(frame * 0.055) * 0.045 + isShrug * -0.06;
+  const headRoll = isShrug * 0.1 + Math.sin(frame * 0.042) * 0.03 * speakingWeight;
+  const headYaw = headYawOffset + Math.cos(frame * 0.036) * 0.035 * speakingWeight;
+  const leftShoulderX = -0.12 + isShrug * -0.58 + isPresentL * -0.82 + isPresentR * -0.25 + isCelebrate * -0.92 + speakingWeight * -0.18 + talkCadenceA * 0.08;
+  const leftShoulderZ = -0.12 + isShrug * -0.42 + isPresentL * -0.3 + isCelebrate * -0.35 + speakingWeight * -0.08;
+  const leftElbowX = -0.24 + isShrug * -0.72 + isPresentL * -0.45 + isCelebrate * -0.55 + speakingWeight * -0.26 + talkCadenceB * 0.07;
+  const rightShoulderX = -0.12 + isShrug * -0.58 + isPresentR * -0.82 + isPresentL * -0.25 + isCelebrate * -0.92 + speakingWeight * -0.18 - talkCadenceA * 0.08;
+  const rightShoulderZ = 0.12 + isShrug * 0.42 + isPresentR * 0.3 + isCelebrate * 0.35 + speakingWeight * 0.08;
+  const rightElbowX = -0.24 + isShrug * -0.72 + isPresentR * -0.45 + isCelebrate * -0.55 + speakingWeight * -0.26 - talkCadenceB * 0.07;
+  const torsoPitch = speakingWeight * 0.035 - isShrug * 0.03;
+  const torsoYaw = isPresentL * 0.12 - isPresentR * 0.12;
+  const scale = (0, import_remotion.interpolate)(enterProgress, [0, 1], [1e-3, 1]);
+  const auraScale = 1 + speakingWeight * 0.08;
+  const clampedSpeak = Math.max(0, Math.min(1, speakingWeight));
+  const floorRingColor = (0, import_remotion.interpolateColors)(
+    clampedSpeak,
+    [0, 1],
+    [primaryColor, accentColor]
+  );
+  const activeWhiteMix = (0, import_remotion.interpolateColors)(
+    clampedSpeak,
+    [0, 1],
+    [accentColor, "#FFFFFF"]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "group",
+    {
+      position,
+      rotation: [0, rotationY, 0],
+      scale: [scale, scale, scale],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "mesh",
+          {
+            position: [0, 0.02, 0],
+            rotation: [-Math.PI / 2, 0, 0],
+            scale: [auraScale, auraScale, 1],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ringGeometry", { args: [0.42, 0.56, 48] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "meshBasicMaterial",
+                {
+                  color: floorRingColor,
+                  transparent: true,
+                  opacity: 0.26 + speakingWeight * 0.46
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, 0.015, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circleGeometry", { args: [0.42, 48] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "meshBasicMaterial",
+            {
+              color: primaryColor,
+              transparent: true,
+              opacity: 0.08 + speakingWeight * 0.14
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("group", { position: [-0.16, 0.9, 0], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.085, 24, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#1E293B", roughness: 0.35, metalness: 0.4 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.22, 0], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.075, 0.28, 16, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#334155", roughness: 0.3, metalness: 0.2 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.44, 0], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.08, 24, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: accentColor, roughness: 0.25, metalness: 0.3 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.66, 0], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.068, 0.28, 16, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#334155", roughness: 0.3, metalness: 0.2 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.84, 0.06], rotation: [Math.PI / 2, 0, 0], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.075, 0.12, 16, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.2, metalness: 0.1 })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("group", { position: [0.16, 0.9, 0], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.085, 24, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#1E293B", roughness: 0.35, metalness: 0.4 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.22, 0], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.075, 0.28, 16, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#334155", roughness: 0.3, metalness: 0.2 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.44, 0], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.08, 24, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: accentColor, roughness: 0.25, metalness: 0.3 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.66, 0], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.068, 0.28, 16, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#334155", roughness: 0.3, metalness: 0.2 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.84, 0.06], rotation: [Math.PI / 2, 0, 0], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.075, 0.12, 16, 24] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.2, metalness: 0.1 })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "group",
+          {
+            position: [0, 0.94 + breath, 0],
+            rotation: [torsoPitch, torsoYaw, 0],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, 0.06, 0], children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("cylinderGeometry", { args: [0.21, 0.19, 0.12, 32] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#1E293B", roughness: 0.35, metalness: 0.45 })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, 0.44, 0], children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.25, 0.42, 24, 32] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "meshStandardMaterial",
+                  {
+                    color: primaryColor,
+                    roughness: 0.24,
+                    metalness: 0.18
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, 0.48, 0.245], children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.068, 24, 24] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color: activeWhiteMix })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, 0.48, 0.235], children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ringGeometry", { args: [0.075, 0.105, 32] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color: accentColor })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, 0.84, 0], children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("cylinderGeometry", { args: [0.16, 0.2, 0.08, 32] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#E2E8F0", roughness: 0.2, metalness: 0.6 })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "group",
+                {
+                  position: [-0.34, 0.72, 0],
+                  rotation: [leftShoulderX, 0, leftShoulderZ],
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.095, 24, 24] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.2, metalness: 0.3 })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.19, 0], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.068, 0.24, 16, 24] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: primaryColor, roughness: 0.25, metalness: 0.15 })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("group", { position: [0, -0.38, 0], rotation: [leftElbowX, 0, 0], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.078, 24, 24] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: accentColor, roughness: 0.25, metalness: 0.3 })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.18, 0], children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.062, 0.22, 16, 24] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.22, metalness: 0.1 })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.36, 0], children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.092, 24, 24] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#FFFFFF", roughness: 0.18, metalness: 0.1 })
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "group",
+                {
+                  position: [0.34, 0.72, 0],
+                  rotation: [rightShoulderX, 0, rightShoulderZ],
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.095, 24, 24] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.2, metalness: 0.3 })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.19, 0], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.068, 0.24, 16, 24] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: primaryColor, roughness: 0.25, metalness: 0.15 })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("group", { position: [0, -0.38, 0], rotation: [rightElbowX, 0, 0], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.078, 24, 24] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: accentColor, roughness: 0.25, metalness: 0.3 })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.18, 0], children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.062, 0.22, 16, 24] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.22, metalness: 0.1 })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, -0.36, 0], children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.092, 24, 24] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: "#FFFFFF", roughness: 0.18, metalness: 0.1 })
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "group",
+                {
+                  position: [0, 1.24 + Math.sin(frame * 0.038 - 0.4) * 8e-3, 0],
+                  rotation: [headPitch, headYaw, headRoll],
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.31, 36, 36] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "meshStandardMaterial",
+                        {
+                          color: "#FFFFFF",
+                          roughness: 0.18,
+                          metalness: 0.08
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [-0.3, 0, 0], rotation: [0, 0, Math.PI / 2], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("cylinderGeometry", { args: [0.09, 0.09, 0.05, 24] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: primaryColor, roughness: 0.25, metalness: 0.3 })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0.3, 0, 0], rotation: [0, 0, Math.PI / 2], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("cylinderGeometry", { args: [0.09, 0.09, 0.05, 24] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshStandardMaterial", { color: primaryColor, roughness: 0.25, metalness: 0.3 })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0, 0.02, 0.165], scale: [0.86, 0.62, 0.68], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sphereGeometry", { args: [0.295, 32, 32] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "meshStandardMaterial",
+                        {
+                          color: "#090D16",
+                          roughness: 0.1,
+                          metalness: 0.35
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [-0.095, 0.055, 0.355], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.028, 0.032, 12, 16] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color: accentColor })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mesh", { position: [0.095, 0.055, 0.355], children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("capsuleGeometry", { args: [0.028, 0.032, 12, 16] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color: accentColor })
+                    ] }),
+                    [-0.055, 0, 0.055].map((xOff, idx) => {
+                      const barHeight = 0.012 + speechEnergy * (idx === 1 ? 0.046 : 0.028);
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "mesh",
+                        {
+                          position: [xOff, -0.032, 0.358],
+                          scale: [1, barHeight / 0.012, 1],
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("boxGeometry", { args: [0.026, 0.012, 0.016] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meshBasicMaterial", { color: activeWhiteMix })
+                          ]
+                        },
+                        idx
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/isometric-3d/IsometricStudioEnvironment.tsx
+var import_remotion2 = require("remotion");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IsometricStudioEnvironment = ({ codeMorphFrame, finaleActivateFrame }) => {
+  const frame = (0, import_remotion2.useCurrentFrame)();
+  const { fps } = (0, import_remotion2.useVideoConfig)();
+  const stageEnter = (0, import_remotion2.spring)({
+    frame: frame - 2,
+    fps,
+    config: { damping: 200, stiffness: 48, mass: 1.3 }
+  });
+  const codeMorph = (0, import_remotion2.spring)({
+    frame: frame - codeMorphFrame,
+    fps,
+    config: { damping: 200, stiffness: 32, mass: 1.4 }
+  });
+  const finaleBoost = (0, import_remotion2.spring)({
+    frame: frame - finaleActivateFrame,
+    fps,
+    config: { damping: 200, stiffness: 34, mass: 1.3 }
+  });
+  const stageScale = (0, import_remotion2.interpolate)(stageEnter, [0, 1], [1e-3, 1]);
+  const phaseProgress = Math.min(2, codeMorph + finaleBoost);
+  const holoColor = (0, import_remotion2.interpolateColors)(
+    phaseProgress,
+    [0, 1, 2],
+    ["#F59E0B", "#6366F1", "#10B981"]
+  );
+  const crystalCoreColor = (0, import_remotion2.interpolateColors)(
+    finaleBoost,
+    [0, 1],
+    ["#2563EB", "#10B981"]
+  );
+  const crystalEmissiveColor = (0, import_remotion2.interpolateColors)(
+    finaleBoost,
+    [0, 1],
+    ["#1D4ED8", "#059669"]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("group", { scale: [stageScale, stageScale, stageScale], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ambientLight", { intensity: 1.15, color: "#F8FAFC" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "directionalLight",
+      {
+        position: [7, 12, 8],
+        intensity: 1.75,
+        color: "#FFFFFF"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "directionalLight",
+      {
+        position: [-8, 6, -4],
+        intensity: 0.75,
+        color: "#C7D2FE"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "pointLight",
+      {
+        position: [0, 2.2, 0.2],
+        intensity: 1.6 + codeMorph * 1.2 + finaleBoost * 1.2,
+        distance: 6,
+        color: holoColor
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, -0.2, 0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [8.4, 0.4, 6.4] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "#FFFFFF", roughness: 0.25, metalness: 0.05 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, -0.43, 0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [8.48, 0.07, 6.48] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: "#2563EB" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, -0.62, 0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [8.1, 0.32, 6.1] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "#1E1B4B", roughness: 0.4, metalness: 0.3 })
+    ] }),
+    [-3, -2, -1, 0, 1, 2, 3].map((x) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [x, 4e-3, 0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [0.018, 4e-3, 5.8] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: "#E2E8F0" })
+    ] }, `gx-${x}`)),
+    [-2, -1, 0, 1, 2].map((z) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, 4e-3, z], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [7.8, 4e-3, 0.018] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: "#E2E8F0" })
+    ] }, `gz-${z}`)),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, 1.45, -3.05], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [8.4, 2.9, 0.28] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "#F1F5F9", roughness: 0.3, metalness: 0.05 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, 2.92, -3.05], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [8.4, 0.08, 0.3] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: "#7209B7" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [-4.06, 1.45, 0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [0.28, 2.9, 6.4] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "#E2E8F0", roughness: 0.3, metalness: 0.05 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [-4.06, 2.92, 0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [0.3, 0.08, 6.4] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: "#2563EB" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("group", { position: [0, 1.65, -2.86], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [4.2, 1.55, 0.08] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "#0F172A", roughness: 0.2, metalness: 0.4 })
+      ] }),
+      [-0.42, -0.14, 0.14, 0.42].map((yOff, idx) => {
+        const baseW = 1.25 + idx * 0.55 % 1.3;
+        const barWidth = baseW + codeMorph * 0.45 + finaleBoost * 0.25;
+        const barColor = (0, import_remotion2.interpolateColors)(
+          codeMorph,
+          [0, 1],
+          idx % 2 === 0 ? ["#F59E0B", "#10B981"] : ["#F43F5E", "#818CF8"]
+        );
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "mesh",
+          {
+            position: [-1.5 + barWidth / 2, yOff, 0.05],
+            scale: [barWidth, 1, 1],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [1, 0.13, 0.03] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: barColor })
+            ]
+          },
+          idx
+        );
+      })
+    ] }),
+    [-1.6, 0, 1.6].map((zPos, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [-3.88, 1.45, zPos], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [0.08, 2.1, 0.18] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "meshBasicMaterial",
+        {
+          color: i === 1 ? "#10B981" : "#6366F1"
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("group", { position: [0, 0, 0.35], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, 0.04, 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("cylinderGeometry", { args: [0.92, 1.02, 0.08, 48] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "#1E293B", roughness: 0.3, metalness: 0.5 })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, 0.46, 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("cylinderGeometry", { args: [0.38, 0.52, 0.84, 48] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.22, metalness: 0.15 })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, 0.9, 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("cylinderGeometry", { args: [1.05, 0.95, 0.1, 48] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshStandardMaterial", { color: "#0F172A", roughness: 0.15, metalness: 0.45 })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, 0.96, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ringGeometry", { args: [0.68, 0.82, 48] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: holoColor })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("mesh", { position: [0, 0.958, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circleGeometry", { args: [0.65, 48] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: holoColor, transparent: true, opacity: 0.22 })
+      ] }),
+      codeMorph < 0.98 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "group",
+        {
+          position: [0, 1.62, 0],
+          scale: [1 - codeMorph, 1 - codeMorph, 1 - codeMorph],
+          children: [-0.45, 0, 0.45].map((xOff, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "mesh",
+            {
+              position: [
+                xOff,
+                Math.sin(frame * 0.032 + idx * 1.8) * 0.06,
+                (idx - 1) * 0.14
+              ],
+              rotation: [
+                0.12 * Math.sin(frame * 0.025 + idx),
+                frame * 6e-3 + idx * 0.5,
+                0.14 * Math.cos(frame * 0.028 + idx)
+              ],
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("boxGeometry", { args: [0.42, 0.22, 0.28] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "meshStandardMaterial",
+                  {
+                    color: idx === 1 ? "#F43F5E" : "#F59E0B",
+                    roughness: 0.2,
+                    metalness: 0.2
+                  }
+                )
+              ]
+            },
+            idx
+          ))
+        }
+      ),
+      codeMorph > 0.02 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "group",
+        {
+          position: [0, 1.76 + Math.sin(frame * 0.03) * 0.03, 0],
+          scale: [codeMorph, codeMorph, codeMorph],
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "mesh",
+              {
+                rotation: [
+                  frame * 7e-3,
+                  frame * 0.011,
+                  frame * 5e-3
+                ],
+                scale: [
+                  1 + finaleBoost * 0.16,
+                  1 + finaleBoost * 0.16,
+                  1 + finaleBoost * 0.16
+                ],
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("octahedronGeometry", { args: [0.42, 0] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "meshStandardMaterial",
+                    {
+                      color: crystalCoreColor,
+                      emissive: crystalEmissiveColor,
+                      emissiveIntensity: 0.65,
+                      roughness: 0.15,
+                      metalness: 0.4
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "mesh",
+              {
+                rotation: [
+                  Math.PI / 3 + frame * 8e-3,
+                  frame * 0.01,
+                  0
+                ],
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("torusGeometry", { args: [0.68, 0.022, 16, 64] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: "#818CF8" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "mesh",
+              {
+                rotation: [
+                  -Math.PI / 3 - frame * 7e-3,
+                  -frame * 9e-3,
+                  Math.PI / 4
+                ],
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("torusGeometry", { args: [0.82, 0.022, 16, 64] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meshBasicMaterial", { color: "#10B981" })
+                ]
+              }
+            ),
+            finaleBoost > 0.02 && [0, 1, 2, 3].map((satIdx) => {
+              const angle = frame * 0.014 + satIdx * Math.PI / 2;
+              const radius = 0.95 * finaleBoost;
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "mesh",
+                {
+                  position: [
+                    Math.cos(angle) * radius,
+                    Math.sin(angle * 2) * 0.08,
+                    Math.sin(angle) * radius
+                  ],
+                  scale: [finaleBoost, finaleBoost, finaleBoost],
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("sphereGeometry", { args: [0.085, 20, 20] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "meshBasicMaterial",
+                      {
+                        color: satIdx % 2 === 0 ? "#10B981" : "#FFFFFF"
+                      }
+                    )
+                  ]
+                },
+                satIdx
+              );
+            })
+          ]
+        }
+      )
+    ] })
+  ] });
+};

package/dist/isometric-3d/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stylized3DCharacter';
+export * from './IsometricStudioEnvironment';

package/dist/isometric-3d/index.mjs

@@ -0,0 +1,8 @@
+import {
+  IsometricStudioEnvironment,
+  Stylized3DCharacter
+} from "../chunk-3SUIELJV.mjs";
+export {
+  IsometricStudioEnvironment,
+  Stylized3DCharacter
+};

package/dist/kinetic-typography/AnimatedMetricCounter.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+export interface AnimatedMetricCounterProps {
+    /** Target numeric value */
+    value: number;
+    /** Starting numeric value (default `0`) */
+    fromValue?: number;
+    /** Leading symbol/unit (e.g. `'$'`, `'+'`) */
+    prefix?: string;
+    /** Trailing symbol/unit (e.g. `'%'`, `' FPS'`, `'×'`) */
+    suffix?: string;
+    /** Fixed decimal places (default `0`) */
+    decimals?: number;
+    /** Frame when the ticker starts counting (default `2`, obeying Frame 0 clean board rule) */
+    startFrame?: number;
+    /** Count-up duration in frames at 60 FPS (default `54`) */
+    durationInFrames?: number;
+    /** Optional concise 2–3 word label below the counter */
+    label?: string;
+    /** Optional delta pill badge (e.g. `"+240%"`) */
+    badge?: string;
+    /** Highlight accent color (default `STUDIO_THEME.colors.accents.emerald`) */
+    accentColor?: string;
+    /** Presentation mode (`'inline'` renders pure tabular text without card chrome) */
+    variant?: 'dark' | 'light' | 'inline';
+    /** Thousands separator character (default `','`) */
+    thousandSeparator?: string;
+    /** Font size in px for the main number */
+    fontSize?: number;
+    style?: React.CSSProperties;
+}
+export declare function formatTabularMetric(val: number, decimals?: number, thousandSeparator?: string): string;
+/**
+ * Smooth 60 FPS Interpolated Number / Currency / Percentage Ticker.
+ * Uses `tabular-nums` so digits never jump horizontally while counting.
+ */
+export declare const AnimatedMetricCounter: React.FC<AnimatedMetricCounterProps>;