Video Steps

Description

Video Steps for Framer: interactive video navigation with styled steps.

The Video Steps component allows you to create interactive video timelines with labeled steps that jump to specific timestamps. Perfect for walkthroughs, tutorials, onboarding, and storytelling. Each step is fully customizable—visually and structurally—so you can match your brand and layout with ease.

This component is mobile-responsive and offers horizontal scrolling for steps when needed. It also includes a dynamic progress bar with a draggable control and a tick indicator.

Customization

You can customize all the content:

• Video Source—Upload or use your own hosted url for a MP4, MOV, or WEBM file. External links, such as YouTube or Vimeo, aren’t supported yet.

• Steps—Set step titles, descriptions, and timestamps

• Scrollable Steps—Enable horizontal scroll for mobile

• Minimum Step Width—Control responsive behavior when scroll is enabled

You can customize all the styles:

• Step Background, Padding, and Layout

• Step Counter—Border, font, color, active color, and spacing

• Title—Font, color, active color, margin

• Description—Font and color

• Progress Bar—Color and tick indicator color

Usage

To use the component:

1. Copy and paste it into your Framer canvas.

2. Upload your video file or use a default one.

3. Add and configure your steps in the sidebar.

4. Customize the styling to match your project.

Step Properties

• Title—Text for the step title

• Description—Text

• Timestamp—Time in seconds where the video jumps on click

Step Styles

• Background Color—Step background

• Padding—Inner padding for steps

• Counter—Styles for the step number

• Title—Styles for the step title

• Description—Styles for the step description

Video & Progress

• Video Url — Use your self-hosted video url. Supports .mp4, .mov, and .webm. For better performance, consider hosting your videos on a CDN. External links, such as YouTube or Vimeo, aren’t supported yet.

• Video Upload — Upload a video. Supports .mp4, .mov, and .webm

• Progress Bar Color—Color of the timeline fill

• Progress Tick Color—Color of the draggable tick

Layout

• Scroll Steps—Toggle horizontal scroll for mobile

• Minimum Step Width—Width of each step in scroll mode

This component is ideal for:

• Interactive tutorials

• Feature walkthroughs

• Product showcases

• Course content

• Storytelling experiences