# Image Glide — Skecher UI

A clean image interaction component with pointer depth, soft image transitions, and a compact thumbnail rail.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/image-glide
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { useState } from "react";

import { ImageGlide } from "@/components/ui/image-glide";

const images = [
  {
    src: "/images/gallery/forest.jpg",
    alt: "Sunlight passing through a green forest",
    title: "Morning light",
    description: "A quiet trail at the start of the day.",
  },
  {
    src: "/images/gallery/coast.jpg",
    alt: "Rocky coastline beside a blue sea",
    title: "Open coast",
    description: "Wind and water shaping the shoreline.",
  },
  {
    src: "/images/gallery/desert.jpg",
    alt: "Soft desert dunes at sunset",
    title: "Last glow",
    description: "Warm light settling over the dunes.",
  },
];

export default function ImageGlideExample() {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <section aria-label="Featured photography">
      <ImageGlide
        images={images}
        initialIndex={activeIndex}
        onIndexChange={setActiveIndex}
        className="mx-auto max-w-5xl"
      />
    </section>
  );
}
```

## Source files

- components/ui-components/image-glide.tsx — Image Glide component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/image-glide
- Registry item with complete source: https://skecher-ui.com/r/image-glide.json
- Component AI context: https://skecher-ui.com/llms/image-glide