40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { MeshGradient } from "@paper-design/shaders-react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
function isWebGL2Supported(): boolean {
|
|
try {
|
|
const canvas = document.createElement("canvas")
|
|
const gl = canvas?.getContext("webgl2") ?? canvas?.getContext("webgl")
|
|
return Boolean(gl)
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
|
|
export default function BackgroundPaperShadersWrapper({ className }: { className?: string }) {
|
|
const [supportsWebGL, setSupportsWebGL] = useState<boolean>(true)
|
|
|
|
useEffect(() => {
|
|
setSupportsWebGL(isWebGL2Supported())
|
|
}, [])
|
|
|
|
const speed = 1.0
|
|
|
|
return (
|
|
<div className={cn("relative h-full w-full overflow-hidden bg-black", className)}>
|
|
{supportsWebGL ? (
|
|
<MeshGradient
|
|
className="absolute inset-0 h-full w-full"
|
|
colors={["#000000", "#1a1a1a", "#333333", "#ffffff"]}
|
|
speed={speed * 0.5}
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 h-full w-full bg-[radial-gradient(circle_at_top,_rgba(15,15,15,0.95),_rgba(0,0,0,1))]" />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|