Gallery Scroll Section

Heroes 1

About

Gallery Section with Image transition effect

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gallery Scroll Section to your project and fits it to your theme.

Code

How Gallery Scroll Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { useState, useEffect } from 'react';
import { Component } from '@/components/ui/gallery-scroll-section';

const DemoOne = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const projects = [
    {
      name: "Project 4",
      backgroundImage: "https://i1.adis.ws/i/canon/get-inspired-long-exposure-black-white-stephen-mcnally-4_e62cd25fd3d241ccb7daaf4828ae75b1?$media-collection-half-dt-jpg$",
      vignetteImage: "https://i1.adis.ws/i/canon/get-inspired-long-exposure-black-white-stephen-mcnally-1-16x9_62a5193931b64b6ca604d69fea93ba49?$hero-header-half-16by9-dt-jpg"
    },
    {
      name: "Project 1",
      backgroundImage: "https://cdn.21st.dev/assets/mirror/a2/a29ac52372861a16d38da755d4d5ca737752dda81dddf84696795e4fd72307dd.jpg",
      vignetteImage: "https://cdn.21st.dev/assets/mirror/de/dee552b683e9531111859411b4e9456c64891d871115752fe18f6849818c0d9c.jpg"
    },
    {
      name: "Project 2",
      backgroundImage: "https://cdn.21st.dev/assets/mirror/03/0391d967b693745dc1390b6a41037af211380468c02603a837f01cb45c8a22d5.jpg",
      vignetteImage: "https://cdn.21st.dev/assets/mirror/f0/f0cd5f2d609b3e850beda424daf044d493c518c8687e69492dbc5ad29b44d529.jpg"
    },
    {
      name: "Project 3",
      backgroundImage: "https://cdn.21st.dev/assets/mirror/44/4482f2e72c8527790d2966e72d6762589e4b1feb188db7fb62fbd4b126f0f74c.jpg",
      vignetteImage: "https://cdn.21st.dev/assets/mirror/ef/ef7da58ae90ad102c9acee037fedd92cd22e89cc7786f11fec41be1625b112e1.jpg"
    }
  ];

  useEffect(() => {
    const handleMouseMove = (e) => {
      setMousePosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <div style={{ height: '100vh', width: '100%', overflow: 'auto' }}>
      <Component mousePosition={mousePosition} projects={projects} />
    </div>
  );
};

export { DemoOne };