Components
Shader Animation
The page will now show the beautiful animated ripple effect that fills the entire screen with the mesmerizing concentric circles and color gradients from your original Three.js shader code.
import { ShaderAnimation } from "@/components/ui/shader-animation";
export default function DemoOne() {
return (
<div className="relative flex h-[650px] w-full flex-col items-center justify-center overflow-hidden rounded-xl border bg-blue-700">
<ShaderAnimation/>
<span className="absolute pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap text-white">
Shader Animation
</span>
</div>
)
}