Components
Background 3D
An immersive, interactive 3D particle field background with floating geometric shapes.
Preview
Usage
Simply drop the component into any container with relative positioning.
import dynamic from "next/dynamic";// Dynamically import to safely handle WebGL on client-sideconst Background3D = dynamic(() => import("./components/Background3D"), { ssr: false });export default function Page() {return (<div className="relative h-screen w-full bg-black overflow-hidden"><Background3D /><div className="relative z-10"><h1>Your Content Here</h1></div></div>);}
Features
- Mouse-contingent parallax effect
- Thousands of instanced particles for performance
- Floating metallic shapes with MeshDistortMaterial
- Responsive to viewport changes