## Story Viewer (S—155)

Stories-style slides with segmented progress bars on top: tap sides to skip, press and hold to pause.

- URL: https://sundaeui.dev/components/story-viewer
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/story-viewer.json`
- Tags: slides, tap, stories, hold-to-pause, progress, onboarding

Each slide has a segment that fills over its duration, then the next begins. Tap the right third to skip ahead, the left third to go back, and hold anywhere to pause.
Arrow keys and Space mirror the gestures. Works for changelogs, onboarding tips and product tours as well as social stories.

### Usage

```tsx
import { StoryViewer } from '@/components/sundae/story-viewer'

<StoryViewer />
```

### Props

- `slides` (`{ id: string; title: string; body: string }[]`, required): Slides.
- `duration` (`number`, default `4000`): ms per slide.
- `onEnd` (`() => void`): Called after the last slide.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Release notes, feature spotlights, short onboarding.

### When not to use

- Content people need to read at their own pace.

### Accessibility

- A region with aria-roledescription="carousel"; each slide announces its position.
- Pause on hold, focus and reduced motion (auto-advance stops).
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next
- Space: Pause / resume