Real refraction liquid glass for the web: SDF lens maps + SVG displacement + backdrop-filter. One file, no WebGL.
-
Updated
Sep 11, 2026 - JavaScript
#
backdrop-filter
Here are 39 public repositories matching this topic...
The only zero-dependency liquid glass component with real refraction on iPhone & Safari — not a blur fallback. React 16.8–19 + web-component. ~6.5KB.
react web-component ios typescript ssr react-component safari zero-dependency ui-components refraction svg-filter frosted-glass glass-effect backdrop-filter chromatic-aberration glassmorphism apple-design liquid-glass ios-26 apple-liquid-glass
-
Updated
Sep 13, 2026 - TypeScript
A modern React component with liquid frosted glass effect using TailwindCSS. Perfect for creating elegant interfaces with glassmorphism effect.
react wrapper typescript ui component frontend glass tailwindcss frosted-glass backdrop-filter glassmorphism liquid-glass
-
Updated
Aug 27, 2026 - TypeScript
Backdrop blur and frosted glass for React Native and Expo on iOS and Android. Blurs headers, tab bars, cards, popups and video.
android ios react-native blur blurview react-native-component expo react-native-blur frosted-glass backdrop-filter glassmorphism expo-module expo-blur liquid-glass backdrop-blur blur-view
-
Updated
Oct 4, 2026 - Kotlin
Advanced layered acrylic glass effects for web elements. Create iOS/Windows-style acrylic blur overlays with multiple customizable layers.
ui web npm-package ios-ui webui acrylic fluent-design acrylic-material blur-effect backdrop-filter glassmorphism progressive-blur
-
Updated
Feb 20, 2026 - HTML
The open-source Liquid Glass UI system for React and the web. 40 accessible components, CSS-first glass materials, zero runtime dependencies.
react css webgl typescript frontend accessibility nextjs react-components component-library ui-components dark-mode design-system ui-library backdrop-filter glassmorphism glass-ui liquid-glass
-
Updated
Sep 29, 2026 - TypeScript
Liquid-glass UI for React — a refracting glass surface for any control, with automatic per-platform render paths (backdrop-filter+SVG, captured-canvas, or a WebGL video lens). Zero styling deps.
-
Updated
Jun 8, 2026 - TypeScript
Refractive chromatic aberration effects in CSS
-
Updated
Sep 10, 2025 - CSS
Make your product wavy — liquid glass UI animations for React
react typescript ui animation react-components motion liquid ui-components animation-library spring-animation glass metaball backdrop-filter framer-motion glassmorphism liquid-glass
-
Updated
Jul 6, 2026 - TypeScript
A responsive digital clock with live time, AM/PM indicator, and date — built with HTML, CSS & Vanilla JS, featuring a frosted glass UI over a full-screen background image.
javascript css html beginner-project vanilla-js setinterval responsive-design digital-clock frosted-glass backdrop-filter
-
Updated
Mar 23, 2026 - CSS
A customizable, modern CSS/SCSS library for creating beautiful frosted glass effects with backdrop blur, highlights, and smooth animations
css sass design ui frontend scss blur web-design ui-components css-library glass design-system ui-library frosted-glass glass-effect backdrop-filter glassmorphism frosted-glass-effect
-
Updated
Nov 13, 2025 - SCSS
Liquid-glass UI components built on the new HTML-in-Canvas (HIC) browser API.
-
Updated
May 26, 2026 - TypeScript
基于多层叠加算法的 React 渐变模糊组件。Fine progressive blur component with layered Gaussian blur algorithm
-
Updated
Sep 10, 2026 - TypeScript
Physically-accurate refractive glass as a React component. Curved-bevel light refraction via Snell's law and SVG displacement maps — the real optics, not just blur.
react typescript frontend react-component ui-components refraction svg-filter backdrop-filter snells-law glassmorphism apple-design liquid-glass
-
Updated
Apr 23, 2026 - TypeScript
Liquid Glass for the web, calibrated against macOS 26 Control Center rather than eyeballed — measured transfer curve, ray-traced SVG refraction, measured specular rim. React + CSS.
react css macos apple ui svg-filters refraction design-system backdrop-filter glassmorphism liquid-glass
-
Updated
Aug 28, 2026 - JavaScript
Angular directive for Apple-inspired liquid glass effects with DOM-backed refraction and configurable edges.
angular typescript npm-package refraction angular-directive svg-filter backdrop-filter glassmorphism liquid-glass
-
Updated
Oct 5, 2026 - TypeScript
零依赖的悬浮玻璃胶囊导航栏组件：滚动时横向内缩、纵向变薄，磨砂玻璃淡入，尺寸变化由弹簧积分驱动（DeepSeek 官网顶栏同款效果的原创实现）
header navbar vanilla-js zero-dependency spring-animation html-css-javascript css-variables sticky-header ui-component frosted-glass backdrop-filter scroll-animation glassmorphism deepseek
-
Updated
Oct 3, 2026 - JavaScript
Apple-style liquid glass for the web, as a React kit. Refracts the real content behind it. Rebuilt from Aave's effect (which was never open-sourced).
-
Updated
Aug 21, 2026 - TypeScript
Apple-style liquid glass for the web in one dependency-free HTML file: a WebGL refraction shader with a live tuner, plus CSS glassmorphism recipes.
-
Updated
Jun 10, 2026 - HTML
Add this topic to your repo
To associate your repository with the backdrop-filter topic, visit your repo's landing page and select "manage topics."