WebGL Image Slider

Preview URL - https://diverse-area-940302.framer.app/

A premium WebGL image slider/carousel featuring stunning chromatic RGB split effects, dynamic distortion, and buttery-smooth drag interactions. Showcase your portfolio with style. Includes clickable titles, greyscale mode, and full customization. Optimized for all devices.

How to Use This Component

Quick Start Guide:

1. Add to Canvas

• Drag the component onto your Framer canvas

• Component automatically adjusts to your layout width

1. Upload Your Images

• Click on "Images" in the property panel

• Add/remove image items as needed

• Upload images using the Image picker

• Add titles and optional links for each image

1. Customize Effects

• Adjust "Distortion" slider for skew intensity (0-10)

• Control "RGB Split" for chromatic aberration effect (0-5)

• Toggle "Image Greyscale" for black & white mode

1. Configure Interactions

• Set "Friction" to control slide momentum (0.8-0.99)

• Adjust "Max Vel" for drag speed limits

• Enable "Image Link" to make titles clickable

1. Style Your Slider

• Set "Width" for individual image size (100-800px)

• Adjust "Gap" between images (0-200px)

• Customize "Title Font", "Title Color", and "Transform"

• Change "Background" color as needed

1. Test & Publish

• Drag horizontally to test the slider

• Preview on different devices (mobile-optimized)

• Publish your site - effects work in live preview!

🎨 Perfect For:

• Portfolio websites

• Agency showcases

• Photography galleries

• Product presentations

• Creative studios

• Design showcases

• Case study displays

After your purchase, you will receive a link to the Component URL.

Copy URL and paste it to your Framer Project.

Need help?

For any setup issues or questions, feel free to contact for support.