1 files changed, 108 insertions, 0 deletions
diff --git a/docs/components/pages/landing/turbohero-background.module.css b/docs/components/pages/landing/turbohero-background.module.css
new file mode 100644
index 0000000..8f157e1
--- /dev/null
+++ b/docs/components/pages/landing/turbohero-background.module.css
@@ -0,0 +1,108 @@
+.container {
+  position: absolute;
+  z-index: -6;
+  overflow: hidden;
+  inset: 0;
+  transition: perspective 3000ms ease 0s;
+}
+
+.lines {
+  --right: #f8cde8;
+  --left: #b9ddff;
+  position: absolute;
+  width: 200vw;
+  margin-left: -50%;
+  transform: translateY(0);
+  background-image: linear-gradient(
+    to right,
+    var(--left) 45%,
+    rgba(0, 0, 0, 0) 50%,
+    var(--right) 55%
+  );
+  mask-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 1) 2px,
+      rgba(0, 0, 0, 0) 1px
+    ),
+    linear-gradient(to bottom, rgba(0, 0, 0, 1) 2px, rgba(0, 0, 0, 0) 1px);
+  mask-size: 60px 60px;
+  overflow: hidden;
+  mask-repeat: repeat repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: -100% 0px;
+  background-position-y: 100%;
+  mask-position: 50% 0px;
+  animation: go-up 60s linear infinite;
+}
+
+@media (min-width: 1024px) {
+  .lines {
+    animation-duration: 30s;
+    mask-size: 80px 80px;
+  }
+}
+
+:global(.dark) .lines {
+  --right: #4c2638;
+  --left: #223b67;
+}
+
+@keyframes go-up {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(calc(50% + 28px));
+  }
+}
+
+.pulse::before {
+  content: "";
+  position: absolute;
+  inset: 0px;
+  animation: pulse-frames ease-out 8s infinite;
+  animation-delay: 0s;
+  background: rgba(0, 0, 0, 0)
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0) 45%,
+      var(--pulse-color) 50%,
+      rgba(0, 0, 0, 0) 90%
+    )
+    no-repeat;
+  z-index: 211;
+  animation-delay: var(--delay);
+}
+
+@keyframes pulse-frames {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(200%);
+  }
+  100% {
+    transform: translateY(200%);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .lines {
+    animation: none;
+  }
+  .pulse::before {
+    animation: none;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .lines {
+    animation: none;
+  }
+  .pulse::before {
+    animation: none;
+  }
+}