title: "AtomixGlass — Bringing Liquid Glass to the Web with React + WebGL"
published: true
tags: react, typescript, webgl, designsystems, frontend
cover_image: https://raw.githubusercontent.com/Shohojdhara/atomix/main/docs/assets/cover-atomixglass.png
description: "Building a high-performance, accessible React component that brings liquid glass aesthetics and advanced visual effects to the modern web."
🚀 AtomixGlass — Bringing Liquid Glass to the Web
I recently built AtomixGlass, a high-performance React component that brings liquid glass aesthetics, WebGL-powered motion, and accessibility together — part of the Atomix Design System (a collection of 40+ production-ready components for modern front-end applications).
✨ Why I Built It
I’ve always been fascinated by the liquid glass effect — that smooth, refractive depth you see in Apple’s design language.
The challenge: creating that experience on the web without compromising performance or accessibility.
So I built AtomixGlass, a React component that uses WebGL shaders, SVG filters, and hardware acceleration to simulate real-time, physics-based glass distortion at a buttery 60fps.
🎨 Visual Magic
AtomixGlass uses a combination of GPU-accelerated rendering and modern CSS properties to achieve dynamic visual depth:
- 🌀 WebGL shaders for real-time distortion and refraction
- 🌈 SVG-based chromatic blur for subtle RGB dispersion
- 🧲 Elastic, mouse-reactive motion powered by
requestAnimationFrame - 🪩 Layered blur system with hardware-accelerated backdrop filters
All effects are tweakable through CSS custom properties — you can adjust depth, color, intensity, and blur levels on the fly.
⚡ Performance First
To make the animations fluid and efficient, AtomixGlass implements a custom performance pipeline:
-
requestAnimationFrame-based animation loop - Memoized calculations with
useMemoanduseCallback - Optimized
ResizeObserverwith throttled event listeners - Smooth 60fps rendering even under heavy visual load
This means the effect looks stunning — without eating up your CPU.
♿ Accessibility by Design
Performance is nothing without inclusivity.
AtomixGlass is fully WCAG 2.1 AA compliant, and includes:
-
Reduced motion support (
prefers-reduced-motion) - High contrast mode detection
- Proper ARIA roles and keyboard navigation
- Automatic light/dark mode background adaptation
🧠 Tech Stack & Architecture
Stack: React 18 · TypeScript · WebGL · SVG Filters · CSS Custom Properties
The component lives inside
src/components/AtomixGlass,
designed to be modular, scalable, and easily reusable across the Atomix ecosystem.
Each component in Atomix follows the same structure:
- Co-located TypeScript logic and SCSS modules
- Token-based design values (colors, spacing, typography)
- Built-in Storybook documentation
📘 Documentation & Token System
The docs/ folder includes full documentation for:
- Design tokens (colors, typography, spacing, shadows)
- Usage guidelines for all components
- Best practices for accessibility and theming
Atomix is built around design tokens — ensuring visual consistency across all 40+ components.
🧩 Displacement Modes
AtomixGlass supports 4 displacement modes, offering flexibility for different UI contexts:
- Standard — balanced refraction and blur
- Polar — circular distortion around the center
- Prominent — high-depth liquid motion
- Shader-based — fully WebGL-powered for extreme realism
Perfect for cards, modals, hero sections, or any component that deserves depth and motion.
🔗 Try It Out
🎨 Live Demo: shohojdhara.github.io/atomix
💻 Source Code: github.com/Shohojdhara/atomix
🧩 About Atomix
Atomix is a modern design system built with:
- 40+ reusable, accessible React components
- Fully typed TypeScript support
- Light/Dark theme support via tokens
- SCSS + CSS Variable integration
- Storybook documentation & visual previews
License: Apache 2.0
Main languages: TypeScript (~55%), SCSS (~39%)
💬 Final Thoughts
Building AtomixGlass pushed my limits in both performance engineering and visual design.
It’s proof that you can mix aesthetic motion, clean code, and accessibility — all without sacrificing performance.
If you’re passionate about frontend architecture, UI motion, and design systems, I’d love to connect and collaborate.
Top comments (0)