From d06e45847ec08862cca67438a8efaabb2a8ae478 Mon Sep 17 00:00:00 2001
From: tymur999 <tymur.arsent@gmail.com>
Date: Thu, 9 Apr 2026 16:45:51 -0500
Subject: [PATCH] Add tooltip and fix scroll

---
 src/index/Canvas.tsx  | 18 +++++++++---------
 src/index/canvas.sass |  6 ++++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/index/Canvas.tsx b/src/index/Canvas.tsx
index b22cb99..d7ad3a1 100644
--- a/src/index/Canvas.tsx
+++ b/src/index/Canvas.tsx
@@ -9,7 +9,6 @@ import Makemake from "../img/2k_makemake_fictional.jpg";
 import Ceres from "../img/2k_ceres_fictional.jpg";
 import Haumea from "../img/2k_haumea_fictional.jpg";
 import MilkyWay from "../img/2k_stars_milky_way.jpg";
-import {Suspense} from "react";
 
 export default function Canvas() {
 
@@ -17,18 +16,19 @@ export default function Canvas() {
     <main className="canvas">
       <section className="canvas-ctr">
         <ThreeCanvas shadows>
-          <Suspense fallback={null}>
-            <OrbitControls />
-            <Environment background={true} files={MilkyWay}/>
-            <Moons/>
-            <Sphere/>
-            <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
-          </Suspense>
+          <OrbitControls enableZoom={false} />
+          <Environment background files={MilkyWay}/>
+          <Moons/>
+          <Planet/>
+          <directionalLight color="#E3A857" args={[1,10]} position={[100,10,100]} />
         </ThreeCanvas>
       </section>
       <motion.h1 className="welcome" animate={AnimateSpin().animate}>
         Welcome to my blog
       </motion.h1>
+      <h3 className="tooltip">
+        Drag to orbit
+      </h3>
     </main>
   )
 }
@@ -45,7 +45,7 @@ function Moons() {
   </>
 }
 
-function Sphere() {
+function Planet() {
   const colorMap = useTexture(Jupiter);
 
   return <mesh position={[0,0,0]}>
diff --git a/src/index/canvas.sass b/src/index/canvas.sass
index ab2f0bd..f00da30 100644
--- a/src/index/canvas.sass
+++ b/src/index/canvas.sass
@@ -16,3 +16,9 @@
 .welcome
   position: absolute
   font-family: Neuton, serif
+
+.tooltip
+  align-self: flex-end
+  position: fixed
+  bottom: 0
+  right: 15px
\ No newline at end of file