Editorial scene with warm natural light

01 / 06

Warm Frame

A calm lead image with gentle depth and a soft foreground glow.

Components

Image Glide

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

Pointer depth

The preview surface tilts and pans the active image with direct transform updates for a responsive, decorative interaction.

Soft switching

Image changes use short opacity and blur transitions so the selection feels polished without slowing the user down.

Motion aware

The component respects reduced motion by removing pointer movement while keeping a gentle opacity transition.

Dependencies

React iconReactMotion iconMotion

Installation

npx shadcn@latest add https://skecher-ui.vercel.app/r/image-glide.json

Usage

Import
import { ImageGlide } from "@/components/ui/image-glide";
Usage
<ImageGlide />