5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T8a2,

Turn scroll position into motion frame-scrubbed video, looping video, or a static hero photo, one component, three variants. Drop in, customise, publish.

EG. Scroll video for desktop & tablet but a normal video for phone breakpoint.

Hero video sections usually force a choice: a heavy scroll-scrubbed sequence everywhere, or a stripped-down fallback for anyone on a slower connection or a smaller screen. Volumen removes that trade-off by giving you three variants in one component the full frame-by-frame Scroll Video experience, a plain looping Video, or a static Photo so the same component can carry your flagship desktop hero and your lightweight mobile fallback without becoming two separate builds.

Scroll Video extracts frames from your uploaded clip client-side and syncs them to scroll position with optional smoothing, so it reads as a single continuous motion rather than a video player pretending to scrub. Video and Photo strip all of that away entirely no extraction, no canvas, no scroll math for the edge cases where you just want something simple and fast on screen.

Underneath, Volumen adapts to the device and connection it's running on: frame count and resolution scale down automatically on phones and tablets, slow connections get a streamed source instead of a full pre-download.

What's Inside

Three variants, one component - switch between Scroll Video, Video, and Photo from a single dropdown; irrelevant controls hide themselves per variant so the property panel never feels cluttered.
Frame-accurate scroll scrubbing - Scroll Video maps scroll position directly to a decoded frame index, with an optional smoothing toggle for interpolated motion instead of hard frame-snapping.
Adaptive performance profiling - frame count and resolution automatically scale down on mobile/tablet viewports; slow or metered connections switch to a streamed source instead of a full pre-download.

59:[["$","$L5c",null,{"post":{"id":"019f5bde-8be8-712a-aec8-2a5182818620","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"dc756cc3-0e70-4d81-b856-067a3159f858","name":"Jane","slug":"jane-muthoni-muchiri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1587759/avatar-ztz6FeQVn24ahnOtuJ0eSgcXcREr4C.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"93WPg2JxvuNw7EemLk9E","resolved":true,"title":"Volumen Scroll Video","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn scroll position into motion frame-scrubbed video, looping video, or a static hero photo, one component, three variants. Drop in, customise, publish. "}]},{"type":"paragraph","content":[{"type":"text","text":"EG. Scroll video for desktop & tablet but a normal video for phone breakpoint. "}]},{"type":"paragraph","content":[{"type":"text","text":"Preview link","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://volumen-video-scroll.framer.website/","target":"_blank"}}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Hero video sections usually force a choice: a heavy scroll-scrubbed sequence everywhere, or a stripped-down fallback for anyone on a slower connection or a smaller screen. Volumen removes that trade-off by giving you three variants in one component the full frame-by-frame Scroll Video experience, a plain looping Video, or a static Photo so the same component can carry your flagship desktop hero and your lightweight mobile fallback without becoming two separate builds."}]},{"type":"paragraph","content":[{"type":"text","text":"Scroll Video extracts frames from your uploaded clip client-side and syncs them to scroll position with optional smoothing, so it reads as a single continuous motion rather than a video player pretending to scrub. Video and Photo strip all of that away entirely no extraction, no canvas, no scroll math for the edge cases where you just want something simple and fast on screen."}]},{"type":"paragraph","content":[{"type":"text","text":"Underneath, Volumen adapts to the device and connection it's running on: frame count and resolution scale down automatically on phones and tablets, slow connections get a streamed source instead of a full pre-download."}]},{"type":"paragraph","content":[{"type":"text","text":"What's Inside","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three variants, one component","marks":[{"type":"bold"}]},{"type":"text","text":" - switch between Scroll Video, Video, and Photo from a single dropdown; irrelevant controls hide themselves per variant so the property panel never feels cluttered."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Frame-accurate scroll scrubbing","marks":[{"type":"bold"}]},{"type":"text","text":" - Scroll Video maps scroll position directly to a decoded frame index, with an optional smoothing toggle for interpolated motion instead of hard frame-snapping."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adaptive performance profiling","marks":[{"type":"bold"}]},{"type":"text","text":" - frame count and resolution automatically scale down on mobile/tablet viewports; slow or metered connections switch to a streamed source instead of a full pre-download."}]}]}]}]},"introduction":"Scroll becomes the scrubber","slug":"volumen-scroll-video","author":{"framerUserId":"dc756cc3-0e70-4d81-b856-067a3159f858","name":"Jane","slug":"jane-muthoni-muchiri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1587759/avatar-ztz6FeQVn24ahnOtuJ0eSgcXcREr4C.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dc756cc3-0e70-4d81-b856-067a3159f858/019f5cf8-c8b6-7639-98f7-815f8911951a.png","metadata":{"tint":"hsl(0 0% 3%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-07-13T14:25:38.881Z","updatedAt":"2026-07-13T19:34:05.842Z","publishedAt":"2026-07-13T14:25:38.865Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://volumen-video-scroll.framer.website","price":"16","paymentUrl":"https://janemuso.lemonsqueezy.com/checkout/buy/97282afd-3843-4838-91fd-fddd11edc068","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"U79vqNwKvDjNpQqtTo11"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-13T14:25:39.304Z","updatedAt":"2026-07-13T14:25:39.304Z","reported":false}}],"$L5e"]

Suggested for you