diff --git a/package-lock.json b/package-lock.json
index 43e5aaf..842423f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@fontsource/fira-mono": "^4.5.0",
         "@lukeed/uuid": "^2.0.0",
+        "@types/cannon": "^0.1.8",
+        "cannon-es": "^0.19.0",
         "cookie": "^0.4.1",
         "gsap": "^3.9.1",
         "lil-gui": "^0.16.1",
@@ -303,6 +305,11 @@
         }
       }
     },
+    "node_modules/@types/cannon": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@types/cannon/-/cannon-0.1.8.tgz",
+      "integrity": "sha512-aabgPL9ho1Qov3mMnBJCTG+vTWhFrhRi/5INwsZCPhf3BwabRWz53ryffCDzRSlV4T0f4eQS0OQo5Y/RCZsngQ=="
+    },
     "node_modules/@types/cookie": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -696,6 +703,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/cannon-es": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/cannon-es/-/cannon-es-0.19.0.tgz",
+      "integrity": "sha512-fu9UXrjFmAQXq3JyBVPbtyc53suX+QHzikZEJykxroVNnIx1xHq0jZenK8qwhdwbBAtDL9n/47TyPELuSQwZuA=="
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1968,9 +1980,9 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "node_modules/mkdirp": {
@@ -3457,6 +3469,11 @@
         "svelte-hmr": "^0.14.9"
       }
     },
+    "@types/cannon": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@types/cannon/-/cannon-0.1.8.tgz",
+      "integrity": "sha512-aabgPL9ho1Qov3mMnBJCTG+vTWhFrhRi/5INwsZCPhf3BwabRWz53ryffCDzRSlV4T0f4eQS0OQo5Y/RCZsngQ=="
+    },
     "@types/cookie": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
@@ -3719,6 +3736,11 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true
     },
+    "cannon-es": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/cannon-es/-/cannon-es-0.19.0.tgz",
+      "integrity": "sha512-fu9UXrjFmAQXq3JyBVPbtyc53suX+QHzikZEJykxroVNnIx1xHq0jZenK8qwhdwbBAtDL9n/47TyPELuSQwZuA=="
+    },
     "chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4633,9 +4655,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "mkdirp": {
diff --git a/package.json b/package.json
index fcb303a..63a244e 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
   "dependencies": {
     "@fontsource/fira-mono": "^4.5.0",
     "@lukeed/uuid": "^2.0.0",
+    "@types/cannon": "^0.1.8",
+    "cannon-es": "^0.19.0",
     "cookie": "^0.4.1",
     "gsap": "^3.9.1",
     "lil-gui": "^0.16.1",
diff --git a/src/lib/molecules/header/Header.svelte b/src/lib/molecules/header/Header.svelte
index df397ca..065354c 100644
--- a/src/lib/molecules/header/Header.svelte
+++ b/src/lib/molecules/header/Header.svelte
@@ -38,6 +38,9 @@
 			<li class:active={$page.url.pathname === '/scroll'}>
 				<a sveltekit:prefetch href="/scroll">Scroll</a>
 			</li>
+			<li class:active={$page.url.pathname === '/physics'}>
+				<a sveltekit:prefetch href="/physics">Physics</a>
+			</li>
 			<li class:active={$page.url.pathname === '/todos'}>
 				<a sveltekit:prefetch href="/todos">Todos</a>
 			</li>
diff --git a/src/lib/organism/Physics.svelte b/src/lib/organism/Physics.svelte
new file mode 100644
index 0000000..11702d4
--- /dev/null
+++ b/src/lib/organism/Physics.svelte
@@ -0,0 +1,308 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/env';
+	import * as THREE from 'three';
+	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+	import GUI from 'lil-gui';
+	// @ts-ignore
+	import * as CANNON from 'cannon-es';
+
+	let canvasEl: HTMLElement;
+
+	interface debugObject {
+		createSphere: () => void;
+		createBox: () => void;
+		reset: () => void;
+	}
+
+	onMount(() => {
+		if (browser) {
+			// sizes
+			const sizes = {
+				width: window.innerWidth,
+				height: window.innerHeight
+			};
+
+			window.addEventListener('resize', () => {
+				// Update sizes
+				sizes.width = window.innerWidth;
+				sizes.height = window.innerHeight;
+
+				// Update camera
+				camera.aspect = sizes.width / sizes.height;
+				camera.updateProjectionMatrix();
+
+				// Update renderer
+				renderer.setSize(sizes.width, sizes.height);
+				renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+			});
+
+			// scene
+			const scene = new THREE.Scene();
+
+			// sounds
+			const hitSound = new Audio('/sounds/hit.mp3');
+
+			const playHitSound = (collision) => {
+				const impactStrength = collision.contact.getImpactVelocityAlongNormal();
+
+				if (impactStrength > 1.5) {
+					hitSound.volume = Math.random();
+					hitSound.currentTime = 0;
+					hitSound.play();
+				}
+			};
+
+			// texture
+			const cubeTextureLoader = new THREE.CubeTextureLoader();
+
+			const environmentMapTexture = cubeTextureLoader.load([
+				'/textures/environmentMaps/0/px.png',
+				'/textures/environmentMaps/0/nx.png',
+				'/textures/environmentMaps/0/py.png',
+				'/textures/environmentMaps/0/ny.png',
+				'/textures/environmentMaps/0/pz.png',
+				'/textures/environmentMaps/0/nz.png'
+			]);
+
+			// physics
+			const world = new CANNON.World();
+			world.broadphase = new CANNON.SAPBroadphase(world);
+			world.allowSleep = true; // improves performance
+			world.gravity.set(0, -9.82, 0);
+
+			// Default material
+			const concreteMaterial = new CANNON.Material('concrete');
+			const plasticMaterial = new CANNON.Material('plastic');
+			// the above can be simplfied to one default material if using
+			const defaultContactMaterial = new CANNON.ContactMaterial(concreteMaterial, plasticMaterial, {
+				friction: 0.1,
+				restitution: 0.7 // higher the number, bounce will be higher
+			});
+			world.defaultContactMaterial = defaultContactMaterial;
+
+			// Floor
+			const floorShape = new CANNON.Plane();
+			const floorBody = new CANNON.Body();
+			floorBody.mass = 0;
+			floorBody.addShape(floorShape);
+			floorBody.quaternion.setFromAxisAngle(new CANNON.Vec3(-1, 0, 0), Math.PI * 0.5); // to turn
+			world.addBody(floorBody);
+
+			// utils
+			const objectsToUpdate = [];
+
+			// Create sphere
+			const sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
+			const sphereMaterial = new THREE.MeshStandardMaterial({
+				metalness: 0.3,
+				roughness: 0.4,
+				envMap: environmentMapTexture,
+				envMapIntensity: 0.5
+			});
+
+			const createSphere = (radius, position) => {
+				// Three.js mesh
+				const mesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
+				mesh.castShadow = true;
+				mesh.scale.set(radius, radius, radius);
+				mesh.position.copy(position);
+				scene.add(mesh);
+
+				// Cannon.js body
+				const shape = new CANNON.Sphere(radius);
+
+				const body = new CANNON.Body({
+					mass: 1,
+					position: new CANNON.Vec3(0, 3, 0),
+					shape: shape,
+					material: plasticMaterial
+				});
+				body.position.copy(position);
+				body.addEventListener('collide', playHitSound);
+				world.addBody(body);
+
+				// Save in objects
+				objectsToUpdate.push({ mesh, body });
+			};
+
+			// Create box
+			const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
+			const boxMaterial = new THREE.MeshStandardMaterial({
+				metalness: 0.3,
+				roughness: 0.4,
+				envMap: environmentMapTexture,
+				envMapIntensity: 0.5
+			});
+			const createBox = (width, height, depth, position) => {
+				// Three.js mesh
+				const mesh = new THREE.Mesh(boxGeometry, boxMaterial);
+				mesh.scale.set(width, height, depth);
+				mesh.castShadow = true;
+				mesh.position.copy(position);
+				scene.add(mesh);
+
+				// Cannon.js body
+				const shape = new CANNON.Box(new CANNON.Vec3(width * 0.5, height * 0.5, depth * 0.5));
+
+				const body = new CANNON.Body({
+					mass: 1,
+					position: new CANNON.Vec3(0, 3, 0),
+					shape: shape,
+					material: plasticMaterial
+				});
+				body.position.copy(position);
+				body.addEventListener('collide', playHitSound);
+				world.addBody(body);
+
+				// Save in objects
+				objectsToUpdate.push({ mesh, body });
+			};
+
+			createBox(0.5, 0.75, 1, { x: 0, y: 3, z: 0 });
+
+			// Floor
+			const floor = new THREE.Mesh(
+				new THREE.PlaneGeometry(10, 10),
+				new THREE.MeshStandardMaterial({
+					color: '#777777',
+					metalness: 0.3,
+					roughness: 0.4,
+					envMap: environmentMapTexture,
+					envMapIntensity: 0.5
+				})
+			);
+			floor.receiveShadow = true;
+			floor.rotation.x = -Math.PI * 0.5;
+			scene.add(floor);
+
+			// Light
+			const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+			scene.add(ambientLight);
+
+			const directionalLight = new THREE.DirectionalLight(0xffffff, 0.2);
+			directionalLight.castShadow = true;
+			directionalLight.shadow.mapSize.set(1024, 1024);
+			directionalLight.shadow.camera.far = 15;
+			directionalLight.shadow.camera.left = -7;
+			directionalLight.shadow.camera.top = 7;
+			directionalLight.shadow.camera.right = 7;
+			directionalLight.shadow.camera.bottom = -7;
+			directionalLight.position.set(5, 5, 5);
+			scene.add(directionalLight);
+
+			// camera
+			// Base camera
+			const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
+			camera.position.set(-3, 3, 8);
+			scene.add(camera);
+
+			// Controls
+			const controls = new OrbitControls(camera, canvasEl);
+			controls.enableDamping = true;
+
+			// renderer
+			let renderer: THREE.WebGLRenderer;
+			const createScene = (canvasEl) => {
+				renderer = new THREE.WebGLRenderer({ canvas: canvasEl, alpha: true });
+				renderer.setSize(sizes.width, sizes.height);
+				renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 2 is usually enough, higher = expensive computing
+				renderer.render(scene, camera);
+			};
+
+			createScene(canvasEl);
+
+			//animation
+			const clock = new THREE.Clock();
+			let oldElapsedTime = 0;
+
+			const tick = () => {
+				const elapsedTime = clock.getElapsedTime();
+				const deltaTime = elapsedTime - oldElapsedTime;
+				oldElapsedTime = elapsedTime;
+
+				// Update physics
+				world.step(1 / 60, deltaTime, 3);
+
+				for (const object of objectsToUpdate) {
+					object.mesh.position.copy(object.body.position);
+					object.mesh.quaternion.copy(object.body.quaternion); // the rotation part which makes objects which are colliding to each other fall more naturally
+				}
+
+				// Update controls
+				controls.update();
+
+				// Render
+				renderer.render(scene, camera);
+
+				// Call tick again on the next frame
+				window.requestAnimationFrame(tick);
+			};
+			tick();
+
+			// debug
+			const debugObject: debugObject = {
+				createSphere: function (): void {
+					throw new Error('Function not implemented.');
+				},
+				createBox: function (): void {
+					throw new Error('Function not implemented.');
+				},
+				reset: function (): void {
+					throw new Error('Function not implemented.');
+				}
+			};
+
+			debugObject.createSphere = () => {
+				createSphere(Math.random() * 0.5, {
+					x: (Math.random() - 0.5) * 3,
+					y: 3,
+					z: (Math.random() - 0.5) * 3
+				});
+			};
+
+			debugObject.createBox = () => {
+				createBox(Math.random(), Math.random(), Math.random(), {
+					x: (Math.random() - 0.5) * 3,
+					y: 3,
+					z: (Math.random() - 0.5) * 3
+				});
+			};
+
+			debugObject.reset = () => {
+				for (const object of objectsToUpdate) {
+					// Remove body
+					object.body.removeEventListener('collide', playHitSound);
+					world.removeBody(object.body);
+
+					// Remove mesh
+					scene.remove(object.mesh);
+				}
+
+				objectsToUpdate.splice(0, objectsToUpdate.length);
+			};
+
+			const gui = new GUI({ width: 350 });
+			gui.add(debugObject, 'createSphere');
+			gui.add(debugObject, 'createBox');
+			gui.add(debugObject, 'reset');
+
+			return () => gui.destroy();
+		}
+	});
+</script>
+
+<section>
+	<p>Click on control's parameters to rain balls and boxes!</p>
+	<canvas bind:this={canvasEl} />
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin: 0 auto;
+	}
+</style>
diff --git a/src/routes/physics.svelte b/src/routes/physics.svelte
new file mode 100644
index 0000000..7e6fc09
--- /dev/null
+++ b/src/routes/physics.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Physics from '$lib/organism/Physics.svelte';
+</script>
+
+<svelte:head>
+	<title>Physics</title>
+</svelte:head>
+
+<h1>Three.js x Sveltekit - Physics</h1>
+
+<Physics />
diff --git a/static/sounds/hit.mp3 b/static/sounds/hit.mp3
new file mode 100644
index 0000000..fb90b35
Binary files /dev/null and b/static/sounds/hit.mp3 differ