StartAnimation downGrade

Walpurga03 · Nov 28, 2024 · 09a56e5 · 09a56e5
1 parent 496280d
commit 09a56e5
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/bitcoin-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bitcoin Myth Buster</title>
+    <style>
+      html, body {
+        background-color: #000000;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "framer-motion": "^11.11.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^7.0.1",
     "sass": "^1.81.0"
   },

diff --git a/src/components/EndAnimation/EndAnimation.scss b/src/components/EndAnimation/EndAnimation.scss
@@ -14,9 +14,8 @@
     width: 100%;
     height: 100%;
     background: 
-      radial-gradient(circle at top right, rgba(247, 147, 26, 0.15), transparent 60%),
-      radial-gradient(circle at bottom left, rgba(247, 147, 26, 0.1), transparent 60%),
-      radial-gradient(circle at center, rgba(247, 147, 26, 0.05), transparent 50%);
+      radial-gradient(circle at center, rgba(247, 147, 26, 0.15), transparent 60%),
+      radial-gradient(circle at bottom left, rgba(247, 147, 26, 0.1), transparent 60%);
     pointer-events: none;
     animation: gradientPulse 8s ease-in-out infinite;
   }
@@ -48,6 +47,18 @@
     font-weight: 700;
     text-shadow: 0 0 20px rgba(247, 147, 26, 0.3);
     animation: titlePop 1s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    @media (max-width: 768px) {
+      font-size: 2.5rem;
+    }
+
+    @media (max-width: 480px) {
+      font-size: 2rem;
+    }
+
+    @media (max-width: 375px) {
+      font-size: 1.8rem;
+    }
   }
 
   @keyframes titlePop {
@@ -445,10 +456,6 @@
       padding: 1.5rem 1rem;
     }
 
-    h2 {
-      font-size: 2rem;
-    }
-
     h3 {
       font-size: 1.5rem;
     }
@@ -555,8 +562,8 @@
       text-align: center;
       margin-bottom: 3rem;
 
-      h2 {
-        font-size: 4rem;
+      h2.glowing {
+        font-size: 3rem;
         font-weight: 800;
         background: linear-gradient(
           120deg,
@@ -756,3 +763,13 @@
     }
   }
 }
+
+@media (max-width: 480px) {
+  .end-animation__content {
+    padding: 1.5rem 1rem;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+  }
+}
diff --git a/src/components/EndAnimation/EndAnimation.tsx b/src/components/EndAnimation/EndAnimation.tsx
@@ -106,6 +106,14 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
     }
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // setShowContent(true); // setShowContent is not defined in this code snippet
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <div className="end-animation">
       <canvas ref={particlesRef} className="particles-canvas" />
@@ -116,7 +124,7 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
 
       <div className="end-animation__content visible">
         <div className="glowing-title">
-          <h2>Gratulation! 🎉</h2>
+          <h2 className="glowing">Gratulation! 🎉</h2>
           <div className="glowing-orbs">
             <div className="orb"></div>
             <div className="orb"></div>
@@ -162,7 +170,7 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
                   onClick={() => navigator.clipboard.writeText("git clone https://github.com/Walpurga03/bitcoin-myth-buster.git")} 
                   className="copy-button"
                 >
-                  Kopieren
+                📋
                 </button>
               </div>
             </div>
@@ -177,7 +185,7 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
                   onClick={handleCopyLightning}
                   className="copy-button"
                 >
-                  Kopieren
+                📋
                 </button>
               </div>
             </div>
@@ -192,7 +200,7 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
                   onClick={() => navigator.clipboard.writeText("npub1hht9umpeet75w55uzs9lq6ksayfpcvl9lk64hye75j0yj4husq5ss8xsry")} 
                   className="copy-button"
                 >
-                  Kopieren
+                📋
                 </button>
               </div>
             </div>

diff --git a/src/components/StartAnimation/StartAnimation.scss b/src/components/StartAnimation/StartAnimation.scss
@@ -25,6 +25,8 @@
       rgba(247, 147, 26, 0.05) 25%,
       transparent 70%
     );
+    pointer-events: none;
+    transition: all 0.3s ease;
   }
   overflow: hidden;
   cursor: none;

diff --git a/src/components/StartAnimation/StartAnimation.tsx b/src/components/StartAnimation/StartAnimation.tsx
@@ -22,7 +22,6 @@ const StartAnimation: React.FC<StartAnimationProps> = ({ onComplete }) => {
   const animationFrameRef = useRef<number>();
   const logoRef = useRef<HTMLImageElement | null>(null);
   const [isAnimating, setIsAnimating] = useState(true);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
   // Draw Bitcoin logo function
   const drawBitcoinLogo = useCallback((ctx: CanvasRenderingContext2D) => {
@@ -71,25 +70,6 @@ const StartAnimation: React.FC<StartAnimationProps> = ({ onComplete }) => {
 
     // Update and draw particles
     particlesRef.current.forEach((particle, i) => {
-      // Mouse repulsion
-      const dx = mousePosition.x - particle.x;
-      const dy = mousePosition.y - particle.y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-
-      if (distance < 100) {
-        const force = (1 - distance / 100) * 0.6;
-        particle.vx -= dx * force * 0.01;
-        particle.vy -= dy * force * 0.01;
-      }
-
-      // Apply velocity limits
-      const maxSpeed = 2;
-      const speed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
-      if (speed > maxSpeed) {
-        particle.vx = (particle.vx / speed) * maxSpeed;
-        particle.vy = (particle.vy / speed) * maxSpeed;
-      }
-
       // Update position
       particle.x += particle.vx;
       particle.y += particle.vy;
@@ -135,7 +115,7 @@ const StartAnimation: React.FC<StartAnimationProps> = ({ onComplete }) => {
 
     // Request next frame
     animationFrameRef.current = requestAnimationFrame(animate);
-  }, [isAnimating, mousePosition, drawBitcoinLogo]);
+  }, [isAnimating, drawBitcoinLogo]);
 
   useEffect(() => {
     // Load Bitcoin logo
@@ -186,9 +166,6 @@ const StartAnimation: React.FC<StartAnimationProps> = ({ onComplete }) => {
 
     // Event listeners
     window.addEventListener('resize', updateCanvasSize);
-    window.addEventListener('mousemove', (e) => {
-      setMousePosition({ x: e.clientX, y: e.clientY });
-    });
 
     // Cleanup
     return () => {

diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss
@@ -11,6 +11,7 @@
 html {
   font-size: $font-size-base;
   scroll-behavior: smooth;
+  background-color: $color-background;
 }
 
 body {
@@ -21,6 +22,7 @@ body {
   background-color: $color-background;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
 }
 
 button {