diff --git a/package.json b/package.json
index 2f4e404c..0f064264 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
   "dependencies": {
     "@vueuse/core": "^13.8.0",
     "camera-controls": "^2.9.0",
+    "maath": "^0.10.8",
     "stats-gl": "^2.0.1",
     "stats.js": "^0.17.0",
     "three-custom-shader-material": "^5.4.0",
diff --git a/playground/vue/components.d.ts b/playground/vue/components.d.ts
index f3ca96a1..0f4aa421 100644
--- a/playground/vue/components.d.ts
+++ b/playground/vue/components.d.ts
@@ -8,13 +8,10 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AkuAku: typeof import('./src/components/gltf/BlenderCube.vue')['default']
     BlenderCube: typeof import('./src/components/gltf/BlenderCube.vue')['default']
     FboCube: typeof import('./src/components/FboCube.vue')['default']
-    Gltf: typeof import('./src/components/gltf/index.vue')['default']
     GraphPane: typeof import('./src/components/GraphPane.vue')['default']
     Jeep: typeof import('./src/components/fbx/Jeep.vue')['default']
-    ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
     OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/playground/vue/src/pages/controls/PresentationControlsDemo.vue b/playground/vue/src/pages/controls/PresentationControlsDemo.vue
new file mode 100644
index 00000000..c9012653
--- /dev/null
+++ b/playground/vue/src/pages/controls/PresentationControlsDemo.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { PresentationControls } from '@tresjs/cientos'
+import '@tresjs/leches/styles'
+import {
+  NoToneMapping,
+  SRGBColorSpace,
+} from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  alpha: false,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <div style="width: 100vw; height: 100vh">
+    <TresCanvas v-bind="gl">
+      <TresPerspectiveCamera
+        :position="[0, 0, 5]"
+      />
+      <PresentationControls
+        :global="true"
+        :config="{ mass: 2, tension: 500 }"
+        :snap="{ mass: 4, tension: 1500 }"
+        :rotation="[0, 0.3, 0]"
+        :polar="[-Math.PI / 3, Math.PI / 3]"
+        :azimuth="[-Math.PI / 1.4, Math.PI / 2]"
+      >
+        <TresMesh>
+          <TresBoxGeometry
+            :args="[1.5, 1.5, 1.5]"
+          />
+          <TresMeshStandardMaterial
+            color="#4169E1"
+            :metalness="0.7"
+            :roughness="0.3"
+          />
+        </TresMesh>
+      </PresentationControls>
+      <TresGridHelper :args="[10, 10]" />
+      <TresAmbientLight :intensity="0.7" />
+      <TresDirectionalLight
+        :position="[5, 5, 5]"
+        :intensity="1"
+      />
+    </TresCanvas>
+  </div>
+</template>
diff --git a/playground/vue/src/router/routes/controls.ts b/playground/vue/src/router/routes/controls.ts
index baec8bd0..003d2e6e 100644
--- a/playground/vue/src/router/routes/controls.ts
+++ b/playground/vue/src/router/routes/controls.ts
@@ -34,6 +34,11 @@ export const controlsRoutes = [
     name: 'ScrollControls',
     component: () => import('../../pages/controls/ScrollControlsDemo.vue'),
   },
+  {
+    path: '/controls/presentation-controls',
+    name: 'PresentationControls',
+    component: () => import('../../pages/controls/PresentationControlsDemo.vue'),
+  },
   {
     path: '/controls/helper',
     name: 'Helper',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1664973..d260274b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       camera-controls:
         specifier: ^2.9.0
         version: 2.10.1(three@0.180.0)
+      maath:
+        specifier: ^0.10.8
+        version: 0.10.8(@types/three@0.180.0)(three@0.180.0)
       stats-gl:
         specifier: ^2.0.1
         version: 2.4.2(@types/three@0.180.0)(three@0.180.0)
@@ -3264,6 +3267,12 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
+  maath@0.10.8:
+    resolution: {integrity: sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==}
+    peerDependencies:
+      '@types/three': '>=0.134.0'
+      three: '>=0.134.0'
+
   macos-release@3.3.0:
     resolution: {integrity: sha512-tPJQ1HeyiU2vRruNGhZ+VleWuMQRro8iFtJxYgnS4NQe+EukKF6aGiIT+7flZhISAt2iaXBCfFGvAyif7/f8nQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7910,6 +7919,11 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
+  maath@0.10.8(@types/three@0.180.0)(three@0.180.0):
+    dependencies:
+      '@types/three': 0.180.0
+      three: 0.180.0
+
   macos-release@3.3.0: {}
 
   magic-string@0.30.17:
diff --git a/src/core/controls/PresentationControls.vue b/src/core/controls/PresentationControls.vue
new file mode 100644
index 00000000..24d29b47
--- /dev/null
+++ b/src/core/controls/PresentationControls.vue
@@ -0,0 +1,362 @@
+<script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
+import { useLoop, useTres } from '@tresjs/core'
+import { MathUtils } from 'three'
+import type { Group } from 'three'
+import {
+  computed,
+  onUnmounted,
+  reactive,
+  ref,
+  shallowRef,
+  toRefs,
+  watchEffect,
+} from 'vue'
+
+type EulerArray = [number, number, number]
+type RangeTuple = [number, number]
+
+export interface PresentationControlsProps {
+  enabled?: boolean
+  snap?: boolean | number | { mass?: number, tension?: number }
+  /**
+   * Spring configuration while dragging
+   * @default { mass: 2, tension: 500 }
+   */
+  config?: { mass?: number, tension?: number }
+  global?: boolean
+  cursor?: boolean
+  speed?: number
+  zoom?: number
+  rotation?: EulerArray
+  polar?: RangeTuple
+  azimuth?: RangeTuple
+  damping?: number
+  domElement?: HTMLElement
+}
+
+const props = withDefaults(
+  defineProps<PresentationControlsProps>(),
+  {
+    enabled: true,
+    snap: undefined,
+    config: () => ({ mass: 2, tension: 500 }),
+    global: false,
+    cursor: true,
+    speed: 1,
+    rotation: () => [0, 0, 0],
+    zoom: 1,
+    polar: () => [0, Math.PI / 2],
+    azimuth: () => [
+      Number.NEGATIVE_INFINITY,
+      Number.POSITIVE_INFINITY,
+    ],
+    damping: 0.25,
+  },
+)
+
+const {
+  enabled,
+  snap,
+  global,
+  cursor,
+  speed,
+  rotation,
+  zoom,
+  polar,
+  azimuth,
+  damping,
+  config,
+  domElement,
+} = toRefs(props)
+
+const { sizes, renderer, invalidate } = useTres()
+
+const explDomElement = computed<
+  HTMLElement | undefined
+>(() => domElement.value || renderer.domElement)
+
+// Derived ranges and initial rotation (clamped)
+const rPolar = computed<RangeTuple>(() => [
+  rotation.value[0] + polar.value[0],
+  rotation.value[0] + polar.value[1],
+])
+const rAzimuth = computed<RangeTuple>(() => [
+  rotation.value[1] + azimuth.value[0],
+  rotation.value[1] + azimuth.value[1],
+])
+const rInitial = computed<EulerArray>(() => [
+  MathUtils.clamp(
+    rotation.value[0],
+    rPolar.value[0],
+    rPolar.value[1],
+  ),
+  MathUtils.clamp(
+    rotation.value[1],
+    rAzimuth.value[0],
+    rAzimuth.value[1],
+  ),
+  rotation.value[2],
+])
+
+// Animation target state
+const animation = reactive({
+  scale: 1,
+  rotation: rInitial.value.slice() as EulerArray,
+  damping: damping.value,
+})
+
+// Spring velocities for scale and rotation components
+const velocity = reactive({
+  scale: 0,
+  rotation: [0, 0, 0] as EulerArray,
+})
+
+// 3D group ref
+const groupRef = shallowRef<Group | null>(null)
+
+// Drag handling (declare before render loop to satisfy linter ordering)
+const isDragging = ref(false)
+let startX = 0
+let startY = 0
+let startRotX = rInitial.value[1] // azimuth (around y)
+let startRotY = rInitial.value[0] // polar (around x)
+
+// Initialize once and integrate spring motion per-frame
+const initialized = ref(false)
+const { onBeforeRender } = useLoop()
+onBeforeRender(({ delta }) => {
+  const group = groupRef.value
+  if (!group) { return }
+
+  if (!initialized.value) {
+    group.rotation.set(rInitial.value[0], rInitial.value[1], rInitial.value[2])
+    group.scale.set(1, 1, 1)
+    initialized.value = true
+  }
+
+  const dt = Math.max(0.000001, Math.min(0.05, delta))
+
+  // Choose config depending on dragging/snap state
+  const isSnapping = (!isDragging.value) && !!snap.value
+  const baseConfig = isSnapping
+    ? (typeof snap.value === 'object' ? (snap.value as any) : {})
+    : (config.value || {})
+  const mass = Math.max(0.0001, Number(baseConfig.mass ?? (isSnapping ? 4 : 2)))
+  const tension = Math.max(0, Number(baseConfig.tension ?? (isSnapping ? 1500 : 500)))
+  const dampingRatio = (typeof snap.value === 'number' && isSnapping)
+    ? Math.max(0, Number(snap.value))
+    : Math.max(0, Number(animation.damping))
+  const c = 2 * Math.sqrt(tension * mass) * dampingRatio
+
+  function stepScalar(current: number, target: number, v: number): [number, number] {
+    const a = (-(tension / mass) * (current - target)) - ((c / mass) * v)
+    const nv = v + a * dt
+    const nx = current + nv * dt
+    return [nx, nv]
+  }
+
+  // Scale spring (uniform)
+  const [nx, nv] = stepScalar(group.scale.x, animation.scale, velocity.scale)
+  const clampedScale = Math.max(0.001, nx)
+  group.scale.set(clampedScale, clampedScale, clampedScale)
+  velocity.scale = nv
+
+  // Rotation springs per axis
+  const rTargets = animation.rotation
+  const rCurr = [group.rotation.x, group.rotation.y, group.rotation.z] as EulerArray
+  const newRot: EulerArray = [0, 0, 0]
+  const newVel: EulerArray = [0, 0, 0]
+  for (let i = 0; i < 3; i++) {
+    const [nr, nrv] = stepScalar(rCurr[i], rTargets[i], velocity.rotation[i])
+    newRot[i] = nr
+    newVel[i] = nrv
+  }
+  group.rotation.set(newRot[0], newRot[1], newRot[2])
+  velocity.rotation = newVel as EulerArray
+})
+
+// Cursor management for global mode
+watchEffect((onCleanup) => {
+  const el = explDomElement.value
+  if (!el) {
+    return
+  }
+  if (
+    global.value
+    && cursor.value
+    && enabled.value
+  ) {
+    const original = el.style.cursor
+    el.style.cursor = 'grab'
+    onCleanup(() => {
+      el.style.cursor = original || 'default'
+    })
+  }
+})
+
+function beginDrag(
+  clientX: number,
+  clientY: number,
+) {
+  if (!enabled.value) {
+    return
+  }
+  isDragging.value = true
+  startX = clientX
+  startY = clientY
+  const current = (animation.rotation
+    || rInitial.value) as EulerArray
+  startRotY = current[0]
+  startRotX = current[1]
+  if (cursor.value && explDomElement.value) {
+    explDomElement.value.style.cursor
+      = 'grabbing'
+  }
+}
+
+function updateDrag(
+  clientX: number,
+  clientY: number,
+) {
+  if (!enabled.value || !isDragging.value) {
+    return
+  }
+  const dx = clientX - startX
+  const dy = clientY - startY
+  const width = Math.max(1, sizes.width.value)
+  const height = Math.max(1, sizes.height.value)
+  let nextX
+    = startRotX
+      + (dx / width) * Math.PI * speed.value
+  let nextY
+    = startRotY
+      + (dy / height) * Math.PI * speed.value
+  nextX = MathUtils.clamp(
+    nextX,
+    rAzimuth.value[0],
+    rAzimuth.value[1],
+  )
+  nextY = MathUtils.clamp(
+    nextY,
+    rPolar.value[0],
+    rPolar.value[1],
+  )
+
+  animation.scale
+    = nextY > rPolar.value[1] / 2 ? zoom.value : 1
+  animation.rotation = [nextY, nextX, 0]
+  animation.damping = damping.value
+  invalidate()
+}
+
+function endDrag() {
+  if (!enabled.value) {
+    return
+  }
+  isDragging.value = false
+  animation.scale = 1
+  if (cursor.value && explDomElement.value) {
+    explDomElement.value.style.cursor = 'grab'
+  }
+  if (snap.value) {
+    animation.rotation
+      = rInitial.value.slice() as EulerArray
+  }
+  animation.damping
+    = typeof snap.value === 'number'
+      ? snap.value
+      : damping.value
+  invalidate()
+}
+
+// Local (non-global) pointer handlers – early-return if global mode
+function onPointerEnter() {
+  if (global.value || !enabled.value) {
+    return
+  }
+  if (cursor.value && explDomElement.value) {
+    explDomElement.value.style.cursor = 'grab'
+  }
+}
+function onPointerLeave() {
+  if (global.value || !enabled.value) {
+    return
+  }
+  if (
+    cursor.value
+    && explDomElement.value
+    && !isDragging.value
+  ) {
+    explDomElement.value.style.cursor = 'auto'
+  }
+}
+function onPointerDown(e: PointerEvent) {
+  if (global.value) {
+    return
+  }
+  beginDrag(e.clientX, e.clientY)
+}
+function onPointerMove(e: PointerEvent) {
+  if (global.value) {
+    return
+  }
+  updateDrag(e.clientX, e.clientY)
+}
+function onPointerUp() {
+  if (global.value) {
+    return
+  }
+  endDrag()
+}
+
+// Global listeners when global=true
+watchEffect((onCleanup) => {
+  if (!global.value || !explDomElement.value) {
+    return
+  }
+  const el = explDomElement.value
+  const down = (e: PointerEvent) =>
+    beginDrag(e.clientX, e.clientY)
+  const move = (e: PointerEvent) =>
+    updateDrag(e.clientX, e.clientY)
+  const up = () => endDrag()
+  const leave = () => {
+    if (!isDragging.value) {
+      if (cursor.value) {
+        el.style.cursor = 'grab'
+      }
+    }
+  }
+  useEventListener(el, 'pointerdown', down)
+  useEventListener(el, 'pointermove', move)
+  useEventListener(el, 'pointerup', up)
+  useEventListener(el, 'pointerleave', leave)
+  onCleanup(() => {
+    // listeners auto-removed by useEventListener's scope disposal
+  })
+})
+
+onUnmounted(() => {
+  // Reset cursor if we changed it
+  const el = explDomElement.value
+  if (el && cursor.value) {
+    el.style.cursor = 'default'
+  }
+})
+
+defineExpose({ instance: groupRef })
+</script>
+
+<template>
+  <TresGroup
+    ref="groupRef"
+    @pointerenter="onPointerEnter"
+    @pointerleave="onPointerLeave"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+  >
+    <slot></slot>
+  </TresGroup>
+</template>
diff --git a/src/core/controls/index.ts b/src/core/controls/index.ts
index 07887bf4..85c9d03d 100644
--- a/src/core/controls/index.ts
+++ b/src/core/controls/index.ts
@@ -6,6 +6,7 @@ import OrbitControls from './OrbitControls.vue'
 import PointerLockControls from './PointerLockControls.vue'
 import ScrollControls from './ScrollControls.vue'
 import TransformControls from './TransformControls.vue'
+import PresentationControls from './PresentationControls.vue'
 
 export {
   BaseCameraControls,
@@ -15,6 +16,7 @@ export {
   MapControls,
   OrbitControls,
   PointerLockControls,
+  PresentationControls,
   ScrollControls,
   TransformControls,
 }