Warp BackgroundA backgrounds warp background componentbackgroundsbackground PreviewCodeWarp BackgroundA 3D perspective grid with animated color beamsCopyimport { WarpBackground } from "@/components/vritti/warp-background"; export function WarpBackgroundExample() { return ( <div className="relative h-[500px] w-full overflow-hidden rounded-lg border"> <WarpBackground perspective={200} beamsPerSide={4} beamSize={4} beamDuration={4} className="h-full" > <div className="flex h-full flex-col items-center justify-center gap-2 text-center"> <span className="text-foreground text-3xl font-bold">Warp Background</span> <p className="text-muted-foreground max-w-md"> A 3D perspective grid with animated color beams </p> </div> </WarpBackground> </div> ); } Installation CLIManualpnpmnpmyarnbunpnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/warp-background"Copy Dependencies pnpmnpmyarnbunpnpm add motionCopy