5b:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0lpbs3388m8i9.js","/creators-assets/_next/static/immutable/chunks/1cyyov0z5q-kt.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/19vaojedolulr.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/09klh1t314i6_.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/15qb5jvtj_j-a.js","/creators-assets/_next/static/immutable/chunks/3p2-jhwmdt2w4.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3nnozhk_k4v6s.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/21ae0xqjlej6m.js","/creators-assets/_next/static/immutable/chunks/3xnhxg14xjx1h.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js"],"PostDetailCard"] 5c:T9b2,

Make people watch before they click.

Video Unlock is a Framer code component that puts your call-to-action on a timer the viewer controls with their attention. The button sits below your video in a clearly locked state — dark and unclickable — and only comes alive once the viewer has watched the percentage you choose. When it unlocks, it animates to your "go" color, swaps its label, gains a soft glow, and becomes a real link.

It's the exact mechanic behind high-converting video sales letters (VSLs), course and cohort launches, and webinar replays: the offer button feels earned, not just shown. Instead of hiding your CTA and hoping people scroll, Video Unlock keeps the reward visible the whole time — the viewer watches the button they're working toward.

Why it converts

The locked → unlocked color change is a visible reward, not a hidden reveal — it pulls the eye the moment it fires.
Anti-Skip stops viewers from dragging the scrubber past what they've actually watched, so "watched 65%" means watched.
Remember saves progress in the browser, so a returning visitor who already watched enough sees the button unlocked right away.

Everything you need, nothing you don't 16 focused controls — no wall of settings. Set your unlock percentage, both button labels (🔒 Keep watching → Get Instant Access), both colors, the link, font, radius, and an optional progress bar. Spacing, shadow, and the unlock animation are tuned in and just work.

What's inside

Self-hosted video player (upload MP4 / WebM / MOV) with optional poster
Two-state CTA button — Locked & Unlocked colors and labels
Adjustable unlock threshold (1–100%)
Anti-Skip — blocks scrubbing past the furthest watched point
Remembers progress across visits
Optional progress bar with custom color
Smooth unlock transition with a subtle "pop"

Setup in under a minute Drop it on the page, upload your video, set your unlock percentage, point the button at your checkout link, and match your brand colors.

58:[["$","$L5b",null,{"post":{"id":"019f8b4d-1176-7342-baf8-b33e6d5e067d","title":null,"body":"

sharing a component I used in a recent project 🔥

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"sharing a component I used in a recent project "},{"type":"emoji","attrs":{"name":"fire","emoji":"🔥"}}]}]},"author":{"framerUserId":"97e3a493-6f6d-443a-8257-3060a65c54b5","name":"Felipe Carvalho","slug":"felipe-carvalho-dsgn","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1093267/avatar-GHWAZERU0LT4tE1CWaJuiID3Yjl7vE.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"VlzpKiwnRK2CkcwPaNoF","resolved":true,"title":"Video Unlock","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Make people watch before they click.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Video Unlock is a Framer code component that puts your call-to-action on a timer the viewer controls with their attention. The button sits below your video in a clearly "},{"type":"text","text":"locked","marks":[{"type":"bold"}]},{"type":"text","text":" state — dark and unclickable — and only comes alive once the viewer has watched the percentage you choose. When it unlocks, it animates to your \"go\" color, swaps its label, gains a soft glow, and becomes a real link."}]},{"type":"paragraph","content":[{"type":"text","text":"It's the exact mechanic behind high-converting "},{"type":"text","text":"video sales letters (VSLs)","marks":[{"type":"bold"}]},{"type":"text","text":", course and cohort launches, and webinar replays: the offer button feels "},{"type":"text","text":"earned","marks":[{"type":"italic"}]},{"type":"text","text":", not just shown. Instead of hiding your CTA and hoping people scroll, Video Unlock keeps the reward visible the whole time — the viewer watches the button they're working toward."}]},{"type":"paragraph","content":[{"type":"text","text":"Why it converts","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The locked → unlocked color change is a visible reward, not a hidden reveal — it pulls the eye the moment it fires."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Anti-Skip","marks":[{"type":"bold"}]},{"type":"text","text":" stops viewers from dragging the scrubber past what they've actually watched, so \"watched 65%\" means watched."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Remember","marks":[{"type":"bold"}]},{"type":"text","text":" saves progress in the browser, so a returning visitor who already watched enough sees the button unlocked right away."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Everything you need, nothing you don't","marks":[{"type":"bold"}]},{"type":"text","text":" 16 focused controls — no wall of settings. Set your unlock percentage, both button labels ("},{"type":"emoji","attrs":{"name":"lock","emoji":"🔒"}},{"type":"text","text":" Keep watching → Get Instant Access), both colors, the link, font, radius, and an optional progress bar. Spacing, shadow, and the unlock animation are tuned in and just work."}]},{"type":"paragraph","content":[{"type":"text","text":"What's inside","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Self-hosted video player (upload MP4 / WebM / MOV) with optional poster"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Two-state CTA button — Locked & Unlocked colors and labels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable unlock threshold (1–100%)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Anti-Skip — blocks scrubbing past the furthest watched point"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Remembers progress across visits"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional progress bar with custom color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth unlock transition with a subtle \"pop\""}]}]},{"type":"listItem","content":[{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Setup in under a minute","marks":[{"type":"bold"}]},{"type":"text","text":" Drop it on the page, upload your video, set your unlock percentage, point the button at your checkout link, and match your brand colors."}]}]},"introduction":"Watch-to-unlock CTA video player","slug":"video-unlock","author":{"framerUserId":"97e3a493-6f6d-443a-8257-3060a65c54b5","name":"Felipe Carvalho","slug":"felipe-carvalho-dsgn","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1093267/avatar-GHWAZERU0LT4tE1CWaJuiID3Yjl7vE.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/97e3a493-6f6d-443a-8257-3060a65c54b5/019f8b4b-c916-7529-a72f-fbe4764b0fa6.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-22T19:28:30.749Z","updatedAt":"2026-07-22T19:28:30.749Z","publishedAt":"2026-07-22T19:28:30.746Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://videounlock.framer.website/","price":"6","paymentUrl":"https://buy.polar.sh/polar_cl_HrV3rp4Yj49HPAer9acqN28sfCZgqlMPUag5v0feqaq","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"ns29Er3LCX2z2BHP2HHb","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":"2026-07-22T19:28:31.606Z","updatedAt":"2026-07-22T19:28:31.606Z","reported":false,"type":"post"}}],"$L5d"]

Suggested for you