diff --git a/Week-1/Task-3/r3f/index.html b/Week-1/Task-3/r3f/index.html
new file mode 100644
index 0000000..cdb18a3
--- /dev/null
+++ b/Week-1/Task-3/r3f/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Task 3 — Hover Interaction (R3F)
+
+
+
+
+
+
diff --git a/Week-1/Task-3/r3f/package.json b/Week-1/Task-3/r3f/package.json
new file mode 100644
index 0000000..5b76d0e
--- /dev/null
+++ b/Week-1/Task-3/r3f/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "task-3-r3f",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build"
+ },
+ "dependencies": {
+ "@react-three/fiber": "^8.16.8",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "three": "^0.163.0"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.0.0"
+ }
+}
diff --git a/Week-1/Task-3/r3f/src/App.jsx b/Week-1/Task-3/r3f/src/App.jsx
new file mode 100644
index 0000000..1614d24
--- /dev/null
+++ b/Week-1/Task-3/r3f/src/App.jsx
@@ -0,0 +1,14 @@
+import { Canvas } from '@react-three/fiber'
+import Box from './Box'
+
+function App() {
+ return (
+
+
+
+ )
+}
+
+export default App
diff --git a/Week-1/Task-3/r3f/src/Box.jsx b/Week-1/Task-3/r3f/src/Box.jsx
new file mode 100644
index 0000000..77144d4
--- /dev/null
+++ b/Week-1/Task-3/r3f/src/Box.jsx
@@ -0,0 +1,32 @@
+import { useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+
+function Box() {
+ const meshRef = useRef()
+ const [hovered, setHover] = useState(false)
+
+ useFrame(() => {
+ meshRef.current.rotation.x += 0.01
+ meshRef.current.rotation.y += 0.01
+ })
+
+ return (
+ {
+ setHover(true)
+ document.body.style.cursor = 'pointer'
+ }}
+ onPointerOut={() => {
+ setHover(false)
+ document.body.style.cursor = 'default'
+ }}
+ scale={hovered ? 1.15 : 1}
+ >
+
+
+
+ )
+}
+
+export default Box
diff --git a/Week-1/Task-3/r3f/src/main.jsx b/Week-1/Task-3/r3f/src/main.jsx
new file mode 100644
index 0000000..e8e6289
--- /dev/null
+++ b/Week-1/Task-3/r3f/src/main.jsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render()
diff --git a/Week-1/Task-3/r3f/vite.config.js b/Week-1/Task-3/r3f/vite.config.js
new file mode 100644
index 0000000..9ffcc67
--- /dev/null
+++ b/Week-1/Task-3/r3f/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+})