DocsScroll 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

Dependencies: framer-motion clsx tailwind-merge

Usage

API Reference

PropTypeDefault
images{ topLeft: string; topRight: string; bottomLeft: string; bottomRight: string; }

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

—
classNamestring

Additional CSS classes for styling the container.

—

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
PreviousOrbit Card StackNextScroll Split Card
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>
  )
}