blow animation feature

src/pages/style.ts

@@ -317,3 +317,48 @@ export const InputHolder = styled.div`
         width: 100%;
     }
 `;
+
+const blowAnim = keyframes`
+    to {
+        width: 200vw;
+        height: 200vw;
+    }
+`;
+
+type BlowProps = {
+    delay: number;
+    color: string;
+}
+
+export const Blow = styled.div<BlowProps>`
+    z-index: 10;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0;
+    height: 0%;
+    background-color: ${({ color }) => color};
+    animation: ${blowAnim} 1s ease-out forwards;
+    animation-delay: ${({ delay }) => delay}s;
+    transform: translate(-50%, -50%);
+`;
+
+const blowAnimShort = keyframes`
+    to {
+        width: 50vw;
+        height: 50vw;
+    }
+`;
+
+export const BigLogo = styled.img`
+    z-index: 10;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0;
+    height: 0;
+    animation: ${blowAnimShort} 2s ease-out forwards;
+    animation-delay: .7s;
+    transform: translate(-50%, -50%);
+`;