@shohojdhara/atomix 0.4.4 → 0.4.6

package/src/lib/composables/glass-styles.ts

@@ -1,302 +0,0 @@
-import type { CSSProperties } from 'react';
-import type {
-  GlassSize,
-  MousePosition,
-} from '../types/components';
-import { ATOMIX_GLASS } from '../constants/components';
-import { calculateMouseInfluence, clampBlur } from '../../components/AtomixGlass/glass-utils';
-
-const { CONSTANTS } = ATOMIX_GLASS;
-
-export interface ResolvedOverLightConfig {
-  isOverLight: boolean;
-  threshold: number;
-  opacity: number;
-  contrast: number;
-  brightness: number;
-  saturationBoost: number;
-  shadowIntensity: number;
-  borderOpacity: number;
-}
-
-interface CalculateGlassVarsOptions {
-  mouseOffset: MousePosition;
-  overLightConfig: ResolvedOverLightConfig;
-  effectiveBorderRadius: number;
-  transformStyle: string;
-  adjustedSize: { width: string | number; height: string | number };
-  positionStyles: { position: any; top: any; left: any };
-  style: CSSProperties;
-  isOverLight: boolean;
-  isActive: boolean;
-  isHovered: boolean;
-}
-
-export const calculateGlassVars = ({
-  mouseOffset,
-  overLightConfig,
-  effectiveBorderRadius,
-  transformStyle,
-  adjustedSize,
-  positionStyles,
-  style,
-  isOverLight,
-  isActive,
-  isHovered,
-}: CalculateGlassVarsOptions): CSSProperties => {
-  const mx = mouseOffset.x;
-  const my = mouseOffset.y;
-  const absMx = Math.abs(mx);
-  const absMy = Math.abs(my);
-  const GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
-
-  // Gradient Values
-  const borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER;
-  const borderStop1 = Math.max(
-    GRADIENT.BORDER_STOP_1.MIN,
-    GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER
-  );
-  const borderStop2 = Math.min(
-    GRADIENT.BORDER_STOP_2.MAX,
-    GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER
-  );
-  const borderOpacities = [
-    GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW,
-    GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH,
-    GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW,
-    GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH,
-  ];
-
-  const hoverPositions = {
-    hover1: {
-      x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
-      y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1,
-    },
-    hover2: {
-      x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
-      y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2,
-    },
-    hover3: {
-      x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
-      y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
-    },
-  };
-
-  const basePosition = {
-    x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
-    y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER,
-  };
-
-  // Opacity Values
-  const overLightOpacity = overLightConfig.opacity;
-  const BASE_OVER_LIGHT_OPACITY = 0.4;
-  const OVER_OPACITY_MULTIPLIER = 1.1;
-
-  const opacityValues = {
-    hover1: isHovered || isActive ? 0.5 : 0,
-    hover2: isActive ? 0.5 : 0,
-    hover3: isHovered ? 0.4 : isActive ? 0.8 : 0,
-    base: isOverLight ? overLightOpacity || BASE_OVER_LIGHT_OPACITY : 0,
-    over: isOverLight
-      ? (overLightOpacity || BASE_OVER_LIGHT_OPACITY) * OVER_OPACITY_MULTIPLIER
-      : 0,
-  };
-
-  const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE;
-  const blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK;
-  const configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
-
-  return {
-    '--atomix-glass-radius': `${effectiveBorderRadius}px`,
-    '--atomix-glass-transform': transformStyle || 'none',
-    '--atomix-glass-position': positionStyles.position,
-    '--atomix-glass-top': positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
-    '--atomix-glass-left': positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
-    '--atomix-glass-width':
-      style.position !== 'fixed' ? adjustedSize.width : `${adjustedSize.width}px`,
-    '--atomix-glass-height':
-      style.position !== 'fixed' ? adjustedSize.height : `${adjustedSize.height}px`,
-    '--atomix-glass-border-width': 'var(--atomix-spacing-0-5, 0.09375rem)',
-    '--atomix-glass-blend-mode': isOverLight ? 'multiply' : 'overlay',
-    '--atomix-glass-border-gradient-1': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-    '--atomix-glass-border-gradient-2': `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-    '--atomix-glass-hover-1-opacity': opacityValues.hover1,
-    '--atomix-glass-hover-1-gradient': isOverLight
-      ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)`
-      : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
-    '--atomix-glass-hover-2-opacity': opacityValues.hover2,
-    '--atomix-glass-hover-2-gradient': isOverLight
-      ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)`
-      : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
-    '--atomix-glass-hover-3-opacity': opacityValues.hover3,
-    '--atomix-glass-hover-3-gradient': isOverLight
-      ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)`
-      : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
-    '--atomix-glass-base-opacity': opacityValues.base,
-    '--atomix-glass-base-gradient': isOverLight
-      ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
-      : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
-    '--atomix-glass-overlay-opacity': opacityValues.over,
-    '--atomix-glass-overlay-gradient': isOverLight
-      ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
-      : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
-  } as CSSProperties;
-};
-
-interface CalculateContainerVarsOptions {
-  mouseOffset: MousePosition;
-  glassSize: GlassSize;
-  padding: string;
-  borderRadius: number;
-  overLightConfig: ResolvedOverLightConfig;
-  isOverLight: boolean;
-  effectiveWithoutEffects: boolean;
-  effectiveReducedMotion: boolean;
-  withLiquidBlur: boolean;
-  blurAmount: number;
-  saturation: number;
-}
-
-export const calculateContainerVars = ({
-  mouseOffset,
-  glassSize,
-  padding,
-  borderRadius,
-  overLightConfig,
-  isOverLight,
-  effectiveWithoutEffects,
-  effectiveReducedMotion,
-  withLiquidBlur,
-  blurAmount,
-  saturation,
-}: CalculateContainerVarsOptions): CSSProperties => {
-  // Pre-calculate static multipliers
-  const EDGE_BLUR_MULTIPLIER = 1.25;
-  const CENTER_BLUR_MULTIPLIER = 1.1;
-  const FLOW_BLUR_MULTIPLIER = 1.2;
-  const MOUSE_INFLUENCE_BLUR_FACTOR = 0.15;
-  const EDGE_INTENSITY_MOUSE_FACTOR = 0.15;
-  const CENTER_INTENSITY_MOUSE_FACTOR = 0.1;
-  // Maximum blur multiplier relative to base — prevents runaway blur
-  const MAX_BLUR_RELATIVE = 2;
-
-  const defaultBlur = {
-    baseBlur: blurAmount,
-    edgeBlur: blurAmount * EDGE_BLUR_MULTIPLIER,
-    centerBlur: blurAmount * CENTER_BLUR_MULTIPLIER,
-    flowBlur: blurAmount * FLOW_BLUR_MULTIPLIER,
-  };
-
-  let liquidBlur = defaultBlur;
-
-  if (
-    withLiquidBlur &&
-    mouseOffset &&
-    typeof mouseOffset.x === 'number' &&
-    typeof mouseOffset.y === 'number' &&
-    !isNaN(mouseOffset.x) &&
-    !isNaN(mouseOffset.y)
-  ) {
-    const mouseInfluence = calculateMouseInfluence(mouseOffset);
-    const maxBlur = blurAmount * MAX_BLUR_RELATIVE;
-
-    const baseBlur = Math.min(
-      maxBlur,
-      blurAmount + mouseInfluence * blurAmount * MOUSE_INFLUENCE_BLUR_FACTOR
-    );
-    const edgeIntensity = mouseInfluence * EDGE_INTENSITY_MOUSE_FACTOR;
-    const edgeBlur = Math.min(maxBlur, baseBlur * (0.8 + edgeIntensity * 0.4));
-    const centerIntensity = mouseInfluence * CENTER_INTENSITY_MOUSE_FACTOR;
-    const centerBlur = Math.min(maxBlur, baseBlur * (0.3 + centerIntensity * 0.3));
-    const flowBlur = Math.min(maxBlur, baseBlur * FLOW_BLUR_MULTIPLIER);
-
-    liquidBlur = {
-      baseBlur: clampBlur(baseBlur),
-      edgeBlur: clampBlur(edgeBlur),
-      centerBlur: clampBlur(centerBlur),
-      flowBlur: clampBlur(flowBlur),
-    };
-  }
-
-  const dynamicSaturation = saturation + (liquidBlur.baseBlur || 0) * 20;
-
-  // Validate blur values before using them
-  const validatedBaseBlur =
-    typeof liquidBlur.baseBlur === 'number' && !isNaN(liquidBlur.baseBlur)
-      ? liquidBlur.baseBlur
-      : 0;
-  const validatedEdgeBlur =
-    typeof liquidBlur.edgeBlur === 'number' && !isNaN(liquidBlur.edgeBlur)
-      ? liquidBlur.edgeBlur
-      : 0;
-  const validatedCenterBlur =
-    typeof liquidBlur.centerBlur === 'number' && !isNaN(liquidBlur.centerBlur)
-      ? liquidBlur.centerBlur
-      : 0;
-  const validatedFlowBlur =
-    typeof liquidBlur.flowBlur === 'number' && !isNaN(liquidBlur.flowBlur)
-      ? liquidBlur.flowBlur
-      : 0;
-
-  // Adaptive strategy: prefer single-pass blur for large areas or when effects are reduced
-  const area = glassSize ? glassSize.width * glassSize.height : 0;
-  const areaIsLarge = area > 180000; // ~600x300 threshold; tune as needed
-  const devicePrefersPerformance = effectiveReducedMotion || effectiveWithoutEffects;
-  const useMultiPass = withLiquidBlur && !devicePrefersPerformance && !areaIsLarge;
-
-  let backdropFilter = `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`;
-
-  if (useMultiPass) {
-    const weightedBlur = clampBlur(
-      validatedBaseBlur * 0.4 +
-        validatedEdgeBlur * 0.25 +
-        validatedCenterBlur * 0.15 +
-        validatedFlowBlur * 0.2
-    );
-
-    backdropFilter = `blur(${weightedBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`;
-  } else {
-    // Single-pass fallback: stronger radius to match perceived blur of multi-pass
-    const effectiveBlur = clampBlur(
-      Math.max(
-        validatedBaseBlur,
-        validatedEdgeBlur * 0.8,
-        validatedCenterBlur * 1.1,
-        validatedFlowBlur * 0.9
-      )
-    );
-
-    backdropFilter = `blur(${effectiveBlur}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`;
-  }
-
-  const mx =
-    mouseOffset && typeof mouseOffset.x === 'number' && !isNaN(mouseOffset.x) ? mouseOffset.x : 0;
-  const my =
-    mouseOffset && typeof mouseOffset.y === 'number' && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
-
-  return {
-    '--atomix-glass-container-width': `${glassSize?.width}`,
-    '--atomix-glass-container-height': `${glassSize?.height}`,
-    '--atomix-glass-container-padding': padding || '0 0',
-    '--atomix-glass-container-radius': `${typeof borderRadius === 'number' && !isNaN(borderRadius) ? borderRadius : 0}px`,
-    '--atomix-glass-container-backdrop': backdropFilter,
-    '--atomix-glass-container-shadow': isOverLight
-      ? [
-          `inset 0 1px 0 rgba(255, 255, 255, ${(0.4 + mx * 0.002) * (overLightConfig?.shadowIntensity || 1)})`,
-          `inset 0 -1px 0 rgba(0, 0, 0, ${(0.2 + Math.abs(my) * 0.001) * (overLightConfig?.shadowIntensity || 1)})`,
-          `inset 0 0 20px rgba(0, 0, 0, ${(0.08 + Math.abs(mx + my) * 0.001) * (overLightConfig?.shadowIntensity || 1)})`,
-          `0 2px 12px rgba(0, 0, 0, ${(0.12 + Math.abs(my) * 0.002) * (overLightConfig?.shadowIntensity || 1)})`,
-        ].join(', ')
-      : '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': effectiveWithoutEffects ? 0 : 1,
-    '--atomix-glass-container-bg': isOverLight
-      ? `linear-gradient(${180 + mx * 0.5}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)`
-      : 'none',
-    '--atomix-glass-container-text-shadow': isOverLight
-      ? '0px 2px 12px rgba(0, 0, 0, 0)'
-      : '0px 2px 12px rgba(0, 0, 0, 0.4)',
-    '--atomix-glass-container-box-shadow': isOverLight
-      ? '0px 16px 70px rgba(0, 0, 0, 0.75)'
-      : '0px 12px 40px rgba(0, 0, 0, 0.25)',
-  } as CSSProperties;
-};

package/src/lib/composables/useGlassContainer.ts

@@ -1,177 +0,0 @@
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
-import { GlassContainerProps, MousePosition } from '../types/components';
-
-/**
- * Custom hook for managing GlassContainer state and interactions
- */
-export function useGlassContainer(props: GlassContainerProps) {
-  const {
-    glassSize = { width: 270, height: 69 },
-    elasticity = 0.15,
-    mouseContainer,
-    globalMousePos: externalGlobalMousePos,
-    mouseOffset: externalMouseOffset,
-  } = props;
-
-  const filterId = useId();
-  const glassRef = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
-  const [isActive, setIsActive] = useState(false);
-  const [currentGlassSize, setCurrentGlassSize] = useState(glassSize);
-  const [internalGlobalMousePos, setInternalGlobalMousePos] = useState<MousePosition>({
-    x: 0,
-    y: 0,
-  });
-  const [internalMouseOffset, setInternalMouseOffset] = useState<MousePosition>({ x: 0, y: 0 });
-
-  // Use external mouse position if provided, otherwise use internal
-  const globalMousePos = externalGlobalMousePos || internalGlobalMousePos;
-  const mouseOffset = externalMouseOffset || internalMouseOffset;
-
-  // Internal mouse tracking
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      const container = mouseContainer?.current || glassRef.current;
-      if (!container) return undefined;
-
-      const rect = container.getBoundingClientRect();
-      const centerX = rect.left + rect.width / 2;
-      const centerY = rect.top + rect.height / 2;
-
-      setInternalMouseOffset({
-        x: ((e.clientX - centerX) / rect.width) * 100,
-        y: ((e.clientY - centerY) / rect.height) * 100,
-      });
-
-      setInternalGlobalMousePos({
-        x: e.clientX,
-        y: e.clientY,
-      });
-    },
-    [mouseContainer]
-  );
-
-  // Set up mouse tracking if no external mouse position is provided
-  useEffect(() => {
-    if (externalGlobalMousePos && externalMouseOffset) return undefined;
-
-    const container = mouseContainer?.current || glassRef.current;
-    if (!container) return undefined;
-
-    container.addEventListener('mousemove', handleMouseMove);
-    return () => container.removeEventListener('mousemove', handleMouseMove);
-  }, [handleMouseMove, mouseContainer, externalGlobalMousePos, externalMouseOffset]);
-
-  // Calculate directional scaling based on mouse position
-  const calculateDirectionalScale = useCallback(() => {
-    if (!globalMousePos.x || !globalMousePos.y || !glassRef.current) {
-      return 'scale(1)';
-    }
-
-    const rect = glassRef.current.getBoundingClientRect();
-    const pillCenterX = rect.left + rect.width / 2;
-    const pillCenterY = rect.top + rect.height / 2;
-    const pillWidth = currentGlassSize.width;
-    const pillHeight = currentGlassSize.height;
-
-    const deltaX = globalMousePos.x - pillCenterX;
-    const deltaY = globalMousePos.y - pillCenterY;
-
-    const edgeDistanceX = Math.max(0, Math.abs(deltaX) - pillWidth / 2);
-    const edgeDistanceY = Math.max(0, Math.abs(deltaY) - pillHeight / 2);
-    const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
-
-    const activationZone = 200;
-    if (edgeDistance > activationZone) return 'scale(1)';
-
-    const fadeInFactor = 1 - edgeDistance / activationZone;
-    const centerDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-    if (centerDistance === 0) return 'scale(1)';
-
-    const normalizedX = deltaX / centerDistance;
-    const normalizedY = deltaY / centerDistance;
-    const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor;
-
-    const scaleX =
-      1 +
-      Math.abs(normalizedX) * stretchIntensity * 0.3 -
-      Math.abs(normalizedY) * stretchIntensity * 0.15;
-    const scaleY =
-      1 +
-      Math.abs(normalizedY) * stretchIntensity * 0.3 -
-      Math.abs(normalizedX) * stretchIntensity * 0.15;
-
-    return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
-  }, [globalMousePos, elasticity, currentGlassSize]);
-
-  // Calculate elastic translation
-  const calculateElasticTranslation = useCallback(() => {
-    if (!glassRef.current) return { x: 0, y: 0 };
-
-    const rect = glassRef.current.getBoundingClientRect();
-    const pillCenterX = rect.left + rect.width / 2;
-    const pillCenterY = rect.top + rect.height / 2;
-    const pillWidth = currentGlassSize.width;
-    const pillHeight = currentGlassSize.height;
-
-    const edgeDistanceX = Math.max(0, Math.abs(globalMousePos.x - pillCenterX) - pillWidth / 2);
-    const edgeDistanceY = Math.max(0, Math.abs(globalMousePos.y - pillCenterY) - pillHeight / 2);
-    const edgeDistance = Math.sqrt(edgeDistanceX * edgeDistanceX + edgeDistanceY * edgeDistanceY);
-
-    const activationZone = 200;
-    const fadeInFactor = edgeDistance > activationZone ? 0 : 1 - edgeDistance / activationZone;
-
-    return {
-      x: (globalMousePos.x - pillCenterX) * elasticity * 0.1 * fadeInFactor,
-      y: (globalMousePos.y - pillCenterY) * elasticity * 0.1 * fadeInFactor,
-    };
-  }, [globalMousePos, elasticity, currentGlassSize]);
-
-  // Update glass size
-  useEffect(() => {
-    const updateGlassSize = () => {
-      if (glassRef.current) {
-        const rect = glassRef.current.getBoundingClientRect();
-        setCurrentGlassSize({ width: rect.width, height: rect.height });
-      }
-    };
-
-    updateGlassSize();
-    window.addEventListener('resize', updateGlassSize);
-    return () => window.removeEventListener('resize', updateGlassSize);
-  }, []);
-
-  const handleMouseEnter = useCallback(() => {
-    setIsHovered(true);
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setIsHovered(false);
-  }, []);
-
-  const handleMouseDown = useCallback(() => {
-    setIsActive(true);
-  }, []);
-
-  const handleMouseUp = useCallback(() => {
-    setIsActive(false);
-  }, []);
-
-  return {
-    filterId,
-    glassRef,
-    isHovered,
-    isActive,
-    currentGlassSize,
-    globalMousePos,
-    mouseOffset,
-    calculateDirectionalScale,
-    calculateElasticTranslation,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleMouseDown,
-    handleMouseUp,
-  };
-}
-
-export default useGlassContainer;