Ribbon gallery

An endless ribbon of cards curved like a wraparound screen and tilted across the frame. Drag or flick it and it ripples like fabric with motion blur along its length.

Galleries, drag, Motion

Install

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

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

Usage

import { RibbonGallery } from "@/components/ribbon-gallery";

export default function Page() {
  return (
    <RibbonGallery
      className="h-screen bg-black"
      items={[
        { src: "/work/liquid.jpg", title: "Liquid Echo", href: "/work/liquid" },
        { src: "/work/mirage.jpg", title: "Blue Mirage", href: "/work/mirage" },
        { src: "/work/bloom.jpg", title: "Neon Bloom", href: "/work/bloom" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
items	{ src; title; alt?; href? }[]	sample photos	Cards on the ribbon, repeated to loop
angle	number	20	Tilt across the frame, degrees; 0 is horizontal
curve	number	0.45	Curvature, 0 (flat) to 1 (tight)
cardWidth	number	230	Card width, px
cardHeight	number	290	Card height, px
gap	number	14	Space between cards, px
drift	number	30	Idle drift, px/s; 0 stops it
momentum	number	0.65	How far a flick carries, 0 to 1
wave	number	1	Ripple strength, 0 to 2; always gently on, stronger while moving
blur	number	9.5	Strongest motion blur along the ribbon, px
intro	boolean	true	Sweep in on first view
wheel	boolean	true	Wheel and trackpad move it while hovered
dim	number	0.75	How far other cards fade back while one is hovered, 0 to 1
dimColor	string	light gray	Color the other cards fade toward; match your background
label	string	"Project ribbon"	Accessible name
className	string		Size and background

More galleries

Infinite gallery: An endless wall of work that loops seamlessly in every direction.
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.

All animated react carousels and galleries