diff --git a/r3f/src/App.jsx b/r3f/src/App.jsx
new file mode 100644
index 0000000..74f7213
--- /dev/null
+++ b/r3f/src/App.jsx
@@ -0,0 +1,40 @@
+import { Canvas, useFrame } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+import { useRef, useState } from 'react'
+
+function Box({ position }) {
+  const ref = useRef()
+  const [hovered, setHovered] = useState(false)
+  const [clicked, setClicked] = useState(false)
+
+  useFrame(() => {
+    ref.current.rotation.x += 0.01
+    ref.current.rotation.y += 0.01
+  })
+
+  return (
+    <mesh
+      ref={ref}
+      position={position}
+      scale={clicked ? 1.5 : 1}
+      onClick={() => setClicked(!clicked)}
+      onPointerOver={() => setHovered(true)}
+      onPointerOut={() => setHovered(false)}
+    >
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
+
+export default function App() {
+  return (
+    <Canvas style={{ background: '#f0f0f0' }}>
+      <ambientLight intensity={Math.PI / 2} />
+      <pointLight position={[-10, -10, -10]} intensity={Math.PI} />
+      <Box position={[-1.2, 0, 0]} />
+      <Box position={[1.2, 0, 0]} />
+      <OrbitControls />
+    </Canvas>
+  )
+} 
\ No newline at end of file