Behance
Story Reel Viewer
A stories player where the transition is a counter-scale rather than a slide. The outgoing photograph scales to two and rotates twenty five degrees away while the incoming one starts at scale two and the opposite rotation and settles to rest, so the two images pass through each other in depth. The new frame's container is also clip-path wiped in from the edge you are travelling toward, giving two independent reveals on one change. Text does not cross-fade: a fresh node is appended, the old one pushed out by exactly one line height, and any node beyond the newest two pruned so the DOM cannot grow. Skipping backwards empties the progress bar from the right rather than the left.
npx shadcn@latest add https://ui.aryank.space/r/story-reel-viewer.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| stories | StoryReelEntry[] | 6 BLANK stories | Avatar, name, up to three title lines, link, and full-bleed image. The progress bar count follows the array length. |
| storyDuration | number | 4000 | Also the fill duration of the active progress bar, so the two can never disagree. |
storyDurationtextMilliseconds a story holds before auto-advancing.
gsap
