add vrm mode

src/ui/ControlPanel.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+const containerStyle = {
+  position: 'absolute',
+  top: 16,
+  right: 16,
+  zIndex: 2,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+  padding: '10px 12px',
+  background: 'rgba(0,0,0,0.3)',
+  borderRadius: '8px',
+  backdropFilter: 'blur(4px)',
+  minWidth: 140,
+};
+
+const labelStyle = {
+  color: 'rgba(255,255,255,0.7)',
+  fontSize: '11px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+};
+
+const sliderStyle = {
+  width: '100%',
+  height: 4,
+  appearance: 'none',
+  background: 'rgba(255,255,255,0.2)',
+  borderRadius: 2,
+  outline: 'none',
+  cursor: 'pointer',
+};
+
+const btnStyle = {
+  padding: '4px 10px',
+  background: 'rgba(255,255,255,0.1)',
+  color: 'rgba(255,255,255,0.7)',
+  border: '1px solid rgba(255,255,255,0.2)',
+  borderRadius: '4px',
+  cursor: 'pointer',
+  fontSize: '11px',
+  width: '100%',
+};
+
+export default function ControlPanel({ timeScale, onTimeScaleChange, camSpeed, onCamSpeedChange, onSkill }) {
+  return (
+    <div style={containerStyle}>
+      <div>
+        <div style={labelStyle}>
+          <span>Time</span>
+          <span>{timeScale}x</span>
+        </div>
+        <input
+          type="range"
+          min={0}
+          max={5000}
+          step={50}
+          value={timeScale}
+          onChange={(e) => onTimeScaleChange(Number(e.target.value))}
+          style={sliderStyle}
+        />
+      </div>
+      <div>
+        <div style={labelStyle}>
+          <span>Camera</span>
+          <span>{camSpeed.toFixed(2)}</span>
+        </div>
+        <input
+          type="range"
+          min={1}
+          max={20}
+          step={1}
+          value={camSpeed * 100}
+          onChange={(e) => onCamSpeedChange(Number(e.target.value) / 100)}
+          style={sliderStyle}
+        />
+      </div>
+      <button style={btnStyle} onClick={() => onSkill?.()}>
+        Skill
+      </button>
+    </div>
+  );
+}