File size: 1,517 Bytes
9a42933 62c3e75 9a42933 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
"use client"
import { useEffect, useRef, useState } from "react"
import Snowfall from "react-snowfall"
export function Background() {
const [itsRainingFaces, makeItRain] = useState(false)
const [nbFaces, setNbFaces] = useState(0)
const nbFacesRef = useRef(0)
const [sprite, setSprite] = useState<HTMLImageElement>()
useEffect(() => {
const newSprite = document.createElement('img')
newSprite.src = "/images/sprite.png" // '/images/hf.png'
setSprite(newSprite)
}, [])
// just to delay things a bit
useEffect(() => {
setTimeout(() => { makeItRain(true) }, 1000)
}, [])
// effect is more interesting if progressive
useEffect(() => {
let interval = setInterval(() => {
// if (!itsRainingFaces) { return }
if (nbFacesRef.current > 25) {
clearInterval(interval)
} else {
setNbFaces(nbFacesRef.current += 1)
}
}, 1000)
}, [])
return (
<>{itsRainingFaces && sprite
? <Snowfall
// Applied to the canvas element.
style={{
background: 'transparent',
position: 'fixed',
width: '100vw',
height: '100vh',
transitionProperty: "color",
transitionDuration: "3000ms",
opacity: 1,
}}
radius={[10, 80]}
speed={[2, 4]}
wind={[1, 3.0]}
// Controls the number of snowflakes that are created (defaults to 150).
snowflakeCount={nbFaces}
images={[sprite]}
/>
: null}
</>
)
} |