5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.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/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.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/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.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/05lj3a0qaa006.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/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.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/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.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:T586,

Glass Before/After Card

A before/after comparison card that follows your cursor. No clicking. Just magic.

The split tracks your mouse, the card tilts gently in 3D, and a soft glow follows along. Touch users get tap and drag. Everyone gets the same premium feel.

Three opinionated presets: Subtle, Glass, Showcase. Switch the vibe with one click.

Features

🪄 Cursor-following split, no drag required
🎴 Subtle 3D tilt that tracks your pointer
💎 Three presets: Subtle, Glass, Showcase
📐 Six aspect ratios + Auto + Fit Content support
📱 Touch & pen ready. Tap to jump, drag anywhere

Made for

Portfolios · AI tools · Product launches · Photo retouching · UI redesigns · Architecture · Color grading · Anywhere you need to say "this became this."

Quick start

1. Drop the component onto the canvas

2. Add your before & after images

3. Pick a style and aspect ratio

4. Publish

No setup. No CSS. Works in Fixed, Fill, and Fit Content.

Tips

Use matching aspect ratios for both images
Glass and Showcase shine on dark backgrounds
Keep labels short: Before / After, Original / Edited

5a:[["$","$L5d",null,{"post":{"id":"019e1ba5-49b8-7f8b-9692-3fc2fbd4d3bc","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"fb8f22be-3bf2-4930-aaf7-53f69bf01575","name":"Tuna Erhanoglu","slug":"tuna-erhanoglu","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/853052/89c20f71768db381d0cc14e6a5500edb-0tbLrkIzEO5iWVPioqQ8CvVjXrltrR","followed":false,"followsYou":false},"media":[],"resources":[{"id":"YGmNUJpoaZEvZ2Eg4x5p","resolved":true,"title":"Glass Before After","body":"$5e","bodyJson":null,"introduction":"Glass UI Interactive Before/After Card","slug":"glass-before-after","author":{"framerUserId":"fb8f22be-3bf2-4930-aaf7-53f69bf01575","name":"Tuna Erhanoglu","slug":"tuna-erhanoglu","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/853052/89c20f71768db381d0cc14e6a5500edb-0tbLrkIzEO5iWVPioqQ8CvVjXrltrR","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/YGmNUJpoaZEvZ2Eg4x5p/glass-before-after-U91BnbpVWXD8BMdQDpTQS6tBmMWEHy","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-04T22:40:48.047Z","updatedAt":"2026-05-12T09:15:43.319Z","publishedAt":"2026-05-12T10:04:37.688Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Glass-Before-After-Card-5eDDYQ.js@dnMT3fC2qm5csrP9nrXO","previewUrl":"https://glass-before-after.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"dnMT3fC2qm5csrP9nrXO","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-12T10:04:37.688Z","updatedAt":"2026-05-12T10:04:37.688Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019e1ba5-49b8-7f8b-9692-3fc2fbd4d3bc"},"postId":"019e1ba5-49b8-7f8b-9692-3fc2fbd4d3bc","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you