61:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 62:T92c,

A responsive hero video background, done properly.

Hero Video Pro loads a different video file on desktop, tablet, and mobile — so users don't download a 20MB file on their phone. Seven fade styles, per-breakpoint art direction, and the annoying edge cases (Safari autoplay, SSR, missing sources) handled for you.

What's included

Per-breakpoint videos — separate desktop / tablet / mobile files, uploaded to Framer or linked from a URL
Per-breakpoint posters — fast first paint before video loads
Per-breakpoint crop — nine object-position values per device
Seven fade styles — none, left, right, top, bottom, vignette, full — with control over reach, colour, intensity
SSR-safe — no hydration warnings in Framer's static export
Autoplay-hardened — handles iOS / Safari autoplay and empty-source edge cases
ResizeObserver-guarded — works where ResizeObserver isn't available

Start simple, add detail later

You don't have to fill every field. Blanks fall back sensibly:

One video? Upload as Desktop. Tablet and mobile use the same file.
Two videos? Desktop + Mobile — tablet falls back to Desktop.
Full art direction? Upload all three.
Crop and fades follow the same rule — set Desktop, override tablet/mobile only where needed.

Rule of thumb: Desktop is the base, tablet overrides desktop, mobile overrides tablet.

How to use it

Copy the component URL
Paste it onto your Framer canvas (or Assets → Insert URL)
Set Width to Fill so per-breakpoint logic activates
Upload a video (or paste a URL)
Optionally add tablet/mobile videos, posters, and a fade style

Support: graymatterlogic@gmail.com — response within two working days.

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-98fd6926-35a8-4d50-ac0f-c1e9236cc629-all:/unified/creator/98fd6926-35a8-4d50-ac0f-c1e9236cc629/activity/":[{"data":[{"id":"019f7fe4-57c5-774e-a96e-2a8632ada0ad","type":"component.created","target":{"type":"component","id":"GlRCbSexIIUvkuvo5u8N","preview":"Hero Video Pro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/98fd6926-35a8-4d50-ac0f-c1e9236cc629/019f7fe3-60b8-7413-b4db-0f0c47043ce9.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"98fd6926-35a8-4d50-ac0f-c1e9236cc629","name":"Tayyeba Shoaib","avatar":null,"slug":"tayyeba-shoaib","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-20T14:18:18.949Z","latestAt":"2026-07-20T14:18:18.949Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:98fd6926-35a8-4d50-ac0f-c1e9236cc629:/unified/posts/?creator=98fd6926-35a8-4d50-ac0f-c1e9236cc629&with=reposts":[{"data":[{"id":"019f7fe4-562b-746b-afac-4c07b695036f","title":null,"body":"

Just shipped Hero Video Pro — a responsive hero video background that actually loads a different file on desktop, tablet, and mobile. So your users don't download a 20MB desktop video on their phone.

Seven fade styles, per-breakpoint art direction, and the annoying edge cases (Safari autoplay, SSR) handled for you.

$5 — link in the details 👇

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just shipped Hero Video Pro — a responsive hero video background that actually loads a different file on desktop, tablet, and mobile. So your users don't download a 20MB desktop video on their phone. ","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Seven fade styles, per-breakpoint art direction, and the annoying edge cases (Safari autoplay, SSR) handled for you. ","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"$$5 — link in the details ","marks":[{"type":"code"}]},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]}]},"author":{"framerUserId":"98fd6926-35a8-4d50-ac0f-c1e9236cc629","name":"Tayyeba Shoaib","slug":"tayyeba-shoaib","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"GlRCbSexIIUvkuvo5u8N","resolved":true,"title":"Hero Video Pro","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A responsive hero video background, done properly.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Hero Video Pro loads a different video file on desktop, tablet, and mobile — so users don't download a 20MB file on their phone. Seven fade styles, per-breakpoint art direction, and the annoying edge cases (Safari autoplay, SSR, missing sources) handled for you."}]},{"type":"customHeading","content":[{"type":"text","text":"What's included","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Per-breakpoint videos","marks":[{"type":"bold"}]},{"type":"text","text":" — separate desktop / tablet / mobile files, uploaded to Framer or linked from a URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Per-breakpoint posters","marks":[{"type":"bold"}]},{"type":"text","text":" — fast first paint before video loads"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Per-breakpoint crop","marks":[{"type":"bold"}]},{"type":"text","text":" — nine object-position values per device"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Seven fade styles","marks":[{"type":"bold"}]},{"type":"text","text":" — none, left, right, top, bottom, vignette, full — with control over reach, colour, intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SSR-safe","marks":[{"type":"bold"}]},{"type":"text","text":" — no hydration warnings in Framer's static export"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay-hardened","marks":[{"type":"bold"}]},{"type":"text","text":" — handles iOS / Safari autoplay and empty-source edge cases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"ResizeObserver-guarded","marks":[{"type":"bold"}]},{"type":"text","text":" — works where ResizeObserver isn't available"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Start simple, add detail later","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"You don't have to fill every field. Blanks fall back sensibly:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One video?","marks":[{"type":"bold"}]},{"type":"text","text":" Upload as Desktop. Tablet and mobile use the same file."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Two videos?","marks":[{"type":"bold"}]},{"type":"text","text":" Desktop + Mobile — tablet falls back to Desktop."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full art direction?","marks":[{"type":"bold"}]},{"type":"text","text":" Upload all three."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Crop and fades","marks":[{"type":"bold"}]},{"type":"text","text":" follow the same rule — set Desktop, override tablet/mobile only where needed."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Rule of thumb:","marks":[{"type":"bold"}]},{"type":"text","text":" Desktop is the base, tablet overrides desktop, mobile overrides tablet."}]},{"type":"customHeading","content":[{"type":"text","text":"How to use it","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Copy the component URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paste it onto your Framer canvas (or Assets → Insert URL)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set "},{"type":"text","text":"Width to Fill","marks":[{"type":"bold"}]},{"type":"text","text":" so per-breakpoint logic activates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload a video (or paste a URL)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optionally add tablet/mobile videos, posters, and a fade style"}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Support:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"graymatterlogic@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:graymatterlogic@gmail.com","target":"_blank"}}]},{"type":"text","text":" — response within two working days."}]}]},"introduction":"Responsive video hero with fades","slug":"hero-video-pro","author":{"framerUserId":"98fd6926-35a8-4d50-ac0f-c1e9236cc629","name":"Tayyeba Shoaib","slug":"tayyeba-shoaib","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/98fd6926-35a8-4d50-ac0f-c1e9236cc629/019f7fe3-60b8-7413-b4db-0f0c47043ce9.png","metadata":{"tint":{"h":46,"s":94,"l":28},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-20T14:18:18.126Z","updatedAt":"2026-07-20T22:21:26.954Z","publishedAt":"2026-07-20T14:18:18.122Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://hero-video-pro.framer.website/","price":"5","paymentUrl":"https://buy.stripe.com/6oU3cw5qKc4d5Gtao17Re00","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"qLPml5E21oHScmIMh5xJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-20T14:18:18.539Z","updatedAt":"2026-07-20T14:18:18.539Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L63"}]