From b5ce0819013226bbc1065db5f22319b83dfb57e9 Mon Sep 17 00:00:00 2001
From: Livio <livio.brunner.lb1@gmail.com>
Date: Sat, 27 Mar 2021 21:47:05 +0100
Subject: [PATCH] animate vhs lines

---
 src/components/header/index.js | 22 ++------------------
 src/components/header/vhs.js   | 38 ++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 src/components/header/vhs.js

diff --git a/src/components/header/index.js b/src/components/header/index.js
index 53863912..9f48f6fd 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -5,6 +5,7 @@ import breakpoint from "styled-components-breakpoint"
 import Stars from "./stars"
 import Sunset from "./sunset"
 import Mountain from "./mountain"
+import VHS from "./vhs"
 
 const HeaderWrapper = styled.header`
   margin: 0;
@@ -47,28 +48,9 @@ const HeaderBackground = styled.div`
   overflow: hidden;
 `
 
-function drawVhsLines(color) {
-  let boxShadow = []
-
-  for (let i = 0; i <= 380; i += 8) {
-    boxShadow.push(`0 ${i}px 0 ${color}`)
-  }
-
-  return boxShadow.join(",")
-}
-
-const VHSLines = styled.div`
-  position: absolute;
-  width: 100%;
-  background: ${(props) => props.color};
-  top: 4px;
-  height: 1px;
-  box-shadow: ${(props) => drawVhsLines(props.color)};
-`
-
 const Header = ({ children }) => (
   <HeaderWrapper>
-    <VHSLines color="rgba(0,0,0,0.2)" />
+    <VHS />
     <HeaderContent>{children}</HeaderContent>
     <Mountain />
     <HeaderBackground>
diff --git a/src/components/header/vhs.js b/src/components/header/vhs.js
new file mode 100644
index 00000000..7546b775
--- /dev/null
+++ b/src/components/header/vhs.js
@@ -0,0 +1,38 @@
+import React from "react"
+import styled from "styled-components"
+
+const VHSLine = styled.div`
+  width: 100%;
+  background: ${(props) =>
+    props.theme.name === "dark" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 0, 0, 0.08)"};
+  top: 4px;
+  height: 2px;
+  margin-bottom: 8px;
+  position: relative;
+`
+
+const VHSContainer = styled.div`
+  @keyframes moveLines {
+    0% {
+      transform: translateY(0px);
+    }
+    100% {
+      transform: translateY(10px);
+    }
+  }
+  margin-top: -20px;
+  animation: moveLines 2s infinite linear;
+  height: 400px;
+`
+
+function VHS() {
+  return (
+    <VHSContainer>
+      {[...new Array(30)].map(() => (
+        <VHSLine color="rgba(0,0,0,0.2)" />
+      ))}
+    </VHSContainer>
+  )
+}
+
+export default VHS