@shohojdhara/atomix 0.2.9 → 0.3.1

package/src/components/AtomixGlass/GlassFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import type { DisplacementMode } from '../../lib/types/components';
 import type { FragmentShaderType } from './shader-utils';
 import { getDisplacementMap } from './glass-utils';
@@ -10,18 +10,20 @@ interface GlassFilterProps {
   aberrationIntensity: number;
   mode: DisplacementMode;
   shaderMapUrl?: string;
+  blurAmount: number;
 }
 
 /**
  * GlassFilter - SVG filter component for glass morphism effects
  * Creates chromatic aberration and edge distortion effects using SVG filters
  */
-export const GlassFilter: React.FC<GlassFilterProps> = ({
+const GlassFilterComponent: React.FC<GlassFilterProps> = ({
   id,
   displacementScale,
   aberrationIntensity,
   mode,
   shaderMapUrl,
+  blurAmount,
 }) => (
   <svg
     style={{
@@ -29,10 +31,9 @@ export const GlassFilter: React.FC<GlassFilterProps> = ({
       width: '100%',
       height: '100%',
       inset: 0,
-      visibility: 'hidden',
-      opacity: 0,
     }}
     aria-hidden="true"
+    suppressHydrationWarning
   >
     <defs>
       <radialGradient id={`${id}-edge-mask`} cx="50%" cy="50%" r="50%">
@@ -128,11 +129,11 @@ export const GlassFilter: React.FC<GlassFilterProps> = ({
         <feBlend in="GREEN_CHANNEL" in2="BLUE_CHANNEL" mode="screen" result="GB_COMBINED" />
         <feBlend in="RED_CHANNEL" in2="GB_COMBINED" mode="screen" result="RGB_COMBINED" />
 
-        {/* <feGaussianBlur
+        <feGaussianBlur
           in="RGB_COMBINED"
-          stdDeviation='0'
           result="ABERRATED_BLURRED"
-        /> */}
+          stdDeviation={blurAmount * aberrationIntensity * 0.05}
+        />
 
         <feComposite
           in="ABERRATED_BLURRED"
@@ -152,5 +153,18 @@ export const GlassFilter: React.FC<GlassFilterProps> = ({
   </svg>
 );
 
-GlassFilter.displayName = 'GlassFilter';
+GlassFilterComponent.displayName = 'GlassFilter';
+
+// Memoize component to prevent unnecessary re-renders
+export const GlassFilter = memo(GlassFilterComponent, (prevProps, nextProps) => {
+  // Custom comparison: only re-render if props actually changed
+  return (
+    prevProps.id === nextProps.id &&
+    prevProps.displacementScale === nextProps.displacementScale &&
+    prevProps.aberrationIntensity === nextProps.aberrationIntensity &&
+    prevProps.mode === nextProps.mode &&
+    prevProps.shaderMapUrl === nextProps.shaderMapUrl &&
+    prevProps.blurAmount === nextProps.blurAmount
+  );
+});
 

package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap

@@ -0,0 +1,221 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`] = `
+<div>
+  <div
+    class="c-atomix-glass"
+    style="--atomix-glass-radius: 16px; --atomix-glass-transform: translate(0px, 0px) scale(1); --atomix-glass-position: absolute; --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-width: 100%; --atomix-glass-height: 100%; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 33%, rgba(255, 255, 255, 0.4) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 33%, rgba(255, 255, 255, 0.6) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05);"
+  >
+    <div
+      class="c-atomix-glass__container   "
+      style="transform: translate(0px, 0px) scale(1); --atomix-glass-container-width: 270; --atomix-glass-container-height: 69; --atomix-glass-container-padding: 0 0; --atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(1.2100000000000002px) saturate(160%) contrast(1.05) brightness(1.05); --atomix-glass-container-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset; --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.25);"
+    >
+      <div
+        class="c-atomix-glass__inner"
+        style="box-shadow: var(--atomix-glass-container-box-shadow);"
+      >
+        <div
+          class="c-atomix-glass__filter"
+        >
+          <svg
+            aria-hidden="true"
+            style="position: absolute; width: 100%; height: 100%; inset: 0;"
+          >
+            <defs>
+              <radialgradient
+                cx="50%"
+                cy="50%"
+                id=":rd:-edge-mask"
+                r="50%"
+              >
+                <stop
+                  offset="0%"
+                  stop-color="black"
+                  stop-opacity="0"
+                />
+                <stop
+                  offset="75%"
+                  stop-color="black"
+                  stop-opacity="0"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="white"
+                  stop-opacity="1"
+                />
+              </radialgradient>
+              <filter
+                color-interpolation-filters="sRGB"
+                height="170%"
+                id=":rd:"
+                width="170%"
+                x="-35%"
+                y="-35%"
+              >
+                <feimage
+                  height="100%"
+                  href="data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k="
+                  id="feimage"
+                  preserveAspectRatio="xMidYMid slice"
+                  result="DISPLACEMENT_MAP"
+                  width="100%"
+                  x="0"
+                  y="0"
+                />
+                <fecolormatrix
+                  in="DISPLACEMENT_MAP"
+                  result="EDGE_INTENSITY"
+                  type="matrix"
+                  values="0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0 0 0 1 0"
+                />
+                <fecomponenttransfer
+                  in="EDGE_INTENSITY"
+                  result="EDGE_MASK"
+                >
+                  <fefunca
+                    tableValues="0 0.125 1"
+                    type="discrete"
+                  />
+                </fecomponenttransfer>
+                <feoffset
+                  dx="0"
+                  dy="0"
+                  in="SourceGraphic"
+                  result="CENTER_ORIGINAL"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="RED_DISPLACED"
+                  scale="-20"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="RED_DISPLACED"
+                  result="RED_CHANNEL"
+                  type="matrix"
+                  values="1 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="GREEN_DISPLACED"
+                  scale="-21"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="GREEN_DISPLACED"
+                  result="GREEN_CHANNEL"
+                  type="matrix"
+                  values="0 0 0 0 0
+                 0 1 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0"
+                />
+                <fedisplacementmap
+                  in="SourceGraphic"
+                  in2="DISPLACEMENT_MAP"
+                  result="BLUE_DISPLACED"
+                  scale="-21.5"
+                  xChannelSelector="R"
+                  yChannelSelector="B"
+                />
+                <fecolormatrix
+                  in="BLUE_DISPLACED"
+                  result="BLUE_CHANNEL"
+                  type="matrix"
+                  values="0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 1 0 0
+                 0 0 0 1 0"
+                />
+                <feblend
+                  in="GREEN_CHANNEL"
+                  in2="BLUE_CHANNEL"
+                  mode="screen"
+                  result="GB_COMBINED"
+                />
+                <feblend
+                  in="RED_CHANNEL"
+                  in2="GB_COMBINED"
+                  mode="screen"
+                  result="RGB_COMBINED"
+                />
+                <fegaussianblur
+                  in="RGB_COMBINED"
+                  result="ABERRATED_BLURRED"
+                  stdDeviation="0.125"
+                />
+                <fecomposite
+                  in="ABERRATED_BLURRED"
+                  in2="EDGE_MASK"
+                  operator="in"
+                  result="EDGE_ABERRATION"
+                />
+                <fecomponenttransfer
+                  in="EDGE_MASK"
+                  result="INVERTED_MASK"
+                >
+                  <fefunca
+                    tableValues="1 0"
+                    type="table"
+                  />
+                </fecomponenttransfer>
+                <fecomposite
+                  in="CENTER_ORIGINAL"
+                  in2="INVERTED_MASK"
+                  operator="in"
+                  result="CENTER_CLEAN"
+                />
+                <fecomposite
+                  in="EDGE_ABERRATION"
+                  in2="CENTER_CLEAN"
+                  operator="over"
+                />
+              </filter>
+            </defs>
+          </svg>
+          <div
+            class="c-atomix-glass__filter-overlay"
+            style="filter: url(#:rd:); border-radius: var(--atomix-glass-radius);"
+          />
+          <div
+            class="c-atomix-glass__filter-shadow"
+            style="box-shadow: var(--atomix-glass-container-shadow); border-radius: var(--atomix-glass-radius);"
+          />
+        </div>
+        <div
+          class="c-atomix-glass__content"
+          style="position: relative; text-shadow: var(--atomix-glass-container-text-shadow); z-index: 100;"
+        >
+          <div>
+            Default Glass
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--dark c-atomix-glass__background-layer--hidden"
+      style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; border-radius: 16px; transform: translate(0px, 0px) scale(1);"
+    />
+    <div
+      class="c-atomix-glass__background-layer c-atomix-glass__background-layer--black c-atomix-glass__background-layer--hidden"
+      style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; border-radius: 16px; transform: translate(0px, 0px) scale(1);"
+    />
+    <span
+      class="c-atomix-glass__border-1"
+    />
+    <span
+      class="c-atomix-glass__border-2"
+    />
+  </div>
+</div>
+`;

package/src/components/AtomixGlass/atomixGLass.old.tsx

@@ -920,7 +920,6 @@ import {
         ...style,
         transform: transformStyle,
         transition: effectiveReducedMotion ? 'none' : 'all ease-out 0.2s',
-        willChange: effectiveDisableEffects ? 'auto' : 'transform',
         ...(effectiveHighContrast && {
           border: '2px solid currentColor',
           outline: '2px solid transparent',
@@ -1196,7 +1195,6 @@ import {
             borderRadius: `${cornerRadius}px`,
             transform: baseStyle.transform,
             transition: baseStyle.transition,
-            willChange: 'transform',
           }}
         />
         <div
@@ -1210,7 +1208,6 @@ import {
             transition: baseStyle.transition,
             mixBlendMode: 'overlay',
             pointerEvents: 'none',
-            willChange: 'transform',
           }}
         />
   

package/src/components/AtomixGlass/shader-utils.ts

@@ -851,6 +851,14 @@ export class ShaderDisplacementGenerator {
 
   destroy(): void {
     try {
+      // Clear canvas data to free memory
+      if (this.context) {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      }
+      // Reduce memory footprint by setting dimensions to 0
+      this.canvas.width = 0;
+      this.canvas.height = 0;
+      // Remove from DOM
       this.canvas.remove();
     } catch (e) {
       // Silently handle cleanup errors