@shohojdhara/atomix 0.6.4 → 0.6.6

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

@@ -1,28 +1,20 @@
 import type { CSSProperties } from 'react';
 import React from 'react';
-import type { MousePosition, GlassSize } from '../../lib/types/components';
+import type { DisplacementMode, GlassSize, MousePosition } from '../../lib/types/components';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 
 const { CONSTANTS } = ATOMIX_GLASS;
 
 /**
- * Calculate distance between two points
+ * 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 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);
-};
+export interface Vec2 {
+  x: number;
+  y: number;
+}
 
 /**
  * Calculate element center from bounding rect
@@ -44,7 +36,7 @@ export const calculateMouseInfluence = (mouseOffset: MousePosition): number => {
   if (!mouseOffset || typeof mouseOffset.x !== 'number' || typeof mouseOffset.y !== 'number') {
     return 0;
   }
-  // Bounded calculation — keeps the glass effect subtle and stable
+  // Clamp influence to keep mouse response subtle and stable.
   const influence =
     Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) /
     CONSTANTS.MOUSE_INFLUENCE_DIVISOR;
@@ -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.
@@ -280,6 +345,373 @@ export const calculateVelocity = (
   return (current - previous) / deltaTime;
 };
 
+/**
+ * Layout, sizing, and effect-resolution utilities for AtomixGlass.
+ *
+ * The root wrapper exposes CSS custom properties; the container owns layout and
+ * backdrop-filter. Helpers in this section keep decorative layers aligned with
+ * the container across fixed, sticky, and in-flow positioning modes.
+ */
+
+/** Subset of CSS layout properties used for glass positioning. */
+export type GlassLayoutPosition = Pick<
+  CSSProperties,
+  'position' | 'top' | 'left' | 'right' | 'bottom' | 'inset'
+>;
+
+/** Inset values formatted for `--atomix-glass-*` custom properties. */
+export interface GlassLayerInsetVars {
+  top: string;
+  left: string;
+  right: string;
+  bottom: string;
+}
+
+/**
+ * Normalizes a layout inset for use in CSS custom properties.
+ *
+ * @param value - Raw inset from `style` (number, px string, or `auto`).
+ * @param fallback - Value used when `value` is undefined.
+ */
+export function formatGlassInsetValue(
+  value: string | number | undefined,
+  fallback: string | number = 'auto'
+): string {
+  if (value === undefined) {
+    return typeof fallback === 'number' ? `${fallback}px` : String(fallback);
+  }
+  if (value === 'auto') {
+    return 'auto';
+  }
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+/**
+ * Determines whether the glass should use fixed/sticky layout semantics.
+ *
+ * @param explicit - Value of the `isFixedOrSticky` prop.
+ * @param position - `position` from the consumer `style` object.
+ */
+export function isGlassFixedOrSticky(
+  explicit?: boolean,
+  position?: CSSProperties['position']
+): boolean {
+  return Boolean(explicit || position === 'fixed' || position === 'sticky');
+}
+
+/**
+ * Extracts layout-related properties from a React `CSSProperties` object.
+ */
+export function pickGlassLayoutStyle(style: CSSProperties): GlassLayoutPosition {
+  const { position, top, left, right, bottom, inset } = style;
+  return {
+    ...(position != null && { position }),
+    ...(top !== undefined && { top }),
+    ...(left !== undefined && { left }),
+    ...(right !== undefined && { right }),
+    ...(bottom !== undefined && { bottom }),
+    ...(inset !== undefined && { inset }),
+  };
+}
+
+/**
+ * Resolves inset custom properties for decorative layers (hover, borders, backgrounds).
+ *
+ * For fixed and sticky modes, insets mirror the container so sibling layers remain
+ * aligned. In-flow modes, insets follow the consumer `style` when a non-default
+ * `position` is provided.
+ */
+export function getGlassLayerInsetVars(
+  isFixedOrSticky: boolean,
+  restStyle: CSSProperties
+): GlassLayerInsetVars {
+  if (isFixedOrSticky) {
+    return {
+      top: formatGlassInsetValue(restStyle.top, 0),
+      left: formatGlassInsetValue(restStyle.left, 0),
+      right: formatGlassInsetValue(restStyle.right, 'auto'),
+      bottom: formatGlassInsetValue(restStyle.bottom, 'auto'),
+    };
+  }
+
+  const position = restStyle.position;
+  const usesCustomPosition =
+    position != null && position !== 'static' && position !== 'relative';
+
+  if (!usesCustomPosition) {
+    return { top: '0px', left: '0px', right: 'auto', bottom: 'auto' };
+  }
+
+  return {
+    top: formatGlassInsetValue(restStyle.top, 0),
+    left: formatGlassInsetValue(restStyle.left, 0),
+    right: formatGlassInsetValue(restStyle.right, 'auto'),
+    bottom: formatGlassInsetValue(restStyle.bottom, 'auto'),
+  };
+}
+
+/**
+ * Resolves the `--atomix-glass-position` value for decorative layers.
+ *
+ * Fixed/sticky layers use the same positioning mode as the container; in-flow
+ * layers default to the internal absolute positioning context.
+ */
+export function getGlassLayerPositionVar(
+  isFixedOrSticky: boolean,
+  positionStyles: GlassLayoutPosition,
+  restStyle: CSSProperties
+): string {
+  if (!isFixedOrSticky) {
+    return `${positionStyles.position}`;
+  }
+  const layout = pickGlassLayoutStyle(restStyle);
+  return `${layout.position ?? restStyle.position ?? 'fixed'}`;
+}
+
+/**
+ * Returns the internal positioning context for effect layers relative to the root.
+ */
+export function getGlassInternalPositionStyles(
+  isFixedOrSticky: boolean,
+  restStyle: CSSProperties
+): GlassLayoutPosition {
+  return {
+    position: (isFixedOrSticky
+      ? 'absolute'
+      : restStyle.position || 'absolute') as CSSProperties['position'],
+    top: 0,
+    left: 0,
+    right: 'auto',
+    bottom: 'auto',
+  };
+}
+
+/**
+ * Computes `--atomix-glass-width` and `--atomix-glass-height` values.
+ *
+ * Fixed/sticky elements prefer explicit dimensions or measured size; in-flow
+ * elements default to `100%`.
+ */
+export function resolveGlassAdjustedSize(options: {
+  width?: string | number;
+  height?: string | number;
+  restStyle: CSSProperties;
+  glassSize: GlassSize;
+  isFixedOrSticky: boolean;
+}): { width: string; height: string } {
+  const { width, height, restStyle, glassSize, isFixedOrSticky } = options;
+
+  const resolveLength = (value: string | number | undefined, measured: number): string => {
+    if (value !== undefined && isFixedOrSticky) {
+      return typeof value === 'number' ? `${value}px` : value;
+    }
+    if (measured > 0 && isFixedOrSticky) {
+      return `${measured}px`;
+    }
+    return '100%';
+  };
+
+  const effectiveWidth = width ?? restStyle.width;
+  const effectiveHeight = height ?? restStyle.height;
+
+  return {
+    width: resolveLength(effectiveWidth, glassSize.width),
+    height: resolveLength(effectiveHeight, glassSize.height),
+  };
+}
+
+/** Input parameters for {@link buildGlassRootCssVariables}. */
+export interface GlassRootCssVarsInput {
+  effectiveBorderRadius: number;
+  transformStyle?: string;
+  adjustedSize: { width: string; height: string };
+  isOverLight: boolean;
+  customZIndex?: string | number;
+  isFixedOrSticky: boolean;
+  positionStyles: GlassLayoutPosition;
+  restStyle: CSSProperties;
+  /** Rim width — maps to `--atomix-glass-border-width`. */
+  borderWidth?: string;
+}
+
+/**
+ * Builds the CSS custom properties applied to the root `.c-atomix-glass` element.
+ *
+ * These variables drive layer geometry, transforms, and stacking offsets. They
+ * must not include layout properties that would interfere with backdrop-filter.
+ */
+export function buildGlassRootCssVariables(input: GlassRootCssVarsInput): CSSProperties {
+  const {
+    effectiveBorderRadius,
+    transformStyle,
+    adjustedSize,
+    isOverLight,
+    customZIndex,
+    isFixedOrSticky,
+    positionStyles,
+    restStyle,
+    borderWidth = ATOMIX_GLASS.BORDER.DEFAULT_WIDTH,
+  } = input;
+
+  const layerPosition = getGlassLayerPositionVar(isFixedOrSticky, positionStyles, restStyle);
+  const layerInsets = getGlassLayerInsetVars(isFixedOrSticky, restStyle);
+
+  return {
+    ...(customZIndex !== undefined && { '--atomix-glass-base-z-index': customZIndex }),
+    '--atomix-glass-radius': `${effectiveBorderRadius}px`,
+    '--atomix-glass-transform': transformStyle || 'none',
+    '--atomix-glass-container-position': layerPosition,
+    '--atomix-glass-position': layerPosition,
+    '--atomix-glass-top': layerInsets.top,
+    '--atomix-glass-left': layerInsets.left,
+    '--atomix-glass-right': layerInsets.right,
+    '--atomix-glass-bottom': layerInsets.bottom,
+    '--atomix-glass-width': adjustedSize.width,
+    '--atomix-glass-height': adjustedSize.height,
+    // Aliases maintained for backward compatibility and consumer overrides.
+    '--atomix-glass-container-width': adjustedSize.width,
+    '--atomix-glass-container-height': adjustedSize.height,
+    [ATOMIX_GLASS.BORDER.WIDTH_CSS_VAR]: borderWidth,
+    '--atomix-glass-blend-mode': isOverLight ? 'multiply' : 'overlay',
+  } as CSSProperties;
+}
+
+/** Resolved visual effect values passed to {@link AtomixGlassContainer}. */
+export interface ResolvedGlassContainerEffects {
+  displacementScale: number;
+  blurAmount: number;
+  saturation: number;
+  aberrationIntensity: number;
+  mouseOffset: MousePosition;
+  globalMousePosition: MousePosition;
+}
+
+/**
+ * Applies mode-specific multipliers and accessibility overrides to container effects.
+ */
+export function resolveGlassContainerEffects(options: {
+  displacementScale: number;
+  blurAmount: number;
+  saturation: number;
+  aberrationIntensity: number;
+  mode: DisplacementMode;
+  effectiveWithoutEffects: boolean;
+  effectiveHighContrast: boolean;
+  isOverLight: boolean;
+  saturationBoost: number;
+  mouseOffset: MousePosition;
+  globalMousePosition: MousePosition;
+}): ResolvedGlassContainerEffects {
+  const { MULTIPLIERS, SATURATION } = ATOMIX_GLASS.CONSTANTS;
+  const zeroMouse: MousePosition = { x: 0, y: 0 };
+
+  const resolveSaturation = (): number => {
+    if (options.effectiveHighContrast) {
+      return SATURATION.HIGH_CONTRAST;
+    }
+    if (options.isOverLight) {
+      return options.saturation * options.saturationBoost;
+    }
+    return options.saturation;
+  };
+
+  if (options.effectiveWithoutEffects) {
+    return {
+      displacementScale: 0,
+      blurAmount: 0,
+      saturation: resolveSaturation(),
+      aberrationIntensity: 0,
+      mouseOffset: zeroMouse,
+      globalMousePosition: zeroMouse,
+    };
+  }
+
+  let resolvedDisplacement = options.displacementScale;
+  if (options.mode === 'shader') {
+    resolvedDisplacement *= MULTIPLIERS.SHADER_DISPLACEMENT;
+  } else if (options.isOverLight) {
+    resolvedDisplacement *= MULTIPLIERS.OVER_LIGHT_DISPLACEMENT;
+  }
+
+  let resolvedAberration = options.aberrationIntensity;
+  if (options.mode === 'shader') {
+    resolvedAberration *= MULTIPLIERS.SHADER_ABERRATION;
+  }
+
+  return {
+    displacementScale: resolvedDisplacement,
+    blurAmount: options.blurAmount,
+    saturation: resolveSaturation(),
+    aberrationIntensity: resolvedAberration,
+    mouseOffset: options.mouseOffset,
+    globalMousePosition: options.globalMousePosition,
+  };
+}
+
+/** Coerces a value to a finite number, returning `fallback` when invalid. */
+export function toSafeNumber(value: unknown, fallback = 0): number {
+  return typeof value === 'number' && !isNaN(value) ? value : fallback;
+}
+
+export type DistortionQuality = 'low' | 'medium' | 'high' | 'ultra';
+
+/**
+ * Calculates the target frame rate for shader time-animation loops.
+ *
+ * Balances visual quality against distortion complexity and `animationSpeed`.
+ */
+export function getShaderAnimationTargetFps(options: {
+  distortionQuality: DistortionQuality | string;
+  animationSpeed?: number;
+  withMultiLayerDistortion?: boolean;
+  distortionOctaves?: number;
+  distortionLacunarity?: number;
+  distortionGain?: number;
+}): number {
+  const {
+    distortionQuality,
+    animationSpeed = 1,
+    withMultiLayerDistortion,
+    distortionOctaves = 3,
+    distortionLacunarity = 2,
+    distortionGain = 0.5,
+  } = options;
+
+  const baseFps =
+    distortionQuality === 'ultra'
+      ? 60
+      : distortionQuality === 'high'
+        ? 30
+        : distortionQuality === 'medium'
+          ? 24
+          : 20;
+
+  const effectiveSpeed = Math.max(0.5, Math.min(2, animationSpeed));
+  const complexity = withMultiLayerDistortion
+    ? Math.max(
+        1,
+        distortionOctaves / 3 +
+          Math.max(0, distortionLacunarity - 2) * 0.25 +
+          Math.max(0, distortionGain - 0.5)
+      )
+    : 1;
+
+  return Math.max(12, Math.min(60, Math.round((baseFps * effectiveSpeed) / complexity)));
+}
+
+/**
+ * Computes per-channel displacement scale for the SVG chromatic-aberration filter.
+ */
+export function getChromaticDisplacementScale(
+  mode: DisplacementMode,
+  displacementScale: number,
+  aberrationIntensity: number,
+  channelFactor: number
+): number {
+  const sign = mode === 'shader' ? 1 : -1;
+  return displacementScale * (sign - aberrationIntensity * channelFactor);
+}
+
 /**
  * Get displacement map URL based on mode
  */
@@ -305,10 +737,12 @@ export const getDisplacementMap = (
   }
 };
 
-// ─── Shader LRU Cache ──────────────────────────────────────────────────────
-// Shared across all AtomixGlassContainer instances so identical shader
-// configurations (same size + variant) are only generated once.
-
+/**
+ * Module-level LRU cache for shader displacement maps.
+ *
+ * Shared across all `AtomixGlassContainer` instances so identical size and
+ * variant combinations are generated once.
+ */
 export const MAX_CACHE_SIZE = 15;
 
 export interface ShaderCacheEntry {

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';