127 Components
Autoplay Story Carousel
CardsApple News and Instagram-style interactive story carousel featuring segmented pill progress bars, directional half-card tap navigation, hover-to-pause gestures, and fluid slide transitions.
Apple News Interactive Stories
Autoplay Story Carousel
Sequential progress bars, half-card tap navigation, hover pause, and sound controls
IntelligenceOctober 2026
iOS 18.2
Apple Intelligence Integrated
Personal intelligence system combining generative AI models with deep personal context.
Neural Engine38 TOPS
Privacy CoreOn-Device
Hold pointer to pause • Click left / right to skip
Duration:
Story 1 of 4
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/autoplay-story-carousel.json"
Props
TypeScript props supported by <AutoplayStoryCarousel />.
| Prop | Type | Default | Description |
|---|---|---|---|
| slides | StorySlide[] | — | Array of story slide objects containing titles, badges, and metrics. |
| duration | number | 5000 | Display duration per story slide in milliseconds. |
| defaultIndex | number | 0 | Initial story slide index. |
| autoPlay | boolean | true | Whether the carousel automatically progresses through stories. |
| onSlideChange | (index: number) => void | — | Callback invoked whenever the active slide index updates. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
| showHeader | boolean | — | Whether to render header controls and story metadata chip |
| showControls | boolean | — | Whether to show navigation arrows and pause/play controls |
Key Features
- Segmented pill progress bars that fill sequentially across autoplay intervals.
- Half-card tap navigation: left 40% returns to previous slide, right 60% advances.
- Pointer hold / hover-to-pause mechanism preserving elapsed progress accurately.
- Direction-aware Framer Motion spring slide transitions.
- Simulated audio sound toggle and customizable duration presets.
Keyboard & Accessibility
- Includes play/pause toggle button for users who need non-moving content.
- Aria indicators and keyboard operable slide progression dots.
- Respects reduced motion preferences by switching to instant crossfade transitions.