---
title: "Liquid Flow — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Kristaps Reinfelds · Carousels. Liquid Flow Slider combines smooth WebGL powered wave distortion, interactive hover ripples, and fully customizable…"
canonical: "https://framer.elliotli.dev/component/liquid-flow"
---

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

# Liquid Flow

WebGL Image Slider

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

![Liquid Flow preview image 1](https://framer.elliotli.dev/og/component/liquid-flow/6eaa66419296e9aa/1600x1200.jpg)

## Summary

Liquid Flow Slider combines smooth WebGL powered wave distortion, interactive hover ripples, and fully customizable transitions to create a premium, modern showcase for…

## Description

Transform a standard image slider into an immersive, fluid experience. Liquid Flow Slider combines smooth WebGL powered wave distortion, interactive hover ripples, and fully customizable transitions to create a premium, modern showcase for portfolios, products, and hero sections.

## Features

### Fluid Wave Distortion

Create beautiful liquid transitions between slides with adjustable wave intensity, distortion strength, and noise scale. Fine-tune the visual style from subtle elegance to dramatic motion.

-   Duration
    
-   Wave Intensity
    
-   Distortion Strength
    
-   Noise Scale
    
-   RGB Split
    

### Interactive Hover Liquid

Bring your images to life with cursor-driven liquid ripples. As visitors move across the slider, the surface reacts naturally, creating an engaging and premium interaction.

Customize:

-   Enable / Disable Hover Effect
    
-   Hover Intensity
    
-   Hover Radius
    
-   Animation Easing
    

### Autoplay Controls

Create hands-free presentations with configurable autoplay timing.

Options include:

-   Enable / Disable Autoplay
    
-   Autoplay Delay
    
-   Smooth transition timing
    

### Fully Customizable Appearance

Adapt the slider to any design system.

Customize:

-   Border Radius
    
-   Overlay Gradient
    
-   Overlay Color
    
-   Overlay Opacity
    

Perfect for dark interfaces, editorial layouts, product showcases, and modern landing pages.

### Mobile Ready

Built with touch interactions in mind.

Features:

-   Mobile Drag Gestures
    
-   Responsive Layout
    
-   Smooth Performance Across Devices
    

### Navigation Controls

Choose how users navigate through your slider.

Options include:

-   Show / Hide Arrows
    
-   Chevron or Alternative Arrow Styles
    
-   Arrow Color
    
-   Filled or Outline Arrow Design
    

### Built for Performance

Developed using modern React and WebGL techniques for smooth animations and responsive interactions without sacrificing performance.

## Perfect For

-   Hero Sections
    
-   Portfolio Websites
    
-   Creative Agencies
    
-   Product Showcases
    
-   SaaS Landing Pages
    
-   Photography
    
-   Fashion Brands
    
-   Architecture Studios
    
-   Luxury Experiences
    

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

-   All · #2508

## Details

- **Author**: Kristaps Reinfelds
- **Price**: $8.00
- **Published**: 2026-07-15
- **Updated**: 2026-07-17
- **Added**: 2026-07-15
- **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