main layout

src/Background.tsx

@@ -0,0 +1,81 @@
+import {
+    Shader,
+    DiffuseBlur,
+    FilmGrain,
+    Glow,
+    Liquify,
+    Swirl,
+} from 'shaders/react'
+import './background.scss'
+
+function Background() {
+    return (
+        <div id="background">
+            <Shader>
+                <Swirl
+                    colorA="#00529b"
+                    colorB="#087dca"
+                    speed={0.4}
+                    detail={3.6}
+                    blend={50}
+                    coarseX={50}
+                    coarseY={50}
+                    mediumX={50}
+                    mediumY={50}
+                    fineX={50}
+                    fineY={50}
+                    colorSpace="linear"
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+                <Liquify
+                    intensity={5}
+                    swirl={0.56}
+                    decay={0.3}
+                    radius={2}
+                    edges="stretch"
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+                <DiffuseBlur intensity={30} />
+                <Glow
+                    size={27.5}
+                    intensity={2.69}
+                    threshold={0.37}
+                    visible={true}
+                />
+                <FilmGrain
+                    strength={0.1}
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+            </Shader>
+        </div>
+    )
+}
+
+export default Background