BoseUI v2
Story Cards
CardsInteractive looped story card showcase featuring continuous virtual looping, spring-animated expanding active slides, mouse-wheel scrub, touch gestures, and keyboard navigation.
What's happening
Discover the latest stories.
Annual letter 2025
We survived another year of meetings, deadlines, bugs, and pretending everything was part of the plan.
We survived another year of meetings, deadlines, bugs, and pretending everything was part of the plan.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/story-cards.json"
Props
TypeScript props supported by <StoryCards />.
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | StoryCard[] | — | Array of story items with id, title, description, image, and optional ctaLabel/href. |
| initialIndex | number | 0 | Starting active card index. |
| autoPlay | boolean | false | Automatically cycle through stories on an interval. |
| autoPlayInterval | number | 5000 | Autoplay advance interval in milliseconds. |
| showNavigation | boolean | true | Render previous and next icon buttons in the header. |
| loop | boolean | true | When true, cycling wraps seamlessly around the beginning and end. |
| enableWheelScroll | boolean | true | Allow trackpad or mouse-wheel gestures to step through cards. |
| title | string | What's happening | Section headline text. |
| subtitle | string | Discover the latest stories. | Section descriptive subtitle text. |
Key Features
- Virtual circular index math allowing continuous, endless forward and backward looping.
- Spring-physics flex width interpolation allocating expanded focus to the active story.
- Multi-input gesture support: arrow keys, mouse wheel/trackpad horizontal scrub, and touch swipes.
- Accessible semantic landmarks with aria-live announcements and full keyboard controls.
Keyboard & Accessibility
- Uses semantic <section> with aria-label='Stories' and aria-live announcements.
- Provides Left/Right arrow key navigation while ignoring inputs and editable fields.
- Respects prefers-reduced-motion to instantly switch slides without spring oscillations.