ComponentsScroll & parallax
Sliding Columns
A wall of images in columns that slide at different rates as you scroll, leaning slightly while the scroll is fast.
This example uses generated pictures from this site: art.ts. Copy that file from the repository, or use your own images in its place.
"use client";
import { SlidingColumns } from "@/components/miyuki-ui/sliding-columns";
import { landscape, moods } from "@/registry/lib/art";
const images = Array.from({ length: 18 }, (_, i) =>
landscape(`wall-${i}`, { mood: moods[(i * 5) % moods.length], width: 480, height: 600 }),
);
export default function SlidingColumnsDemo() {
return (
<div className="relative size-full">
<SlidingColumns images={images} height="100%" className="absolute inset-0" />
</div>
);
}Install
npx shadcn@latest add @miyuki-ui/sliding-columnsThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
SlidingColumns
Prop
Type