Docs·Scroll Choreography

Scroll Choreography

A smooth, scroll-driven image choreography component using Framer Motion. As you scroll, images move and stack gracefully before revealing a hero visual.

Installation

pnpm dlx shadcn@latest add @componentry/scroll-choreography

Usage

API Reference

PropertyTypeDefault
images

An object containing the image URLs for each of the four quadrants. Required.

{ topLeft: string; topRight: string; bottomLeft: string; bottomRight: string; }—
className

Additional CSS classes for styling the container.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
import { ScrollChoreography } from "@/components/ui/scroll-choreography"
const images = {
  topLeft: "https://images.unsplash.com/photo-1741454570867-4a10f31fc5e3?q=100&w=2832&fm=webp&auto=format&fit=crop",
  topRight: "https://images.unsplash.com/photo-1755456068400-fbcdce2f795a?q=100&w=2832&fm=webp&auto=format&fit=crop",
  bottomLeft: "https://images.unsplash.com/photo-1755456068249-13d384440902?q=100&w=2832&fm=webp&auto=format&fit=crop",
  bottomRight: "https://images.unsplash.com/photo-1741454570904-a22d9d6ea511?q=100&w=2832&fm=webp&auto=format&fit=crop",
}

export default function Demo() {
  return (
    <div className="w-full min-h-screen">
      <ScrollChoreography images={images} />
    </div>
  )
}