react-3d-tunnel-scroll

A stunning GSAP-powered 3D tunnel scroll component for React. Watch elements fly past the camera as you scroll down the page. Perfect for portfolios, case studies, or Awwwards-style immersive web experiences.

Installation

npm install react-3d-tunnel-scroll

Make sure you have the required peer dependencies installed:

npm install react react-dom gsap

Usage

import React from 'react';
import TunnelScroll from 'react-3d-tunnel-scroll';
import 'react-3d-tunnel-scroll/style.css'; // Import the CSS!

const App = () => {
  const myProjects = [
    {
      id: '01',
      title: 'NIKE AIR',
      img: 'https://images.unsplash.com/photo-1552346154-21d32810baa3?q=80&w=2000'
    },
    {
      id: '02',
      title: 'RED BULL',
      img: 'https://images.unsplash.com/photo-1542332213-9b5a5a3fad35?q=80&w=2000'
    }
  ];

  return (
    <div>
      <TunnelScroll 
        projects={myProjects}
        zSpacing={3000}
        initialZ={1500}
        label="PORTFOLIO"
        backgroundColor="#040404"
        textColor="#f7f4ed"
      />
    </div>
  );
};

export default App;

Features

• TypeScript Support: Fully typed out of the box (.d.ts included).
• Modern React: Compatible with React 18, React 19, Next.js, and Vite.
• Customizable Depth: Configure element spacing and starting camera distance.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | projects | Array | [] | Array of objects { id: string, title: string, img: string }. | | zSpacing | number | 3000 | The depth (in pixels) between each poster in the tunnel. Defines the scroll duration. | | initialZ | number | 1500 | Starting depth offset for the entire tunnel. Pushes the first item back so it is fully visible without clipping upon first scroll. | | label | string | "" | The text label positioned at the top left of the section. Pass null to hide. | | backgroundColor | string | "#040404" | CSS color for the section background. | | textColor | string | "#f7f4ed" | CSS color for the text inside the section. | | className | string | "" | Optional extra CSS class to append to the root section. |

License

MIT License