import {
    Shader,
    DiffuseBlur,
    FilmGrain,
    Glow,
    Liquify,
    Swirl,
} from 'shaders/react'
import './background.scss'

function Background() {
    return (
        <div id="background">
            <Shader>
                <Swirl
                    colorA="#00529b"
                    colorB="#0996ec"
                    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