diff --git a/public/gear.glb b/public/gear.glb
new file mode 100644
index 0000000..9504715
Binary files /dev/null and b/public/gear.glb differ
diff --git a/src/App.tsx b/src/App.tsx
index 7137bf2..983d512 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,5 @@
+import Renderer from './Renderer.tsx'
+
 function App() {
 
   return (
@@ -19,6 +21,7 @@ function App() {
           <div className="hidden lg:flex lg:flex-1 lg:justify-end"/>
         </nav>
       </header>
+      <Renderer/>
     </>
   )
 }
diff --git a/src/Renderer.tsx b/src/Renderer.tsx
new file mode 100644
index 0000000..4e09cb3
--- /dev/null
+++ b/src/Renderer.tsx
@@ -0,0 +1,45 @@
+import { Canvas, useFrame, useLoader } from '@react-three/fiber';
+import { Clone, ContactShadows, OrbitControls } from '@react-three/drei'
+import { Suspense, useRef } from 'react';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+
+function Gear(props: any) {
+  const gltf = useLoader(GLTFLoader, './gear.glb');
+
+  const gear1Ref = useRef<any>()
+  const gear2Ref = useRef<any>()
+
+  const speed = 2.5;
+
+  useFrame(({ clock }) => {
+    gear1Ref.current.rotation.z = clock.getElapsedTime() * speed + Math.sin(clock.getElapsedTime()) * speed
+    gear2Ref.current.rotation.z = -clock.getElapsedTime() * speed - Math.sin(clock.getElapsedTime()) * speed
+  })
+
+  return <>
+    <Clone ref={gear1Ref} {...props} object={gltf.scene} />
+    <Clone ref={gear2Ref} position={[2.5,0,0]} {...props} object={gltf.scene} />
+  </>
+}
+
+function Renderer() {
+  return (
+    <div className='flex flex-col h-screen gradient'>
+      <Canvas camera={{ position: [-8, 5, 8] }}>
+        <Suspense fallback={null}>
+          <Gear />
+          <ContactShadows
+            scale={60}
+            position={[0, -2, 0]}
+            opacity={2.0}
+            blur={2}
+            resolution={512}
+          />
+          <OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2} />
+        </Suspense>
+      </Canvas>
+    </div>
+  );
+}
+
+export default Renderer
diff --git a/src/index.css b/src/index.css
index b5c61c9..6fb665e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.gradient {
+    background: rgb(255,255,255);
+    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(190,190,190,1) 100%);
+}
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
index 60a28f6..68191b8 100644
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}
\ No newline at end of file
+{"root":["./src/App.tsx","./src/Renderer.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index edc5ce5..e40300f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,4 +10,7 @@ export default defineConfig({
        plugins: [tailwindcss()],
      },
    },
+   assetsInclude: [
+     "**/*.glb"
+   ]
 })