11 Best Framer Liquid Glass Components in 2026

LiquidGlass is the most capable liquid-glass engine on this list. Inam’s WebGL component turns any frame into an interactive lens — up to sixty floating bubbles that merge like water droplets, a reflection engine for surface smears, and fisheye or edge-pinch distortion modes with chromatic aberration. Native touch tracking and a placeholder system keep mobile and first-load experiences stable. At 9 USD it replaces custom GLSL work when the brief calls for cursor-reactive refraction across a full hero, not a static frosted card.

True Liquid Glass from Lee Black targets builders who want convincing refraction inside Framer without owning a WebGL pipeline. The component focuses on realistic liquid-glass distortion over live layout content — the kind of effect that reads as Apple-inspired translucency rather than a simple blur stack. Property controls stay accessible from the panel, so you can drop it onto hero frames or feature blocks and tune intensity without overrides. At 15 USD it is the premium pick when the client names liquid glass explicitly and the timeline does not allow custom shader development.

Nebula Liquid Media applies a gravitational vortex engine to images and MP4 video — pixels spiral toward the pointer while displacement math mimics thick distorted glass. Studio Apes adds interactive 3D spatial tilt, a negative-mode inversion slider, and damping controls that shift the feel from sharp tracking to heavy atmosphere. Autoplay and play-on-hover modes cover both ambient loops and intentional interaction. At 6 USD it is the strongest media-focused liquid-glass pick when still photography or video must feel like it sits behind moving fluid.

Liquid Card Shader wraps images or video in a THREE.js environment where cursor position drives water-like ripples, prismatic RGB separation, and pro-grade 3D tilt with adjustable damping. Native Framer link picker support means each card routes to pages, anchors, or external URLs without extra wiring. Smart video logic toggles autoplay or play-on-hover with thumbnail fallbacks for performance. At 6 USD it pairs naturally with Nebula Liquid Media — cards for grid density, vortex for full-bleed hero moments — from the same creator ecosystem.

Liquid Glass Surface uses SVG-powered displacement and color separation instead of blur alone, so backgrounds gently bend through the panel like fluid glass. Strength scales from subtle frost to bold refraction — one component covers CTAs, dashboard cards, and header bars without the GPU overhead of a full hero shader. Erfan K. keeps the control set focused on production UI rather than experimental backgrounds. At 4 USD it is the pragmatic liquid-glass layer when you need Apple-style refraction on interactive elements across a content-heavy page.

Liquid Glass Cube from Veronica G turns liquid glass into a spatial object — a three-dimensional form visitors can explore rather than a background layer they scroll past. The component suits product launches and creative portfolios where a single interactive centerpiece must demonstrate craft without importing a full 3D pipeline. Pair it with flat SVG surfaces like Liquid Glass Surface when the page mixes hero spectacle with usable UI chrome. At 10 USD it earns its place when the brief asks for liquid glass as sculpture, not atmosphere alone.

AppleLiquidButton recreates macOS- and iOS-inspired liquid glass on a production CTA — backdrop filters with saturation and brightness controls, multi-directional specular highlights, chromatic aberration, and a built-in icon library with twenty presets. Syed Saboor designed it to adapt across light and dark backgrounds without rebuilding variants. Drop it where the main button must feel flagship: pricing pages, app promos, and settings panels that reference Apple’s latest interface direction. At 5 USD it is the most complete Apple-style button on this list.

Liquid Glass Switch extends Syed Saboor’s liquid-glass system to binary controls — dynamic refraction, chromatic separation, and 3D perspective rotation during toggle transitions with smooth cubic-bezier easing. Specular highlights and backdrop-filter morphing keep the control readable on both light and dark themes. Use it beside AppleLiquidButton when a settings or onboarding flow must feel cohesive with Apple’s translucent controls rather than default Framer toggles. At 5 USD both components share the same design vocabulary at button and switch scale.

Glass Navigation creates a glass-style background layer sized for navigation bars — SVG turbulence and displacement produce rippled, warped-glass texture with optional chromatic aberration and a subtle border for pane definition. Veronica G built it for sticky headers on upscale SaaS and agency sites where the nav must float above photography without looking like a flat blur strip. Place your link row above the component and tune turbulence from the panel. At 10 USD it solves the specific chrome problem that hero lenses and button components do not address.

Liquid Glass Button from Danyal Asif delivers Apple’s liquid-glass button aesthetic through layered transparency, blur, and gradient lighting with Framer Motion hover and press animations. Color, blur intensity, glow strength, and corner radius are all panel-controlled — copy-paste ready without code edits. It trades AppleLiquidButton’s icon library and aberration depth for a lighter, motion-forward CTA that still reads premium on gradient heroes. At 5 USD choose it when you need one or two glass buttons fast and Syed Saboor’s fuller control set is more than the page requires.

Liquid Kinetic Nav ships a full navigation component with GPU-accelerated multi-layer glassmorphism, magnetic pull on desktop items, haptic scale feedback on click, and a thumb-zone mobile expansion layout. Abishek M includes WCAG 2.1 contrast logic, Lucide icon integration by name, and a low-power mode that reduces backdrop blur on mobile to protect battery. Native Framer linking covers internal pages and external URLs. It is free — start here when the entire header must feel liquid-glass native before buying Glass Navigation or custom button components.