feat: universe Hero background video & text animation (#260)

Added a background video and some funky text animation to the universe hero section. https://www.loom.com/share/dfe36ad55d6e436bbde5cb09a00425d9?sid=304ab418-f089-4b58-827a-b103675a4b90
tari-project · Oct 18, 2024 · ae861af · ae861af
1 parent 6cfb1c0
commit ae861af
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 26 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -31,7 +31,7 @@
 
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/githubIssues.css" />
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/downloads.css" />
-<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/universe.css?v=2" />
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/universe.css?v=3" />
 
 <link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/assets/favicon/apple-icon-57x57.png" />
 <link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/assets/favicon/apple-icon-60x60.png" />

diff --git a/assets/css/universe.css b/assets/css/universe.css
@@ -1,32 +1,79 @@
+@keyframes universeScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(2.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes universeFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+#universe .uanim-eyebrow {
+  opacity: 0;
+  display: inline-block;
+}
+
+#universe .uanim-eyebrow.uanim-animated {
+  animation: universeScaleIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+}
+
+#universe .uanim {
+  opacity: 0;
+  display: inline-block;
+
+  @media only screen and (max-width: 1075px) {
+    display: inline;
+  }
+}
+
+#universe .uanim.uanim-animated {
+  animation: universeScaleIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+}
+
+#universe .uanim-fade {
+  opacity: 0;
+  display: inline-block;
+}
+
+#universe .uanim-fade.uanim-animated {
+  animation: universeFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+}
+
 #universe {
   width: 100%;
-  height: 1127px;
+  height: 100dvh;
   padding: 0 8%;
   padding-top: 140px;
 
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
+  overflow: hidden;
+}
 
-  background-image: url('/assets/img/universe/background.png');
-  background-size: cover;
-  background-position: center bottom;
-
-  @media only screen and (min-width: 2065px) {
-    background-position: center 55%;
-  }
-
-  @media only screen and (max-width: 1603px) {
-    padding-top: 180px;
-  }
-
-  @media only screen and (max-width: 1054px) {
-    height: 900px;
-  }
+#universe video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+  pointer-events: none;
 
   @media only screen and (max-width: 767px) {
-    padding-top: 100px;
-    height: 697px;
+    top: 65px;
   }
 }
 
@@ -39,6 +86,9 @@
   max-width: 901px;
   width: 100%;
 
+  position: relative;
+  z-index: 1;
+
   @media only screen and (max-width: 767px) {
     margin-bottom: 20px;
   }
@@ -73,9 +123,8 @@
   line-height: 100%;
   letter-spacing: -1.92px;
 
-  span {
-    color: rgba(0, 0, 0, 0.5);
-    font-weight: 400;
+  @media only screen and (max-width: 1355px) {
+    font-size: 48px;
   }
 
   @media only screen and (max-width: 1054px) {
@@ -87,13 +136,21 @@
   }
 }
 
+#universe .universe_title-group .universe_title .grey {
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: 400;
+}
+
 #universe .universe_button-group {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   width: 100%;
 
+  position: relative;
+  z-index: 1;
+
   @media only screen and (max-width: 767px) {
     flex-direction: column;
   }

diff --git a/assets/vid/universe-background.mp4 b/assets/vid/universe-background.mp4
diff --git a/index.html b/index.html
@@ -9,12 +9,25 @@
 
   <div id="universe">
     <div class="universe_title-group">
-      <div class="universe_eyebrow">Tari is the L1 protocol powered by you.</div>
-      <div class="universe_title">Proof of work, beautiful apps anyone can use<span>, and an</span> ingenious app platform <span>to put all of its</span> power in your hands.</div>
+      <div class="universe_eyebrow">
+        <span class="uanim-eyebrow">T</span><span class="uanim-eyebrow">a</span><span class="uanim-eyebrow">r</span><span class="uanim-eyebrow">i</span><span class="uanim-eyebrow"> &nbsp; </span><span class="uanim-eyebrow">i</span
+        ><span class="uanim-eyebrow">s</span><span class="uanim-eyebrow"> &nbsp; </span><span class="uanim-eyebrow">t</span><span class="uanim-eyebrow">h</span><span class="uanim-eyebrow">e</span><span class="uanim-eyebrow"> &nbsp; </span
+        ><span class="uanim-eyebrow">L</span><span class="uanim-eyebrow">1</span><span class="uanim-eyebrow"> &nbsp; </span><span class="uanim-eyebrow">p</span><span class="uanim-eyebrow">r</span><span class="uanim-eyebrow">o</span
+        ><span class="uanim-eyebrow">t</span><span class="uanim-eyebrow">o</span><span class="uanim-eyebrow">c</span><span class="uanim-eyebrow">o</span><span class="uanim-eyebrow">l</span><span class="uanim-eyebrow"> &nbsp; </span
+        ><span class="uanim-eyebrow">p</span><span class="uanim-eyebrow">o</span><span class="uanim-eyebrow">w</span><span class="uanim-eyebrow">e</span><span class="uanim-eyebrow">r</span><span class="uanim-eyebrow">e</span
+        ><span class="uanim-eyebrow">d</span><span class="uanim-eyebrow"> &nbsp; </span><span class="uanim-eyebrow">b</span><span class="uanim-eyebrow">y</span><span class="uanim-eyebrow"> &nbsp; </span><span class="uanim-eyebrow">y</span
+        ><span class="uanim-eyebrow">o</span><span class="uanim-eyebrow">u</span><span class="uanim-eyebrow">.</span>
+      </div>
+      <div class="universe_title">
+        <span class="uanim">Proof of work, beautiful apps</span>
+        <span class="uanim"> anyone can use<span class="grey">, and an</span></span>
+        <span class="uanim">ingenious app platform <span class="grey">to put all </span></span>
+        <span class="uanim"><span class="grey">of its</span> power in your hands.</span>
+      </div>
     </div>
 
     <div class="universe_button-group">
-      <a href="https://universe.tari.com/" target="_blank" class="universe_button-purple">
+      <a href="https://universe.tari.com/" target="_blank" class="universe_button-purple uanim-fade">
         <span class="universe_button-text"> Tari Universe </span>
         <span class="universe_button-arrow">
           <svg width="19" height="11" viewBox="0 0 19 11" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -23,13 +36,48 @@
           </svg>
         </span>
       </a>
-      <a href="https://airdrop.tari.com/" target="_blank" class="universe_button-outline">
+      <a href="https://airdrop.tari.com/" target="_blank" class="universe_button-outline uanim-fade">
         <img src="{{ site.baseurl }}/assets/img/universe/gem.png" alt="Gem" class="universe_button-gem" />
         Airdrop Game
       </a>
     </div>
+
+    <video muted autoplay playsinline poster="{{ site.baseurl }}/assets/img/universe/background.png">
+      <source src="{{ site.baseurl }}/assets/vid/universe-background.mp4" type="video/mp4" />
+    </video>
   </div>
 
+  <script>
+    $(document).ready(function () {
+      setTimeout(function () {
+        $('#universe .uanim-eyebrow').each(function (index) {
+          var $element = $(this);
+          setTimeout(function () {
+            $element.addClass('uanim-animated');
+          }, index * 20);
+        });
+      }, 3600);
+
+      setTimeout(function () {
+        $('#universe .uanim').each(function (index) {
+          var $element = $(this);
+          setTimeout(function () {
+            $element.addClass('uanim-animated');
+          }, index * 100);
+        });
+      }, 3200);
+
+      setTimeout(function () {
+        $('#universe .uanim-fade').each(function (index) {
+          var $element = $(this);
+          setTimeout(function () {
+            $element.addClass('uanim-animated');
+          }, index * 200);
+        });
+      }, 4200);
+    });
+  </script>
+
   <div class="home-padding">
     <!--
   <div class="intro" id="intro">