diff --git a/package.json b/package.json
index 24172c02..7b25b516 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.7.3",
+  "version": "2.8.0",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [
@@ -31,6 +31,7 @@
   "types": "main.d.ts",
   "scripts": {
     "build": "rimraf dist && mkdir dist && rollup -c && yarn copy && tsc && yarn pack-dist",
+    "compile": "rimraf dist && mkdir dist && rollup -c && yarn copy",
     "lint": "eslint . --ext .ts,.tsx",
     "process-gltf": "./scripts/process-gltf.sh",
     "eslint": "eslint --fix {src,examples/src}/**/*.{ts,tsx}",
diff --git a/src/ideas/index.ts b/src/ideas/index.ts
index 61e55763..fa4af431 100644
--- a/src/ideas/index.ts
+++ b/src/ideas/index.ts
@@ -20,6 +20,8 @@ export * from "./modifiers/Floating";
 export * from "./modifiers/LookAtPlayer";
 export * from "./modifiers/Spinning";
 export * from "./modifiers/VisualEffect";
+export * from "./primitives/HitBox";
+export * from "./primitives/RoundedBox";
 export * from "./ui/Dialogue";
 export * from "./ui/TextInput";
 export * from "./ui/Arrow";
diff --git a/src/ideas/media/Model.tsx b/src/ideas/media/Model.tsx
index 8ff25761..7889e387 100644
--- a/src/ideas/media/Model.tsx
+++ b/src/ideas/media/Model.tsx
@@ -1,6 +1,6 @@
 import { Suspense, useMemo } from "react";
 import { GroupProps } from "@react-three/fiber";
-import { useModel } from "../../logic";
+import { cache, useModel } from "../../logic";
 import { Box3, Vector3 } from "three";
 import { SkeletonUtils } from "three-stdlib";
 import { ErrorBoundary } from "react-error-boundary";
@@ -43,9 +43,8 @@ function FallbackModel(props: ModelProps) {
 
   return (
     <group name="spacesvr-fallback-model" {...rest}>
-      <mesh>
+      <mesh material={cache.mat_basic_black_wireframe}>
         <boxBufferGeometry args={[1, 1, 1]} />
-        <meshStandardMaterial color="black" wireframe />
       </mesh>
     </group>
   );
diff --git a/src/ideas/modifiers/Collidable/lib/SimplifyModifier.ts b/src/ideas/modifiers/Collidable/lib/SimplifyModifier.ts
index 2374f501..1e7bbf56 100644
--- a/src/ideas/modifiers/Collidable/lib/SimplifyModifier.ts
+++ b/src/ideas/modifiers/Collidable/lib/SimplifyModifier.ts
@@ -3,7 +3,7 @@
 // also modified to reduce to match a tri count rather than remove X number of vertices
 
 import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
-import * as BufferGeometryUtils from "three-stdlib";
+import { mergeVertices } from "three-stdlib";
 
 const cb = new Vector3(),
   ab = new Vector3();
@@ -363,7 +363,7 @@ class SimplifyModifier {
       if (name !== "position") geometry.deleteAttribute(name);
     }
 
-    geometry = BufferGeometryUtils.mergeVertices(geometry);
+    geometry = mergeVertices(geometry);
 
     //
     // put data of original geometry in different data structures
diff --git a/src/ideas/primitives/HitBox.tsx b/src/ideas/primitives/HitBox.tsx
new file mode 100644
index 00000000..56e887b4
--- /dev/null
+++ b/src/ideas/primitives/HitBox.tsx
@@ -0,0 +1,33 @@
+import { ColorRepresentation } from "three";
+import { Interactable, InteractableProps } from "../modifiers/Interactable";
+import { MeshProps } from "@react-three/fiber";
+
+type HitBox = {
+  args: [number, number, number];
+  visible?: boolean;
+  color?: ColorRepresentation;
+} & Omit<InteractableProps, "children"> &
+  Omit<MeshProps, "args">;
+
+export function HitBox(props: HitBox) {
+  const {
+    args,
+    visible = false,
+    color = "red",
+    onClick,
+    onHover,
+    onUnHover,
+    ...rest
+  } = props;
+
+  return (
+    <Interactable onClick={onClick} onHover={onHover} onUnHover={onUnHover}>
+      <mesh visible={visible} name="spacesvr-hitbox" {...rest}>
+        <boxBufferGeometry args={args} />
+        {visible && (
+          <meshBasicMaterial color={color} transparent opacity={0.7} />
+        )}
+      </mesh>
+    </Interactable>
+  );
+}
diff --git a/src/ideas/primitives/RoundedBox.tsx b/src/ideas/primitives/RoundedBox.tsx
new file mode 100644
index 00000000..3ca6ce47
--- /dev/null
+++ b/src/ideas/primitives/RoundedBox.tsx
@@ -0,0 +1,109 @@
+import { cache } from "../../logic/cache";
+import { NamedArrayTuple } from "@react-three/drei/helpers/ts-utils";
+import { useMemo } from "react";
+import { RoundedBoxGeometry } from "three/examples/jsm/geometries/RoundedBoxGeometry";
+
+type RoundedBox = {
+  args?: NamedArrayTuple<
+    (width?: number, height?: number, depth?: number) => void
+  >;
+} & Omit<JSX.IntrinsicElements["mesh"], "args">;
+
+export function RoundedBox(props: RoundedBox) {
+  const {
+    args: [width = 1, height = 1, depth = 0.25] = [],
+    children,
+    ...rest
+  } = props;
+
+  const geo = useMemo(() => {
+    const tolerance = 0.25; // 25% tolerance
+
+    let closestBox = undefined;
+    let closestOffset = Infinity;
+    for (const box of CACHED_BOXES) {
+      const scale = box.width / width;
+      const heightDiff = Math.abs(box.height - height * scale);
+      const depthDiff = Math.abs(box.depth - depth * scale);
+      if (
+        heightDiff / box.height < tolerance &&
+        depthDiff / box.depth < tolerance &&
+        heightDiff + depthDiff < closestOffset
+      ) {
+        closestBox = box;
+        closestOffset = heightDiff + depthDiff;
+      }
+    }
+
+    if (closestBox) {
+      return (cache[closestBox.key] as RoundedBoxGeometry)
+        .clone()
+        .scale(
+          width / closestBox.width,
+          height / closestBox.height,
+          depth / closestBox.depth
+        );
+    }
+
+    const radius = Math.min(width, height, depth) / 2;
+    return new RoundedBoxGeometry(width, height, depth, 4, radius);
+  }, [width, height, depth]);
+
+  return (
+    <mesh name="spacesvr-rounded-box" {...rest} geometry={geo}>
+      {children}
+    </mesh>
+  );
+}
+
+type CachedBox = {
+  width: number;
+  height: number;
+  depth: number;
+  key: keyof typeof cache;
+};
+
+const CACHED_BOXES: CachedBox[] = [
+  {
+    width: 1,
+    height: 1,
+    depth: 0.25,
+    key: "geo_rounded_box_1x1x0_25",
+  },
+  {
+    width: 1,
+    height: 0.35,
+    depth: 0.125,
+    key: "geo_rounded_box_1x0_35x0_125",
+  },
+  {
+    width: 1,
+    height: 0.3,
+    depth: 0.1,
+    key: "geo_rounded_box_1x0_3x0_1",
+  },
+  {
+    width: 1,
+    height: 0.19,
+    depth: 0.23,
+    key: "geo_rounded_box_1x0_19x0_23",
+  },
+  {
+    width: 1,
+    height: 0.44,
+    depth: 0.23,
+    key: "geo_rounded_box_1x0_44x0_23",
+  },
+  {
+    width: 1,
+    height: 0.11,
+    depth: 0.06,
+    key: "geo_rounded_box_1x0_11x0_06",
+  },
+  {
+    width: 1,
+    height: 0.13,
+    depth: 0.04,
+    key: "geo_rounded_box_1x0_13x0_04",
+  },
+];
diff --git a/src/ideas/ui/Arrow.tsx b/src/ideas/ui/Arrow.tsx
index c711afdf..c9786cef 100644
--- a/src/ideas/ui/Arrow.tsx
+++ b/src/ideas/ui/Arrow.tsx
@@ -1,5 +1,7 @@
 import { GroupProps } from "@react-three/fiber";
 import { useImage } from "../../logic/assets";
+import { cache } from "../../logic";
+import { MeshStandardMaterial } from "three";
 
 type ArrowProps = { dark?: boolean } & GroupProps;
 
@@ -12,15 +14,20 @@ export function Arrow(props: ArrowProps) {
 
   const texture = useImage(dark ? IMAGE_SRC_DARK : IMAGE_SRC);
 
+  const arrowMat = cache.useResource(
+    `spacesvr_arrow_${dark ? "dark" : "light"}`,
+    () =>
+      new MeshStandardMaterial({
+        map: texture,
+        alphaTest: 0.5,
+        transparent: true,
+      })
+  );
+
   return (
     <group name="spacesvr-arrow" {...rest}>
-      <mesh scale={0.004}>
+      <mesh scale={0.004} material={arrowMat}>
         <planeBufferGeometry args={[98, 51]} />
-        <meshStandardMaterial
-          map={texture}
-          alphaTest={0.5}
-          transparent={true}
-        />
       </mesh>
     </group>
   );
diff --git a/src/ideas/ui/Button.tsx b/src/ideas/ui/Button.tsx
index 5593b921..b5280c77 100644
--- a/src/ideas/ui/Button.tsx
+++ b/src/ideas/ui/Button.tsx
@@ -1,10 +1,11 @@
-import { RoundedBox, Text } from "@react-three/drei";
+import { Text } from "@react-three/drei";
 import { animated, config, useSpring } from "@react-spring/three";
 import { GroupProps } from "@react-three/fiber";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Interactable } from "../modifiers/Interactable";
 import { Idea } from "../../logic/basis/idea";
 import { Color, Raycaster } from "three";
+import { RoundedBox } from "../primitives/RoundedBox";
+import { HitBox } from "../primitives/HitBox";
 
 type ButtonProps = {
   children?: string;
@@ -95,7 +96,6 @@ export function Button(props: ButtonProps) {
   const HEIGHT = dims[1] + PADDING;
   const DEPTH = fontSize * 1.1;
   const OUTLINE_WIDTH = outline ? fontSize * 0.075 : 0;
-  const RADIUS = Math.min(WIDTH, HEIGHT, DEPTH) * 0.5;
 
   return (
     <group name={`spacesvr-button-${children}`} {...rest}>
@@ -115,21 +115,14 @@ export function Button(props: ButtonProps) {
         >
           {children}
         </Text>
-        <Interactable
+        <HitBox
+          args={[WIDTH, HEIGHT, DEPTH]}
           onClick={onButtonClick}
           onHover={() => setHovered(true)}
           onUnHover={() => setHovered(false)}
           raycaster={raycaster}
-        >
-          <mesh visible={false} name="hitbox">
-            <boxBufferGeometry args={[WIDTH, HEIGHT, DEPTH]} />
-          </mesh>
-        </Interactable>
-        <RoundedBox
-          args={[WIDTH, HEIGHT, DEPTH]}
-          radius={RADIUS}
-          smoothness={6}
-        >
+        />
+        <RoundedBox args={[WIDTH, HEIGHT, DEPTH]}>
           {/* @ts-ignore */}
           <animated.meshStandardMaterial color={animColor} />
         </RoundedBox>
diff --git a/src/ideas/ui/Dialogue/ideas/Bubbles.tsx b/src/ideas/ui/Dialogue/ideas/Bubbles.tsx
index 270ce16a..2bdb9631 100644
--- a/src/ideas/ui/Dialogue/ideas/Bubbles.tsx
+++ b/src/ideas/ui/Dialogue/ideas/Bubbles.tsx
@@ -39,7 +39,7 @@ export default function Bubbles(props: BubblesProps) {
     for (let i = 0; i < numStops; i++) {
       const perc = i / (numStops - 1);
       obj.position.set(perc * pos.x, perc * pos.y, perc * pos.z);
-      const sc = 0.01 + perc * 0.05;
+      const sc = 0.8 + perc * 4;
       const delay = 60 / 1000;
       const time = 400 / 1000;
       const delta = clock.elapsedTime - startTime.current;
@@ -55,8 +55,8 @@ export default function Bubbles(props: BubblesProps) {
     mesh.current.instanceMatrix.needsUpdate = true;
   });
 
-  const geo = useMemo(() => new SphereBufferGeometry(4, 32, 16), []);
-  const mat = useIdeaMaterial(undefined, 4);
+  const geo = useMemo(() => new SphereBufferGeometry(0.05, 32, 16), []);
+  const mat = useIdeaMaterial(undefined, 0.05);
 
   return (
     <>
diff --git a/src/ideas/ui/Dialogue/index.tsx b/src/ideas/ui/Dialogue/index.tsx
index 9581f34f..5b8bec67 100644
--- a/src/ideas/ui/Dialogue/index.tsx
+++ b/src/ideas/ui/Dialogue/index.tsx
@@ -1,13 +1,14 @@
 import { GroupProps } from "@react-three/fiber";
 import { useRef, useState } from "react";
-import { DoubleSide, Group } from "three";
-import { RoundedBox } from "@react-three/drei";
+import { Group } from "three";
 import { animated, useSpring } from "@react-spring/three";
 import { useLimitedFrame } from "../../../logic/limiter";
 import { DialogueFSM } from "./logic/types";
 import Bubbles from "./ideas/Bubbles";
 import VisualInteraction from "./ideas/VisualInteraction";
 import { FacePlayer } from "../../modifiers/FacePlayer";
+import { cache } from "../../../logic/cache";
+import { RoundedBox } from "../../primitives/RoundedBox";
 export * from "./logic/types";
 
 type DialogueProps = {
@@ -49,7 +50,6 @@ export function Dialogue(props: DialogueProps) {
   const HEIGHT = 0.35;
   const DEPTH = 0.125;
   const POS_X = side === "right" ? WIDTH / 2 : -WIDTH / 2;
-  const RADIUS = Math.min(WIDTH, HEIGHT, DEPTH) * 0.5;
 
   return (
     <group name="dialogue" {...rest}>
@@ -60,11 +60,8 @@ export function Dialogue(props: DialogueProps) {
             <animated.group scale={scale} position-x={POS_X}>
               <RoundedBox
                 args={[WIDTH, HEIGHT, DEPTH]}
-                radius={RADIUS}
-                smoothness={6}
-              >
-                <meshStandardMaterial color="#aaa" side={DoubleSide} />
-              </RoundedBox>
+                material={cache.mat_standard_cream_double}
+              />
               <group name="interactions" position-z={DEPTH / 2 + 0.003}>
                 {dialogue.map((interaction) => (
                   <VisualInteraction
diff --git a/src/ideas/ui/Dialogue/logic/ideaMat.ts b/src/ideas/ui/Dialogue/logic/ideaMat.ts
index 7bde8507..9590d370 100644
--- a/src/ideas/ui/Dialogue/logic/ideaMat.ts
+++ b/src/ideas/ui/Dialogue/logic/ideaMat.ts
@@ -11,8 +11,8 @@ export const useIdeaMaterial = (idea: Idea | undefined, radius: number) => {
 
   const { col } = useSpring({ col: hex });
 
-  const NOISE_AMPLITUDE = 0.82;
-  const NOISE_FREQ = 0.154;
+  const NOISE_AMPLITUDE = radius * 0.32;
+  const NOISE_FREQ = 0.554 / radius;
 
   const mat = useMemo(() => {
     const material = new MeshStandardMaterial({
diff --git a/src/ideas/ui/Key.tsx b/src/ideas/ui/Key.tsx
index 02386cfa..78cb8754 100644
--- a/src/ideas/ui/Key.tsx
+++ b/src/ideas/ui/Key.tsx
@@ -1,7 +1,8 @@
 import { GroupProps } from "@react-three/fiber";
-import { RoundedBox, Text } from "@react-three/drei";
+import { Text } from "@react-three/drei";
 import { animated, config, useSpring } from "@react-spring/three";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { RoundedBox } from "../primitives/RoundedBox";
 
 type Props = {
   keyCode: string;
@@ -54,12 +55,7 @@ export function Key(props: Props) {
       <group position-z={-DEPTH}>
         <animated.group scale-z={scale}>
           <group position-z={DEPTH / 2}>
-            <RoundedBox
-              args={[1, 1, DEPTH]}
-              radius={DEPTH * 0.5}
-              position-z={-DEPTH / 2 - 0.01}
-              smoothness={10}
-            >
+            <RoundedBox args={[1, 1, DEPTH]} position-z={-DEPTH / 2 - 0.01}>
               {/* @ts-ignore */}
               <animated.meshStandardMaterial color={color} />
             </RoundedBox>
diff --git a/src/ideas/ui/Switch.tsx b/src/ideas/ui/Switch.tsx
index d695a4c5..227d6382 100644
--- a/src/ideas/ui/Switch.tsx
+++ b/src/ideas/ui/Switch.tsx
@@ -1,11 +1,12 @@
 import { animated, useSpring } from "@react-spring/three";
 import { VisualIdea } from "../basis/VisualIdea";
-import { RoundedBox } from "@react-three/drei";
+import { RoundedBox } from "../primitives/RoundedBox";
 import { GroupProps } from "@react-three/fiber";
 import { Raycaster } from "three";
-import { Interactable } from "../modifiers/Interactable";
 import { Idea } from "../../logic/basis/idea";
 import { useState } from "react";
+import { cache } from "../../logic/cache";
+import { HitBox } from "../primitives/HitBox";
 
 type SwitchProps = {
   value?: boolean;
@@ -33,7 +34,6 @@ export function Switch(props: SwitchProps) {
   const OUTER_WIDTH = WIDTH + BORDER * 2;
   const OUTER_HEIGHT = HEIGHT + BORDER;
   const KNOB_SIZE = SIZE * 0.8;
-  const RADIUS = Math.min(WIDTH, HEIGHT, DEPTH) * 0.5;
 
   const { posX, knobColor } = useSpring({
     posX: val ? WIDTH / 2 : -WIDTH / 2,
@@ -41,32 +41,32 @@ export function Switch(props: SwitchProps) {
     config: { mass: 0.1 },
   });
 
-  const [onIdea] = useState(new Idea().setFromCreation(0, 0, 1));
-  const [offIdea] = useState(new Idea().setFromCreation(0, 0, 0.75));
+  const [onIdea] = useState(new Idea(0, 0, 1));
+  const [offIdea] = useState(new Idea(0, 0, 0.75));
 
   return (
     <group name="spacesvr-switch-input" {...rest}>
-      <Interactable onClick={() => setVal(!val)} raycaster={passedRaycaster}>
-        <animated.group position-x={posX}>
-          <VisualIdea scale={KNOB_SIZE} idea={val ? onIdea : offIdea} />
-        </animated.group>
-        <RoundedBox
-          args={[WIDTH, HEIGHT, DEPTH]}
-          smoothness={8}
-          radius={RADIUS}
-        >
-          {/* @ts-ignore */}
-          <animated.meshBasicMaterial color={knobColor} />
-        </RoundedBox>
-        <RoundedBox
-          args={[OUTER_WIDTH, OUTER_HEIGHT, DEPTH]}
-          radius={RADIUS}
-          smoothness={8}
-          position-z={-0.001}
-        >
-          <animated.meshBasicMaterial color="#828282" />
-        </RoundedBox>
-      </Interactable>
+      <animated.group position-x={posX}>
+        <VisualIdea scale={KNOB_SIZE} idea={val ? onIdea : offIdea} />
+      </animated.group>
+      <HitBox
+        args={[KNOB_SIZE, KNOB_SIZE, KNOB_SIZE]}
+        onClick={() => setVal(!val)}
+        position-x={val ? WIDTH / 2 : -WIDTH / 2}
+      />
+      <HitBox
+        args={[OUTER_WIDTH, OUTER_HEIGHT, DEPTH]}
+        onClick={() => setVal(!val)}
+      />
+      <RoundedBox args={[WIDTH, HEIGHT, DEPTH]}>
+        {/* @ts-ignore */}
+        <animated.meshBasicMaterial color={knobColor} />
+      </RoundedBox>
+      <RoundedBox
+        args={[OUTER_WIDTH, OUTER_HEIGHT, DEPTH]}
+        material={cache.mat_basic_gray}
+        position-z={-0.001}
+      />
     </group>
   );
 }
diff --git a/src/ideas/ui/TextInput/index.tsx b/src/ideas/ui/TextInput/index.tsx
index 8d2c5b48..1e9bf267 100644
--- a/src/ideas/ui/TextInput/index.tsx
+++ b/src/ideas/ui/TextInput/index.tsx
@@ -1,12 +1,12 @@
 import { useRef, Suspense, useState, useCallback, useEffect } from "react";
-import { RoundedBox, Text } from "@react-three/drei";
+import { Text } from "@react-three/drei";
+import { RoundedBox } from "../../primitives/RoundedBox";
 import { GroupProps, useThree } from "@react-three/fiber";
 import { animated, useSpring } from "@react-spring/three";
 import { useTextInput } from "../../../logic/input";
-import { Interactable } from "../../modifiers/Interactable";
 import { useKeypress, useShiftHold } from "../../../logic/keys";
 import { usePlayer } from "../../../layers/Player";
-import { Mesh, Raycaster } from "three";
+import { Mesh, MeshStandardMaterial, Raycaster } from "three";
 import { syncOnChange } from "./logic/sync";
 import {
   getClickedCaret,
@@ -17,6 +17,8 @@ import {
 import { useCaretBlink } from "./logic/blink";
 import { useDragSelect } from "./logic/drag";
 import { useLimitedFrame } from "../../../logic/limiter";
+import { cache } from "../../../logic/cache";
+import { HitBox } from "../../primitives/HitBox";
 
 type TextProps = {
   value?: string;
@@ -79,6 +81,17 @@ export function TextInput(props: TextProps) {
 
   const { color } = useSpring({ color: focused ? "#000" : "#828282" });
 
+  const highlightMat = cache.useResource(
+    "spacesvr_textinput_highlight",
+    () =>
+      new MeshStandardMaterial({
+        color: "blue",
+        transparent: true,
+        opacity: 0.3,
+        depthWrite: false,
+      })
+  );
+
   const BORDER = fontSize * 0.1;
   const PADDING_X = fontSize * 0.5;
   const INNER_WIDTH = width - PADDING_X * 2;
@@ -90,7 +103,6 @@ export function TextInput(props: TextProps) {
   const OUTER_WIDTH = width + BORDER * 2;
 
   const DEPTH = fontSize * 0.5;
-  const RADIUS = Math.min(INPUT_WIDTH, INPUT_HEIGHT, DEPTH) * 0.5;
 
   const shift = useShiftHold();
   const lastClickTime = useRef(0);
@@ -329,36 +341,34 @@ export function TextInput(props: TextProps) {
           </Text>
         </Suspense>
         <group name="blink" ref={blink.blinkRef}>
-          <mesh name="caret" ref={caret} visible={false}>
+          <mesh
+            name="caret"
+            ref={caret}
+            visible={false}
+            material={cache.mat_basic_black}
+          >
             <planeBufferGeometry args={[0.075 * fontSize, fontSize]} />
-            <meshBasicMaterial color="black" />
           </mesh>
         </group>
-        <mesh name="highlight" ref={highlight} visible={false}>
+        <mesh
+          name="highlight"
+          ref={highlight}
+          visible={false}
+          material={highlightMat}
+        >
           <boxBufferGeometry args={[1, fontSize, DEPTH * 0.45]} />
-          <meshStandardMaterial
-            color="blue"
-            transparent
-            opacity={0.3}
-            depthWrite={false}
-          />
         </mesh>
       </group>
-      <Interactable onClick={registerClick} raycaster={RAYCASTER}>
-        <RoundedBox
-          args={[INPUT_WIDTH, INPUT_HEIGHT, DEPTH]}
-          radius={RADIUS}
-          smoothness={6}
-        >
-          <meshStandardMaterial color="white" />
-        </RoundedBox>
-      </Interactable>
+      <HitBox
+        args={[INPUT_WIDTH, INPUT_HEIGHT, DEPTH]}
+        raycaster={RAYCASTER}
+        onClick={registerClick}
+      />
       <RoundedBox
-        args={[OUTER_WIDTH, OUTER_HEIGHT, DEPTH]}
-        radius={RADIUS}
-        smoothness={6}
-        position-z={-0.001}
-      >
+        args={[INPUT_WIDTH, INPUT_HEIGHT, DEPTH]}
+        material={cache.mat_standard_white}
+      />
+      <RoundedBox args={[OUTER_WIDTH, OUTER_HEIGHT, DEPTH]} position-z={-0.001}>
         {/* @ts-ignore */}
         <animated.meshStandardMaterial color={color} />
       </RoundedBox>
diff --git a/src/layers/Environment/ui/GlobalStyles.tsx b/src/layers/Environment/ui/GlobalStyles.tsx
index c399f4a1..30735cf8 100644
--- a/src/layers/Environment/ui/GlobalStyles.tsx
+++ b/src/layers/Environment/ui/GlobalStyles.tsx
@@ -19,7 +19,7 @@ const globalStyles = css`
     height: 100vh;
     user-select: none;
     overflow: hidden;
-    touch-action: pan-x pan-y;
+    touch-action: none;
     -webkit-overflow-scrolling: touch;
     font-family: "Quicksand", sans-serif;
     font-size: 27px;
diff --git a/src/layers/Environment/ui/PauseMenu/index.tsx b/src/layers/Environment/ui/PauseMenu/index.tsx
index 57284c94..14cee791 100644
--- a/src/layers/Environment/ui/PauseMenu/index.tsx
+++ b/src/layers/Environment/ui/PauseMenu/index.tsx
@@ -48,7 +48,7 @@ export default function PauseMenu(props: PauseMenuProps) {
   const PAUSE_ITEMS: PauseItem[] = [
     ...pauseMenuItems,
     {
-      text: "v2.7.3",
+      text: "v2.8.0",
       link: "https://www.npmjs.com/package/spacesvr",
     },
     ...menuItems,
diff --git a/src/layers/Player/components/controls/NippleMovement.tsx b/src/layers/Player/components/controls/NippleMovement.tsx
index 619977de..7cb924f6 100644
--- a/src/layers/Player/components/controls/NippleMovement.tsx
+++ b/src/layers/Player/components/controls/NippleMovement.tsx
@@ -62,6 +62,10 @@ const NippleMovement = (props: NippleMovementProps) => {
         direction.current.set(0, 0, 0);
       });
 
+      nippleContainer.current.addEventListener("touchstart", (ev) => {
+        ev.preventDefault();
+      });
+
       return () => {
         if (nipple.current) nipple.current.destroy();
       };
diff --git a/src/logic/cache.ts b/src/logic/cache.ts
new file mode 100644
index 00000000..b2d464fa
--- /dev/null
+++ b/src/logic/cache.ts
@@ -0,0 +1,128 @@
+import { DoubleSide, MeshBasicMaterial, MeshStandardMaterial } from "three";
+import { RoundedBoxGeometry } from "three/examples/jsm/geometries/RoundedBoxGeometry";
+import { useEffect, useState } from "react";
+
+const universe_cache = new Map<string, any>();
+
+function getResource<T = any>(
+  key: string,
+  constructor: () => T,
+  opts?: { verbose?: boolean }
+) {
+  let resource = universe_cache.get(key);
+  if (!resource) {
+    if (opts?.verbose) console.log(`[CACHE] ${key} not found, creating new`);
+    resource = constructor();
+    universe_cache.set(key, resource);
+  } else {
+    if (opts?.verbose) console.log(`[CACHE] ${key} found, returning`);
+  }
+  return resource;
+}
+
+export const cache = {
+  getResource,
+  useResource: <T = any>(
+    key: string,
+    constructor: () => T,
+    opts?: { verbose?: boolean }
+  ) => {
+    const [resource, setResource] = useState<T>(
+      getResource(key, constructor, opts)
+    );
+    useEffect(() => {
+      setResource(getResource(key, constructor, opts));
+    }, [key]);
+    return resource;
+  },
+  get mat_standard_white(): MeshStandardMaterial {
+    return getResource<MeshStandardMaterial>(
+      "mat_standard_white",
+      () => new MeshStandardMaterial({ color: "white" })
+    );
+  },
+  get mat_standard_cream_double(): MeshStandardMaterial {
+    return getResource<MeshStandardMaterial>(
+      "mat_standard_cream_double",
+      () => new MeshStandardMaterial({ color: "#aaa", side: DoubleSide })
+    );
+  },
+  get mat_standard_black(): MeshStandardMaterial {
+    return getResource<MeshStandardMaterial>(
+      "mat_standard_black",
+      () => new MeshStandardMaterial({ color: "black" })
+    );
+  },
+  get mat_standard_rose(): MeshStandardMaterial {
+    return getResource<MeshStandardMaterial>(
+      "mat_standard_rose",
+      () => new MeshStandardMaterial({ color: "#ff007f" })
+    );
+  },
+  get mat_basic_black(): MeshBasicMaterial {
+    return getResource<MeshBasicMaterial>(
+      "mat_basic_black",
+      () => new MeshBasicMaterial({ color: "black" })
+    );
+  },
+  get mat_basic_gray(): MeshBasicMaterial {
+    return getResource<MeshBasicMaterial>(
+      "mat_basic_gray",
+      () => new MeshBasicMaterial({ color: "#828282" })
+    );
+  },
+  get mat_basic_red(): MeshBasicMaterial {
+    return getResource<MeshBasicMaterial>(
+      "mat_basic_red",
+      () => new MeshBasicMaterial({ color: "red" })
+    );
+  },
+  get mat_basic_black_wireframe(): MeshBasicMaterial {
+    return getResource<MeshBasicMaterial>(
+      "mat_basic_black_wireframe",
+      () => new MeshBasicMaterial({ color: "black", wireframe: true })
+    );
+  },
+  get geo_rounded_box_1x1x0_25(): RoundedBoxGeometry {
+    return getResource<RoundedBoxGeometry>(
+      "geo_rounded_box_1x1x0_25",
+      () => new RoundedBoxGeometry(1, 1, 0.25, 4, 0.125)
+    );
+  },
+  get geo_rounded_box_1x0_35x0_125(): RoundedBoxGeometry {
+    return getResource<RoundedBoxGeometry>(
+      "geo_rounded_box_1x0_35x0_125",
+      () => new RoundedBoxGeometry(1, 0.35, 0.125, 4, 0.0625)
+    );
+  },
+  get geo_rounded_box_1x0_3x0_1(): RoundedBoxGeometry {
+    return getResource<RoundedBoxGeometry>(
+      "geo_rounded_box_1x0_3x0_1",
+      () => new RoundedBoxGeometry(1, 0.3, 0.1, 4, 0.05)
+    );
+  },
+  get geo_rounded_box_1x0_19x0_23(): RoundedBoxGeometry {
+    return getResource<RoundedBoxGeometry>(
+      "geo_rounded_box_1x0_19x0_23",
+      () => new RoundedBoxGeometry(1, 0.19, 0.23, 4, 0.095)
+    );
+  },
+  get geo_rounded_box_1x0_44x0_23(): RoundedBoxGeometry {
+    return getResource<RoundedBoxGeometry>(
+      "geo_rounded_box_1x0_44x0_23",
+      () => new RoundedBoxGeometry(1, 0.44, 0.23, 4, 0.115)
+    );
+  },
+  get geo_rounded_box_1x0_11x0_06(): RoundedBoxGeometry {
+    return getResource<RoundedBoxGeometry>(
+      "geo_rounded_box_1x0_11x0_06",
+      () => new RoundedBoxGeometry(1, 0.11, 0.06, 4, 0.03)
+    );
+  },
+  get geo_rounded_box_1x0_13x0_04(): RoundedBoxGeometry {
+    return getResource<RoundedBoxGeometry>(
+      "geo_rounded_box_1x0_13x0_04",
+      () => new RoundedBoxGeometry(1, 0.13, 0.04, 4, 0.02)
+    );
+  },
+};
diff --git a/src/logic/index.ts b/src/logic/index.ts
index cf7a9cb7..34a84522 100644
--- a/src/logic/index.ts
+++ b/src/logic/index.ts
@@ -1,6 +1,7 @@
 export * from "./basis";
 export * from "./assets";
 export * from "./bvh";
+export * from "./cache";
 export * from "./collision";
 export * from "./dom";
 export * from "./drag";
diff --git a/src/tools/WalkieTalkie/components/Option.tsx b/src/tools/WalkieTalkie/components/Option.tsx
index 1d824886..ddff0d04 100644
--- a/src/tools/WalkieTalkie/components/Option.tsx
+++ b/src/tools/WalkieTalkie/components/Option.tsx
@@ -1,8 +1,9 @@
 import { GroupProps } from "@react-three/fiber";
-import { RoundedBox, Text } from "@react-three/drei";
-import { Interactable } from "../../../ideas/modifiers/Interactable";
+import { Text } from "@react-three/drei";
+import { RoundedBox } from "../../../ideas/primitives/RoundedBox";
 import { useSpring, animated } from "@react-spring/three";
 import { useState } from "react";
+import { HitBox } from "../../../ideas/primitives/HitBox";
 
 type OptionProps = {
   onClick: () => void;
@@ -27,19 +28,16 @@ export function Option(props: OptionProps) {
 
   return (
     <group name="option" {...rest}>
-      <Interactable
+      <RoundedBox args={[width, FONT_SIZE + PADDING_Y * 2, DEPTH]}>
+        {/* @ts-ignore */}
+        <animated.meshStandardMaterial color={color} />
+      </RoundedBox>
+      <HitBox
+        args={[width, FONT_SIZE + PADDING_Y * 2, DEPTH]}
         onClick={onClick}
         onHover={() => setHovered(true)}
         onUnHover={() => setHovered(false)}
-      >
-        <RoundedBox
-          args={[width, FONT_SIZE + PADDING_Y * 2, DEPTH]}
-          radius={Math.min(width, FONT_SIZE, DEPTH) * 0.5}
-        >
-          {/* @ts-ignore */}
-          <animated.meshStandardMaterial color={color} />
-        </RoundedBox>
-      </Interactable>
+      />
       <group position-z={DEPTH / 2 + 0.001}>
         <Text
           fontSize={FONT_SIZE}
diff --git a/src/tools/WalkieTalkie/components/Pane.tsx b/src/tools/WalkieTalkie/components/Pane.tsx
index 17e46eb9..7b3d3d7e 100644
--- a/src/tools/WalkieTalkie/components/Pane.tsx
+++ b/src/tools/WalkieTalkie/components/Pane.tsx
@@ -1,5 +1,6 @@
 import { GroupProps } from "@react-three/fiber";
 import { ReactNode } from "react";
+import { cache } from "../../../logic/cache";
 
 type PaneProps = {
   width: number;
@@ -14,9 +15,8 @@ export default function Pane(props: PaneProps) {
 
   return (
     <group name="pane" {...rest}>
-      <mesh>
+      <mesh material={cache.mat_standard_black}>
         <planeBufferGeometry args={[width + BORDER * 2, height + BORDER * 2]} />
-        <meshStandardMaterial color="black" />
       </mesh>
       <mesh position-z={0.001}>
         <planeBufferGeometry args={[width, height]} />
diff --git a/src/tools/WalkieTalkie/components/Request.tsx b/src/tools/WalkieTalkie/components/Request.tsx
index d5274847..1baf8e31 100644
--- a/src/tools/WalkieTalkie/components/Request.tsx
+++ b/src/tools/WalkieTalkie/components/Request.tsx
@@ -1,5 +1,7 @@
 import { GroupProps } from "@react-three/fiber";
-import { RoundedBox, Text } from "@react-three/drei";
+import { Text } from "@react-three/drei";
+import { RoundedBox } from "../../../ideas/primitives/RoundedBox";
+import { cache } from "../../../logic/cache";
 
 type RequestProps = { width: number } & GroupProps;
 
@@ -29,10 +31,8 @@ export default function Request(props: RequestProps) {
       </Text>
       <RoundedBox
         args={[width, FONT_SIZE * 2 + PADDING_Y * 4, DEPTH]}
-        radius={Math.min(width, FONT_SIZE, DEPTH) * 0.5}
-      >
-        <meshStandardMaterial color="white" />
-      </RoundedBox>
+        material={cache.mat_standard_white}
+      />
     </group>
   );
 }
diff --git a/src/tools/WalkieTalkie/components/TalkieModel.tsx b/src/tools/WalkieTalkie/components/TalkieModel.tsx
index 3b3c82e5..dfc72435 100644
--- a/src/tools/WalkieTalkie/components/TalkieModel.tsx
+++ b/src/tools/WalkieTalkie/components/TalkieModel.tsx
@@ -1,4 +1,4 @@
-import { RoundedBox } from "@react-three/drei";
+import { RoundedBox } from "../../../ideas/primitives/RoundedBox";
 import { useModifiedStandardShader } from "../../../logic/material";
 import { frag, vert } from "../materials/walkie";
 
@@ -18,19 +18,12 @@ export default function TalkieModel(props: TalkieModelProps) {
 
   return (
     <group name="model">
-      <RoundedBox
-        args={[width, height, depth]}
-        radius={Math.min(width, height, depth) * 0.5}
-        material={mat}
-        smoothness={10}
-      />
+      <RoundedBox args={[width, height, depth]} material={mat} />
       <RoundedBox
         args={[ANTENNA_WIDTH, ANTENNA_HEIGHT, depth]}
         material={mat}
-        radius={Math.min(ANTENNA_WIDTH, height, depth) * 0.5}
         position-x={-width / 2 + ANTENNA_WIDTH / 2}
         position-y={height / 2}
-        smoothness={10}
       />
     </group>
   );