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

PropTypeDefault
imagesAn object containing the image URLs for each of the four quadrants. Required.
{ topLeft: string; topRight: string; bottomLeft: string; bottomRight: string; }—
classNameAdditional CSS classes for styling the container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv
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>
  )
}