init

src/ui/AnimationUI.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { VRMA_FILES } from '../VrmCharacter';
+
+const btnStyle = (active) => ({
+  padding: '6px 14px',
+  background: active ? 'rgba(80, 160, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)',
+  color: 'white',
+  border: active ? '1px solid rgba(80, 160, 255, 0.9)' : '1px solid rgba(255, 255, 255, 0.3)',
+  borderRadius: '6px',
+  cursor: 'pointer',
+  fontSize: '12px',
+  backdropFilter: 'blur(4px)',
+});
+
+export default function AnimationUI({ selectedAnimation, onSelect }) {
+  return (
+    <div style={{ position: 'absolute', bottom: 20, left: 20, zIndex: 100, display: 'flex', gap: 6, flexWrap: 'wrap', maxWidth: '80vw' }}>
+      {VRMA_FILES.map((v) => (
+        <button key={v.name} onClick={() => onSelect(v.name)} style={btnStyle(selectedAnimation === v.name)}>
+          {v.name}
+        </button>
+      ))}
+    </div>
+  );
+}

src/ui/LocationUI.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { LOCATIONS, teleportTo } from '../worldState';
+
+const btnStyle = {
+  padding: '10px 20px',
+  background: 'rgba(0, 0, 0, 0.6)',
+  color: 'white',
+  border: '1px solid rgba(255, 255, 255, 0.3)',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  fontSize: '14px',
+  backdropFilter: 'blur(4px)',
+};
+
+export default function LocationUI() {
+  return (
+    <div style={{ position: 'absolute', top: 20, left: 20, zIndex: 100, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+      {LOCATIONS.map((loc) => (
+        <button key={loc.name} onClick={() => teleportTo(loc)} style={btnStyle}>
+          {loc.name}
+        </button>
+      ))}
+    </div>
+  );
+}