@make-pictures/kits 0.0.0-stage → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 make.pictures (https://make.pictures)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,50 @@
-# Temporary Holding Version
+<p align="center">
+  <a href="https://make.pictures"><img src="https://make.pictures/brand/make-pictures-logo.svg" alt="make.pictures — Open-source 60 FPS Video-as-Code Studio" width="420" /></a>
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@make-pictures/kits"><img src="https://img.shields.io/npm/v/@make-pictures/kits?style=for-the-badge&labelColor=0F172A&color=FF2A85&label=%40make-pictures%2Fkits" alt="@make-pictures/kits on npm" /></a>
+  <img src="https://img.shields.io/badge/7_Visual_Kits_%2B_VFX-FF2A85?style=for-the-badge&labelColor=0F172A" alt="7 Visual Kits %2B VFX" />
+  <a href="https://make.pictures"><img src="https://img.shields.io/badge/make.pictures-Studio-2563EB?style=for-the-badge&labelColor=0F172A" alt="make.pictures Studio" /></a>
+</p>
+
+# `@make-pictures/kits`
+
+Composable **60 FPS Visual Kits** for [`make.pictures`](https://make.pictures):
+
+- `@make-pictures/kits/paper-diorama-3d` — 2.5D Pop-Up Book theater (`PaperCutout3D`, `ImageCutout3D`, `PopUpHinge3D`, `PopUpBookBase3D`, `PaperStageLighting3D`).
+- `@make-pictures/kits/isometric-3d` — Multi-character 3D isometric dialogue stage (`Stylized3DCharacter`, `IsometricStudioEnvironment`).
+- `@make-pictures/kits/motion-diagrams-2d` — Infinite-canvas architecture & telemetry diagrams (`NodeBox`, `FlowCurve`, `CameraRig`, `SystemNode`, `DataFlowEdge`).
+- `@make-pictures/kits/kinetic-typography` — Rhythmic phrase beats & tickers (`WordByWordStage`, `ImpactKeywordCard`, `AnimatedMetricCounter`).
+- `@make-pictures/kits/data-storytelling` — Animated charts & benchmarks (`AnimatedBarRace`, `TimelineTrack`, `MetricComparisonCard`).
+- `@make-pictures/kits/vfx` — Velocity-coupled optical overlays & 3D volumetric atmosphere (`CinematicLensOverlay`, `ParticleField`, `StagePostProcessing3D`, `SceneTransition`).
+- `@make-pictures/kits/product-frames` — Product Frames for SaaS `.mp4` screen recordings (`BrowserFrame`, `PhoneFrame`, `ScreenSpotlightOverlay`) rendered via Remotion `<OffthreadVideo />`.
+
+## Install
+
+```bash
+npm install @make-pictures/core @make-pictures/kits
+```
+
+## Usage
+
+```tsx
+import { FlowCurve, portRight, portLeft, type NodeBox } from '@make-pictures/kits/motion-diagrams-2d';
+
+const NODES = {
+  api: { cx: 520, cy: 540, w: 340, h: 150 },
+  db: { cx: 1180, cy: 540, w: 340, h: 150 },
+} satisfies Record<string, NodeBox>;
+
+<FlowCurve from={portRight(NODES.api)} to={portLeft(NODES.db)} activeFromFrame={24} packetSpeedFrames={104} />;
+```
+
+## Links
+
+- Website: [make.pictures](https://make.pictures)
+- Source & docs: [github.com/make-pictures/make-pictures-studio](https://github.com/make-pictures/make-pictures-studio)
+- YouTube: [@makepicturestv](https://www.youtube.com/@makepicturestv) (EN) · [@makepicturespl](https://www.youtube.com/@makepicturespl) (PL)
+
+## License
+
+MIT © [make.pictures](https://make.pictures)

package/dist/chunk-3SUIELJV.mjs

@@ -0,0 +1,601 @@
+// packages/kits/src/isometric-3d/Stylized3DCharacter.tsx
+import {
+  interpolate,
+  interpolateColors,
+  spring,
+  useCurrentFrame,
+  useVideoConfig
+} from "remotion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Stylized3DCharacter = ({
+  position,
+  rotationY,
+  primaryColor,
+  accentColor,
+  speechEnergy,
+  speakingWeight,
+  gestureWeights,
+  enterFrame = 2,
+  headYawOffset = 0
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const enterProgress = 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 = interpolate(enterProgress, [0, 1], [1e-3, 1]);
+  const auraScale = 1 + speakingWeight * 0.08;
+  const clampedSpeak = Math.max(0, Math.min(1, speakingWeight));
+  const floorRingColor = interpolateColors(
+    clampedSpeak,
+    [0, 1],
+    [primaryColor, accentColor]
+  );
+  const activeWhiteMix = interpolateColors(
+    clampedSpeak,
+    [0, 1],
+    [accentColor, "#FFFFFF"]
+  );
+  return /* @__PURE__ */ jsxs(
+    "group",
+    {
+      position,
+      rotation: [0, rotationY, 0],
+      scale: [scale, scale, scale],
+      children: [
+        /* @__PURE__ */ jsxs(
+          "mesh",
+          {
+            position: [0, 0.02, 0],
+            rotation: [-Math.PI / 2, 0, 0],
+            scale: [auraScale, auraScale, 1],
+            children: [
+              /* @__PURE__ */ jsx("ringGeometry", { args: [0.42, 0.56, 48] }),
+              /* @__PURE__ */ jsx(
+                "meshBasicMaterial",
+                {
+                  color: floorRingColor,
+                  transparent: true,
+                  opacity: 0.26 + speakingWeight * 0.46
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("mesh", { position: [0, 0.015, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsx("circleGeometry", { args: [0.42, 48] }),
+          /* @__PURE__ */ jsx(
+            "meshBasicMaterial",
+            {
+              color: primaryColor,
+              transparent: true,
+              opacity: 0.08 + speakingWeight * 0.14
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("group", { position: [-0.16, 0.9, 0], children: [
+          /* @__PURE__ */ jsxs("mesh", { children: [
+            /* @__PURE__ */ jsx("sphereGeometry", { args: [0.085, 24, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#1E293B", roughness: 0.35, metalness: 0.4 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, -0.22, 0], children: [
+            /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.075, 0.28, 16, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#334155", roughness: 0.3, metalness: 0.2 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, -0.44, 0], children: [
+            /* @__PURE__ */ jsx("sphereGeometry", { args: [0.08, 24, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: accentColor, roughness: 0.25, metalness: 0.3 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, -0.66, 0], children: [
+            /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.068, 0.28, 16, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#334155", roughness: 0.3, metalness: 0.2 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, -0.84, 0.06], rotation: [Math.PI / 2, 0, 0], children: [
+            /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.075, 0.12, 16, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.2, metalness: 0.1 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("group", { position: [0.16, 0.9, 0], children: [
+          /* @__PURE__ */ jsxs("mesh", { children: [
+            /* @__PURE__ */ jsx("sphereGeometry", { args: [0.085, 24, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#1E293B", roughness: 0.35, metalness: 0.4 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, -0.22, 0], children: [
+            /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.075, 0.28, 16, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#334155", roughness: 0.3, metalness: 0.2 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, -0.44, 0], children: [
+            /* @__PURE__ */ jsx("sphereGeometry", { args: [0.08, 24, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: accentColor, roughness: 0.25, metalness: 0.3 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, -0.66, 0], children: [
+            /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.068, 0.28, 16, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#334155", roughness: 0.3, metalness: 0.2 })
+          ] }),
+          /* @__PURE__ */ jsxs("mesh", { position: [0, -0.84, 0.06], rotation: [Math.PI / 2, 0, 0], children: [
+            /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.075, 0.12, 16, 24] }),
+            /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.2, metalness: 0.1 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "group",
+          {
+            position: [0, 0.94 + breath, 0],
+            rotation: [torsoPitch, torsoYaw, 0],
+            children: [
+              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.06, 0], children: [
+                /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.21, 0.19, 0.12, 32] }),
+                /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#1E293B", roughness: 0.35, metalness: 0.45 })
+              ] }),
+              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.44, 0], children: [
+                /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.25, 0.42, 24, 32] }),
+                /* @__PURE__ */ jsx(
+                  "meshStandardMaterial",
+                  {
+                    color: primaryColor,
+                    roughness: 0.24,
+                    metalness: 0.18
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.48, 0.245], children: [
+                /* @__PURE__ */ jsx("sphereGeometry", { args: [0.068, 24, 24] }),
+                /* @__PURE__ */ jsx("meshBasicMaterial", { color: activeWhiteMix })
+              ] }),
+              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.48, 0.235], children: [
+                /* @__PURE__ */ jsx("ringGeometry", { args: [0.075, 0.105, 32] }),
+                /* @__PURE__ */ jsx("meshBasicMaterial", { color: accentColor })
+              ] }),
+              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.84, 0], children: [
+                /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.16, 0.2, 0.08, 32] }),
+                /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#E2E8F0", roughness: 0.2, metalness: 0.6 })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "group",
+                {
+                  position: [-0.34, 0.72, 0],
+                  rotation: [leftShoulderX, 0, leftShoulderZ],
+                  children: [
+                    /* @__PURE__ */ jsxs("mesh", { children: [
+                      /* @__PURE__ */ jsx("sphereGeometry", { args: [0.095, 24, 24] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.2, metalness: 0.3 })
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [0, -0.19, 0], children: [
+                      /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.068, 0.24, 16, 24] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color: primaryColor, roughness: 0.25, metalness: 0.15 })
+                    ] }),
+                    /* @__PURE__ */ jsxs("group", { position: [0, -0.38, 0], rotation: [leftElbowX, 0, 0], children: [
+                      /* @__PURE__ */ jsxs("mesh", { children: [
+                        /* @__PURE__ */ jsx("sphereGeometry", { args: [0.078, 24, 24] }),
+                        /* @__PURE__ */ jsx("meshStandardMaterial", { color: accentColor, roughness: 0.25, metalness: 0.3 })
+                      ] }),
+                      /* @__PURE__ */ jsxs("mesh", { position: [0, -0.18, 0], children: [
+                        /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.062, 0.22, 16, 24] }),
+                        /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.22, metalness: 0.1 })
+                      ] }),
+                      /* @__PURE__ */ jsxs("mesh", { position: [0, -0.36, 0], children: [
+                        /* @__PURE__ */ jsx("sphereGeometry", { args: [0.092, 24, 24] }),
+                        /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#FFFFFF", roughness: 0.18, metalness: 0.1 })
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "group",
+                {
+                  position: [0.34, 0.72, 0],
+                  rotation: [rightShoulderX, 0, rightShoulderZ],
+                  children: [
+                    /* @__PURE__ */ jsxs("mesh", { children: [
+                      /* @__PURE__ */ jsx("sphereGeometry", { args: [0.095, 24, 24] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.2, metalness: 0.3 })
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [0, -0.19, 0], children: [
+                      /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.068, 0.24, 16, 24] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color: primaryColor, roughness: 0.25, metalness: 0.15 })
+                    ] }),
+                    /* @__PURE__ */ jsxs("group", { position: [0, -0.38, 0], rotation: [rightElbowX, 0, 0], children: [
+                      /* @__PURE__ */ jsxs("mesh", { children: [
+                        /* @__PURE__ */ jsx("sphereGeometry", { args: [0.078, 24, 24] }),
+                        /* @__PURE__ */ jsx("meshStandardMaterial", { color: accentColor, roughness: 0.25, metalness: 0.3 })
+                      ] }),
+                      /* @__PURE__ */ jsxs("mesh", { position: [0, -0.18, 0], children: [
+                        /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.062, 0.22, 16, 24] }),
+                        /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.22, metalness: 0.1 })
+                      ] }),
+                      /* @__PURE__ */ jsxs("mesh", { position: [0, -0.36, 0], children: [
+                        /* @__PURE__ */ jsx("sphereGeometry", { args: [0.092, 24, 24] }),
+                        /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#FFFFFF", roughness: 0.18, metalness: 0.1 })
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "group",
+                {
+                  position: [0, 1.24 + Math.sin(frame * 0.038 - 0.4) * 8e-3, 0],
+                  rotation: [headPitch, headYaw, headRoll],
+                  children: [
+                    /* @__PURE__ */ jsxs("mesh", { children: [
+                      /* @__PURE__ */ jsx("sphereGeometry", { args: [0.31, 36, 36] }),
+                      /* @__PURE__ */ jsx(
+                        "meshStandardMaterial",
+                        {
+                          color: "#FFFFFF",
+                          roughness: 0.18,
+                          metalness: 0.08
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [-0.3, 0, 0], rotation: [0, 0, Math.PI / 2], children: [
+                      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.09, 0.09, 0.05, 24] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color: primaryColor, roughness: 0.25, metalness: 0.3 })
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [0.3, 0, 0], rotation: [0, 0, Math.PI / 2], children: [
+                      /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.09, 0.09, 0.05, 24] }),
+                      /* @__PURE__ */ jsx("meshStandardMaterial", { color: primaryColor, roughness: 0.25, metalness: 0.3 })
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0.165], scale: [0.86, 0.62, 0.68], children: [
+                      /* @__PURE__ */ jsx("sphereGeometry", { args: [0.295, 32, 32] }),
+                      /* @__PURE__ */ jsx(
+                        "meshStandardMaterial",
+                        {
+                          color: "#090D16",
+                          roughness: 0.1,
+                          metalness: 0.35
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [-0.095, 0.055, 0.355], children: [
+                      /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.028, 0.032, 12, 16] }),
+                      /* @__PURE__ */ jsx("meshBasicMaterial", { color: accentColor })
+                    ] }),
+                    /* @__PURE__ */ jsxs("mesh", { position: [0.095, 0.055, 0.355], children: [
+                      /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.028, 0.032, 12, 16] }),
+                      /* @__PURE__ */ 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__ */ jsxs(
+                        "mesh",
+                        {
+                          position: [xOff, -0.032, 0.358],
+                          scale: [1, barHeight / 0.012, 1],
+                          children: [
+                            /* @__PURE__ */ jsx("boxGeometry", { args: [0.026, 0.012, 0.016] }),
+                            /* @__PURE__ */ jsx("meshBasicMaterial", { color: activeWhiteMix })
+                          ]
+                        },
+                        idx
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/isometric-3d/IsometricStudioEnvironment.tsx
+import {
+  interpolate as interpolate2,
+  interpolateColors as interpolateColors2,
+  spring as spring2,
+  useCurrentFrame as useCurrentFrame2,
+  useVideoConfig as useVideoConfig2
+} from "remotion";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var IsometricStudioEnvironment = ({ codeMorphFrame, finaleActivateFrame }) => {
+  const frame = useCurrentFrame2();
+  const { fps } = useVideoConfig2();
+  const stageEnter = spring2({
+    frame: frame - 2,
+    fps,
+    config: { damping: 200, stiffness: 48, mass: 1.3 }
+  });
+  const codeMorph = spring2({
+    frame: frame - codeMorphFrame,
+    fps,
+    config: { damping: 200, stiffness: 32, mass: 1.4 }
+  });
+  const finaleBoost = spring2({
+    frame: frame - finaleActivateFrame,
+    fps,
+    config: { damping: 200, stiffness: 34, mass: 1.3 }
+  });
+  const stageScale = interpolate2(stageEnter, [0, 1], [1e-3, 1]);
+  const phaseProgress = Math.min(2, codeMorph + finaleBoost);
+  const holoColor = interpolateColors2(
+    phaseProgress,
+    [0, 1, 2],
+    ["#F59E0B", "#6366F1", "#10B981"]
+  );
+  const crystalCoreColor = interpolateColors2(
+    finaleBoost,
+    [0, 1],
+    ["#2563EB", "#10B981"]
+  );
+  const crystalEmissiveColor = interpolateColors2(
+    finaleBoost,
+    [0, 1],
+    ["#1D4ED8", "#059669"]
+  );
+  return /* @__PURE__ */ jsxs2("group", { scale: [stageScale, stageScale, stageScale], children: [
+    /* @__PURE__ */ jsx2("ambientLight", { intensity: 1.15, color: "#F8FAFC" }),
+    /* @__PURE__ */ jsx2(
+      "directionalLight",
+      {
+        position: [7, 12, 8],
+        intensity: 1.75,
+        color: "#FFFFFF"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "directionalLight",
+      {
+        position: [-8, 6, -4],
+        intensity: 0.75,
+        color: "#C7D2FE"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "pointLight",
+      {
+        position: [0, 2.2, 0.2],
+        intensity: 1.6 + codeMorph * 1.2 + finaleBoost * 1.2,
+        distance: 6,
+        color: holoColor
+      }
+    ),
+    /* @__PURE__ */ jsxs2("mesh", { position: [0, -0.2, 0], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [8.4, 0.4, 6.4] }),
+      /* @__PURE__ */ jsx2("meshStandardMaterial", { color: "#FFFFFF", roughness: 0.25, metalness: 0.05 })
+    ] }),
+    /* @__PURE__ */ jsxs2("mesh", { position: [0, -0.43, 0], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [8.48, 0.07, 6.48] }),
+      /* @__PURE__ */ jsx2("meshBasicMaterial", { color: "#2563EB" })
+    ] }),
+    /* @__PURE__ */ jsxs2("mesh", { position: [0, -0.62, 0], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [8.1, 0.32, 6.1] }),
+      /* @__PURE__ */ jsx2("meshStandardMaterial", { color: "#1E1B4B", roughness: 0.4, metalness: 0.3 })
+    ] }),
+    [-3, -2, -1, 0, 1, 2, 3].map((x) => /* @__PURE__ */ jsxs2("mesh", { position: [x, 4e-3, 0], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [0.018, 4e-3, 5.8] }),
+      /* @__PURE__ */ jsx2("meshBasicMaterial", { color: "#E2E8F0" })
+    ] }, `gx-${x}`)),
+    [-2, -1, 0, 1, 2].map((z) => /* @__PURE__ */ jsxs2("mesh", { position: [0, 4e-3, z], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [7.8, 4e-3, 0.018] }),
+      /* @__PURE__ */ jsx2("meshBasicMaterial", { color: "#E2E8F0" })
+    ] }, `gz-${z}`)),
+    /* @__PURE__ */ jsxs2("mesh", { position: [0, 1.45, -3.05], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [8.4, 2.9, 0.28] }),
+      /* @__PURE__ */ jsx2("meshStandardMaterial", { color: "#F1F5F9", roughness: 0.3, metalness: 0.05 })
+    ] }),
+    /* @__PURE__ */ jsxs2("mesh", { position: [0, 2.92, -3.05], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [8.4, 0.08, 0.3] }),
+      /* @__PURE__ */ jsx2("meshBasicMaterial", { color: "#7209B7" })
+    ] }),
+    /* @__PURE__ */ jsxs2("mesh", { position: [-4.06, 1.45, 0], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [0.28, 2.9, 6.4] }),
+      /* @__PURE__ */ jsx2("meshStandardMaterial", { color: "#E2E8F0", roughness: 0.3, metalness: 0.05 })
+    ] }),
+    /* @__PURE__ */ jsxs2("mesh", { position: [-4.06, 2.92, 0], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [0.3, 0.08, 6.4] }),
+      /* @__PURE__ */ jsx2("meshBasicMaterial", { color: "#2563EB" })
+    ] }),
+    /* @__PURE__ */ jsxs2("group", { position: [0, 1.65, -2.86], children: [
+      /* @__PURE__ */ jsxs2("mesh", { children: [
+        /* @__PURE__ */ jsx2("boxGeometry", { args: [4.2, 1.55, 0.08] }),
+        /* @__PURE__ */ jsx2("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 = interpolateColors2(
+          codeMorph,
+          [0, 1],
+          idx % 2 === 0 ? ["#F59E0B", "#10B981"] : ["#F43F5E", "#818CF8"]
+        );
+        return /* @__PURE__ */ jsxs2(
+          "mesh",
+          {
+            position: [-1.5 + barWidth / 2, yOff, 0.05],
+            scale: [barWidth, 1, 1],
+            children: [
+              /* @__PURE__ */ jsx2("boxGeometry", { args: [1, 0.13, 0.03] }),
+              /* @__PURE__ */ jsx2("meshBasicMaterial", { color: barColor })
+            ]
+          },
+          idx
+        );
+      })
+    ] }),
+    [-1.6, 0, 1.6].map((zPos, i) => /* @__PURE__ */ jsxs2("mesh", { position: [-3.88, 1.45, zPos], children: [
+      /* @__PURE__ */ jsx2("boxGeometry", { args: [0.08, 2.1, 0.18] }),
+      /* @__PURE__ */ jsx2(
+        "meshBasicMaterial",
+        {
+          color: i === 1 ? "#10B981" : "#6366F1"
+        }
+      )
+    ] }, i)),
+    /* @__PURE__ */ jsxs2("group", { position: [0, 0, 0.35], children: [
+      /* @__PURE__ */ jsxs2("mesh", { position: [0, 0.04, 0], children: [
+        /* @__PURE__ */ jsx2("cylinderGeometry", { args: [0.92, 1.02, 0.08, 48] }),
+        /* @__PURE__ */ jsx2("meshStandardMaterial", { color: "#1E293B", roughness: 0.3, metalness: 0.5 })
+      ] }),
+      /* @__PURE__ */ jsxs2("mesh", { position: [0, 0.46, 0], children: [
+        /* @__PURE__ */ jsx2("cylinderGeometry", { args: [0.38, 0.52, 0.84, 48] }),
+        /* @__PURE__ */ jsx2("meshStandardMaterial", { color: "#F8FAFC", roughness: 0.22, metalness: 0.15 })
+      ] }),
+      /* @__PURE__ */ jsxs2("mesh", { position: [0, 0.9, 0], children: [
+        /* @__PURE__ */ jsx2("cylinderGeometry", { args: [1.05, 0.95, 0.1, 48] }),
+        /* @__PURE__ */ jsx2("meshStandardMaterial", { color: "#0F172A", roughness: 0.15, metalness: 0.45 })
+      ] }),
+      /* @__PURE__ */ jsxs2("mesh", { position: [0, 0.96, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx2("ringGeometry", { args: [0.68, 0.82, 48] }),
+        /* @__PURE__ */ jsx2("meshBasicMaterial", { color: holoColor })
+      ] }),
+      /* @__PURE__ */ jsxs2("mesh", { position: [0, 0.958, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx2("circleGeometry", { args: [0.65, 48] }),
+        /* @__PURE__ */ jsx2("meshBasicMaterial", { color: holoColor, transparent: true, opacity: 0.22 })
+      ] }),
+      codeMorph < 0.98 && /* @__PURE__ */ jsx2(
+        "group",
+        {
+          position: [0, 1.62, 0],
+          scale: [1 - codeMorph, 1 - codeMorph, 1 - codeMorph],
+          children: [-0.45, 0, 0.45].map((xOff, idx) => /* @__PURE__ */ jsxs2(
+            "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__ */ jsx2("boxGeometry", { args: [0.42, 0.22, 0.28] }),
+                /* @__PURE__ */ jsx2(
+                  "meshStandardMaterial",
+                  {
+                    color: idx === 1 ? "#F43F5E" : "#F59E0B",
+                    roughness: 0.2,
+                    metalness: 0.2
+                  }
+                )
+              ]
+            },
+            idx
+          ))
+        }
+      ),
+      codeMorph > 0.02 && /* @__PURE__ */ jsxs2(
+        "group",
+        {
+          position: [0, 1.76 + Math.sin(frame * 0.03) * 0.03, 0],
+          scale: [codeMorph, codeMorph, codeMorph],
+          children: [
+            /* @__PURE__ */ jsxs2(
+              "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__ */ jsx2("octahedronGeometry", { args: [0.42, 0] }),
+                  /* @__PURE__ */ jsx2(
+                    "meshStandardMaterial",
+                    {
+                      color: crystalCoreColor,
+                      emissive: crystalEmissiveColor,
+                      emissiveIntensity: 0.65,
+                      roughness: 0.15,
+                      metalness: 0.4
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              "mesh",
+              {
+                rotation: [
+                  Math.PI / 3 + frame * 8e-3,
+                  frame * 0.01,
+                  0
+                ],
+                children: [
+                  /* @__PURE__ */ jsx2("torusGeometry", { args: [0.68, 0.022, 16, 64] }),
+                  /* @__PURE__ */ jsx2("meshBasicMaterial", { color: "#818CF8" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              "mesh",
+              {
+                rotation: [
+                  -Math.PI / 3 - frame * 7e-3,
+                  -frame * 9e-3,
+                  Math.PI / 4
+                ],
+                children: [
+                  /* @__PURE__ */ jsx2("torusGeometry", { args: [0.82, 0.022, 16, 64] }),
+                  /* @__PURE__ */ jsx2("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__ */ jsxs2(
+                "mesh",
+                {
+                  position: [
+                    Math.cos(angle) * radius,
+                    Math.sin(angle * 2) * 0.08,
+                    Math.sin(angle) * radius
+                  ],
+                  scale: [finaleBoost, finaleBoost, finaleBoost],
+                  children: [
+                    /* @__PURE__ */ jsx2("sphereGeometry", { args: [0.085, 20, 20] }),
+                    /* @__PURE__ */ jsx2(
+                      "meshBasicMaterial",
+                      {
+                        color: satIdx % 2 === 0 ? "#10B981" : "#FFFFFF"
+                      }
+                    )
+                  ]
+                },
+                satIdx
+              );
+            })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+export {
+  Stylized3DCharacter,
+  IsometricStudioEnvironment
+};