---
title: "Liquid Hero Slider — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Agung M · Carousels. Liquid Distortion WebGL Slider"
canonical: "https://framer.elliotli.dev/component/liquid-hero-slider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Liquid Hero Slider

# Liquid Hero Slider

Liquid Distortion WebGL Slider

[View on Framer](https://framer.com/marketplace/components/liquid-hero-slider/?via=elliot-li)

![Liquid Hero Slider preview image 1](https://framer.elliotli.dev/og/component/liquid-hero-slider/b56c10a5433e867a/1600x1200.jpg)

## Summary

Liquid Distortion WebGL Slider

## Description

### Experience the Fluidity of WebGL

Elevate your website’s first impression with the **Liquid Distortion WebGL Slider**. This isn't just another carousel; it’s a high-performance visual experience that uses custom shaders to create organic, ripple-like transitions between your images. Designed for creators who want that "award-winning agency" look without writing a single line of shader code.

### Core Highlights

-   **Immersive Liquid Transitions:** Powered by WebGL for ultra-smooth, high-frame-rate distortion effects that react to your slides.
    
-   **Dual Interaction Modes:** Choose between intuitive **Drag/Swipe** gestures or classic **Navigation Arrows** (with Keyboard support).
    
-   **Extensive Customization:** Control everything from the ripple scale and distortion strength to the animation speed directly from the Framer sidebar.
    
-   **Performance First:** Built-in useInView optimization ensures the WebGL canvas only runs when visible, keeping your site fast and efficient.
    

### Full Feature List

-   **Visual Controls:** Supports up to 12 custom images with 'Cover' or 'Contain' modes.
    
-   **Shader Tuning:** Adjust Distortion Strength, Ripple Scale, and Ripple Speed for a unique look.
    
-   **Smart Autoplay:** Includes "Pause on Hover" and customizable delays (800ms to 12s).
    
-   **Fully Responsive:** Automatically adapts to any screen size with optimized Device Pixel Ratio.
    
-   **Adaptive UI:** Optional pagination dots, navigation arrows, and customizable border radius.
    
-   **Accessibility & Fallback:** ARIA-ready, keyboard accessible, and includes a 2D crossfade fallback for older browsers.
    

### How to Use

1.  **Drop** the component into your Hero section.
    
2.  **Upload** your images (up to 12) in the Property Panel.
    
3.  **Tweak** the WebGL settings to find your perfect "ripple" style.
    
4.  **Publish** to give your visitors a premium, interactive experience.
    

Refund Policy:

Due to the digital nature of this product, all sales are final and non-refundable once the remix link has been accessed. If you encounter any technical issues, please contact me at [agungmahesay@gmail.com](mailto:agungmahesay@gmail.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #3934

## Details

- **Author**: Agung M
- **Price**: $3.00
- **Published**: 2026-03-04
- **Updated**: 2026-10-14
- **Added**: 2026-02-26
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow