TweenLabs LogoTweenLabs
TweenLabs/Components/Source Code

Bento Grid Code

Endpoint: /BentoGrid

Neo-Brutalist bento box card grid with 3D perspective mouse tilt, spring physics recovery, and vector crosshairs.

📦 GSAP: ^3.15.0
📦 @gsap/react: ^2.1.2
⚙️ ScrollTrigger: ❌ Not Used
page.tsx
1
2
// Please sign in to view the code.
// Go back to the homepage or click Sign In at the top to login with Google or GitHub.
master*0 ⓧ0 ⚠
TSX

⚙️ Setup & Integration

Install, import & configure

💻

Option A: Install via CLI

You can install this component directly into your project via the TweenLabs CLI. It automatically creates the file and configures dependencies:

npx tweenlabs@latest add BentoGrid

Option B: Manual Installation

Follow these steps to integrate the component into your project manually:

1

Install Packages

First, install GSAP and its official React hook helper library (@gsap/react).

npm install gsap @gsap/react
2

Add Required CSS Styles

Copy the styles from the Required CSS tab above, or open the styles.css file that was automatically downloaded with your component. Paste these classes into your global stylesheet (e.g. src/app/globals.css or similar).

3

Create Component File

Create a new file in your React or Next.js project (e.g. src/components/BentoGrid.tsx) and paste the code from the Standalone React Component tab above. If no standalone tab is available, copy the full page file code and adjust the routing logic for your needs.

4

Import & Render

Import and render the component in your page or view layout:

App Page
import BentoGrid from "@/components/BentoGrid";

export default function Page() {
  return (
    <main className="min-h-screen p-8 bg-[#f5f5f5] flex items-center justify-center">
      <BentoGrid />
    </main>
  );
}