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"] 5f:I[539959,["/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"],"CommentSection"] 5e:T63d,

Hybrid Media Comparison is the ultimate Before/After slider for Framer. Unlike standard sliders, it seamlessly handles Images and Videos, offering a premium, interactive experience for showcasing renovations, retouching, color grading, or design iterations.

Key Features

Compare Image-to-Image, Image-to-Video, or Video-to-Video.
Unique "Play on Reveal" logic making video comparisons engaging and performant.
Control handle shape, icon type (arrows, chevron, dots), colors, and opacity.
Optional "Before/After" labels with customizable positioning, styling, and backdrop blur simulations.
Works perfectly on mobile, tablet, and desktop with smooth gestures.
Supports both Horizontal and Vertical comparison modes.

Usage

Copy & Paste the component URL onto your canvas.
Select your media type (Image or Video) for both sides.
Upload your assets or paste URLs.
Customize the Handle, Overlay, and Labels to match your brand.
Enable Hybrid Sync to autoplay videos only when interacting.

Customization Options

Handle: Square, Rounded, or Circle shapes. Custom icons.
Labels: Adjust text, font size, background opacity (using color alpha), and border.
Overlay: Add a subtle color overlay to the unrevealed side.

5a:[["$","$L5d",null,{"post":{"id":"019bb29c-e062-7191-9ced-fb48609c0446","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d95cfc43-69c3-4ff4-ac0a-76a13cfd5d26","name":"CodePerfect","slug":"code-perfect","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1390421/avatar-6rFGKMnHu9nxku5dQctcxcF3mSQq7i.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"shVzxjJDlH0hci7eqxC6","resolved":true,"title":"Hybrid Media Slider","body":"$5e","bodyJson":null,"introduction":"The universal comparison tool for images","slug":"hybrid-media-slider","author":{"framerUserId":"d95cfc43-69c3-4ff4-ac0a-76a13cfd5d26","name":"CodePerfect","slug":"code-perfect","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1390421/avatar-6rFGKMnHu9nxku5dQctcxcF3mSQq7i.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/shVzxjJDlH0hci7eqxC6/hybrid-media-slider-oKV8hKGdCUgfE9IBhj5ScWrq7Xud4I","metadata":{"tint":{"h":240,"s":26,"l":65},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-20T04:59:24.320Z","updatedAt":"2026-02-13T02:06:54.345Z","publishedAt":"2026-01-12T14:29:44.162Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://hybrid-comparison.framer.website","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_1qzU42kEUTZlKfdYzGjAw2tSTVmF6KHRT43zs1V8ACS","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"RuGzRlzmrJ47HzgeRTpI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-12T14:29:44.162Z","updatedAt":"2026-01-12T14:29:44.162Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019bb29c-e062-7191-9ced-fb48609c0446"},"postId":"019bb29c-e062-7191-9ced-fb48609c0446","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you