53:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/3xi9_0nh8wp68.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1an0rrmx8vr9j.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/40pcohi_mocbm.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 55:I[468572,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/3xi9_0nh8wp68.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1an0rrmx8vr9j.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/40pcohi_mocbm.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"ProfileContent"] 56:I[607958,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/3xi9_0nh8wp68.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1an0rrmx8vr9j.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/40pcohi_mocbm.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"StickyAside"] 57:I[353821,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/3xi9_0nh8wp68.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1an0rrmx8vr9j.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/40pcohi_mocbm.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"ProfileActivitySection"] 54:T659,

What it does

This component automatically controls video playback and audio based on visibility.

Audio fades in when the video enters view
Audio fades out and mutes when it leaves
Optional pause when out of view
Prevents playback inside Framer canvas (only works in preview/live)
Supports both uploaded files and external video URLs

Why it matters

Most sites with multiple videos feel chaotic because everything plays at once.

This fixes that.

It ensures:

Focus stays on what’s currently visible
No overlapping audio
A smoother, more premium browsing experience

Key Features

Smooth audio fade-in / fade-out
Viewport-based playback control
Upload or URL video support
Autoplay + loop options
Responsive by default
Works perfectly in Framer Preview (disabled in canvas)
Clean object-fit + positioning controls

Perfect for

Landing pages
Case study storytelling
Product showcases
Portfolio sites
Agency websites (especially yours 👀)

Controls Included

Volume
Fade duration
Autoplay toggle
Loop toggle
Pause when out of view
Visibility threshold
Video fit + positioning
Source type (Upload / URL)

52:["$","$L53",null,{"value":{"fallback":{"$inf$activity-creator-25adefba-0cfa-4a60-9fff-72bd259cd5dc-all:/unified/creator/25adefba-0cfa-4a60-9fff-72bd259cd5dc/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:25adefba-0cfa-4a60-9fff-72bd259cd5dc:/unified/posts/?creator=25adefba-0cfa-4a60-9fff-72bd259cd5dc&with=reposts":[{"data":[{"id":"019e1be1-c8c3-78d1-ae7c-a5f231db0022","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"25adefba-0cfa-4a60-9fff-72bd259cd5dc","name":"Urbs Studio","slug":"urbs-studio","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"nl0TefCvkEn3H2m95XuS","resolved":true,"title":"InView Video","body":"$54","bodyJson":null,"introduction":"Video that smartly fades audio in view.","slug":"inview-video","author":{"framerUserId":"25adefba-0cfa-4a60-9fff-72bd259cd5dc","name":"Urbs Studio","slug":"urbs-studio","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/nl0TefCvkEn3H2m95XuS/inview-video-qeH4C84wg3CNCF4wo57x6gVBbCzU3P","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-01T17:47:13.342Z","updatedAt":"2026-05-12T10:41:19.751Z","publishedAt":"2026-05-12T11:10:42.371Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/InView-Video-Eo0m7m.js@8RPLWj70LeflZzLWG5rc","previewUrl":"https://brown-stories-584630.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"8RPLWj70LeflZzLWG5rc","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-12T11:10:42.371Z","updatedAt":"2026-05-12T11:10:42.371Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":["$","$L55",null,{"aside":["$","$L56",null,{"children":[["$","$L57",null,{"creatorId":"25adefba-0cfa-4a60-9fff-72bd259cd5dc","count":5}],"$L58"]}],"creatorId":"25adefba-0cfa-4a60-9fff-72bd259cd5dc","expertsRevampEnabled":true,"hasResourceTabsError":false,"isOwnProfile":false,"preferredFirstTab":null,"resourceSeed":{"type":"component","page":{"data":[{"id":"nl0TefCvkEn3H2m95XuS","title":"InView Video","slug":"inview-video","author":{"name":"Urbs Studio"},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/nl0TefCvkEn3H2m95XuS/inview-video-qeH4C84wg3CNCF4wo57x6gVBbCzU3P"}],"type":"component","attributes":{"price":null,"paymentUrl":null,"remixUrl":"$undefined","previewUrl":"https://brown-stories-584630.framer.app/","url":"https://framer.com/m/InView-Video-Eo0m7m.js@8RPLWj70LeflZzLWG5rc"}}],"pagination":"$4c:props:listing:page:pagination"}},"visibleResourceTabs":{"template":false,"component":true,"plugin":false,"vector":false,"site":false}}]}]