Aperto

Thumbnail-to-expanded media transitions with image, video, and keyboard navigation.

Easing

Navigation

Columns

Radius

Install

npm install @patternmode/aperto

import { Aperto, type ApertoMediaItem } from "@patternmode/aperto";
import "@patternmode/aperto/styles.css";

const media: ApertoMediaItem[] = [
  { id: "photo", type: "image", src: "/photo.jpg", alt: "Photo" },
];

export function MediaGroupExample() {
  return (
    <Aperto.Group media={media} navigationMotion="glide">
      {media.map((item, index) => (
        <Aperto.Thumbnail key={item.id} index={index} />
      ))}
    </Aperto.Group>
  );
}

Core API

`Aperto.Group`

Media Group with keyboard Media Navigation and shared-element transitions.

media*: ApertoMediaItem[]Array of Image Media Items or Video Media Items.
motion: "snappy" | "smooth" | "bouncy""smooth"Media Transition easing preset.
navigationMotion: "float" | "glide" | "snap""glide"Expanded-media navigation transition style.
dismissible: boolean | { threshold?: number; velocity?: number }trueDrag Dismissal behavior for Expanded Media.
classNames: ApertoClassNamesSlot class overrides for Thumbnails and Aperto Controls.

`Aperto.Thumbnail`

Thumbnail for a Media Item inside a Media Group.

index*: numberPosition in the Media Group.
children: ReactNodeOptional custom thumbnail content.

Read the package README for primitive composition, media renderers, and motion presets.