The GravityGridHero renders a highly performant HTML5 <canvas> background underneath your hero content. The grid of dots (or connected lines) uses raw mathematics and spring physics to continuously calculate distance from the mouse pointer, repelling elements outwards before smoothly springing them back to their origin.

Live Preview

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GravityGridHero } from "@/components/creative/gravity-grid-hero";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GravityGridHero } from "@/components/creative/gravity-grid-hero";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GravityGridHero
        variant{/* value */}
        badgeText="example"
        title="example"
      />
    </div>
  );
}