Skip to content

RGB Warp Carousel

Curved image carousel with RGB spl

Summary

WebGL image slider/carousel featuring stunning chromatic RGB split effects, dynamic distortion, and buttery-smooth drag interactions.

Description

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.

Rank history How rankings work →

125015001750190268/149/59/2710/1911/10
  • All · #9026

Details

More like this