Shamsudheen

Immersive Scroll Gallery

Galleries 380

About

A scroll-based image gallery that creates depth and dimension through dynamic scaling animations. As users scroll, images scale up at different rates while a text overlay fades in, creating an engaging visual narrative. Perfect for landing pages, portfolios, and immersive storytelling experiences. Built with React, TypeScript, and Framer Motion.

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

Code

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

Usage.tsx

import  ImmersiveScrollGallery  from "@/components/ui/immersive-scroll-gallery.tsx";

const DemoOne = () => {
  return (
    		<div className="mx-auto relative h-dvh">
      <ImmersiveScrollGallery />
    </div>
  );
};

export { DemoOne };

Dependencies

More by Shamsudheen

View all
  • Smooth Scroll Hero

    Smooth Scroll Hero

    2.1K
  • Scroll Cards

    Scroll Cards

    985
  • Retro Testimonial Carousel

    Retro Testimonial Carousel

    595
  • Curved Menu

    Curved Menu

    445

More in Galleries

View all
  • Thumbnail image viewer

    Thumbnail image viewer

    43
  • Animated Gallery

    Animated Gallery

    1.4K
  • File Upload

    File Upload

    18
  • Editorial Collage Hero

    Editorial Collage Hero

    431
  • 3D Parallax Unfurling Gallery

    3D Parallax Unfurling Gallery

    981
  • Image Gallery

    Image Gallery

    123
  • Elastic Gallery

    Elastic Gallery

    908
  • Tilted Grid Hero

    Tilted Grid Hero

    1.5K