@shohojdhara/atomix 0.6.5 → 0.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -180,7 +180,6 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
     globalMousePosition,
     mouseOffset,
     transformStyle,
-    getShaderTime,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,
@@ -213,13 +212,6 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
 
     style,
     isFixedOrSticky,
-    withTimeAnimation,
-    animationSpeed,
-    withMultiLayerDistortion,
-    distortionOctaves,
-    distortionLacunarity,
-    distortionGain,
-    distortionQuality,
   });
 
 
@@ -429,7 +421,6 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
         shaderVariant={shaderVariant}
         withLiquidBlur={withLiquidBlur}
         isFixedOrSticky={isFixedOrSticky}
-        shaderTime={getShaderTime()}
         withTimeAnimation={withTimeAnimation}
         animationSpeed={animationSpeed}
         withMultiLayerDistortion={withMultiLayerDistortion}

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -77,7 +77,6 @@ interface AtomixGlassContainerProps
   withLiquidBlur?: boolean;
   isFixedOrSticky?: boolean;
   elasticity?: number;
-  shaderTime?: number;
 
   contentRef?: React.RefObject<HTMLDivElement | null>;
   children?: React.ReactNode;
@@ -117,7 +116,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       shaderVariant = 'liquidGlass',
       withLiquidBlur = false,
       isFixedOrSticky = false,
-      shaderTime,
       withTimeAnimation = false,
       animationSpeed = 1.0,
       withMultiLayerDistortion = false,

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

@@ -8,7 +8,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
   >
     <div
       class="c-atomix-glass__container"
-      style="--atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(20.16px) saturate(250%) contrast(1.02) brightness(1.02); --atomix-glass-container-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16); --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: 0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);"
+      style="--atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(20.16px) saturate(250%) contrast(1.02) brightness(1.02); --atomix-glass-container-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08); --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: 0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10);"
     >
       <div
         class="c-atomix-glass__inner"

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

@@ -6,23 +6,15 @@ import { ATOMIX_GLASS } from '../../lib/constants/components';
 const { CONSTANTS } = ATOMIX_GLASS;
 
 /**
- * Calculate distance between two points
- */
-export const calculateDistance = (pos1: MousePosition, pos2: MousePosition): number => {
-  if (
-    !pos1 ||
-    !pos2 ||
-    typeof pos1.x !== 'number' ||
-    typeof pos1.y !== 'number' ||
-    typeof pos2.x !== 'number' ||
-    typeof pos2.y !== 'number'
-  ) {
-    return 0;
-  }
-  const deltaX = pos1.x - pos2.x;
-  const deltaY = pos1.y - pos2.y;
-  return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-};
+ * Canonical 2D vector type shared across the glass math/shader utilities.
+ *
+ * Structurally identical to {@link MousePosition}; re-exported by `shader-utils`
+ * as the public `Vec2`.
+ */
+export interface Vec2 {
+  x: number;
+  y: number;
+}
 
 /**
  * Calculate element center from bounding rect
@@ -251,6 +243,79 @@ export const softClamp = (value: number, max: number): number => {
   return max * (1 - Math.exp(-value / max));
 };
 
+/**
+ * Clamp a value to the `[min, max]` range. Returns `min` for non-finite input.
+ */
+export const clamp = (value: number, min: number, max: number): number => {
+  if (typeof value !== 'number' || isNaN(value)) {
+    return min;
+  }
+  return Math.max(min, Math.min(max, value));
+};
+
+/**
+ * Two-edge smoothstep (GLSL semantics) — Hermite interpolation between `edge0`
+ * and `edge1`. Reuses {@link smoothstep} after normalizing `x` into `[0, 1]`.
+ */
+export const smoothstepEdge = (edge0: number, edge1: number, x: number): number => {
+  if (typeof edge0 !== 'number' || typeof edge1 !== 'number' || typeof x !== 'number') {
+    return 0;
+  }
+  return smoothstep((x - edge0) / (edge1 - edge0));
+};
+
+/**
+ * Cubic ease-in-out curve. `t` is clamped to `[0, 1]`.
+ */
+export const easeInOutCubic = (t: number): number => {
+  if (typeof t !== 'number' || isNaN(t)) {
+    return 0;
+  }
+  const clamped = Math.max(0, Math.min(1, t));
+  return clamped < 0.5
+    ? 4 * clamped * clamped * clamped
+    : 1 - Math.pow(-2 * clamped + 2, 3) / 2;
+};
+
+/**
+ * Quartic ease-out curve. `t` is clamped to `[0, 1]`.
+ */
+export const easeOutQuart = (t: number): number => {
+  if (typeof t !== 'number' || isNaN(t)) {
+    return 0;
+  }
+  const clamped = Math.max(0, Math.min(1, t));
+  return 1 - Math.pow(1 - clamped, 4);
+};
+
+/**
+ * Overflow-safe Euclidean length of a 2D vector.
+ */
+export const vec2Length = (x: number, y: number): number => {
+  if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
+    return 0;
+  }
+  const maxComponent = Math.max(Math.abs(x), Math.abs(y));
+  if (maxComponent === 0) return 0;
+  const scaledX = x / maxComponent;
+  const scaledY = y / maxComponent;
+  return maxComponent * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
+};
+
+/**
+ * Resolves the hover/active intensity multipliers from interaction state.
+ *
+ * Single source of truth for the `HOVER_INTENSITY` / `ACTIVE_INTENSITY`
+ * multipliers shared by the hook and the imperative style updater.
+ */
+export const getInteractionIntensity = (
+  isHovered: boolean,
+  isActive: boolean
+): { hoverIntensity: number; activeIntensity: number } => ({
+  hoverIntensity: isHovered ? CONSTANTS.INTERACTION.HOVER_INTENSITY : 1,
+  activeIntensity: isActive ? CONSTANTS.INTERACTION.ACTIVE_INTENSITY : 1,
+});
+
 /**
  * Spring-damper integration helper
  * Calculates the next value based on velocity, stiffness, and damping.
@@ -349,42 +414,6 @@ export function pickGlassLayoutStyle(style: CSSProperties): GlassLayoutPosition
   };
 }
 
-/**
- * Builds inline layout styles for the root wrapper.
- *
- * Reserved for alternate layout strategies. The default implementation applies
- * layout on `.c-atomix-glass__container` to preserve backdrop-filter behavior.
- */
-export function pickGlassHoistedRootStyle(style: CSSProperties): CSSProperties {
-  const layout = pickGlassLayoutStyle(style);
-  const resolvedPosition = (layout.position ?? style.position ?? 'fixed') as CSSProperties['position'];
-
-  return {
-    position: resolvedPosition,
-    ...(layout.top !== undefined && { top: layout.top }),
-    ...(layout.left !== undefined && { left: layout.left }),
-    ...(layout.right !== undefined && { right: layout.right }),
-    ...(layout.bottom !== undefined && { bottom: layout.bottom }),
-    ...(layout.inset !== undefined && { inset: layout.inset }),
-  };
-}
-
-/**
- * Returns `style` without layout properties, preserving visual declarations only.
- */
-export function omitGlassLayoutStyle(style: CSSProperties): CSSProperties {
-  const {
-    position: _p,
-    top: _t,
-    left: _l,
-    right: _r,
-    bottom: _b,
-    inset: _inset,
-    ...visualStyle
-  } = style;
-  return visualStyle;
-}
-
 /**
  * Resolves inset custom properties for decorative layers (hover, borders, backgrounds).
  *

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

@@ -1,9 +1,15 @@
 // Adapted from https://github.com/shuding/liquid-glass
 
-export interface Vec2 {
-  x: number;
-  y: number;
-}
+import {
+  clamp,
+  easeInOutCubic,
+  easeOutQuart,
+  smoothstepEdge as smoothStep,
+  vec2Length as calculateLength,
+} from './glass-utils';
+import type { Vec2 } from './glass-utils';
+
+export type { Vec2 } from './glass-utils';
 
 export interface ShaderOptions {
   width: number;
@@ -34,31 +40,6 @@ const DEFAULT_CANVAS_WIDTH = 256;
 const DEFAULT_CANVAS_HEIGHT = 256;
 
 // Utility functions
-const smoothStep = (a: number, b: number, t: number): number => {
-  // Add input validation
-  if (typeof a !== 'number' || typeof b !== 'number' || typeof t !== 'number') {
-    return 0;
-  }
-
-  const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
-  return clamped * clamped * (3 - 2 * clamped);
-};
-
-const calculateLength = (x: number, y: number): number => {
-  // Add input validation and error handling
-  if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
-    return 0;
-  }
-
-  // Prevent potential overflow
-  const maxX = Math.max(Math.abs(x), Math.abs(y));
-  if (maxX === 0) return 0;
-
-  const scaledX = x / maxX;
-  const scaledY = y / maxX;
-  return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
-};
-
 const roundedRectSDF = (
   x: number,
   y: number,
@@ -96,42 +77,6 @@ const validateVec2 = (vec: Vec2): boolean => {
   );
 };
 
-const clampValue = (value: number, min: number, max: number): number => {
-  // Add input validation
-  if (typeof value !== 'number' || typeof min !== 'number' || typeof max !== 'number') {
-    return min;
-  }
-
-  if (isNaN(value)) return min;
-  if (isNaN(min)) return 0;
-  if (isNaN(max)) return 1;
-
-  return Math.max(min, Math.min(max, value));
-};
-
-// Advanced easing functions for Apple-style smooth animations
-const easeInOutCubic = (t: number): number => {
-  // Add input validation
-  if (typeof t !== 'number' || isNaN(t)) {
-    return 0;
-  }
-
-  const clampedT = Math.max(0, Math.min(1, t));
-  return clampedT < 0.5
-    ? 4 * clampedT * clampedT * clampedT
-    : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
-};
-
-const easeOutQuart = (t: number): number => {
-  // Add input validation
-  if (typeof t !== 'number' || isNaN(t)) {
-    return 0;
-  }
-
-  const clampedT = Math.max(0, Math.min(1, t));
-  return 1 - Math.pow(1 - clampedT, 4);
-};
-
 // Perlin-like noise for organic distortion
 const noise2D = (x: number, y: number): number => {
   // Add input validation
@@ -503,8 +448,8 @@ export const fragmentShaders = {
     const finalY = iy + totalDistortionY + chromaticOffset.y * 0.5;
 
     return createTexture(
-      clampValue(finalX * scaled + 0.5, 0, 1),
-      clampValue(finalY * scaled + 0.5, 0, 1)
+      clamp(finalX * scaled + 0.5, 0, 1),
+      clamp(finalY * scaled + 0.5, 0, 1)
     );
   },
 
@@ -545,7 +490,7 @@ export const fragmentShaders = {
     const totalX = ix + (organicX * 0.035 + fluidVelocityX + vortexX) * mask;
     const totalY = iy + (organicY * 0.035 + fluidVelocityY + vortexY) * mask;
 
-    return createTexture(clampValue(totalX + 0.5, 0, 1), clampValue(totalY + 0.5, 0, 1));
+    return createTexture(clamp(totalX + 0.5, 0, 1), clamp(totalY + 0.5, 0, 1));
   },
 
   // High-end glass with advanced refraction and depth
@@ -593,7 +538,7 @@ export const fragmentShaders = {
     const finalX = ix + (refractionX + depthX + organicNoise * 0.015) * edgeMask;
     const finalY = iy + (refractionY + depthY + organicNoise * 0.015) * edgeMask;
 
-    return createTexture(clampValue(finalX + 0.5, 0, 1), clampValue(finalY + 0.5, 0, 1));
+    return createTexture(clamp(finalX + 0.5, 0, 1), clamp(finalY + 0.5, 0, 1));
   },
 
   // Metallic liquid effect with shimmer
@@ -630,7 +575,7 @@ export const fragmentShaders = {
     const totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask;
     const totalY = iy + (wave2 + shimmer * 0.8 + Math.sin(flowAngle) * flowEffect) * mask;
 
-    return createTexture(clampValue(totalX + 0.5, 0, 1), clampValue(totalY + 0.5, 0, 1));
+    return createTexture(clamp(totalX + 0.5, 0, 1), clamp(totalY + 0.5, 0, 1));
   },
 
   // basiBasi - Expert Premium Glass Shader
@@ -784,7 +729,7 @@ export const fragmentShaders = {
     const finalX = ix + totalDistortionX * 0.85; // Scale down for subtlety
     const finalY = iy + totalDistortionY * 0.85;
 
-    return createTexture(clampValue(finalX + 0.5, 0, 1), clampValue(finalY + 0.5, 0, 1));
+    return createTexture(clamp(finalX + 0.5, 0, 1), clamp(finalY + 0.5, 0, 1));
   },
 
   // Aliases for compatibility
@@ -903,13 +848,13 @@ export class ShaderDisplacementGenerator {
           const g = smoothedDy / maxScale + 0.5;
 
           const pixelIndex = (y * w + x) * 4;
-          data[pixelIndex] = clampValue(r * 255, NORMALIZATION_CLAMP.min, NORMALIZATION_CLAMP.max); // Red channel (X displacement)
-          data[pixelIndex + 1] = clampValue(
+          data[pixelIndex] = clamp(r * 255, NORMALIZATION_CLAMP.min, NORMALIZATION_CLAMP.max); // Red channel (X displacement)
+          data[pixelIndex + 1] = clamp(
             g * 255,
             NORMALIZATION_CLAMP.min,
             NORMALIZATION_CLAMP.max
           ); // Green channel (Y displacement)
-          data[pixelIndex + 2] = clampValue(
+          data[pixelIndex + 2] = clamp(
             g * 255,
             NORMALIZATION_CLAMP.min,
             NORMALIZATION_CLAMP.max
@@ -951,6 +896,3 @@ export class ShaderDisplacementGenerator {
     return this.canvasDPI;
   }
 }
-
-// Re-export animation system functions for convenience
-export { createFBMEngine, liquidGlassWithTime } from './animation-system';

package/src/components/Form/Select.test.tsx

@@ -20,9 +20,9 @@ describe('Select Component', () => {
     // Check native select options
     const select = document.querySelector('select');
     expect(select).not.toBeNull();
-    expect(select?.options).toHaveLength(3); // Placeholder + 2
-    expect(select?.options[1].value).toBe('1');
-    expect(select?.options[2].value).toBe('2');
+    expect(select!.options).toHaveLength(3); // Placeholder + 2
+    expect(select!.options[1]!.value).toBe('1');
+    expect(select!.options[2]!.value).toBe('2');
   });
 
   it('renders compound options correctly', async () => {
@@ -43,9 +43,9 @@ describe('Select Component', () => {
     await waitFor(() => {
         const select = document.querySelector('select');
         expect(select).not.toBeNull();
-        expect(select?.options).toHaveLength(3); // Placeholder + 2
-        expect(select?.options[1].value).toBe('1');
-        expect(select?.options[2].value).toBe('2');
+        expect(select!.options).toHaveLength(3); // Placeholder + 2
+        expect(select!.options[1]!.value).toBe('1');
+        expect(select!.options[2]!.value).toBe('2');
     });
   });
 

package/src/components/Form/Textarea.stories.tsx

@@ -104,7 +104,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Number of visible text lines',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 2 },
+        defaultValue: { summary: '2' },
       },
     },
     cols: {
@@ -138,7 +138,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is disabled',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     invalid: {
@@ -146,7 +146,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is invalid',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     valid: {
@@ -154,7 +154,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is valid',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     glass: {
@@ -162,7 +162,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Enable glass morphism effect',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     defaultValue: {

package/src/lib/composables/useAtomixGlass.ts

@@ -10,13 +10,11 @@ import { ATOMIX_GLASS } from '../constants/components';
 import { globalMouseTracker } from './shared-mouse-tracker';
 import {
   calculateElementCenter,
-  calculateMouseInfluence,
   extractBorderRadiusFromChildren,
   extractBorderRadiusFromDOMElement,
-  validateGlassSize,
+  getInteractionIntensity,
   lerp,
   calculateSpring,
-  calculateVelocity,
   smoothstep,
 } from '../../components/AtomixGlass/glass-utils';
 import {
@@ -24,13 +22,6 @@ import {
   type ResolvedGlassBorderConfig,
 } from '../../components/AtomixGlass/glass-border-styles';
 import { updateAtomixGlassStyles } from './useAtomixGlassStyles';
-// Phase 1: Time-Based Animation System
-import {
-  createAnimationLoop,
-  createFBMEngine,
-  getFBMConfigForQuality,
-  liquidGlassWithTime,
-} from '../../components/AtomixGlass/animation-system';
 
 const { CONSTANTS } = ATOMIX_GLASS;
 
@@ -157,13 +148,7 @@ interface UseAtomixGlassOptions extends Omit<AtomixGlassProps, 'children'> {
   children?: React.ReactNode;
   isFixedOrSticky?: boolean;
   priority?: number; // Priority for z-index ordering
-  // Phase 1: Time-Based Animation System
   withLiquidBlur?: boolean;
-  animationQuality?: 'low' | 'medium' | 'high';
-  timeSpeed?: number;
-  noiseAmplitude?: number;
-  noiseFrequency?: number;
-  displacementStrength?: number;
 }
 
 interface UseAtomixGlassReturn {
@@ -198,10 +183,6 @@ interface UseAtomixGlassReturn {
   /** Resolved liquid glass rim configuration */
   resolvedBorder: ResolvedGlassBorderConfig;
 
-  // Phase 1: Animation System - Shader time control
-  getShaderTime: () => number;
-  applyTimeBasedDistortion: (uv: { x: number; y: number }) => { x: number; y: number };
-
   // Event handlers
   handleMouseEnter: () => void;
   handleMouseLeave: () => void;
@@ -241,14 +222,6 @@ export function useAtomixGlass({
   withLiquidBlur,
   isFixedOrSticky = false,
   priority = 1, // Default priority
-  // Phase 1: Animation System Props
-  withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION,
-  animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED,
-  withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION,
-  distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES,
-  distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY,
-  distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN,
-  distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY,
 }: UseAtomixGlassOptions): UseAtomixGlassReturn {
   // State
   const [isHovered, setIsHovered] = useState(false);
@@ -281,46 +254,12 @@ export function useAtomixGlass({
   const elasticVelocityRef = useRef<MousePosition>({ x: 0, y: 0 });
   const directionalScaleRef = useRef<{ x: number; y: number }>({ x: 1, y: 1 });
   const scaleVelocityRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
-  const lastMouseTimeRef = useRef<number>(0);
   const mouseVelocityRef = useRef<MousePosition>({ x: 0, y: 0 });
 
   const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(false);
   const [userPrefersHighContrast, setUserPrefersHighContrast] = useState(false);
   const [detectedOverLight, setDetectedOverLight] = useState(false);
 
-  // ============================================================================
-  // Phase 1: Time-Based Animation System (Feature 1.1)
-  // ============================================================================
-
-  // Animation state refs
-  const animationFrameIdRef = useRef<number | null>(null);
-  const animationStartTimeRef = useRef<number>(0);
-  const elapsedTimeRef = useRef<number>(0);
-  const shaderTimeRef = useRef<number>(0);
-
-  /**
-   * Get FBM configuration based on quality preset or custom values
-   */
-  const fbmConfig = useMemo(() => {
-    // If quality preset is provided, use it as base
-    const preset = getFBMConfigForQuality(distortionQuality);
-
-    // Override with custom values if provided
-    return {
-      octaves: distortionOctaves ?? preset.octaves,
-      lacunarity: distortionLacunarity ?? preset.lacunarity,
-      gain: distortionGain ?? preset.gain,
-    };
-  }, [distortionQuality, distortionOctaves, distortionLacunarity, distortionGain]);
-
-  /**
-   * Create FBM engine for multi-layer distortion
-   */
-  const fbmEngine = useMemo(() => {
-    if (!withMultiLayerDistortion) return null;
-    return createFBMEngine(fbmConfig);
-  }, [withMultiLayerDistortion, fbmConfig]);
-
   /**
    * Determine effective animation settings
    */
@@ -329,74 +268,6 @@ export function useAtomixGlass({
     [reducedMotion, userPrefersReducedMotion]
   );
 
-  const effectiveWithTimeAnimation = useMemo(() => {
-    return withTimeAnimation && !effectiveReducedMotion;
-  }, [withTimeAnimation, effectiveReducedMotion]);
-
-  /**
-   * Animation loop for time-based effects
-   */
-  useEffect(() => {
-    if (!effectiveWithTimeAnimation || typeof window === 'undefined') {
-      return undefined;
-    }
-
-    let lastFrameTime = performance.now();
-
-    /**
-     * Animation frame handler
-     */
-    const animate = (currentTime: number) => {
-      // Calculate delta time
-      const deltaTime = currentTime - lastFrameTime;
-      lastFrameTime = currentTime;
-
-      // Apply animation speed multiplier
-      const scaledDelta = deltaTime * animationSpeed;
-      elapsedTimeRef.current += scaledDelta;
-      shaderTimeRef.current = elapsedTimeRef.current;
-
-      // Continue animation loop
-      animationFrameIdRef.current = requestAnimationFrame(animate);
-    };
-
-    // Start animation
-    animationStartTimeRef.current = performance.now();
-    animationFrameIdRef.current = requestAnimationFrame(animate);
-
-    // Cleanup
-    return () => {
-      if (animationFrameIdRef.current !== null) {
-        cancelAnimationFrame(animationFrameIdRef.current);
-        animationFrameIdRef.current = null;
-      }
-    };
-  }, [effectiveWithTimeAnimation, animationSpeed]);
-
-  /**
-   * Get current shader time for animations
-   */
-  const getShaderTime = useCallback(() => {
-    return shaderTimeRef.current;
-  }, []);
-
-  /**
-   * Apply time-based distortion to UV coordinates
-   */
-  const applyTimeBasedDistortion = useCallback(
-    (uv: { x: number; y: number }): { x: number; y: number } => {
-      if (!effectiveWithTimeAnimation || !fbmEngine) {
-        return uv;
-      }
-
-      const time = shaderTimeRef.current;
-
-      // Apply liquid glass distortion with time
-      return liquidGlassWithTime(uv, time, fbmConfig);
-    },
-    [effectiveWithTimeAnimation, fbmEngine, fbmConfig]
-  );
-
   // Memoized derived values
   const effectiveBorderRadius = useMemo(() => {
     if (borderRadius !== undefined) {
@@ -680,8 +551,7 @@ export function useAtomixGlass({
 
   const overLightConfig = useMemo(() => {
     const isOverLight = getEffectiveOverLight();
-    const hoverIntensity = isHovered ? 1.4 : 1;
-    const activeIntensity = isActive ? 1.6 : 1;
+    const { hoverIntensity, activeIntensity } = getInteractionIntensity(isHovered, isActive);
 
     // More robust overlight configuration with better defaults and clamping
     const baseOpacity = isOverLight
@@ -1223,8 +1093,6 @@ export function useAtomixGlass({
     overLightConfig,
     resolvedBorder,
     transformStyle,
-    getShaderTime,
-    applyTimeBasedDistortion,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -5,6 +5,7 @@ import {
 } from '../../components/AtomixGlass/glass-border-styles';
 import {
   calculateMouseInfluence,
+  getInteractionIntensity,
   validateGlassSize,
   clampBlur,
   smoothstep,
@@ -84,8 +85,7 @@ export const updateAtomixGlassStyles = (
 
   // Calculate mouse influence
   const mouseInfluence = calculateMouseInfluence(mouseOffset);
-  const hoverIntensity = isHovered ? 1.4 : 1;
-  const activeIntensity = isActive ? 1.6 : 1;
+  const { hoverIntensity, activeIntensity } = getInteractionIntensity(isHovered, isActive);
 
   // Calculate dynamic OverLight config
   const overLightConfig = {
@@ -360,7 +360,7 @@ export const updateAtomixGlassStyles = (
       '--atomix-glass-container-box-shadow',
       isOverLight
         ? '0px 16px 70px rgba(0, 0, 0, 0.75)'
-        : '0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18)'
+        : '0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10)'
     );
   }
 };