App Story Rail
Turn app screenshots into an image-led chapter rail with depth, swipe navigation, and a matching story panel.
Quick Start
- Add App Story Rail to your page. Give it a width that fits your section and let its height fit the content.
- Open Chapters. Replace the sample chapters with your own Image, Alt, Title, and Description. You can add up to nine chapters.
- For a chapter with an action, fill in both CTA and Link.
- Open Layout to choose the Ratio, Frame, and Image Fit. To match the demo, use 9:16 and a Device W of 180 px. A newly inserted component starts at 9:19.5 and 260 px.
- Choose an Appearance → Preset and set Navigation → Initial to the first chapter you want visitors to see. Chapter numbering starts at 1.
- Open Framer Preview. Try dragging the rail, selecting progress segments, and swiping in a narrow container.
Chapters and Images
Each chapter pairs one image with a title, description, and optional link. The story panel follows the selected chapter. Six sample chapters are supplied; replace their copy and images before using the rail for your product.
| Property | Content | Description |
|---|---|---|
| Image | Uploaded image | A screenshot or other portrait image for this chapter. Missing images use an illustrated fallback. |
| Alt | Up to 140 characters | Describe the screenshot. If empty, the image's own alt text is used, then the chapter title. |
| Title | Up to 72 characters | The chapter heading. |
| Description | Up to 240 characters | A short explanation of the feature or step. |
| CTA | Up to 28 characters | The action label. Supply a Link as well. |
| Link | Framer link | The destination associated with that chapter. |
Text beyond these limits is shortened. Keep the explanation in the panel concise and use the destination page for longer detail.
Cover fills the frame and may crop the screenshot. Contain preserves the full image and may leave space around it. This is an image presentation; it does not run a live app or embed a website.
Layout
The Default column describes a newly inserted component. The current demo uses the more compact settings listed below.
| Property | Options or range | Default | Description |
|---|---|---|---|
| Device W | 180–420 px | 260 px | Preferred screenshot width; narrower layouts adjust the rendered size. |
| Ratio | 9:19.5, 9:19, 9:16, Custom | 9:19.5 | Shape of the screenshot frame. |
| Custom | 0.4–0.75 | 0.462 | Width divided by height; shown when Ratio is Custom. |
| Gap | 8–72 px | 32 px | Spacing between screenshots; smaller layouts constrain this value. |
| Rail Pad | 16–96 px | 48 px | Space around the image rail. |
| Content Gap | 16–64 px | 30 px | Space separating the rail and story content. |
| Frame | None, Minimal, Device | Device | Screenshot frame treatment. |
| Image Fit | Cover, Contain | Cover | Fill the frame or preserve the whole image. |
| Panel | Left, Center | Left | Alignment of the story panel. |
Match the Demo
The demo uses six chapters, the Midnight preset, a Device frame, Cover image fit, and left-aligned story text. Its compact configuration is:
| Property | Demo setting |
|---|---|
| Layout → Device W | 180 px |
| Layout → Ratio | 9:16 |
| Layout → Gap | 12 px |
| Layout → Rail Pad | 16 px |
| Layout → Content Gap | 16 px |
| Typography → Title | 24 px |
| Typography → Body | 14 px |
| Typography → CTA | 12 px |
Autoplay and Loop are off; Progress uses Segments. The abstract screens are the built-in fallback artwork. Choose an Image in each chapter to replace them with your app screenshots.
Navigation
| Property | Options or range | Default | Description |
|---|---|---|---|
| Initial | 1–9 | 1 | Starting chapter, limited to the chapters you have supplied. |
| Loop | On / Off | Off | Continue between the last and first chapters. |
| Wheel | On / Off | Off | Enable horizontal wheel or Shift + vertical wheel navigation outside the mobile layout. |
| Keyboard | On / Off | On | Enable Left/Right, Home, and End while the rail itself has focus. |
| Autoplay | On / Off | Off | Advance chapters automatically. |
| Interval | 2500–12000 ms | 5000 ms | Delay between automatic advances; shown with Autoplay. |
| Pause Hover | On / Off | On | Pause automatic advances while hovered. |
| Arrows | On / Off | On | Show previous and next buttons. |
| Arrow Style | Minimal, Outline, Filled | Outline | Arrow button appearance. |
| Mobile | On / Off | Off | Show arrows in the mobile layout when Arrows is enabled. |
| Progress | On / Off | On | Show chapter progress. |
| Progress Style | Line, Segments, Dots | Segments | Segments and Dots provide chapter selection; Line shows progress. |
| New Tab | On / Off | Off | Open chapter links in another tab. |
Drag horizontally on the larger rail; on mobile, swipe the scrollable screenshot row. Ordinary vertical wheel movement is left available for page scrolling.
Autoplay pauses during dragging or mobile scrolling, while focus is inside the component, when the document is hidden, and when the component is outside the viewport. It also pauses on hover when Pause Hover is enabled. With Loop off, it stops at the last chapter. A single chapter does not advance.
Appearance and Depth
Choose Midnight, Editorial, Monochrome, or Custom under Appearance → Preset. Custom Colors appears only for Custom and exposes Background, Surface, Elevated, Text, Muted, Accent, Secondary, and Border.
Appearance also provides Frame, Frame Radius (38 px), Panel Radius (22 px), Shadow (on), and Glow (on). Typography has separate Title, Body, and CTA font controls, initially 32, 16, and 14 px.
| Depth property | Range | Default | Description |
|---|---|---|---|
| Amount | 0–100% | 100% | Overall depth treatment. Use 0 for a flatter rail. |
| Perspective | 600–1800 px | 1100 px | Perspective distance for the larger layouts. |
| Rotation | 0–12° | 11° | Maximum rotation of side screenshots. |
| Side Blur | 0–3 px | 1.6 px | Blur applied to side screenshots. |
Depth is softened on tablet and replaced by a flat, scrollable row on mobile. Reduced-motion preferences remove the depth motion and blur and prevent autoplay. Setting Amount to 0 flattens the presentation; it is not a separate switch for every transition.
Responsive Behavior
The component responds to its container width. At 960 px and above it uses the desktop depth rail. From 600 to 959 px it reduces screenshot size, spacing, rotation, and blur. Below 600 px it switches to native horizontal scrolling with snap positions and a stacked story panel.
Let the height grow with the screenshots and panel. Avoid placing it inside a short fixed-height parent that clips the story. Preview the actual column width, especially when the rail sits beside other content.
Recommended Usage
Use a short sequence to explain onboarding, demonstrate a feature flow, or walk through a mobile product. Give each chapter one purpose and keep screenshots at a consistent ratio.
For a reader-controlled tour, keep Autoplay off and retain Segments or Dots. For a promotional sequence, enable Autoplay while keeping a visible way to select chapters.
Best Practices
- Use consistent screenshot dimensions and check cropping with real content.
- Write meaningful Alt text and short action labels.
- Keep at least one visible navigation method, especially when mobile arrows are hidden.
- Check custom text and background colors together for readability.
Accessibility
The rail has a named carousel region and a focusable keyboard target. Accessibility → Region defaults to “App story.” With Keyboard enabled, focus the rail and use Left/Right, Home, or End; these shortcuts do not take over links, buttons, or form controls.
Arrow and chapter-selection buttons have labels. Accessibility → Announce enables polite chapter-change announcements and is off by default. Images use the chapter's Alt, image alt text, or title. Reduced-motion preferences disable automatic advances and reduce visual motion. These features do not replace checking your own copy, contrast, and page layout.
Troubleshooting
My screenshot is cropped
Set Layout → Image Fit to Contain, or choose a Ratio closer to your screenshot. Cover intentionally fills the frame.
The rail looks different on mobile
Below a 600 px container width, it uses a flat scroll-snap row. Desktop depth and blur are not applied to this layout.
Autoplay does not advance
Check Autoplay, the number of chapters, and Loop. It pauses while focused, dragged, hovered when configured, offscreen, or in a hidden tab. It is disabled for reduced motion and static rendering. Test in Preview.
The arrow buttons disappear on my phone
Enable both Navigation → Arrows and Mobile. Mobile arrows are off by default; swiping and enabled chapter selectors remain available.
My chapter link is missing or does not open in Canvas
Fill in both CTA and Link. Test the destination in Preview; static rendering suppresses link activation.
My title or description is cut short
Titles are limited to 72 characters, descriptions to 240, and CTA labels to 28. Shorten the text and move detail to the linked page.
FAQ
Can I use my own screenshots?
Yes. Choose an Image for each item in Chapters and provide useful Alt text.
How many chapters can I add?
Up to nine. You can also use a single chapter, although it has no next chapter to navigate to.
Can every chapter have a different destination?
Yes. CTA and Link belong to each chapter. New Tab is shared across the component.
Can I remove the device frame?
Yes. Set Layout → Frame to None. Minimal offers a lighter frame treatment.
Can I make the rail flat?
Set Depth → Amount to 0. Mobile already uses a flat row, and reduced motion removes depth effects.
Does it support video or live app screens?
No. Chapters accept images and text with optional links. Use screenshots to represent your app.
Limitations
The rail has a fixed chapter structure and supports at most nine images. Text lengths are bounded. Device ratios are portrait-oriented, including the Custom range. It does not provide video playback, arbitrary content slots, or live-app rendering. Desktop depth is intentionally replaced by native scrolling in the mobile layout.
Changelog
v1.0
Initial documented version of App Story Rail.
- Up to nine image chapters with a synchronized story panel and optional chapter links.
- Depth presentation on larger containers and scroll-snap navigation on mobile.
- Chapter controls, optional autoplay, appearance presets, and reduced-motion handling.
arforgelabs.support@proton.me