A scroll-driven animation that choreographs four quadrant images across the viewport before one hero image expands to fill the screen.
import { ScrollChoreography } from "@/components/ui/scroll-choreography"
const images = {
topLeft: "https://cdn.21st.dev/assets/mirror/d3/d310c7e0904578a268f9b43e56334bbedab73259827f78fa5820bae55938adf0.webp",
topRight: "https://cdn.21st.dev/assets/mirror/e1/e1a768d91c721771a9095e1079f7ac04e9ce8b81d2264db6f614c42d4cc65a6b.webp",
bottomLeft: "https://cdn.21st.dev/assets/mirror/00/00f17e7c8379b3c4629810073d1c1fe0c79946ae0e0660f05aebf7c21b0ebbde.webp",
bottomRight: "https://cdn.21st.dev/assets/mirror/1a/1a300fea6e7f3a7e530448dd8277eb31e0f11c2e726f09ccbac310d516f8075f.webp",
}
export default function Demo() {
return (
<div className="w-full min-h-screen">
<ScrollChoreography images={images} />
</div>
)
}