5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tbe3,

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:

Copy and paste it into your Framer canvas.
Upload your video file or use a default one.
Add and configure your steps in the sidebar.
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

5a:[["$","$L5d",null,{"post":{"id":"019a4c06-382d-71a0-a96f-74e428fae482","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7c929c23-1162-47a4-b459-a0651efe64aa","name":"Concealed","slug":"concealed","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1242931/avatar-UwgSqFrdUyvuNG93m0Z8JtGKDbBCSt.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Vu7qlVBeNsNCKPj5GTy6","resolved":true,"title":"Video Steps","body":"$5e","bodyJson":null,"introduction":"Jump to any key video moment.","slug":"video-steps","author":{"framerUserId":"7c929c23-1162-47a4-b459-a0651efe64aa","name":"Concealed","slug":"concealed","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1242931/avatar-UwgSqFrdUyvuNG93m0Z8JtGKDbBCSt.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Vu7qlVBeNsNCKPj5GTy6/video-steps-I33WSW8WmZycNk07C6OBuNySOHEioG","metadata":{"tint":{"h":240,"s":50,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-06T11:22:56.284Z","updatedAt":"2026-04-14T12:23:14.709Z","publishedAt":"2025-11-03T23:21:07.373Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://responsible-evolution-750827.framer.app/","price":"12","paymentUrl":"https://buy.polar.sh/polar_cl_j3q2gtGca14iuWU5PNh4CIPyiPB8qwpKWQOSe1v1F4R","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"JFUQWZqov3KYoOHFK2IB","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-03T23:21:07.373Z","updatedAt":"2025-11-03T23:21:07.373Z","reported":false}}],"$L5f"]

Suggested for you