Interactive Image Selector
Animated React image selector grid with toggle selection, animated ring effects, keyboard support, and custom caption renderers.
Installation
npx smoothui-cli add interactive-image-selectorFeatures
- Toggle selection with keyboard and pointer
- Animated selection ring and scales
- Custom renderers and captions
- Responsive grid
Accessibility
ARIA Attributes
| Attribute | Element | Purpose |
|---|---|---|
aria-label | Reset button | Provides accessible name "Reset selection" |
aria-label | Select/Cancel button | Dynamically describes current action |
Screen Reader
- Each gallery image has an
altattribute (e.g., "Gallery item 1"). - The selection count is displayed as visible text in the action bar.
- The Share and Delete buttons use icon-only presentation without accessible labels.
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, shake and slide-in animations are disabled.
Props
Infinite Slider
Seamless infinite scrolling marquee for React with customizable speed and pause-on-hover. Perfect for logo carousels, testimonials, and brand showcases.
Job Listing Component
Animated React job listing cards with filter tags, smooth entrance animations, and accessible focus states for career pages.