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"