The latest articles on DEV Community by Limon (@limonkhan669). https://dev.to/limonkhan669 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F59925%2Fd256c820-de71-4b7d-abec-acc679f71701.jpg https://dev.to/limonkhan669 en Limon Wed, 22 Oct 2025 19:23:39 +0000 https://dev.to/limonkhan669/atomixglass-bringing-liquid-glass-to-the-web-with-react-webgl-3l38 https://dev.to/limonkhan669/atomixglass-bringing-liquid-glass-to-the-web-with-react-webgl-3l38 <h2> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyx9551eq8mer6c2z9wfn.png" alt="Playground" width="800" height="516"> </h2> <p>title: "AtomixGlass — Bringing Liquid Glass to the Web with React + WebGL"<br> published: true<br> tags: react, typescript, webgl, designsystems, frontend</p> <h2> description: "Building a high-performance, accessible React component that brings liquid glass aesthetics and advanced visual effects to the modern web." </h2> <h2> 🚀 AtomixGlass — Bringing Liquid Glass to the Web </h2> <p>I recently built <strong>AtomixGlass</strong>, a high-performance <strong>React component</strong> that brings <strong>liquid glass aesthetics</strong>, <strong>WebGL-powered motion</strong>, and <strong>accessibility</strong> together — part of the <a href="https://github.com/Shohojdhara/atomix" rel="noopener noreferrer"><strong>Atomix Design System</strong></a> (a collection of 40+ production-ready components for modern front-end applications).</p> <h2> <a href="https://shohojdhara.github.io/atomix/?path=/story/components-atomixglass--default" rel="noopener noreferrer">https://shohojdhara.github.io/atomix/?path=/story/components-atomixglass--default</a> </h2> <h2> ✨ Why I Built It </h2> <p>I’ve always been fascinated by the <em>liquid glass</em> effect — that smooth, refractive depth you see in Apple’s design language.<br><br> The challenge: creating that experience <strong>on the web</strong> without compromising <strong>performance</strong> or <strong>accessibility</strong>.</p> <p>So I built <strong>AtomixGlass</strong>, a React component that uses <strong>WebGL shaders</strong>, <strong>SVG filters</strong>, and <strong>hardware acceleration</strong> to simulate real-time, physics-based glass distortion at a buttery 60fps.</p> <h2> 🎨 Visual Magic </h2> <p>AtomixGlass uses a combination of GPU-accelerated rendering and modern CSS properties to achieve dynamic visual depth:</p> <ul> <li>🌀 <strong>WebGL shaders</strong> for real-time distortion and refraction </li> <li>🌈 <strong>SVG-based chromatic blur</strong> for subtle RGB dispersion </li> <li>🧲 <strong>Elastic, mouse-reactive motion</strong> powered by <code>requestAnimationFrame</code> </li> <li>🪩 <strong>Layered blur system</strong> with hardware-accelerated backdrop filters </li> </ul> <p>All effects are tweakable through <strong>CSS custom properties</strong> — you can adjust depth, color, intensity, and blur levels on the fly.</p> <h2> ⚡ Performance First </h2> <p>To make the animations fluid and efficient, AtomixGlass implements a custom performance pipeline:</p> <ul> <li> <code>requestAnimationFrame</code>-based animation loop </li> <li>Memoized calculations with <code>useMemo</code> and <code>useCallback</code> </li> <li>Optimized <code>ResizeObserver</code> with throttled event listeners </li> <li>Smooth 60fps rendering even under heavy visual load </li> </ul> <p>This means the effect looks stunning — without eating up your CPU.</p> <h2> ♿ Accessibility by Design </h2> <p>Performance is nothing without inclusivity.<br><br> AtomixGlass is fully <strong>WCAG 2.1 AA compliant</strong>, and includes:</p> <ul> <li> <strong>Reduced motion</strong> support (<code>prefers-reduced-motion</code>) </li> <li> <strong>High contrast</strong> mode detection </li> <li>Proper <strong>ARIA</strong> roles and keyboard navigation </li> <li>Automatic <strong>light/dark mode</strong> background adaptation </li> </ul> <h2> 🧠 Tech Stack &amp; Architecture </h2> <p><strong>Stack:</strong> React 18 · TypeScript · WebGL · SVG Filters · CSS Custom Properties </p> <p>The component lives inside<br><br> <code>src/components/AtomixGlass</code>,<br><br> designed to be <strong>modular</strong>, <strong>scalable</strong>, and <strong>easily reusable</strong> across the Atomix ecosystem. </p> <p>Each component in Atomix follows the same structure: </p> <ul> <li>Co-located TypeScript logic and SCSS modules </li> <li>Token-based design values (colors, spacing, typography) </li> <li>Built-in Storybook documentation </li> </ul> <h2> 📘 Documentation &amp; Token System </h2> <p>The <a href="https://github.com/Shohojdhara/atomix/tree/main/docs" rel="noopener noreferrer"><strong>docs/</strong></a> folder includes full documentation for:</p> <ul> <li> <strong>Design tokens</strong> (colors, typography, spacing, shadows) </li> <li> <strong>Usage guidelines</strong> for all components </li> <li> <strong>Best practices</strong> for accessibility and theming </li> </ul> <p>Atomix is built around <strong>design tokens</strong> — ensuring visual consistency across all 40+ components. </p> <h2> 🧩 Displacement Modes </h2> <p>AtomixGlass supports <strong>4 displacement modes</strong>, offering flexibility for different UI contexts:</p> <ol> <li> <strong>Standard</strong> — balanced refraction and blur </li> <li> <strong>Polar</strong> — circular distortion around the center </li> <li> <strong>Prominent</strong> — high-depth liquid motion </li> <li> <strong>Shader-based</strong> — fully WebGL-powered for extreme realism </li> </ol> <p>Perfect for <strong>cards, modals, hero sections</strong>, or any component that deserves depth and motion.</p> <h2> 🔗 Try It Out </h2> <p>🎨 <strong>Live Demo:</strong> <a href="https://shohojdhara.github.io/atomix/?path=/story/components-atomixglass--default" rel="noopener noreferrer">shohojdhara.github.io/atomix</a><br><br> 💻 <strong>Source Code:</strong> <a href="https://github.com/Shohojdhara/atomix" rel="noopener noreferrer">github.com/Shohojdhara/atomix</a> </p> <h2> 🧩 About Atomix </h2> <p><a href="https://github.com/Shohojdhara/atomix" rel="noopener noreferrer">Atomix</a> is a <strong>modern design system</strong> built with:</p> <ul> <li>40+ reusable, accessible React components </li> <li>Fully typed <strong>TypeScript support</strong> </li> <li> <strong>Light/Dark theme</strong> support via tokens </li> <li>SCSS + CSS Variable integration </li> <li>Storybook documentation &amp; visual previews </li> </ul> <p>License: <strong>Apache 2.0</strong><br><br> Main languages: TypeScript (~55%), SCSS (~39%)</p> <h2> 💬 Final Thoughts </h2> <p>Building AtomixGlass pushed my limits in both <strong>performance engineering</strong> and <strong>visual design</strong>.<br><br> It’s proof that you can mix <strong>aesthetic motion</strong>, <strong>clean code</strong>, and <strong>accessibility</strong> — all without sacrificing performance.</p> <p>If you’re passionate about <strong>frontend architecture</strong>, <strong>UI motion</strong>, and <strong>design systems</strong>, I’d love to connect and collaborate.</p> <h1> react #typescript #frontend #webgl #designsystems #performance #accessibility #opensource #uiengineering #liquidglass </h1> webdev programming react designsystem