Scroll Demo Narrator
Turn a product demo into a scroll-synced story: a sticky screen, chapter text, accent colour, and a progress line that move together.
Quick Start
- Add Scroll Demo Narrator to your page. Give it a flexible width and let its height be driven by content; do not force a fixed pixel height.
- Open Chapters. Edit the sample chapters: change Title and Text, set an Accent per chapter, and pick a Scene for each demo chapter. You can have up to eight chapters.
- To use your own media, set a chapter's Media to Image or Video, upload the file, and choose Fit.
- Open Layout to set Device Side, Frame, Content Width, Media Width, Gap, Chapter Height, and Sticky Offset.
- Choose a Motion → Transition (Slide + Fade, Fade, or None) and set the Activation Line.
- Open Framer Preview and scroll slowly on desktop and in a narrow window to see the screen, accent, and progress line stay in sync.
Chapters
Every chapter is one block of text. On desktop the screen sits in a sticky column beside the text; as each chapter's block crosses the activation line that chapter becomes active. There is always exactly one active chapter: the first shows before the story is entered, the last stays after it. Scrolling up rewinds everything in the same order, and a large jump selects the correct chapter directly without playing the ones in between.
A newly inserted component starts with the four-chapter demo of a fictional project tool (Capture, Plan, Progress, Share). That demo is the default value of Chapters; there is no separate demo configuration. Replace it with your own content.
| Control | Options | Default | Effect |
|---|---|---|---|
| Title | Text | "Chapter title" | The chapter heading. |
| Text | Text | "One short line about this step." | One supporting line under the title. |
| Label | Text | Empty | Optional small eyebrow above the title. Empty hides it. |
| Accent | Color | Blue for chapter 1 | Colour for this chapter's number, marker, progress fill, and ambient glow. |
| Media | Demo, Image, Video | Demo | The media type for this chapter. Demo is an explicit choice; a rotated-away image never becomes a demo scene. |
| Scene | Capture, Plan, Progress, Share | Capture | The built-in scene for a demo chapter. The four scenes form one continuous story. |
| Image | Image picker | None | The image for an image chapter, or the poster for a video chapter. |
| Video | mp4, webm, mov, m4v | None | The file for a video chapter. Use a web-playable file such as H.264 MP4. |
| Description | Text | Empty | Alternative text for assistive technology. For images, an empty field falls back to the image's own alt text. |
| Fit | Cover, Contain | Cover | Cover fills the screen and crops unmatched edges; Contain shows the whole media with space around it. |
| Highlight | Object with X, Y, Width, Height, Note | Off (on for two demo chapters) | An optional rounded rectangle drawn over part of the screen. See Highlights. |
Empty fields, one or two chapters, reordering, and deleting the active chapter are all safe. Removing every chapter shows a small empty state whose text is the Empty Text control; it does not restore the demo. Three to eight chapters is the useful range.
Highlights
A highlight is a rounded rectangle with a border and a faint fill, drawn over part of the screen. It never changes the layout, never captures clicks, and disappears with its chapter.
X, Y, Width, and Height are values from 0 to 100 measured over the media. On your own images and video the rectangle uses those coordinates over the media as it is fitted: with Fit: Contain it follows the letterboxed area, and with Fit: Cover it tracks the same point on the source image even when the frame's aspect ratio crops it. On the built-in demo scenes the highlight is anchored to the element it points at, so it stays accurate as the scene reflows at different widths; if that element is pushed out of a very small frame the highlight is not drawn.
Note is drawn as a small callout attached to the highlight, in the chapter's accent colour. Leave it empty to show only the rectangle.
Layout
| Control | Options | Default | Effect |
|---|---|---|---|
| Device Side | Left, Right | Right | Which side the sticky screen sits on. Reading order stays coherent either way. |
| Frame | Window, Phone, None | Window | The component's own visual frame around the screen. |
| Content Width | 480 to 1600 px | 1200 px | Maximum width of the story content. |
| Media Width | 30 to 70 % | 52 % | The screen column's share of the row on desktop. |
| Gap | 0 to 160 px | 64 px | Space between the text column and the screen. |
| Chapter Height | 40 to 120 vh | 85 vh | Minimum height of each desktop chapter block, as a share of the scroll viewport. Long text grows past it. |
| Sticky Offset | 0 to 240 px | 80 px | How far below the top of the viewport the screen pins. |
| Mobile Below | 480 to 1200 px | 900 px | Component width at which the layout switches to cards. Measured on the component's own width, not the window. |
| Text Align | Left, Center | Left | Alignment of the chapter text. |
| Padding | CSS padding | 112px 24px | Outer padding around the story. |
The outer size of the screen is stable while chapters change: swapping a scene, image, or video never moves the text or changes the height of the story. If the viewport is too short for a side-by-side composition the component falls back to cards on its own.
Appearance
| Control | Options | Default | Effect |
|---|---|---|---|
| Background | Color | #0B0D12 | Page background behind the whole component. |
| Surface | Color | #131722 | Frame and empty-state surface colour. |
| Text | Color | #F4F5F8 | Chapter title and primary text colour. |
| Secondary | Color | #A8AFBF | Supporting text colour. |
| Border | Color | Faint light | Frame and divider colour. |
| Radius | 0 to 40 px | 20 px | Corner radius of the frame. |
| Shadow | On, Off | On | Drop shadow under the frame. |
| Ambient Glow | On, Off | On | A soft wash in the active accent behind the screen. |
| Glow | 0 to 1 | 0.5 | Strength of the ambient glow. Hidden when Ambient Glow is off. |
The glow is built from low-opacity colour layers, not animated full-screen filters.
Typography
Title, Body, and Label each have a full font control: family, size, weight, line height, letter spacing, and alignment. If you do not choose a family, the component uses a clean system sans-serif rather than inheriting an unexpected font.
Motion
| Control | Options | Default | Effect |
|---|---|---|---|
| Transition | Slide + Fade, Fade, None | Slide + Fade | How the screen changes between chapters. Slide + Fade moves the outgoing and incoming screens in opposite directions and reverses on scroll up. |
| Duration | 0 to 800 ms | 320 ms | Length of the transition. |
| Distance | 0 to 48 px | 12 px | Horizontal travel for Slide + Fade. Hidden for the other transitions. |
| Activation Line | 20 to 80 % | 50 % | Where in the scroll viewport a chapter becomes active. |
Transitions are interruptible: change chapter again mid-transition and the screen converges on the current chapter with no blank frames and at most the incoming and outgoing screens on stage at once.
With the visitor's reduced-motion preference on, changes are immediate, ambient transitions are off, and video autoplay is disabled. The chapter text and the progress indicator stay functional.
Progress
| Control | Options | Default | Effect |
|---|---|---|---|
| Show | On, Off | On | Shows or hides the whole progress indicator. |
| Line | On, Off | On | The continuous vertical fill line. |
| Markers | On, Off | On | The per-chapter dots showing completed, active, and pending chapters. |
| Thickness | 1 to 8 px | 2 px | Width of the line. Hidden when Line is off. |
| Track | Color | Faint light | Colour of the unfilled line. Hidden when Line is off. |
The line fills continuously with the story's scroll position: 0 at the start, 1 at the end, and it retreats as you scroll up. The fill uses the active chapter's accent.
Video
| Control | Options | Default | Effect |
|---|---|---|---|
| Autoplay | On, Off | On | Plays the active chapter's video when it is on screen and the tab is visible. |
| Loop | On, Off | On | Repeats the video. |
| Muted | On, Off | On | Silences playback. Muted autoplay is the most reliable setting. |
| Controls | On, Off | Off | Shows the browser's native video controls. |
| Play Label | Text | "Play" | Text for the accessible play button. |
| Pause Label | Text | "Pause" | Text for the accessible pause control. |
Only the active chapter's video is mounted, so a story with several videos does not download them all at once. Inactive, off-screen, and background-tab videos pause. When autoplay is off or the browser blocks it and native controls are hidden, a real play button appears. A manual pause is respected; small scroll movements do not restart it. In cards mode only the most visible card plays.
Canvas
In the Framer editor the component shows a static preview: the chapter list plus one screen, with no scrolling, no autoplay, and no highlight overlay. Preview Chapter (1 to 8) chooses which chapter's screen appears in that static view only; it never forces a chapter in Preview. Below about 760 px of component width the static preview stacks the screen above the list.
Responsive Behavior
The component adapts to its own width. Above Mobile Below it uses the sticky side-by-side layout; below it, each chapter becomes a card with its own screen at its natural height and the sticky column is dropped. There is no horizontal overflow from 320 px up, and you generally do not need separate mobile versions.
Provide page content before and after the component so the sticky screen has room to enter and leave. A very short viewport also switches to cards.
Recommended Usage
- SaaS and app landing pages
- Feature walkthroughs and onboarding explainers
- Product update and launch pages
- Case studies that follow one flow end to end
Best Practices
- Use three to eight chapters, one clear idea per chapter.
- Keep Text to a single short line; the title carries the message.
- Give each chapter a distinct Accent so the colour shift reads.
- Prepare images and video close to the frame's shape, or use Fit: Cover.
- Leave generous space above and below the component for the sticky enter and exit.
- Preview on desktop and in a narrow container before publishing.
Accessibility
All chapter text stays in the DOM with a clear heading hierarchy; nothing is hidden from assistive technology when it is inactive. Decorative demo scenes and outgoing screens are excluded from the accessibility tree. Progress is exposed once as a progress bar and is not announced on every pixel of scroll, and focus is not moved while scrolling.
The play and pause buttons are real buttons with labels from the Play Label and Pause Label controls and a visible focus outline. Outgoing screens do not take focus or intercept events. The reduced-motion preference is respected automatically. Write meaningful Description text for image and video chapters and keep enough contrast in your palette.
Troubleshooting
The screen does not stay pinned while scrolling
The sticky screen needs an unclipped path to the page scroll. Make sure no section or wrapper above the component in Framer has its overflow set to Hidden or Clip, and that the component sits in the normal page flow rather than inside a fixed-height scrolling frame. Check this in Preview, not only in Canvas.
The story has no room to enter or leave
Add ordinary page content before and after the component. With nothing above it the first chapter is active immediately; with nothing below it the last chapter has nowhere to finish.
The highlight is in the wrong place on my image
X, Y, Width, and Height are percentages of the visible media. With Fit: Contain the visible media is letterboxed and the highlight follows that smaller area. Prepare the image close to the frame's shape, switch to Fit: Cover, or adjust the four values.
Video does not autoplay
Confirm the chapter's Media is Video, a playable file is uploaded, Autoplay is on, and Muted is on. Test in Preview; Canvas never plays video. If the browser blocks playback, use the play button or turn Controls on. Reduced motion disables autoplay by design.
It switches to cards on a wide screen
The breakpoint is the component's own width, not the window's. Inside a narrow column the component uses cards even on a large monitor. Widen the column or lower Mobile Below. A very short viewport also forces cards.
FAQ
How many chapters should I use?
Three to eight. One or two work and will not break, but the effect needs a few beats to read.
Can I mix demo scenes, images, and video?
Yes. Each chapter chooses its own Media independently.
Can I put the screen on the left?
Yes, with Device Side. The reading order adjusts.
Does it work on mobile?
Yes. Below the breakpoint it becomes a stack of cards, each with its own screen at natural height.
Can I turn off the animation?
Set Motion → Transition to None, or rely on the visitor's reduced-motion preference, which simplifies it automatically.
Does it require external libraries or additional files?
No additional installation is needed in Framer. The component is contained in one code file and uses Framer's supported runtime.
Can two of them share a page?
Yes. Each instance tracks its own active chapter, media, and progress independently.
Limitations
- Sticky depends on the page. An ancestor in Framer with Hidden or Clip overflow, or placing the component inside a fixed-height scroller, breaks the pin. The component's own layers do not clip.
- Predefined frames. Window, Phone, and None are the available frames. There is no arbitrary device editor.
- Illustrative demo. The four built-in scenes are a starting visual and are labelled "Demo". Their text and cards are not individual controls, and they are dense on the very narrowest cards. Replace them with your own media for production.
- Highlight coordinates. X, Y, Width, and Height are percentages of the visible media. With Contain the visible media is letterboxed and the highlight follows that smaller area.
- Media, not a live site. Uploaded images and video scale or crop; their internal interface does not reflow.
- Custom contrast. Your palette determines contrast. Very light or very dark colour choices can reduce legibility.
- Browser video behavior. Autoplay with sound, codecs, and native controls depend on the browser. Videos pause in Canvas and when inactive or out of view. Reduced motion disables autoplay.
- English assistive labels. The Description, Play Label, Pause Label, Empty Text, and ARIA Label fields are yours to write in any language, but the component ships with English defaults for them.
Need help? Visit support.
Changelog
v1.0
Initial release of Scroll Demo Narrator.
- A 3-to-8 chapter story synced to natural scroll: active chapter, accent colour, ambient glow, and progress line derive from one calculation.
- Sticky screen beside the chapters on desktop; a stacked card layout below a component-width breakpoint.
- Demo, Image, and Video media per chapter, with Cover or Contain fit.
- Four built-in demo scenes of one continuous product story, with element-anchored highlights.
- Slide + Fade, Fade, and None transitions, interruptible and direction-aware.
- Grouped Property Controls for Chapters, Layout, Appearance, Typography, Motion, Progress, Video, and Canvas.
- Lazy video mounting, reduced-motion support, keyboard-operable playback controls, and a static Canvas preview.
arforgelabs.support@proton.me