Scrap Wall Archive

Forms

About

A pinned archive that opens on one large card, then zooms out on scroll into an endless wall of scraps you can drag in any direction. Click a scrap to bring it back, with a lightbox and a running counter. For portfolios, galleries and studio archives.

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

Code

How Scrap Wall Archive is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ScrapWallArchive from "@/components/ui/scrap-wall-archive"

export default function ScrapWallArchiveDemo() {
  return (
    <div className="bg-background text-foreground">
      <section className="flex min-h-[60svh] flex-col items-center justify-center gap-2 px-6 text-center">
        <p className="text-sm uppercase tracking-widest text-muted-foreground">Scroll down</p>
        <p className="max-w-md text-lg">The archive pins, then zooms out into an endless wall of scraps.</p>
      </section>
      <ScrapWallArchive />
      <section className="flex min-h-[60svh] items-center justify-center px-6 text-center">
        <p className="text-sm uppercase tracking-widest text-muted-foreground">End of the archive</p>
      </section>
    </div>
  )
}