Command Palette

Search for a command to run...

Loading component...

Components paid Things drag and scroll

Things drag and scroll

In terms of 3D icons, Things is the best out there, so does their infinite grid and the scroll, so I've attempted to recreate and capture that legendary smoothness and feel.

Dependencies

framer-motion

Interaction Type

Drag to move the grid around
Scroll to navigate the grid
Infinite scroll + drag
While in view items appear

CLI UNAVAILABLE

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

How to use

import { InfiniteGrid } from "@/components/v1/skiper5";

const DemoSkiper5 = () => {
  return (
    <main>
      <InfiniteGrid
        imagePathRoot="/skiperv1/skiper5/img"
        itemCount={20}
        itemGap={50}
        columns={4}
        itemWidth={160}
        itemHeight={150}
      />
    </main>
  );
};
Props
Description

imagePathRoot

Root path for the images folder

itemCount

Total number of items to display in the grid

itemGap

Gap between grid items in pixels

columns

Number of columns in the grid

itemWidth

Width of each grid item in pixels

itemHeight

Height of each grid item in pixels

className

Additional CSS classes for styling

important note

In the imagePathRoot there should be image in sequence like img1.png img2.png img3.png like these images

copyright

The 3d icons used are from thiings best one out there go check out

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.
PreviousNext