TileSequence

Coordinate a tile wave through a shared perspective without coupling the package to a router.

Usage

The example assumes the stylesheet and a Theme are already present.

import { TileSequence, Tile } from "@pane-ui/react";
 
export function StartTiles({ visible }: { visible: boolean }) {
  return (
    <TileSequence
      show={visible}
      items={[
        { id: "mail", content: <Tile label="mail">3</Tile> },
        {
          id: "day",
          size: "wide",
          content: (
            <Tile label="today" size="wide">
              Tuesday
            </Tile>
          ),
        },
      ]}
    />
  );
}

API

Behavior and composition

Layered mode exits tiles in reverse item order and returns them in item order. The tiles turn toward the viewer and sweep away around a common grid-edge hinge, with perspective scaled to the grid. Each tile keeps its own delay; the root stays still and completion waits for every tile. A forward departure and backward return use the same edge and opposite playback: the return reverses the stagger, turn and easing. Set direction="backward" when navigating back; keeping direction="forward" describes continuing onward to a new page. Individual mode puts the selected tile last on exit. Group mode does not use per-tile spacing.

Put size on the sequence item for the wrapper span and set the inner tile’s size to match its intended appearance. Stable unique IDs preserve identity during reordering. Content-only updates do not restart a run; structural updates reconcile surviving wrappers.

Initial visible content skips entrance and callbacks. Exiting content becomes inert immediately, then children unmount at completion. The root is positioned so wrapper offsets share a layout coordinate system. Avoid overriding its positioning or adding perspective to an ancestor. Interruption samples displayed transforms and resumes without replaying the old delay. Reduced motion, zero duration and unavailable animation support settle immediately.

Use onExited to open the next surface, rather than a timer. Focus and application navigation are yours to coordinate. Real cross-route destinations should retain anchor semantics.