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:T82c,

About this Component

Scroll Video Hero turns a simple hero or showreel into a cinematic scroll interaction. The media begins compact, follows the cursor on desktop, then scales smoothly into place while its labels resize with the scroll. The same reveal is responsive on mobile with touch-friendly motion and mobile-specific positioning.

Perfect For

Portfolios, creative studios, agencies, showreels, case studies and landing pages.

Key Features

Scroll-driven media scale reveal
Responsive desktop + mobile animation
Smooth desktop mouse-follow parallax
Upload MP4, WebM, MOV or OGG, or use an embed URL
Optional poster image and fallback state
Adjustable aspect ratio, radius, fit, colors, padding and typography
Separate desktop/mobile positioning and animation sizing
Autoplay, mute and loop controls for uploaded/native video
Static-renderer fallback and reduced-motion support
Optimized offscreen updates

How It Works

Add the component to your page, choose your media, then customize Content, Media, Style, Position, Animation, Mouse Follow and Playback directly in Framer. Scroll controls the reveal automatically—no external triggers or overrides required.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

Because this is a digital product, all sales are final. Refunds are only considered for a confirmed critical technical issue that prevents the component from working as described and cannot be resolved. Report the issue with evidence within 14 days of purchase. Refunds are not provided for change of mind, accidental purchases, aesthetic preferences, incorrect setup, modifications or features not listed above.

5a:[["$","$L5d",null,{"post":{"id":"01a0bd3c-934e-772d-9051-4546d34fd3ec","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"O9ivpbHOK2muKAwfKLn6","resolved":true,"title":"Scroll Video Hero","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview Demo","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://informal-designer-206486.framer.app","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Scroll Video Hero turns a simple hero or showreel into a cinematic scroll interaction. The media begins compact, follows the cursor on desktop, then scales smoothly into place while its labels resize with the scroll. The same reveal is responsive on mobile with touch-friendly motion and mobile-specific positioning."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Portfolios, creative studios, agencies, showreels, case studies and landing pages."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven media scale reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive desktop + mobile animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth desktop mouse-follow parallax"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload MP4, WebM, MOV or OGG, or use an embed URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional poster image and fallback state"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable aspect ratio, radius, fit, colors, padding and typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Separate desktop/mobile positioning and animation sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay, mute and loop controls for uploaded/native video"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static-renderer fallback and reduced-motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized offscreen updates"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Add the component to your page, choose your media, then customize Content, Media, Style, Position, Animation, Mouse Follow and Playback directly in Framer. Scroll controls the reveal automatically—no external triggers or overrides required."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Because this is a digital product, all sales are final. Refunds are only considered for a confirmed critical technical issue that prevents the component from working as described and cannot be resolved. Report the issue with evidence within 14 days of purchase. Refunds are not provided for change of mind, accidental purchases, aesthetic preferences, incorrect setup, modifications or features not listed above."}]},{"type":"paragraph"}]},"introduction":"Cinematic video reveal on scroll","slug":"scroll-video-hero","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0bd3c-8102-7226-8805-17535f80590e.png","metadata":{"tint":{"h":0,"s":93,"l":24},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-20T05:14:18.239Z","updatedAt":"2026-09-20T05:14:18.239Z","publishedAt":"2026-09-20T05:14:18.236Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://informal-designer-206486.framer.app","price":"13","paymentUrl":"https://contra.com/payment-link/8IiTrIGR-scroll-video-hero-cinematic-video-reveal-on-scroll","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"7JTNdR8EPuMD8wC8Dd7r","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-20T05:14:18.830Z","updatedAt":"2026-09-20T05:14:18.830Z","reported":false}}],"$L5f"]

Suggested for you