---
title: "Liquid Lens Carousel — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Daniyal Habib · Carousels · ranked #43 among Framer components. Liquid Lens Carousel is a WebGL image carousel for Framer, rendered with Three.js and custom…"
canonical: "https://framer.elliotli.dev/component/liquid-lens-carousel"
---

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

# Liquid Lens Carousel

WebGL CMS liquid glass carousel

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

![Liquid Lens Carousel preview image 1](https://framer.elliotli.dev/og/component/liquid-lens-carousel/33ceca87879b812d/1600x1200.jpg)

## Summary

Liquid Lens Carousel is a WebGL image carousel for Framer, rendered with Three.js and custom GLSL shaders.

## Description

**Liquid Lens Carousel is a WebGL image carousel for Framer, rendered with Three.js and custom GLSL shaders. A liquid glass lens magnifies the centered slide with chromatic dispersion, rim ripples, shimmer, and glow, while drag inertia, wheel scrolling, keyboard arrows, and autoplay with hover pause keep browsing effortless. It is fully CMS compatible: flip on CMS Mode to bind each slide’s image, title, subtitle, tag, and link straight from a collection, or curate slides manually with the built-in Items list.**

**How to Use**

1.  **Drop the carousel into a frame with a generous fixed size, it automatically fills its parent.**
    
2.  **Add slides through the Items list (image, title, subtitle, tag, link, new tab), or enable CMS Mode and bind the fields inside a collection list.**
    
3.  **Shape the look with card height, gap, and radius, solid or transparent background, accent, text, and pill colors, plus title, subtitle, and tag fonts.**
    
4.  **Tune the optics with lens color, glow, zoom depth, dispersion, rim ripple, scale, shimmer, and vignette.**
    
5.  **Set motion and input with reveal style, trigger, and transitions, autoplay interval, drag speed, friction, wheel mode, and keyboard navigation.**
    
6.  **Preview or publish to test dragging, refraction, and links, since interactions run at runtime rather than on the design canvas.**
    

**Ideal Use Cases**

**Liquid Lens Carousel works well for:**

**• Photography and architecture portfolios that want a gallery centerpiece • Agency and studio showcases running slides straight from the CMS • Editorial and lookbook sites presenting curated collections • Landing pages that need one memorable signature interaction**

**Inspired by the work of Osmo and Yousuf Soomro.**

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

-   All · #43

## Details

- **Author**: Daniyal Habib
- **Price**: $8.00
- **Published**: 2026-09-04
- **Updated**: 2026-11-01
- **Added**: 2026-09-04
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view