R3F 3D Frame Seamless Transition

An interactive 3D art gallery experience built with React Three Fiber, Next.js, and GSAP. Explore artworks in a seamless 3D carousel with smooth transitions, immersive frame interactions, and a beautiful WebGL-powered interface.

Tech Stack

• Next.js 15 - React framework
• React Three Fiber - React renderer for Three.js
• Three.js - 3D graphics library
• GSAP - Animation library
• TypeScript - Type safety
• Tailwind CSS - Styling

Getting Started

Prerequisites

• Node.js 18+ or Bun
• pnpm, npm, or yarn

Installation

1. Install dependencies:

pnpm install
# or
npm install
# or
bun install

2. Run the development server:

pnpm dev
# or
npm run dev
# or
bun dev

3. Open http://localhost:3000 in your browser.

Usage

Navigation

• Arrow Keys: Navigate between projects (Left/Right)
• Enter: Open selected project
• Mouse: Hover and click on frames to interact
• Navigation Buttons: Use prev/next buttons on screen