Command Palette

Search for a command to run...

Loading component...

Components paid Infinite canvas

Infinite canvas

An infinite canvas component that creates a seamless scrolling grid of images with smooth GSAP animations. Supports mouse wheel, touch, and pointer interactions for intuitive navigation.

Dependencies

gsapreact

Interaction Type

Scroll to navigate the infinite canvas
Drag to move around the canvas
Move mouse to explore the grid
Infinite scroll + drag

CLI UNAVAILABLE

pro component, try copying the source code from top right corner

How to use

import { InfiniteCanvas } from "@/components/v1/skiper73";

// Custom configuration
const CustomExample = () => {
  return (
    <div className="h-screen w-full">
      <InfiniteCanvas
        imageSize="20vw"
        numberOfImages={20}
        imageRootPath="/images/custom"
        gap="8vw"
        className="custom-styles"
      />
    </div>
  );
};
Props
Description

imageSize

Size of each image in the grid

numberOfImages

Total number of images to display

imageRootPath

Base path for image files

gap

Spacing between grid items

className

Additional CSS classes

important note

  • Images should be named sequentially (img1.png, img2.png, etc.) in the specified directory
  • Supports touch, mouse wheel, and pointer interactions for smooth navigation
  • Uses GSAP for optimized animations with proper cleanup on unmount

Attribution

Illustrations by Lummi

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
Previous