Skip to content
Pinky UI

media

Image Sequence

Pointer, drag and keyboard inspection across supplied frames.

  • media
  • frames
  • 360
  • process

Live preview

Product frame 11 / 4

Quick usage

usage
import { ImageSequence } from "@pinky-ui/systems";

<ImageSequence frames={frames} interaction="drag" alt="Product rotation" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

autoplay={false} preloadCount={2}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
framesstring[]—Ordered image frame URLs.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Autoplay is opt-in and preload count is capped by the consumer.
  • No continuous animation runs by default.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Short product rotations and process sequences

When not to use

  • Large raw frame dumps better served by video

Skill

Purpose

ImageSequence lets pointer, drag, touch or Arrow keys inspect supplied frames. Use it for compact 360° products, process stages and short animation previews.

Keep frame counts and image dimensions bounded; preload only the first useful frames. Avoid continuous autoplay by default, high-resolution frame dumps or sequences that hide essential information.

The surface exposes slider semantics and current frame position. Mobile drag remains touch-pan friendly and reduced motion disables only optional autoplay. Prefer video when compression and continuous playback matter more than direct frame choice.

Open this skill on its own page