heropage matrix

src/components/sections/HeroSection.vue

@@ -7,37 +7,63 @@ gsap.registerPlugin(ScrollTrigger)
 
 
 
-
 const main = ref(null);
 let tl;
 let ctx;
 
+
+function setBoxes() {
+
+  const wrapper = main.value.querySelector('.content-wrapper');
+  const rect = wrapper.getBoundingClientRect();
+
+  const boxes = gsap.utils.toArray(".box");
+
+  gsap.set(".title", { y: 200 });
+
+  boxes.forEach((box) => {
+
+    const randomX = gsap.utils.random(0, rect.width);
+    const randomY = gsap.utils.random(0, rect.height);
+
+    gsap.set(box, {
+      x: randomX,
+      y: randomY,
+      xPercent: -50,
+      yPercent: -50
+    });
+
+  });
+}
+
+
+
+
 function toggleTimeline() {
     tl.reversed(!tl.reversed())
 }
 function startNextAnimation() {
+  const centerX = window.innerWidth / 2
+  const centerY = window.innerHeight / 2
+  const radius = 250
   ctx = gsap.context(() => {
-
     const boxes = gsap.utils.toArray(".box")
-
     tl = gsap.timeline({
       scrollTrigger: {
         trigger: ".scroll-trigger-ready__worm-wrap",
         start: "top 00%",
-        end: "bottom 30%",
-        scrub: 1
+        end: "bottom 35%",
+        scrub: 2
       }
     })
 
-    tl
-      .to(boxes[0], { x: gsap.utils.random(300, 600), rotate: 180 })
-      .to(boxes[1], { x: -gsap.utils.random(300, 500), rotate: -180 }, "<")
-      .to(boxes[2], { x: gsap.utils.random(300, 400), rotate: 180 })
-      .to(boxes[3], { x: gsap.utils.random(300, 500), rotate: 180 })
-      .to(boxes[4], { x: -gsap.utils.random(300, 400), rotate: -180 }, "<")
-      .to(boxes[5], { x: gsap.utils.random(300, 500), rotate: 180 })
-      .to(boxes[6], { x: -gsap.utils.random(300, 600), rotate: 180 })
-      .to(".title", {
+    tl.to(boxes, {
+      y: () => gsap.utils.random(-400, -150),
+
+      rotate: () => gsap.utils.random(-180, 180),
+      ease: "none",
+      stagger: 0.05
+    }).to(".title", {
         y: window.innerHeight - 130,
         duration: 4.0,
         ease: "power2.inOut"
@@ -47,6 +73,7 @@ function startNextAnimation() {
 }
 
 onMounted(() => {
+  setBoxes();
   startNextAnimation();
 });
 
@@ -57,22 +84,36 @@ onUnmounted(() => {
 
 </script>
 <template>
-<section class="container" ref="main">
-  <h1 class="title">Welcome</h1>
-  <div>
-      </div>
+  <section class="container" ref="main">
+    <div class="content-wrapper">
+      <h1 class="title">Welcome</h1>
+      <div class="box">l</div>
+      <div class="box">e</div>
+      <div class="box">e</div>
+      <div class="box">r</div>
+      <div class="box">p</div>
       <div class="box"></div>
-      <div class="box"></div>
-      <div class="box"></div>
-      <div class="box"></div>
-      <div class="box"></div>
-      <div class="box"></div>    
-      <div class="box"></div>    
+      <div class="box">H</div>
+      <div class="box">e</div>
+      <div class="box">d</div>
+      <div class="box">n</div>
+      <div class="box">a</div>
+      <div class="box">e</div>
+      <div class="box">l</div>
+      <div class="box">A</div>
+      <div class="box">x</div>
+      <div class="box">m</div>
+      <div class="box">o</div>
+      <div class="box">T</div>      
+      <div class="box">r</div>   
+       
 
-</section>
+    </div>
+  </section>
 </template>
 
 <style scoped>
+
   .container {
     background: radial-gradient(
       129% 99% at 20% 85%,
@@ -88,43 +129,37 @@ onUnmounted(() => {
   align-items: center;
   }
 
-  
+
+.content-wrapper {
+  position: relative;
+  width: 100%;
+  height: 80vh;          
+
+}
+
 .title {
-  font-display: block;
-  font-style: normal;
-  font-weight: bold;
-  color: #ffffff;
-  
+  position: relative;   
+  z-index: 1;
+  text-align: center;
 
-  
   font-size: clamp(2rem, 12rem, 5vw);
-  box-sizing: border-box;
-   font-display: block;
-  font-style: normal;
-  font-weight: bold;
-
+  margin: 0;
 }
+
+
+
 .box {
-  width: 100px;
-  height: 100px;
-  background: linear-gradient(111.45deg, #ffffff 19.42%, #f7bdf8 73.08%);
-  border-radius: 20%;
-}
 
-.box:nth-child(2) {
-  background: linear-gradient(111.45deg, #ffffff 19.42%, #39ffba 73.08%);
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-weight: 600;
+  color: var(--green);
 
-.box:nth-child(3) {
-  background: linear-gradient(111.45deg, #ffffff 56.42%, #aed1e3 73.08%);
-}
-
-.box:nth-child(4) {
-  background: linear-gradient(111.45deg, #ffffff 90.42%, #f8e3bd 12.08%);
-}
-
-.box:nth-child(5) {
-  background: linear-gradient(111.45deg, #ffffff 19.42%, #76aaee 73.08%);
+  line-height: 1.2;
+  will-change: transform;
+  position: absolute;
 }
 
 

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'   
+import "./style.css"
 
 
 createApp(App)

src/style.css

@@ -1,79 +1,173 @@
+
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  --color-shockingly-green: #0ae448;
+  --color-just-black: #0e100f;
+  --color-surface-white: #fffce1;
+  --color-pink: #fec5fb;
+  --color-shockingly-pink: #f100cb;
+  --color-orangey: #ff8709;
+  --color-lilac: #9d95ff;
+  --color-lt-green: #abff84;
+  --color-blue: #00bae2;
+  --color-grey: gray;
+  --color-surface75: #bbbaa6;
+  --color-surface50: #7c7c6f;
+  --color-surface25: #42433d;
+  --gradient-macha: linear-gradient(
+    114.41deg,
+    var(--color-shockingly-green) 20.74%,
+    var(--color-lt-green) 65.5%
+  );
+  --gradient-orange-crush: linear-gradient(
+    111.45deg,
+    var(--color-orangey) 19.42%,
+    #f7bdf8 73.08%
+  );
+  --gradient-lipstick: linear-gradient(
+    165.72deg,
+    #f7bdf8 21.15%,
+    #cd237f 81.93%
+  );
+  --gradient-purple-haze: linear-gradient(
+    153.58deg,
+    #f7bdf8 32.25%,
+    #2f3cc0 92.68%
+  );
+  --gradient-skyfall: linear-gradient(
+    131.77deg,
+    #0a157a 30.82%,
+    #15bfe4 81.82%
+  );
+  --gradient-emerald-city: linear-gradient(
+    166.9deg,
+    var(--color-shockingly-green) 53.19%,
+    #0085d0 107.69%
+  );
+  --gradient-summer-fair: linear-gradient(
+    144.02deg,
+    var(--color-blue) 4.56%,
+    var(--color-pink) 72.98%
+  );
+  --color-core-green: #dfffd1;
+  --color-core-green-lt: #f3ffee;
+  --color-core-gradient: radial-gradient(
+    89.08% 84.62% at 16.54% 78.46%,
+    #fbfefa 0%,
+    #c9f6b4 39.58%,
+    #abff84 77.6%,
+    #2fee65 100%
+  );
+  --color-core-button-gradient: linear-gradient(
+    114.41deg,
+    #0ae448 20.74%,
+    #abff84 65.5%
+  );
+  --color-core-heading-gradient: linear-gradient(
+      180deg,
+      #d6ffc3 0%,
+      rgba(214, 255, 195, 0) 100%
+    ),
+    #f3ffee;
+  --color-core-intro-gradient: linear-gradient(
+      144.5deg,
+      #e8ffdd 65.09%,
+      #7dea7b 122.73%
+    ),
+    linear-gradient(311.31deg, #7ef89e 36.08%, #e5ffd9 106.98%);
+  --color-text-purple: #d2ceff;
+  --color-text-purple-lt: #dfdcff;
+  --color-text-gradient: radial-gradient(
+    129.03% 100% at 120.97% 81.45%,
+    #dfdcff 27.08%,
+    #a69eff 100%
+  );
+  --color-svg-tangerine: #ffe3c7;
+  --color-svg-tangerine-lt: #fff0e0;
+  --color-svg-gradient: radial-gradient(
+    70.77% 70.77% at 0% 70.77%,
+    #ffd9b0 0%,
+    #fd9f3b 80.73%,
+    #ff8709 100%
+  );
+  --color-svg-heading-gradient: linear-gradient(
+      180deg,
+      #ffbd77 0%,
+      rgba(254, 197, 251, 0) 100%
+    ),
+    #ffe4c7;
+  --color-ui-blue: #bef3fe;
+  --color-ui-blue-lt: #e1faff;
+  --color-ui-blue-codeblk: #f6feff;
+  --color-ui-text-gradient: linear-gradient(
+    168.89deg,
+    #fec5fb -21.3%,
+    #00bae2 89.88%
+  );
+  --color-ui-code-blocktext-gradient: linear-gradient(
+    142.91deg,
+    #cef6ff 18.75%,
+    #a6efff 54.93%
+  );
+  --color-ui-gradient: radial-gradient(
+    78.77% 78.77% at 71.71% 30.77%,
+    #f0fcff 0%,
+    #9bedff 67.21%,
+    #98ecff 76.04%,
+    #5be1ff 84.9%,
+    #00bae2 94.79%
+  );
+  --color-ui-gradient-background: linear-gradient(
+    137.1deg,
+    #ecfcff 27.5%,
+    #a6efff 94.09%
+  );
+  --color-ui-gradient-flip-background: radial-gradient(
+    140% 190% at 117.54% 131.12%,
+    #f0fcff 0%,
+    #9bedff 25.52%,
+    #98ecff 42.71%,
+    #5be1ff 60.94%,
+    #00bae2 94.79%
+  );
+  --color-scroll-pink: #ffd7fd;
+  --color-scroll-pink-lt: #ffe9fe;
+  --color-scroll-gradient: linear-gradient(
+    317.42deg,
+    #ffe9fe 10.4%,
+    #ff96f9 83.03%
+  );
+  --ease-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-out-quart: cubic-bezier(0.175, 0.79, 0.38, 0.905);
+  --ease-in-out-quart: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+:root {
+  --dark: var(--color-just-black);
+  --grey-dark: #42433d;
+  --light: var(--color-surface-white);
+  --mid: #7c7c6f;
+  --grey: #gray;
+  --gray: #gray;
+  --green: var(--color-shockingly-green);
+  --green-dark: #0ae448;
+  --green-light: var(--color-lt-green);
+  --blue: var(--color-blue);
+  --purple: var(--color-lilac);
+  --red: #cd237f;
+  --orange: var(--color-orangey);
+  accent-color: var(--color-shockingly-green);
 }
+/* lovely fluid fonts */
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
+:root {
+  --fluid-min-width: 320;
+  --fluid-max-width: 1140;
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+  --fluid-screen: 100vw;
+  --fluid-bp: calc(
+    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
+      (var(--fluid-max-width) - var(--fluid-min-width))
+  );
 }