Duo flip

A gallery that turns its pictures with a liquid fold. The page being turned swells past the card like bent glass, blurs into a blue and pink fringe and hands the lift over half way across.

Galleries, press or drag, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/duo-flip.tsx https://motion-brew.com/r/duo-flip.tsx

One self contained file for React and Tailwind CSS: duo-flip.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { DuoFlip, type DuoFlipImage } from "@/components/duo-flip";

const images: DuoFlipImage[] = [
  { src: "/work/poster.jpg", alt: "A blue poster with pink dots", label: "The rise of motion" },
  { src: "/work/still-life.jpg", alt: "Garlic resting on a mushroom", label: "Still life" },
  { src: "/work/forest.jpg", alt: "Sun through a forest", label: "Forest light" },
];

export default function Work() {
  return <DuoFlip images={images} flare={0.34} glass={1} />;
}

Props

Prop	Type	Default	Description
images	DuoFlipImage[]	four sample photos	{ src, alt, label? }, two or more
aspect	number	1.5	Card width over height (600 by 400 at full width)
radius	number	24	Corner radius in px
flare	number	0.34	How far the turning page swells past the card, 0.1 to 0.5 of its height
glass	number	1	Blur and colour fringe at the fold, 0 to 2
blur	number	24	Frost while turning, in px; 0 turns it off
blurNear	number	0.65	Share of the frost right beside the fold, 0 to 1
blurFar	number	0.12	Share of the frost at the far edge, 0 to 1
noise	number	0.3	Grain in the frost, 0 (smooth) to 1
thickness	number	1	How thick the card looks, its bevel and lifting rim, 0 to 2
duration	number	1.3	Seconds one turn takes
autoplay	boolean	true	Turn on its own
interval	number	3.4	Seconds between turns on its own
onChange	(index) => void		After each turn
className	string		Placement and size

More galleries

Project index: An editorial project index with large photography: hover a project and its image arrives through a pixel, grain, gradient or mirror transition, then open it with one press.
Prism carousel: An endless carousel circling through liquid glass lenses at both edges.
Tilt carousel: A looping row of photo cards that glides on its own: the middle one faces you while the rest turn away in 3D.
Depth carousel: A stack of cards receding into depth with motion blur.

All animated react carousels and galleries