animate vhs lines

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>

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