Backgrounds

Gravity Grid

An interactive raycasted grid simulation where elements react to cursor proximity with a gravitational well effect.

Preview

Grid Color

#4f46e5

Animation Speed1.0x

Usage

import dynamic from "next/dynamic";

const GravityGrid = dynamic(() => import("@/components/GravityGrid"), { ssr: false });

export default function Page() {
    return (
        <div className="relative h-screen w-full">
            <GravityGrid />
        </div>
    );
}

Backgrounds

Gravity Grid

An interactive raycasted grid simulation where elements react to cursor proximity with a gravitational well effect.

Preview

Grid Color

#4f46e5

Animation Speed1.0x

Usage

import dynamic from "next/dynamic";

const GravityGrid = dynamic(() => import("@/components/GravityGrid"), { ssr: false });

export default function Page() {
    return (
        <div className="relative h-screen w-full">
            <GravityGrid />
        </div>
    );
}

Frame

Gravity Grid

Preview

Usage

Gravity Grid

Preview

Usage