Code Demo Narrator
Explain software with scroll-synced code, visual previews, line highlights, annotations and diffs.
Quick Start
- Add Code Demo Narrator to a Framer page, set a flexible width and let the height fit its content.
- Choose Content: Code → UI (SwiftUI), Code → API (TypeScript), Diff Story, or Custom Chapters.
- For your own story, select Custom Chapters and edit Chapters. Add a title, explanation, code and preview for each step.
- Set Highlighted to line numbers such as
2, 4-6. Choose an image, video or built-in scene under the chapter's Preview. - Adjust Layout, Appearance, Focus and Motion. Enable Output → Show to display each chapter's output text.
- Test in Framer Preview on desktop and mobile. Scroll both ways and check your media, line highlights and annotations before publishing.
Content and Chapters
The included SwiftUI story has five chapters, the TypeScript story has four, and Diff Story has two. Selecting a preset uses that story instead of the editable Chapters array. Select Custom Chapters to use your own content; one to eight chapters are supported. Removing every custom chapter shows Empty Text.
| Control | Purpose |
|---|---|
| Eyebrow, Title, Description | The label, heading and explanation of a chapter. |
| Accent | Chapter accent for progress, emphasis, preview details and ambient light. |
| Filename | Active filename shown in the editor header. |
| Tabs | Comma-separated display-only filenames. These are not editable or clickable file tabs. |
| Language | Swift, TypeScript, JavaScript, JSX / TSX, Python, HTML, CSS, JSON, Shell or Plain Text syntax colouring. |
| Code | The code snippet to display. It is never executed. |
| Highlighted | Line numbers or inclusive ranges, for example 2, 4-6. |
| Added, Removed | Line numbers with addition/removal styling when Diff Mode is enabled. Include both removed and added lines in the snippet. |
| Preview | Built-in Scene, Image or Video. |
| Scene | One of eleven illustrative scenes from the three included stories. |
| Image, Video | Your uploaded preview media. Video accepts mp4, webm and mov; browser playback depends on codec support. |
| Alt Text | An accessible description for your preview. |
| Annotations | Up to four callouts using the format below. |
| Output | Plain-text rows for the optional output strip. |
Focus, Diffs and Annotations
Focus → Dim Code dims lines outside Highlighted. Preview Ring points at a predefined element of a built-in scene when that chapter has highlighted lines. It does not locate elements inside your uploaded media or interpret the code.
Enable Code → Diff Mode for custom additions and removals. The Diff Story preset enables diff styling automatically. Diff Story presents the original version and a changed version with additions/removals; it is not an automatic comparison engine.
Enable Focus → Annotations and enter callouts like this:
Reusable card@70,46 | Updated action@62,78
Separate callouts with |. Coordinates are percentages from 0 to 100 over the preview container. Adjust them for your media and frame; they do not track objects in a video. Callouts are visual overlays and do not block pointer input to the video controls.
Layout and Responsive Behavior
On a wide component, chapter text scrolls beside a sticky code editor and preview. The active chapter changes at Activation Line. Scrolling backwards rewinds the story; each component instance tracks itself independently.
Below Mobile Below, the component becomes stacked cards with their own code and preview. The breakpoint uses the component's width, so a narrow desktop column can also show cards. Short viewports can trigger cards to keep the composition usable.
| Control | Default | Effect |
|---|---|---|
| Preview Side | Right | Places the preview on the left or right of the desktop composition. |
| Frame | Browser | Freeform, Browser, Phone, Tablet or Desktop preview chrome. |
| Content Width | 1220 px | Maximum width of the story. |
| Preview Width | 50% | Preview's share of the code/preview area. |
| Gap | 56 px | Space between desktop columns. |
| Chapter Height | 85 vh | Minimum scroll height per desktop chapter. |
| Sticky Offset | 80 px | Distance from the viewport top for pinned panels. |
| Mobile Below | 980 px | Component width below which cards appear. |
| Text Align | Left | Left or Center chapter text. |
| Padding | 112px 24px | Outer spacing. The public demo uses its own section spacing and can override this. |
Use the normal page flow and avoid clipping ancestors with Hidden or Clip overflow around the sticky section. Leave content above and below the story so it can enter and exit naturally.
Appearance and Code
| Control | Default | Effect |
|---|---|---|
| Appearance → Theme | Carbon | Carbon, Graphite, Paper or Xcode-inspired. |
| Accent Override | Empty | Replaces chapter accents when a colour is provided. |
| Editor Radius | 16 px | Rounds the code editor separately from the preview. |
| Shadow | On | Adds a shadow to the preview frame. |
| Ambient Glow | On | Adds a soft accent glow around the preview. |
| Glow | 0.5 | Ambient light intensity. |
| Code → Font Size | 13 px | Code font size, from 11 to 18 px. |
| Line Numbers | On | Shows numbered code rows. |
| Diff Mode | Off | Enables Added/Removed styling for custom chapters. |
| Preview → Fit | Contain | Contain preserves the full media; Cover fills the frame and crops edges. |
| Preview → Radius | 14 px | Preview corner radius. |
Syntax colouring is lightweight and intended for presentation. Choose Plain Text when coloured tokens are not useful. Long code lines can scroll inside the editor.
Output and Progress
Output → Show is off by default. When enabled, the strip uses the chapter's Output text and the label selected in Mode: Terminal, Output, Console, Request or Response. These are presentation labels; no commands or requests are run.
Progress → Show, Line and Markers are on by default. Thickness defaults to 2 px and Track sets the unfilled colour. The progress indicator is vertical on desktop and horizontal above the cards.
Motion and Video
| Control | Default | Effect |
|---|---|---|
| Transition | Slide + Fade | Slide + Fade, Fade or None between chapters. |
| Duration | 300 ms | Transition duration. |
| Preview Shift | 10 px | Preview movement for Slide + Fade. |
| Code Shift | 10 px | Code movement for Slide + Fade. |
| Activation Line | 50% | Viewport position that selects the active chapter. |
| Autoplay, Loop, Muted | On | Video playback preferences. |
| Controls | Off | Shows native browser video controls when enabled. |
| Play Label, Pause Label | Play, Pause | Labels for the component's accessible playback controls. |
Videos pause when inactive, outside the visible area or in a hidden browser tab. A manual pause is respected. If autoplay is disabled or blocked, the component offers a play button when native controls are hidden. Muted video is the most reliable autoplay configuration.
The visitor's reduced-motion preference disables automatic video playback and simplifies chapter transitions. Use Transition → None for immediate chapter changes regardless of that preference.
Canvas
Framer Canvas shows a static chapter list, code and preview. Canvas → Preview Chapter selects the editing preview only. Canvas does not autoplay videos or show the full scrolling experience; test those in Preview.
Accessibility
Chapter headings, code and progress remain accessible. Outgoing transition layers do not take keyboard focus. Playback buttons have visible focus states. Set Alt Text, ARIA Label, Empty Text, Play Label and Pause Label for your audience; defaults are English. Check contrast again after changing your palette.
Troubleshooting
My chapter edits are not visible
Choose Content → Custom Chapters. The other three Content options use their built-in stories.
The editor and preview do not stick
Check in Preview. Use content-driven height and normal page scrolling; remove Hidden or Clip overflow from ancestors of the story. A narrow component or short viewport intentionally uses cards.
Output or added lines are missing
Enable Output → Show for output text and Code → Diff Mode for custom Added/Removed lines. Number rows from 1 and include the relevant rows in Code.
Video does not autoplay
Upload a web-playable video, enable Autoplay and Muted, and test in Preview. Reduced motion disables autoplay. Use the play button or enable Controls if the browser restricts playback.
An annotation points at the wrong place
Adjust its percentage coordinates after choosing the preview frame and Fit. Uploaded media uses manually positioned callouts; Preview Ring is only for built-in scenes.
FAQ
Does the component compile code or connect to an API?
No. It synchronizes prepared text, code snippets and visual previews. The built-in API and app examples are illustrative.
Can I use my own screenshots and videos?
Yes. Choose Image or Video per custom chapter and provide your own media. Different chapter media types can be mixed.
Is this a complete website template?
No. It is one Framer Code Component. The marketing page layout is not included.
What do I receive?
A private Framer installation link and an access/setup guide through checkout delivery, plus this English and Spanish documentation. No additional package installation is needed inside Framer.
Limitations
- Up to eight custom chapters, four annotations per chapter, and five predefined preview frames.
- Display-only code and file tabs; no compiler, code editor, automatic diff generator, API client or live embedded website.
- Built-in scenes have predefined layouts and copy. Use your own media for a specific product interface.
- Sticky behavior depends on the containing page. Media codecs and autoplay depend on the browser.
- Image and video content scales or crops; it does not reflow like the built-in scenes.
- Xcode-inspired is a visual theme name; this product is independent of Apple.
Need help? Visit support or email ARForge Labs.
Changelog
v1.0
Initial release of Code Demo Narrator.
- Three included stories and up to eight custom chapters.
- Synchronized code, previews, highlighted lines, annotations and diff styling.
- Five preview frames, four themes and a responsive card layout.
- Reduced-motion support and accessible video playback controls.
- English and Spanish documentation and a private Framer installation link delivered after purchase.
arforgelabs.support@proton.me