5c: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"] 5d:Tae4,

A professional-grade WebGL slider engineered for Framer creators who want motion, mood, and visual impact without sacrificing performance. Featuring over 30 handcrafted shader transitions, this component brings cinematic production value to image sequences from smooth fades and liquid distortions to particle-style dissolves and experimental refractive wipes.

Every detail is configurable: thumbnails, layout, timing, padding, UI, and transition modes. Fully responsive, GPU-accelerated, and optimised for Framer preview and live browser performance. Just drop it in, add your images, choose a transition, and your site instantly feels premium.

Perfect for photographers, designers, studios, product launches, brand campaigns, and anyone who wants their work to feel alive.FeaturesWebGL Transitions

30+ cinematic shader transitions (liquid, ripple, pixelate, wipe, swirl, dissolves, glass distort, prism wipe, iris shutter, and more)
All transitions GPU-accelerated for smooth browser performance
Zero-flash, zero-flicker frame handling via custom WebGL logic

Image & Layout Control

Fully responsive canvas with object-fit cover logic
Adjustable padding, border radius, and background
Custom thumbnail system with 9 placement modes
Optional vertical stack mode

Content Display

Titles and statuses per slide
Automatic layout for labels in all thumb modes
Toggle text visibility in vertical layouts
Fine control over typography

Thumbnail System

Customizable size, spacing, radius, highlight, overlays, and animations
Auto-progress overlay for autoplay mode
Clean, minimal, accessible design

Playback & Interaction

Manual navigation or full autoplay
Customizable transition duration
Smooth easing curves
Transition selector UI already built in

Developer Quality

Clean, commented code architecture
Built for stability: safeguards for WebGL rebuilds & texture loading
No external dependencies beyond Three.js
Memory-safe texture handling

Perfect For

Photography portfolios
Cinematic hero sections
Product reveals
Fashion/editorial pages
Studios, agencies, and personal sites
Story-driven scroll experiences

59:[["$","$L5c",null,{"post":{"id":"019e255a-9e6f-7b82-92e0-2ded6ffdea31","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4d4d9333-ef11-4e84-9c52-2a026fb91e1f","name":"Lee Black","slug":"leeblack","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/72198/avatar-tITRI6fWrDA7ScuROCY5fJUlpsKNXj.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"fBUSRBz0L8EWfpqDZIUB","resolved":true,"title":"Distorto Slider FX","body":"$5d","bodyJson":null,"introduction":"A WebGL slider engineered for Framer","slug":"distorto-slider-fx","author":{"framerUserId":"4d4d9333-ef11-4e84-9c52-2a026fb91e1f","name":"Lee Black","slug":"leeblack","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/72198/avatar-tITRI6fWrDA7ScuROCY5fJUlpsKNXj.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fBUSRBz0L8EWfpqDZIUB/distorto-slider-fx-QG0vM2c7XYMYO9mg9MHLZObDe0uTVL","metadata":{"tint":{"h":54,"s":91,"l":17},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-19T08:17:50.952Z","updatedAt":"2026-05-14T07:19:07.145Z","publishedAt":"2026-05-14T07:19:16.335Z","featuredAt":"2026-06-15T14:06:46.720Z","approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://wondrous-beaver-606599.framer.app","price":"10","paymentUrl":"https://www.1042.studio/store/distorto-slider-fx","workshop":true,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"6chvF8VXWQyhZZxxShFX","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":160,"liked":false},"comments":{"count":10},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-14T07:19:16.335Z","updatedAt":"2026-05-14T07:19:16.335Z","reported":false}}],"$L5e"]

Suggested for you