Image Pile

An auto-rotating stack of images that shuffle with smooth animations.

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/image-pile.json"

Install Manually

Install dependencies

npm install framer-motion

Copy the source code

Copy the code into components/ui/image-pile.tsx

Usage

1import { ImagePile } from "@/components/ui/image-pile"
2
3export function Demo() {
4return <ImagePile images={["/1.png", "/2.png", "/3.png"]} speed={3} />
5}

Props

Prop Name	Type	Default	Description
images	`string[]`	`-`	Array of image URLs
speed	`number`	`2`	Seconds between shuffles

Icon Wheel Infinite Moving Cards