gute nacht<3

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "gsap": "^3.14.2",
+        "lenis": "^1.3.21",
         "pinia": "^3.0.4",
         "three": "^0.183.2",
         "vue": "^3.5.29",
@@ -1256,6 +1257,37 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/lenis": {
+      "version": "1.3.21",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.21.tgz",
+      "integrity": "sha512-RXWTYm7KQE4Kv8ezxL6wvK0Oiv7aRr6FDo+eNaaniTeu7pLdHokqMIJ5CXO4x5ezvd+9ONdpSFkprLpXsVWmEw==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*",
+        "playground",
+        "playground/*"
+      ],
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1316,9 +1348,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1512,9 +1544,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.3.1",
+      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "gsap": "^3.14.2",
+    "lenis": "^1.3.21",
     "pinia": "^3.0.4",
     "three": "^0.183.2",
     "vue": "^3.5.29",

src/App.vue

@@ -1,5 +1,4 @@
-<script setup lang="js">
+<script setup lang="js"></script>
-</script>
 <template>
   <router-view />
 </template>
@@ -26,5 +25,8 @@ body {
   background: #0f0f0f;
   color: white;
   overflow-x: hidden;
+  cursor:
+    url("/src/assets/retro_cursor.svg") 2 0,
+    auto;
 }
 </style>

src/assets/retro_cursor.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="38" viewBox="0 0 25 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 0H0.5V34H4.5V32H6.5V30H8.5V28H10.5V32H12.5V36H14.5V38H18.5V36H20.5V32H18.5V28H16.5V26H24.5V22H22.5V20H20.5V18H18.5V16H16.5V14H14.5V12H12.5V10H10.5V8H8.5V6H6.5V4H4.5V2H2.5V0Z" fill="#131313"/>
+<path d="M4.5 4H2.5V32H4.5V30H6.5V28H8.5V26H10.5V28H12.5V32H14.5V36H18.5V32H16.5V28H14.5V24H22.5V22H20.5V20H18.5V18H16.5V16H14.5V14H12.5V12H10.5V10H8.5V8H6.5V6H4.5V4Z" fill="#EFEEEC"/>
+</svg>

src/components/sections/HeroSection.vue

@@ -1,20 +1,16 @@
 <script setup lang="js">
-import { onMounted, onUnmounted, ref } from "vue"
+import { onMounted, onUnmounted, ref } from "vue";
-import gsap from "gsap"
+import gsap from "gsap";
-
-import ScrollTrigger from "gsap/ScrollTrigger"
-gsap.registerPlugin(ScrollTrigger)
-
 
+import ScrollTrigger from "gsap/ScrollTrigger";
+gsap.registerPlugin(ScrollTrigger);
 
 const main = ref(null);
 let tl;
 let ctx;
 
-
 function setBoxes() {
-
+  const wrapper = main.value.querySelector(".content-wrapper");
-  const wrapper = main.value.querySelector('.content-wrapper');
   const rect = wrapper.getBoundingClientRect();
 
   const boxes = gsap.utils.toArray(".box");
@@ -22,7 +18,6 @@ function setBoxes() {
   gsap.set(".title", { y: 200 });
 
   boxes.forEach((box) => {
-
     const randomX = gsap.utils.random(0, rect.width);
     const randomY = gsap.utils.random(0, rect.height);
 
@@ -30,44 +25,45 @@ function setBoxes() {
       x: randomX,
       y: randomY,
       xPercent: -50,
-      yPercent: -50
+      yPercent: -50,
     });
-
   });
 }
 
 function toggleTimeline() {
-    tl.reversed(!tl.reversed())
+  tl.reversed(!tl.reversed());
 }
 function startNextAnimation() {
-  const centerX = window.innerWidth / 2
+  const centerX = window.innerWidth / 2;
-  const centerY = window.innerHeight / 2
+  const centerY = window.innerHeight / 2;
-  const radius = 250
+  const radius = 250;
 
   ctx = gsap.context(() => {
-    const boxes = gsap.utils.toArray(".box")
+    const boxes = gsap.utils.toArray(".box");
     tl = gsap.timeline({
       scrollTrigger: {
-
         start: "top top",
         end: "+=100%",
         scrub: true,
         pin: true,
-      }
+      },
-    })
+    });
 
     tl.to(boxes, {
       y: () => gsap.utils.random(-400, -150),
       rotate: () => gsap.utils.random(-180, 180),
       ease: "none",
-      stagger: 0.05
+      stagger: 0.05,
-    }).to(".title", {
+    }).to(
+      ".title",
+      {
         y: window.innerHeight - 130,
         ease: "power2.out",
-        duration: 6.0
+        duration: 6.0,
-      }, 0)
+      },
-
+      0,
-  }, main.value)
+    );
+  }, main.value);
 }
 
 onMounted(() => {
@@ -76,11 +72,9 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  ctx?.revert()
+  ctx?.revert();
   // scrollTrigger.getAll().forEach(t => t.kill())
-}) 
+});
-
-
 </script>
 <template>
   <section class="container" ref="main">
@@ -124,17 +118,12 @@ onUnmounted(() => {
       <div class="box">o</div>
       <div class="box">T</div>
       <div class="box">r</div>
-      
-      
-       
-
     </div>
   </section>
 </template>
 
 <style scoped>
-
+.container {
-  .container {
   background: radial-gradient(
     129% 99% at 20% 85%,
     rgb(54, 54, 54) 20%,
@@ -147,14 +136,12 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  }
+}
-
 
 .content-wrapper {
   position: relative;
   width: 100%;
   height: 80vh;
-
 }
 
 .title {
@@ -166,10 +153,7 @@ onUnmounted(() => {
   margin: 0;
 }
 
-
-
 .box {
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -181,9 +165,4 @@ onUnmounted(() => {
   will-change: transform;
   position: absolute;
 }
-
-
-
-
-
 </style>

src/components/sections/WelcomeSection.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { onMounted, onUnmounted } from "vue";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+import parallax_night from "/src/assets/background/night.jpg";
+import parallax_castle from "/src/assets/background/dom.png";
+import Lenis from "lenis";
+
+gsap.registerPlugin(ScrollTrigger);
+
+let ctx;
+
+function initParallax() {
+  const layers = [
+    { layer: "1", yPercent: 70 },
+    { layer: "2", yPercent: 50 },
+    { layer: "3", yPercent: 30 },
+    { layer: "4", yPercent: 10 },
+  ];
+
+  const triggerElement = document.querySelector(".parallax");
+
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: triggerElement,
+      start: "top top",
+      end: "bottom top",
+      scrub: true,
+    },
+  });
+
+  layers.forEach((layerObj, idx) => {
+    tl.to(
+      triggerElement.querySelectorAll(
+        `[data-parallax-layer="${layerObj.layer}"]`,
+      ),
+      {
+        yPercent: layerObj.yPercent,
+        ease: "none",
+      },
+      idx === 0 ? 0 : "<",
+    );
+  });
+}
+function initLenis() {
+  lenis = new Lenis({
+    duration: 1.1,
+    smoothWheel: true,
+    smoothTouch: false,
+  });
+
+  lenis.on("scroll", ScrollTrigger.update);
+
+  gsap.ticker.add((time) => {
+    lenis.raf(time * 1000);
+  });
+
+  gsap.ticker.lagSmoothing(0);
+}
+onMounted(() => {
+  ctx = gsap.context(() => {
+    initParallax();
+    initLenis();
+  });
+});
+
+onUnmounted(() => {
+  ctx?.revert();
+  lenis?.destroy();
+});
+</script>
+<template>
+  <div class="parallax">
+    <section class="parallax__header">
+      <div class="parallax__visuals">
+        <div class="parallax__layers">
+          <img
+            :src="parallax_night"
+            data-parallax-layer="1"
+            class="parallax__layer-img"
+          />
+
+          <img
+            :src="parallax_castle"
+            data-parallax-layer="2"
+            class="parallax__layer-img"
+          />
+
+          <div data-parallax-layer="3" class="parallax__layer-title">
+            <h2 class="parallax__title">TOM HERPEL</h2>
+          </div>
+
+          <img data-parallax-layer="4" class="parallax__layer-img" />
+        </div>
+
+        <div class="parallax__fade"></div>
+      </div>
+    </section>
+
+    <section class="parallax__content"></section>
+  </div>
+</template>
+<style scoped>
+.parallax__fade {
+  --dark: 0, 0, 0;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60vh;
+
+  background: linear-gradient(
+    to top,
+    rgba(var(--dark), 1) 0%,
+    rgba(var(--dark), 0.9) 10%,
+    rgba(var(--dark), 0.75) 20%,
+    rgba(var(--dark), 0.55) 35%,
+    rgba(var(--dark), 0.35) 50%,
+    rgba(var(--dark), 0.2) 65%,
+    rgba(var(--dark), 0.1) 80%,
+    rgba(var(--dark), 0.04) 90%,
+    rgba(var(--dark), 0.01) 96%,
+    transparent 100%
+  );
+
+  pointer-events: none;
+}
+
+.parallax__header {
+  z-index: 2;
+
+  justify-content: center;
+  align-items: center;
+  min-height: 100svh;
+  display: flex;
+  position: relative;
+}
+
+.parallax {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.parallax__content {
+  justify-content: center;
+  align-items: center;
+  min-height: 100svh;
+  display: flex;
+  position: relative;
+}
+
+.parallax__visuals {
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 120%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.parallax__placeholder {
+  z-index: 0;
+  opacity: 0;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.parallax__layers {
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.parallax__fade {
+  z-index: 30;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 20%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.parallax__title {
+  pointer-events: auto;
+  text-align: center;
+  text-transform: none;
+  margin-top: 0;
+  margin-bottom: 0.1em;
+  margin-right: 0.075em;
+  /* font-family:
+    PP Neue Corp Wide,
+    sans-serif; */
+  font-family: "ArtDystopia", sans-serif;
+
+  font-size: 11vw;
+  font-weight: 800;
+  line-height: 1;
+  position: relative;
+}
+
+.parallax__radial-gradient {
+  z-index: 10;
+  background-image: radial-gradient(
+    circle farthest-corner at 50% 50%,
+    transparent,
+    #0c0c0c
+  );
+  opacity: 0.5;
+  pointer-events: none;
+  mix-blend-mode: multiply;
+  position: fixed;
+  inset: 0;
+}
+.parallax__layer-title {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100svh;
+  display: flex;
+  position: absolute;
+  overflow: visible;
+  top: 0;
+  left: 0;
+}
+.parallax__layer-img {
+  pointer-events: none;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 269.5%;
+  position: absolute;
+  top: -17.5%;
+  left: 0;
+}
+@font-face {
+  font-family: "ArtDystopia";
+  src: url("/src/assets/fonts/Art_Dystopia.woff2") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+</style>

src/views/HomeView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import HeroSection from "../components/sections/HeroSection.vue";
+import WelcomeSection from "../components/sections/WelcomeSection.vue";
+// import HeroSection from "../components/sections/HeroSection.vue";
 import ImageSection from "../components/sections/ImageSection.vue";
 import TextSection from "../components/sections/TextSection.vue";
 
@@ -27,7 +28,8 @@ onMounted(async () => {
 <template>
   <div id="smooth-wrapper">
     <div id="smooth-content">
-      <HeroSection id="hero" />
+      <WelcomeSection id="welcome" />
+      <!-- <HeroSection id="hero" /> -->
       <ImageSection id="image" />
       <TextSection id="text" />
     </div>