Flipbook Scroll Image Gallery – Page Flip Photo Book

Galleries 6

About

Flipbook Scroll Image Gallery for React and Tailwind CSS (shadcn/ui): a scroll-driven gallery shaped like an open photo book whose pages turn as you scroll. It is built to make scrolling feel like leafing through a real travel journal, so a portfolio is read page by page. Use it for photo portfolios, travel journals, lookbooks and story-driven hero sections. Every leaf follows the scroll on spring physics: a slow scroll is one page flip at a time, a fast one riffles several leaves through the air, and each page bends, shades and casts a shadow. Click a page to turn forward or back, drag a corner past 45 degrees or throw it, or use the arrow, Home, End and Page keys. Pass progress or page with onPageChange for controlled use; autoplay, interval and labels are props. A polite live caption, reduced motion, a one-page phone layout and light and dark themes are built in. The included demo is a fictional summer travel journal you page through as you scroll or flick the mouse wheel over the book, and makes no requests beyond image loads. Requires React only, with no animation library.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flipbook Scroll Image Gallery – Page Flip Photo Book to your project and fits it to your theme.

Code

How Flipbook Scroll Image Gallery – Page Flip Photo Book is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { FlipbookScrollGallery } from "@/components/ui/flipbook-scroll-gallery";
import type { FlipbookPage } from "@/components/ui/flipbook-scroll-gallery";

const PAGES: FlipbookPage[] = [
  {
    id: "lungernsee",
    title: "Lungernsee, Switzerland",
    caption: "Still water, one small boat, no hurry.",
    date: "Jun 6, 2026",
    image: "https://cdn.21st.dev/assets/mirror/ea/ea582e0ff676d5cc59c64ebfeed7b0c7035fb8b6d8234fddca0f10b32db0025d.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/8b/8b8716ab7dc680871673748295165ae5f06d431d602ccaf436251b377fe3b5af.jpg",
  },
  {
    id: "wengen",
    title: "Wengen, Switzerland",
    caption: "A green valley between walls of rock.",
    date: "Jun 9, 2026",
    image: "https://cdn.21st.dev/assets/mirror/c3/c3940c284fde60b559587cd7fec0994d7ed567fab2ab44a37f821ac65b3cf8cd.jpg",
  },
  {
    id: "geirangerfjord",
    title: "Geirangerfjord, Norway",
    caption: "The ferry looked tiny between the cliffs.",
    date: "Jun 17, 2026",
    image: "https://cdn.21st.dev/assets/mirror/a2/a26c34cb3da17b54f8727f8d6041cd3569fc6c8473bd521c7d13266b80bb8fa4.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/28/28ac312b8e0882f42cf4ba8bc2a9b97faf5d321af9bb18f8243623dd41732455.jpg",
  },
  {
    id: "trolltunga",
    title: "Trolltunga, Norway",
    caption: "A long climb for one turquoise view.",
    date: "Jun 19, 2026",
    image: "https://cdn.21st.dev/assets/mirror/03/03fab6f7639fac566aa5175e817b5c3aa808b43a934b1c9b5d76ae4191e6a986.jpg",
  },
  {
    id: "seljalandsfoss",
    title: "Seljalandsfoss, Iceland",
    caption: "Snow on the rocks, spray in the air.",
    date: "Jun 28, 2026",
    image: "https://cdn.21st.dev/assets/mirror/ad/adfb39f50cc7fa2a2e9e81c9beb7f44d95cce8fa279d36b9173e74d69a54244a.jpg",
  },
  {
    id: "vik",
    title: "Vík, Iceland",
    caption: "Black sand, white surf, cold wind.",
    date: "Jun 30, 2026",
    image: "https://cdn.21st.dev/assets/mirror/04/0496f04cf0e41ac6db71e3509d5bd68d29021383f09089a01a11c4e92f81f1da.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/ff/ffb8ad0222c5accf041cdde5de484b26ab26dc25e46b9bcbbc186ae09cf9fa6b.jpg",
  },
  {
    id: "oia",
    title: "Oia, Greece",
    caption: "White walls stacked above a blue bay.",
    date: "Jul 8, 2026",
    image: "https://cdn.21st.dev/assets/mirror/bb/bb1d9301f131e8de72a97e6e24002cc934f44e08dd4d2a114c94e385b4625297.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/d2/d2e83ad29d874976e8955295dd8538da57d035b5431c866490e110ae12b60a8f.jpg",
  },
  {
    id: "tegallalang",
    title: "Tegallalang, Bali",
    caption: "Rice terraces drawn like contour lines.",
    date: "Jul 19, 2026",
    image: "https://cdn.21st.dev/assets/mirror/7e/7e1311b3422d08d6b53f915b8c94fa99efdda3e090b673785d2c3e6265798881.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/0b/0bd5515a484465e5a6079f755e31f4962a3f3fd6dfd74a6321153d0bd26384c9.jpg",
  },
  {
    id: "merzouga",
    title: "Merzouga, Morocco",
    caption: "Dunes that changed color every hour.",
    date: "Jul 27, 2026",
    image: "https://cdn.21st.dev/assets/mirror/08/085ae6a2b4c312a622373cdb8f18f798b88508bbea6990787cd11cfdfd16b555.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/5a/5a83dfc743f50f5d3528706ac385c9e03d7607abdc169856241cbbc61a0b181a.jpg",
  },
  {
    id: "fuji",
    title: "Mount Fuji, Japan",
    caption: "The summit came out above the clouds.",
    date: "Aug 9, 2026",
    image: "https://cdn.21st.dev/assets/mirror/2c/2c21b2f2bfe8e900a7cea69534b89610005ce351ed207c27ff4523b0ac126ae4.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/af/afa63a5f28f6947eca688b4bcbaa75839c88d4d68f102f8a60ec7904ff137cfe.jpg",
  },
  {
    id: "grand-canyon",
    title: "Grand Canyon, USA",
    caption: "Layers of red rock all the way down.",
    date: "Aug 21, 2026",
    image: "https://cdn.21st.dev/assets/mirror/54/54a3c48928bd847834fd653163dfdf0688607f1e9ce9ebae492a399f01d9627f.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/6b/6b6fa2b8e7385e1aea5c45e1f8483ef01937019782900df0c9cf606be9add525.jpg",
  },
  {
    id: "manhattan",
    title: "Manhattan Bridge, New York",
    caption: "Last night of summer, all light trails.",
    date: "Aug 30, 2026",
    image: "https://cdn.21st.dev/assets/mirror/e3/e36c146118614ce827e6514a6721640d25a7d89f1e68b07b5958ec9d5c22b243.jpg",
    backImage: "https://cdn.21st.dev/assets/mirror/14/14f110638a3156827550b0da9c9a95e13ce79a8ceef9f684ea4a5f4c0ec165b4.jpg",
  },
];

export default function FlipbookScrollGalleryDemo({ autoplay = true }: { autoplay?: boolean }) {
  return (
    <div data-flipbook-demo className="w-full bg-background text-foreground">
      <FlipbookScrollGallery
        items={PAGES}
        eyebrow="Travel journal · Summer 2026"
        heading="A photo book that turns as you scroll."
        scrollDriven={false}
        autoplay={autoplay}
        interval={1400}
      />
    </div>
  );
}