Motion
Where to Use Preview Rail in React Apps
Preview Rail is a tick rail with hover preview cards for vertical and horizontal section navigation. Long pages and editors ship it when users need to scrub position with context, not just a scrollbar.
Where teams use Preview Rail
Use case 1
Long-form article navigator
Docs and essays show section ticks with hover titles. Vertical rail mirrors scroll position without covering content.
Use case 2
Timeline or story scrubber
Case studies and annual reports use horizontal rails with preview cards. Hover reveals chapter thumbs before jumping.
Use case 3
Video or podcast chapter rail
Media players map chapters to ticks with preview titles. Improves scrubbing versus a blank progress bar.
Use case 4
Multi-step form overview
Wizards expose steps on a rail with hover summaries. Users jump back without losing orientation.
Who it is for
Content and product engineers improving section navigation on long surfaces.
Try Preview Rail on AkmanOS
Hover ticks to see preview cards in the preview, then copy markdown into ChatGPT, Claude, or Cursor to attach Preview Rail to your scroll sections.
Preview /preview/preview-railMore in Motion
- AI Chat AgentFull chat agent UI with Orbit avatars, iOS message bubbles, citation typing, model picker, voice input, uploads, and deep think. Explore real product surfaces for the AI Chat Agent component — then open the live AkmanOS preview and copy production-ready source.
- Animated TextCharacter-by-character reveal with blur and spring motion, optional loop. Explore real product surfaces for the Animated Text component — then open the live AkmanOS preview and copy production-ready source.
- Availability SchedulerWeekly hours editor — day toggles, spring time ranges, scrollable picks, and copy across days. Explore real product surfaces for the Availability Scheduler component — then open the live AkmanOS preview and copy production-ready source.
- Bounce SidebarVertical nav with a bouncing indicator that arcs to the active item. Explore real product surfaces for the Bounce Sidebar component — then open the live AkmanOS preview and copy production-ready source.