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.

Galleries, hover or press, Motion + GSAP

Install

npm i clsx gsap motion tailwind-merge && curl -o components/project-index.tsx https://motion-brew.com/r/project-index.tsx

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

Usage

import { ProjectIndex } from "@/components/project-index";

export default function Work() {
  return (
    <ProjectIndex
      effect="pixel"
      projects={[
        { title: "Linden House", meta: "Residential, 2026", image: "/work/linden.jpg", href: "/work/linden" },
        { title: "Quiet Rooms", meta: "Interiors, 2025", image: "/work/quiet.jpg", href: "/work/quiet" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
projects	ProjectItem[]	four samples	title, meta, image, alt, href
eyebrow	string	"Selected projects"	Above the list
effect	"pixel" \	"grain" \	"gradient" \	"mirror"	"pixel"	The image transition
duration	number	0.9	Seconds
intensity	number	0.6	How strong the effect is, 0 to 1
select	"hover" \	"click"	"hover"	Focus a project on hover, or on press
imageSide	"left" \	"right"	"right"	On wide cards
numbers	boolean	true	Show 01, 02
meta	boolean	true	Show each meta line
autoplay	boolean	false	Cycle on its own, paused while you are on it
interval	number	4	Seconds per project while autoplaying
parallax	number	0.5	How far the photo leans with the pointer
defaultIndex	number	0
onOpen	(project, index) => void		A press on a row or the panel's button
className	string

More galleries

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.
Ribbon gallery: An endless ribbon of cards curved like a wraparound screen and tilted across the frame.

All animated react carousels and galleries