82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
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
|