diff --git a/src/lib/components/Canvas.svelte b/src/lib/components/Canvas.svelte
index ef93737..9717208 100644
--- a/src/lib/components/Canvas.svelte
+++ b/src/lib/components/Canvas.svelte
@@ -85,6 +85,9 @@
 	/** @param {Function} fn */
 	const run = (fn) => fn();
 
+	/**
+	 * @description is required to rerender the scene if something has changed
+	 */
 	const invalidate = () => {
 		if (frame) return;
 
diff --git a/src/lib/components/controls/PointerLockControls.svelte b/src/lib/components/controls/PointerLockControls.svelte
new file mode 100644
index 0000000..14931bc
--- /dev/null
+++ b/src/lib/components/controls/PointerLockControls.svelte
@@ -0,0 +1,142 @@
+<script>
+	import * as THREE from 'three';
+	import { setup } from '../../utils/context.js';
+	import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
+	import { createEventDispatcher, onDestroy } from 'svelte';
+	import { onFrame } from '$lib/utils/lifecycle.js';
+
+	export let maxPolarAngle = Math.PI;
+	export let minPolarAngle = 0;
+
+	let isLocked = false;
+
+	const { root } = setup();
+	const dispatch = createEventDispatcher();
+
+	/** @type {PointerLockControls} */
+	export let controls = undefined;
+
+	root.controls.set((camera, canvas) => {
+
+		controls = new PointerLockControls(camera, canvas);
+
+		controls.addEventListener('start', (e) => {
+			dispatch('start', e);
+		});
+
+		controls.addEventListener('end', (e) => {
+			dispatch('end', e);
+		});
+
+		controls.addEventListener('lock', (e) => {
+			isLocked = true;
+			if (enableMovement) {
+				document.addEventListener('keydown', setPressedKeys);
+				document.addEventListener('keyup', removePressedKeys);
+			}
+			dispatch('lock', e);
+		});
+
+		controls.addEventListener('unlock', (e) => {
+			isLocked = false;
+			if (enableMovement) {
+				document.removeEventListener('keydown', setPressedKeys);
+				document.removeEventListener('keyup', removePressedKeys);
+			}
+			dispatch('unlock', e);
+		});
+
+		// allows rotating the camera
+		controls.addEventListener('change', (e) => {
+			dispatch('change', e);
+
+			root.invalidate();
+		});
+
+		canvas.addEventListener('click', () => {
+			controls.lock();
+		});
+
+		return controls;
+	});
+
+	$: if (controls) {
+		controls.isLocked = isLocked;
+		controls.maxPolarAngle = maxPolarAngle;
+		controls.minPolarAngle = minPolarAngle;
+	}
+
+	// Movement stuff only
+	/** @type {Record<string | number | symbol, boolean>} */
+	export let pressedKeys = {}
+	export let speed = 1
+	export let enableMovement = false
+
+	const velocity = new THREE.Vector3();
+	const direction = new THREE.Vector3();
+	/** @type {number} */
+	let prevTime;
+
+	let time = performance.now()
+	$: if (enableMovement && controls.isLocked) {
+		const moveForward = [
+			pressedKeys['w'],
+			pressedKeys['ArrowUp'],
+		].includes(true);
+
+		const moveLeft = [
+			pressedKeys['a'],
+			pressedKeys['ArrowLeft'],
+		].includes(true);
+
+		const moveBackward = [
+			pressedKeys['s'],
+			pressedKeys['ArrowDown'],
+		].includes(true);
+
+		const moveRight = [
+			pressedKeys['d'],
+			pressedKeys['ArrowRight'],
+		].includes(true);
+
+		const moved = moveForward || moveLeft || moveBackward || moveRight;
+
+		if (moved) {
+			const delta = (time - prevTime) / 1000;
+
+			velocity.x -= velocity.x * 10 * delta;
+			velocity.z -= velocity.z * 10 * delta;
+
+			direction.z = Number( moveForward ) - Number( moveBackward );
+			direction.x = Number( moveRight ) - Number( moveLeft );
+			direction.normalize(); // this ensures consistent movements in all directions
+
+			if ( moveForward || moveBackward ) velocity.z -= direction.z * delta;
+			if ( moveLeft || moveRight ) velocity.x -= direction.x * delta;
+
+			controls.moveRight( -velocity.x * delta * speed * 10 );
+			controls.moveForward( -velocity.z * delta * speed * 10);
+
+			root.invalidate();
+		} else {
+			velocity.set(0,0,0);
+		}
+	}
+
+	onFrame(() => {
+		prevTime = time;
+		time = performance.now();
+	})
+
+	onDestroy(() => {
+		document.removeEventListener('keydown', setPressedKeys);
+		document.removeEventListener('keyup', removePressedKeys);
+	})
+
+	function setPressedKeys(e) {
+		pressedKeys[e.key] = true
+	}
+	function removePressedKeys(e) {
+		pressedKeys[e.key] = false
+	}
+</script>
diff --git a/src/lib/index.js b/src/lib/index.js
index a4e3a76..95558fb 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -14,6 +14,7 @@ export { default as OrthographicCamera } from './components/cameras/Orthographic
 
 // controls
 export { default as OrbitControls } from './components/controls/OrbitControls.svelte';
+export { default as PointerLockControls } from './components/controls/PointerLockControls.svelte';
 
 // lights
 export { default as AmbientLight } from './components/lights/AmbientLight.svelte';
diff --git a/src/routes/docs/_content/02-reference/index.svelte.md b/src/routes/docs/_content/02-reference/index.svelte.md
index 00f95ea..ae60513 100644
--- a/src/routes/docs/_content/02-reference/index.svelte.md
+++ b/src/routes/docs/_content/02-reference/index.svelte.md
@@ -161,6 +161,10 @@ TODO
 
 TODO
 
+### <PointerLockControls>
+
+TODO
+
 ## Helpers
 
 ### <SkeletonHelper>
diff --git a/src/routes/examples/_content/03-first-person-camera/index.svelte b/src/routes/examples/_content/03-first-person-camera/index.svelte
new file mode 100644
index 0000000..24eecd9
--- /dev/null
+++ b/src/routes/examples/_content/03-first-person-camera/index.svelte
@@ -0,0 +1,47 @@
+<script>
+	import * as THREE from 'three';
+	import * as SC from 'svelte-cubed';
+
+	/** @type {Record<string | number | symbol, boolean>} */
+	let pressedKeys = {}
+	let speed = 1
+	$: {
+		if (pressedKeys['Shift']) {
+			speed = 5
+		} else {
+			speed = 1
+		}
+	}
+</script>
+
+<SC.Canvas
+	antialias
+	background={new THREE.Color('papayawhip')}
+	fog={new THREE.FogExp2('papayawhip', 0.1)}
+	shadows
+>
+	<SC.Group position={[0, -1 / 2, 0]}>
+		<SC.Mesh
+			geometry={new THREE.PlaneGeometry(50, 50)}
+			material={new THREE.MeshStandardMaterial({ color: 'burlywood' })}
+			rotation={[-Math.PI / 2, 0, 0]}
+			receiveShadow
+		/>
+		<SC.Primitive
+			object={new THREE.GridHelper(50, 50, 'papayawhip', 'papayawhip')}
+			position={[0, 0.001, 0]}
+		/>
+	</SC.Group>
+
+	<SC.Mesh
+		geometry={new THREE.BoxGeometry()}
+		material={new THREE.MeshStandardMaterial({ color: 0xff3e00 })}
+		scale={[1, 1, 1]}
+		castShadow
+	/>
+
+	<SC.PerspectiveCamera position={[1, 1, 3]} />
+	<SC.PointerLockControls enableMovement bind:speed bind:pressedKeys />
+	<SC.AmbientLight intensity={0.6} />
+	<SC.DirectionalLight intensity={0.6} position={[-2, 3, 2]} shadow={{ mapSize: [2048, 2048] }} />
+</SC.Canvas>
diff --git a/src/routes/examples/_content/03-first-person-camera/meta.json b/src/routes/examples/_content/03-first-person-camera/meta.json
new file mode 100644
index 0000000..a7a0f66
--- /dev/null
+++ b/src/routes/examples/_content/03-first-person-camera/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "First Person Controls"
+}
diff --git a/static/example-thumbnails/first-person-camera.jpg b/static/example-thumbnails/first-person-camera.jpg
new file mode 100644
index 0000000..9cd78bc
Binary files /dev/null and b/static/example-thumbnails/first-person-camera.jpg differ