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"] 5e: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

5a:[["$","$L5d",null,{"post":{"id":"019eacab-4d7f-7956-a67a-5ff0b1e23b15","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"339dc8ed-e165-46d2-9c91-e11c83e46c7f","name":"9dm","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":"$5e","bodyJson":null,"introduction":"WebGL bulge reveal · GPU-accelerated","slug":"bulgedistortion","author":{"framerUserId":"339dc8ed-e165-46d2-9c91-e11c83e46c7f","name":"9dm","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":{"h":60,"s":53,"l":39},"width":1600,"height":1200}}],"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":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"LFAiO942KYHMOadDLruB","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"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}}],"$L5f"]

Suggested for you