5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/2obmdiyh47oqt.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T7db,

What it does

BulgeDistortion applies a GPU-accelerated WebGL bulge effect to any image. When the thumbnail enters the viewport it starts in a distorted state and smoothly relaxes back to its natural form — replicating the exact easing that happens when a mouse lifts off a hovered card.

Features

WebGL shader distortion with expo.out easing — the original Codrops curve
Scroll-triggered reveal with threshold, stagger, and replay on revisit
Hover interaction — cursor-tracked bulge that relaxes on mouse leave
Click / tap distort — great for touch devices
UV Zoom — texture zooms in sync with the bulge
Grayscale → color transition on reveal
Hover tint overlay for duotone-style effects
Image fit: Cover, Contain, or Fill
8 CSS entry presets: Fade, Slide Up, Zoom In, Tilt In, Float Up and more
Shared animation loop — one rAF drives all instances, stays fast with 6+ cards on screen
Pauses automatically when the browser tab is hidden
Respects prefers-reduced-motion
Shows the real image in the Framer canvas and on export

How to use

Go to Assets → Code → New File
Paste the component code and save
Drag BulgeDistortion onto any frame
Assign an image and configure in the right panel

Controls

Initial bulge · Intensity · Falloff radius · Focus X / Y · Settle duration · Easing · Stagger slot · Scroll reveal · Replay on revisit · Entry style · UV Zoom · Hover distort · Cursor smoothing · Click / tap · Grayscale → color · Hover tint · Image fit · Corner radius

59:[["$","$L5c",null,{"post":{"id":"019eacab-4d7f-7956-a67a-5ff0b1e23b15","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"339dc8ed-e165-46d2-9c91-e11c83e46c7f","name":"Fabrizzio Zampieri","slug":"fabrizzio-zampieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/339dc8ed-e165-46d2-9c91-e11c83e46c7f/x1uyg0sj","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"HTwW5X8C1haSJM8NF5Tu","resolved":true,"title":"BulgeDistortion","body":"$5d","bodyJson":null,"introduction":"WebGL bulge reveal · GPU-accelerated","slug":"bulgedistortion","author":{"framerUserId":"339dc8ed-e165-46d2-9c91-e11c83e46c7f","name":"Fabrizzio Zampieri","slug":"fabrizzio-zampieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/339dc8ed-e165-46d2-9c91-e11c83e46c7f/x1uyg0sj","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/HTwW5X8C1haSJM8NF5Tu/bulgedistortion-SfR8TjagD5UnDdkDPV0NrVP6Ywz5e8","metadata":{"tint":"hsl(60 53% 39%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-05-20T14:43:09.878Z","updatedAt":"2026-06-09T13:52:42.459Z","publishedAt":"2026-06-09T13:56:08.191Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://bulgedistortion.framer.website/","price":"8","paymentUrl":"https://contra.com/payment-link/rnS5KHt1-bulge-distortion-web-gl-reveal-for-framer","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"LFAiO942KYHMOadDLruB"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-09T13:56:08.191Z","updatedAt":"2026-06-09T13:56:08.191Z","reported":false}}],"$L5e"]

Suggested for you