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

Reveal static images with an interactive, retro-futuristic WebGL pixel grid transition featuring custom curtain wipes, dynamic pixel resolution, and cinematic easing.

Features

Custom GLSL shader pixelation transition
Smooth colored curtain reveal wipe
Pristine anti-aliased pixel grid overlay
Dynamic resolution stepping from coarse to sharp
Automatic zero-lag viewport scroll triggers
Interactive hover and click trigger modes
Smart aspect ratio handling with cover and stretch modes
Automatic GPU memory management and cleanup
Built-in prefers-reduced-motion accessibility support
Static preview rendering support for Framer canvas

Customization Options

Custom reveal curtain wipe color
Coarse start and fine end pixel density
Pixel transition step counts
Grid line width and visibility percentage
Animation duration and entrance delay
Viewport, image load, hover, and click trigger types
Image fit modes (cover or stretch)
Viewport replay on scroll toggle
Canvas static progress preview slider
Max texture limit and device pixel ratio capping

How to Use

Drop the component onto your Framer canvas
Choose your image directly inside the properties panel
Pick your brand color for the reveal curtain wipe
Fine-tune the pixel density, steps, and grid thickness
Set your preferred trigger to in-view, load, hover, or click
Publish to deliver a silky-smooth WebGL entrance effect

Use Cases

High-impact hero section photography
Creative design portfolio project showcases
Editorial and fashion lookbook reveals
Modern SaaS feature spotlights
Interactive agency case study grids
E-commerce product visual drops
Dark mode retro-tech aesthetic headers
Engaging hover cards and interactive galleries

5a:[["$","$L5d",null,{"post":{"id":"01a1161c-df2c-746f-9085-40abac3edee0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"VDFpI7RE9czMNkWICHhE","resolved":true,"title":"Pixel Reveal Image","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal static images with an interactive, retro-futuristic WebGL pixel grid transition featuring custom curtain wipes, dynamic pixel resolution, and cinematic easing."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom GLSL shader pixelation transition"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth colored curtain reveal wipe"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pristine anti-aliased pixel grid overlay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic resolution stepping from coarse to sharp"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic zero-lag viewport scroll triggers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hover and click trigger modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart aspect ratio handling with cover and stretch modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic GPU memory management and cleanup"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in prefers-reduced-motion accessibility support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static preview rendering support for Framer canvas"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customization Options","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom reveal curtain wipe color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Coarse start and fine end pixel density"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pixel transition step counts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid line width and visibility percentage"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation duration and entrance delay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Viewport, image load, hover, and click trigger types"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image fit modes (cover or stretch)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Viewport replay on scroll toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas static progress preview slider"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Max texture limit and device pixel ratio capping"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose your image directly inside the properties panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick your brand color for the reveal curtain wipe"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fine-tune the pixel density, steps, and grid thickness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set your preferred trigger to in-view, load, hover, or click"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish to deliver a silky-smooth WebGL entrance effect"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-impact hero section photography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative design portfolio project showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial and fashion lookbook reveals"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern SaaS feature spotlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive agency case study grids"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"E-commerce product visual drops"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark mode retro-tech aesthetic headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Engaging hover cards and interactive galleries"}]}]}]}]},"introduction":"Cinematic WebGL pixel grid reveal","slug":"pixel-reveal-image","author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/01a1161b-ef2c-72ce-9d6c-f126a962d82b.png","metadata":{"tint":{"h":0,"s":0,"l":17},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-07T11:25:52.628Z","updatedAt":"2026-10-07T11:25:52.628Z","publishedAt":"2026-10-07T11:25:52.625Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Wdscs-AAbQBd.js@R5NyjsNPHGXNyXaL1lpW","previewUrl":"https://modern-day-809574.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"R5NyjsNPHGXNyXaL1lpW","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-07T11:25:53.324Z","updatedAt":"2026-10-07T11:25:53.324Z","reported":false}}],"$L5f"]

Suggested for you