blow animation feature

src/pages/main.tsx

@@ -4,6 +4,7 @@ import { getFeatures } from '@ijl/cli';
 import logo from '../assets/logo.svg';
 import arrow from '../assets/36-arrow-right.svg';
 import fullScreen from '../assets/fullscreen.svg';
+import logoShort from '../assets/logo-short.svg';
 
 import { Keyboard } from '../components/keyboard';
 
@@ -27,11 +28,14 @@ import {
     CircleDiv,
     FullScreenButton,
     InputHolder,
+    Blow,
+    BigLogo,
 } from './style';
 import { socket } from "../socket";
 
 const keyboardFeature = getFeatures('hub-video-start')?.keyboard;
 const fullScreenFeature = getFeatures('hub-video-start')?.fullScreen;
+const blowAnimFeature = getFeatures('hub-video-start')?.blowAnim;
 
 const Input = ({ onStart }) => {
     const [value, setValue] = useState('');
@@ -124,6 +128,31 @@ const Start = () => {
 
     return (
         <StartWrapper>
+            {sended && blowAnimFeature && (
+                <>
+                    <Blow
+                        delay={.3}
+                        color="#83e973"
+                    />
+                    <Blow
+                        delay={.4}
+                        color="#97e043"
+                    />
+                    <Blow
+                        delay={.5}
+                        color="#d0eb04"
+                    />
+                    <Blow
+                        delay={.6}
+                        color="#3fc0e4"
+                    />
+                    <Blow
+                        delay={.7}
+                        color="#daf4ff"
+                    />
+                    <BigLogo src={logoShort} />
+                </>
+            )}
             {/* <Svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="1200"

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%);
+`;