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:T9fe,

Wave Transition FX is a premium WebGL image transition component designed for modern Framer projects. It delivers smooth, cinematic hover and click transitions using real-time displacement effects powered by Three.js and GSAP.

Features

8 handcrafted transition presets
Real-time hover, click, or auto playback modes
True image-accurate rendering (no color shifts or contrast changes)
Fill, Fit, Crop, and Tile image modes
Adjustable transition strength, angles, timing, and easing
High-performance rendering with quality controls
Works perfectly in both Framer Canvas and Preview

How to Use

Upload Image A and Image B
Select a transition preset
Click a number to switch effects
Hover the image to preview the transition

Perfect For

Hero sections
Portfolio showcases
Product reveals
Interactive galleries
Premium landing pages

Built for creators who want visually rich interactions without compromising performance or image quality.

Controls

Quality – Adjust rendering quality (Low / Medium / High)
Image A – Primary image
Image B – Secondary image for transition
Transition – Choose from 8 handcrafted transition effects
Trigger – Start animation on Hover, Click, or Auto
Mode – Forward or Toggle behavior
Duration – Control transition speed
Ease – Animation easing style
Delay – Add delay before animation starts
Reverse – Automatically reverse on hover out
Strength – Transition distortion intensity
Angle 1 – Direction angle for first displacement vector
Angle 2 – Direction angle for second displacement vector
Fit – Image layout mode (Crop / Fit / Fill / Tile)
Scale – Zoom level of the image
Pos X – Horizontal image offset
Pos Y – Vertical image offset

5a:[["$","$L5d",null,{"post":{"id":"019bfd7f-6336-7044-91c4-e367b815f96b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f80a15fa-e4be-4492-872d-e5912e1de472","name":"mehul","slug":"justmehul","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f80a15fa-e4be-4492-872d-e5912e1de472/7x1q6wbi","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fWdmtNed5To7srFkgVDQ","resolved":true,"title":"Hover Transitions","body":"$5e","bodyJson":null,"introduction":"WebGL image transitions on hover","slug":"hover-transitions","author":{"framerUserId":"f80a15fa-e4be-4492-872d-e5912e1de472","name":"mehul","slug":"justmehul","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f80a15fa-e4be-4492-872d-e5912e1de472/7x1q6wbi","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fWdmtNed5To7srFkgVDQ/hover-transitions-whw6SottSJ0GiBhVYM6t8pv8RH8ZRW","metadata":{"tint":{"h":270,"s":67,"l":14},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-31T11:21:03.780Z","updatedAt":"2026-02-25T06:58:29.858Z","publishedAt":"2026-01-27T03:29:02.774Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/WaveTransitionPack-fWGD.js@xGMQlO4Zwnd20g46i0WI","previewUrl":"https://imagetransitionpack.framer.website?via=justmehul","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"xGMQlO4Zwnd20g46i0WI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-27T03:29:02.774Z","updatedAt":"2026-01-27T03:29:02.774Z","reported":false}}],"$L5f"]

Suggested for you