Depth Tiles

Use Depth Tiles to present a small set of visual cards as a continuously cycling, layered stack. The active tile stays in focus while neighboring tiles recede behind it, and people can move through the loop automatically or with a horizontal drag.

Preview

Reduce motion:Off

Tune:Off

Inspect

Features

Infinite autoplay cycling
Continuous, velocity-aware pointer drag and touch swipe
Controlled and uncontrolled active index support
Pauses while hovered, focused, dragged, or hidden in a background tab
Arrow-key and screen-reader navigation
Reduced-motion mode with instant tile changes and no autoplay

Playground

Installation

Motion

npx shadcn@latest add @sona-ui/depth-tiles

Usage


const items = [
  {
    id: "doodle",
    image:
      "https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=900&q=85",
    alt: "Green leaf with soft natural light",
    label: "320 / Doodle",
  },
  {
    id: "edges",
    image:
      "https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=900&q=85",
    alt: "Abstract architectural texture",
    label: "902 / Edges",
  },
  {
    id: "material",
    image:
      "https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=900&q=85",
    alt: "Soft green landscape",
    label: "114 / Material",
  },
];
 
export default function DepthTilesDemo() {
  return <DepthTiles items={items} />;
}

API

Property	Type	Default	Description
`items`	`DepthTileItem[]`	`required`	Tiles shown in the infinite stack.
`index`	`number`	`undefined`	Controlled active tile index.
`defaultIndex`	`number`	`0`	Initial active tile index when uncontrolled.
`onIndexChange`	`(index: number) => void`	`undefined`	Called after the active tile changes.
`autoplay`	`boolean`	`true`	Enables automatic forward movement.
`interval`	`number`	`3200`	Time between automatic advances in milliseconds.
`pauseOnHover`	`boolean`	`true`	Pauses autoplay while the pointer is over the component.
`draggable`	`boolean`	`true`	Enables horizontal pointer drag and touch swipe.
`ariaLabel`	`string`	`"Depth tiles"`	Accessible label for the carousel region.
`className`	`string`	`undefined`	Additional classes for the component.

Accessibility

Provide meaningful alt text for every tile image. The active tile is exposed as the current visual item, while tiles behind it are hidden from assistive technology.

Styling

Use className to size or position the component within its layout. The component owns the card overlap and depth treatment so the stack remains responsive.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI