Exposure Slider
An iOS Camera-style exposure slider with a draggable ticker, animated notch marks, and a circular progress indicator.
Installation
npx smoothui-cli add exposure-sliderFeatures
- Draggable ticker with spring-physics snap behavior
- Animated notch marks with proximity-based height and opacity
- Circular SVG progress ring showing positive/negative values
- Edge fade gradient for depth effect
- Configurable min/max range and step size
- onChange callback for value tracking
- Respects reduced motion preferences
Accessibility
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the spring smoothing on the drag offset is bypassed and the raw motion value is used directly for instant visual feedback.
Props
Expandable Cards
Interactive React cards that expand to reveal content with smooth Motion animations. Keyboard-navigable and accessible.
Figma Comment
An animated comment bubble component inspired by Figma's comment system. Expands from a small avatar to show full comment details with smooth spring animations.