Scroll Choreography

Heroes 1K

About

A scroll-driven animation that choreographs four quadrant images across the viewport before one hero image expands to fill the screen.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Choreography to your project and fits it to your theme.

Code

How Scroll Choreography is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}