bump

src/index.js

@@ -12,11 +12,10 @@ import { mainnet, goerli, localhost } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
 
 import ParticlesBg from "particles-bg";
-import VisibilitySensor from "react-visibility-sensor";
-import { ParallaxProvider, Parallax } from 'react-scroll-parallax';
+import { ParallaxProvider } from 'react-scroll-parallax';
 
 import { Wallet } from "./Wallet";
-import { Panel } from "./template/Panel";
+import { Section1, Section2 } from './template/Sections';
 import { Footer } from "./template/Footer";
 
 
@@ -46,16 +45,8 @@ ReactDOM.createRoot(document.getElementById("root")).render(
                 position: "fixed",
                 zIndex: -1,
             }}/>
-            <section id="sec1" className="section">
-                <Parallax speed={-50}>
-                    <h1>omg</h1>
-                </Parallax>
-            </section>
-            <section id="sec2" className="section">
-                <Parallax speed={-10} easing="easeOutQuad" style={{ op }}>
-                    <Panel />
-                </Parallax>
-            </section>
+            <Section1 />
+            <Section2 />
             <Footer title="Send me your ETH you worthless piece of shit. Nobody loves you." />
         </RainbowKitProvider>
     </WagmiConfig>

src/styles.css

@@ -138,11 +138,12 @@ body {
   }
   
   #root {
-    height: 400vh;
+    height: 100vh;
   }
 
   .section {
     height: 100vh;
+    
   }
   
   footer::before {

src/template/Panel.jsx

@@ -5,7 +5,7 @@ import { usePrepareSendTransaction, useSendTransaction, useAccount } from 'wagmi
 import Typewriter from 'react-ts-typewriter';
 
 
-export function Panel() {
+export function Panel(opacity) {
     const { isConnected } = useAccount();
     const { config } = usePrepareSendTransaction({
         request: {
@@ -15,7 +15,7 @@ export function Panel() {
     });
     const { isLoading, isSuccess, sendTransaction } = useSendTransaction(config);
     return (
-        <Card elevation={Elevation.FOUR} className="mainPanel">
+        <Card elevation={Elevation.FOUR} className="mainPanel" style={{opacity: opacity}}>
             <p className="wrap">
                 <Typewriter text={"I need crack money and need it more than you. You'd just spend it on illiquid jpegs anyways..."} random={10} />
             </p>

src/template/Sections.jsx

@@ -0,0 +1,32 @@
+import VisibilitySensor from "react-visibility-sensor";
+import { Parallax } from 'react-parallax';
+
+import { Panel } from "./Panel";
+
+
+
+export function Section1() {
+    return (
+        <section id="sec1" className="section">
+            <Parallax speed={-50}>
+                <h1>ongod bruh</h1>
+            </Parallax>
+        </section>
+    )
+}
+
+export function Section2() {
+    return (
+        <section id="sec2" className="section">
+            <VisibilitySensor>
+                {({ isVisible }) => (
+                    <div style={{ opacity: isVisible ? 1 : 0, transition: ".75s ease all"}}>
+                        <Parallax speed={-10} easing="easeOutQuad">
+                            <Panel />
+                        </Parallax>
+                    </div>
+                )}
+            </VisibilitySensor>
+        </section>
+    )
+}