@shohojdhara/atomix 0.6.4 → 0.6.6

package/src/lib/composables/useAtomixGlassStyles.ts

@@ -1,13 +1,17 @@
 import { ATOMIX_GLASS } from '../constants/components';
 import {
-  calculateDistance,
+  buildGlassBorderCssVars,
+  computeBorderTensionFactor,
+} from '../../components/AtomixGlass/glass-border-styles';
+import {
   calculateMouseInfluence,
+  getInteractionIntensity,
   validateGlassSize,
   clampBlur,
   smoothstep,
   softClamp,
 } from '../../components/AtomixGlass/glass-utils';
-import type { GlassSize, MousePosition, OverLightObjectConfig } from '../types/components';
+import type { GlassSize, MousePosition } from '../types/components';
 
 /**
  * Updates the styles of the AtomixGlass wrapper and container elements imperatively
@@ -44,8 +48,10 @@ export const updateAtomixGlassStyles = (
     withLiquidBlur?: boolean;
     blurAmount?: number;
     saturation?: number;
-    padding?: string;
+
     isFixedOrSticky?: boolean;
+    borderAnimated?: boolean;
+    borderOpacityMultiplier?: number;
   }
 ) => {
   if (!wrapperElement && !containerElement) return;
@@ -71,14 +77,15 @@ export const updateAtomixGlassStyles = (
     withLiquidBlur,
     blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
     saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
-    padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+
     isFixedOrSticky = false,
+    borderAnimated = true,
+    borderOpacityMultiplier = 1,
   } = params;
 
   // 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 = {
@@ -104,8 +111,7 @@ export const updateAtomixGlassStyles = (
     : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) scaleX(${scaleX}) scaleY(${scaleY})`;
 
   // ── Apple Liquid Depth Refinements ───────────────────────────────
-  const stretchMagnitude = calculateDistance({ x: 0, y: 0 }, elasticTranslation);
-  const tensionFactor = smoothstep(stretchMagnitude / 80);
+  const tensionFactor = computeBorderTensionFactor(elasticTranslation);
 
   // Subtle lighting boost on stretch
   const lightingContrast = Math.min(1.8, overLightConfig.contrast + tensionFactor * 0.2);
@@ -118,42 +124,6 @@ export const updateAtomixGlassStyles = (
     const absMx = Math.abs(mx);
     const absMy = Math.abs(my);
     const GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
-
-    // ── Velocity-Based Rotation ─────────────────────────────────────
-    // Combine mouse offset with velocity for dynamic rotation
-    const velocityRotation =
-      (mouseVelocity.x + elasticVelocity.x) * (GRADIENT.VELOCITY_ANGLE_MULTIPLIER || 2.5);
-    const borderGradientAngle =
-      GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER + velocityRotation;
-
-    // Chromatic offsets for depth
-    const chromaticOffset = GRADIENT.CHROMATIC_OFFSET || 1.5;
-    const angleR = borderGradientAngle - chromaticOffset;
-    const angleB = borderGradientAngle + chromaticOffset;
-
-    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
-    );
-
-    // Modulate border opacity by tension (glow on stretch)
-    const tensionGlow = 1 + tensionFactor * 0.5;
-    const borderOpacities = [
-      (GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) *
-        tensionGlow,
-      (GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) *
-        tensionGlow,
-      (GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) *
-        tensionGlow,
-      (GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) *
-        tensionGlow,
-    ];
-
-    const configBorderOpacity = overLightConfig.borderOpacity;
     const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE;
     const blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK;
 
@@ -177,12 +147,19 @@ export const updateAtomixGlassStyles = (
       y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER,
     };
 
+    // Opacity is either 0 (hidden) or 1 (visible) — actual visual intensity is
+    // encoded in each gradient's rgba alpha.  The typed @property CSS vars
+    // transition these 0→1 values smoothly via CSS (no JS animation needed).
     const opacityValues = {
-      hover1: isHovered || isActive ? 0.5 : 0,
-      hover2: isActive ? 0.5 : 0,
-      hover3: isHovered ? 0.4 : isActive ? 0.8 : 0,
-      base: isOverLight ? overLightConfig.opacity : 0,
-      over: isOverLight ? overLightConfig.opacity * 1.1 : 0,
+      // hover-1: ambient highlight glow — present on hover and during press
+      hover1: isHovered || isActive ? 1 : 0,
+      // hover-2: press depth shadow — only fires on active (mousedown)
+      hover2: isActive ? 1 : 0,
+      // hover-3: global soft-light surface shift — half-strength on hover, full on press
+      hover3: isActive ? 1 : isHovered ? 0.55 : 0,
+      // Dark chrome: faint smoky tint; over-light keeps stronger fill
+      base: isOverLight ? overLightConfig.opacity : 0.14,
+      over: isOverLight ? overLightConfig.opacity * 1.1 : 0.1,
     };
 
     const style = wrapperElement.style;
@@ -199,51 +176,56 @@ export const updateAtomixGlassStyles = (
     style.setProperty('--atomix-glass-brightness', lightingBrightness.toString());
 
     // ── Chromatic Rim Lighting ──────────────────────────────────────
-    // Layer 1: Core White/Blue highlight
-    style.setProperty(
-      '--atomix-glass-border-gradient-1',
-      `linear-gradient(${angleB}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`
-    );
-    // Layer 2: Subtle Red/Warm highlight (offset angle)
-    style.setProperty(
-      '--atomix-glass-border-gradient-2',
-      `linear-gradient(${angleR}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`
-    );
+    const borderVars = ATOMIX_GLASS.BORDER.GRADIENT_CSS_VARS;
+    if (borderAnimated && !effectiveWithoutEffects) {
+      const borderCssVars = buildGlassBorderCssVars({
+        mouseOffset,
+        mouseVelocity,
+        elasticVelocity,
+        borderOpacity: overLightConfig.borderOpacity,
+        opacityMultiplier: borderOpacityMultiplier,
+        tensionFactor,
+      });
+      style.setProperty(borderVars.GRADIENT_1, borderCssVars[borderVars.GRADIENT_1] ?? '');
+      style.setProperty(borderVars.GRADIENT_2, borderCssVars[borderVars.GRADIENT_2] ?? '');
+    } else {
+      style.removeProperty(borderVars.GRADIENT_1);
+      style.removeProperty(borderVars.GRADIENT_2);
+    }
 
-    // Hover gradients
+    // Hover gradients — cursor-relative radial positions for realistic light tracking.
+    // hover-1: white overlay highlight following cursor (works on both dark + light)
     style.setProperty(
       '--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}%)`
+      `radial-gradient(65% 55% at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, 0.24) 0%, rgba(${whiteColor}, 0.06) 45%, rgba(${whiteColor}, 0) 72%)`
     );
 
+    // hover-2: press depth — darkens at cursor with multiply blend, isOverLight uses stronger black
     style.setProperty(
       '--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}%)`
+        ? `radial-gradient(60% 50% at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, 0.22) 0%, rgba(${blackColor}, 0.06) 50%, rgba(${blackColor}, 0) 72%)`
+        : `radial-gradient(60% 50% at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, 0.18) 0%, rgba(${blackColor}, 0.04) 50%, rgba(${blackColor}, 0) 72%)`
     );
 
+    // hover-3: full-surface soft-light tint; linear gradient angled with cursor X
     style.setProperty(
       '--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}%)`
+      `linear-gradient(${150 + mx * 0.3}deg, rgba(${whiteColor}, ${isOverLight ? 0.08 : 0.12}) 0%, rgba(${whiteColor}, 0.04) 55%, rgba(${whiteColor}, 0) 100%)`
     );
 
     style.setProperty(
       '--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})`
+        : `linear-gradient(180deg, rgba(${blackColor}, 0.42) 0%, rgba(${blackColor}, 0.22) 55%, rgba(${blackColor}, 0.12) 100%)`
     );
 
     style.setProperty(
       '--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})`
+        : `radial-gradient(120% 80% at 50% 0%, rgba(${whiteColor}, 0.14) 0%, rgba(${whiteColor}, 0) 55%)`
     );
 
     // Opacities
@@ -339,7 +321,7 @@ export const updateAtomixGlassStyles = (
     // Container variables
     const style = containerElement.style;
 
-    style.setProperty('--atomix-glass-container-padding', padding);
+
     style.setProperty('--atomix-glass-container-radius', `${effectiveBorderRadius}px`);
 
     style.setProperty('--atomix-glass-container-backdrop', backdropFilterString);
@@ -349,12 +331,12 @@ export const updateAtomixGlassStyles = (
       '--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)})`,
+            `inset 0 1px 0 rgba(255, 255, 255, ${(0.35 + mx * 0.002) * (overLightConfig.shadowIntensity || 1)})`,
+            `inset 0 -1px 0 rgba(0, 0, 0, ${(0.15 + Math.abs(my) * 0.001) * (overLightConfig.shadowIntensity || 1)})`,
+            `inset 0 0 20px rgba(0, 0, 0, ${(0.06 + Math.abs(mx + my) * 0.001) * (overLightConfig.shadowIntensity || 1)})`,
+            `0 2px 12px rgba(0, 0, 0, ${(0.08 + 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.CONSTANTS.CONTAINER_SHADOW.LIGHT
     );
 
     style.setProperty(
@@ -376,7 +358,9 @@ export const updateAtomixGlassStyles = (
 
     style.setProperty(
       '--atomix-glass-container-box-shadow',
-      isOverLight ? '0px 16px 70px rgba(0, 0, 0, 0.75)' : '0px 12px 40px rgba(0, 0, 0, 0.25)'
+      isOverLight
+        ? '0px 16px 70px rgba(0, 0, 0, 0.75)'
+        : '0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10)'
     );
   }
 };

package/src/lib/composables/usePerformanceMonitor.ts

@@ -181,6 +181,11 @@ export function usePerformanceMonitor(
   const [manualOverride, setManualOverride] = useState(false);
   const [isEnabled, setIsEnabled] = useState(enabled);
 
+  // Sync external `enabled` prop changes into internal state
+  useEffect(() => {
+    setIsEnabled(enabled ?? true);
+  }, [enabled]);
+
   // Refs for frame tracking
   const frameCountRef = useRef(0);
   const lastFpsUpdateRef = useRef(0);
@@ -380,69 +385,3 @@ export function usePerformanceMonitor(
     toggleMonitoring,
   };
 }
-
-/**
- * Debug Overlay Component (Optional)
- * 
- * Shows real-time performance metrics on screen.
- * Only rendered when showOverlay is enabled.
- */
-export function PerformanceOverlay({ metrics }: { metrics: PerformanceMetrics }) {
-  if (typeof window === 'undefined') return null;
-
-  const overlayStyle: React.CSSProperties = {
-    position: 'fixed',
-    top: '10px',
-    right: '10px',
-    padding: '10px',
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    color: '#fff',
-    fontFamily: 'monospace',
-    fontSize: '12px',
-    borderRadius: '4px',
-    zIndex: 9999,
-    pointerEvents: 'none',
-    minWidth: '150px',
-  };
-
-  const getFpsColor = (fps: number) => {
-    if (fps >= 58) return '#4ade80'; // Green
-    if (fps >= 45) return '#fbbf24'; // Yellow
-    return '#ef4444'; // Red
-  };
-
-  // Performance overlay removed - will be implemented as separate component
-  return null;
-}
-
-/**
- * Utility to get quality multipliers for glass parameters
- */
-export function getQualityMultipliers(quality: 'low' | 'medium' | 'high') {
-  switch (quality) {
-    case 'low':
-      return {
-        distortionOctaves: 2,
-        displacementScale: 0.6,
-        blurAmount: 0.7,
-        animationSpeed: 0.8,
-        chromaticIntensity: 0.5,
-      };
-    case 'medium':
-      return {
-        distortionOctaves: 4,
-        displacementScale: 0.85,
-        blurAmount: 0.9,
-        animationSpeed: 0.95,
-        chromaticIntensity: 0.75,
-      };
-    case 'high':
-      return {
-        distortionOctaves: 5,
-        displacementScale: 1.0,
-        blurAmount: 1.0,
-        animationSpeed: 1.0,
-        chromaticIntensity: 1.0,
-      };
-  }
-}