@shohojdhara/atomix 0.6.5 → 0.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atomix.css +2 -2
- package/dist/atomix.css.map +1 -1
- package/dist/atomix.min.css +1 -1
- package/dist/atomix.min.css.map +1 -1
- package/dist/atomix.umd.js +1 -1
- package/dist/atomix.umd.js.map +1 -1
- package/dist/atomix.umd.min.js +1 -1
- package/dist/charts.js +65 -255
- package/dist/charts.js.map +1 -1
- package/dist/core.js +65 -255
- package/dist/core.js.map +1 -1
- package/dist/forms.js +65 -255
- package/dist/forms.js.map +1 -1
- package/dist/heavy.js +65 -255
- package/dist/heavy.js.map +1 -1
- package/dist/index.d.ts +6 -37
- package/dist/index.esm.js +66 -300
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +66 -300
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AtomixGlass/AtomixGlass.tsx +0 -9
- package/src/components/AtomixGlass/AtomixGlassContainer.tsx +0 -2
- package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +1 -1
- package/src/components/AtomixGlass/glass-utils.ts +82 -53
- package/src/components/AtomixGlass/shader-utils.ts +19 -77
- package/src/components/Form/Select.test.tsx +6 -6
- package/src/components/Form/Textarea.stories.tsx +5 -5
- package/src/lib/composables/useAtomixGlass.ts +2 -134
- package/src/lib/composables/useAtomixGlassStyles.ts +3 -3
- package/src/lib/composables/usePerformanceMonitor.ts +0 -66
- package/src/lib/constants/components.ts +6 -1
- package/src/styles/01-settings/_settings.atomix-glass.scss +2 -2
- package/src/styles/02-tools/_tools.button.scss +51 -42
- package/src/styles/06-components/_components.atomix-glass.scss +2 -2
- package/src/components/AtomixGlass/PerformanceDashboard.tsx +0 -171
- package/src/components/AtomixGlass/animation-system.ts +0 -578
package/dist/heavy.js
CHANGED
|
@@ -166,6 +166,11 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
|
|
|
166
166
|
MIN_BLUR: .1,
|
|
167
167
|
MOUSE_INFLUENCE_DIVISOR: 100,
|
|
168
168
|
EDGE_FADE_PIXELS: 2,
|
|
169
|
+
// Interaction intensity multipliers shared by the hook and the imperative style updater
|
|
170
|
+
INTERACTION: {
|
|
171
|
+
HOVER_INTENSITY: 1.4,
|
|
172
|
+
ACTIVE_INTENSITY: 1.6
|
|
173
|
+
},
|
|
169
174
|
// Elasticity physics constants — Apple-tuned: soft springs, fast settling, minimal stretch
|
|
170
175
|
ELASTICITY_TRANSLATION_FACTOR: .06,
|
|
171
176
|
// Subtler elastic shift (was 0.1)
|
|
@@ -363,7 +368,7 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
|
|
|
363
368
|
},
|
|
364
369
|
// Container shadows — hairline inner catch + soft floating lift (Apple player bar)
|
|
365
370
|
CONTAINER_SHADOW: {
|
|
366
|
-
LIGHT: "inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0
|
|
371
|
+
LIGHT: "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)"
|
|
367
372
|
},
|
|
368
373
|
// Phase 1: Animation System Constants
|
|
369
374
|
ANIMATION: {
|
|
@@ -803,7 +808,28 @@ const {CONSTANTS: CONSTANTS$3} = ATOMIX_GLASS, calculateElementCenter = rect =>
|
|
|
803
808
|
}, smoothstep = t => {
|
|
804
809
|
const clamped = Math.max(0, Math.min(1, t));
|
|
805
810
|
return clamped * clamped * (3 - 2 * clamped);
|
|
806
|
-
}, lerp
|
|
811
|
+
}, lerp = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), clamp = (value, min, max) => "number" != typeof value || isNaN(value) ? min : Math.max(min, Math.min(max, value)), smoothstepEdge = (edge0, edge1, x) => "number" != typeof edge0 || "number" != typeof edge1 || "number" != typeof x ? 0 : smoothstep((x - edge0) / (edge1 - edge0)), easeInOutCubic = t => {
|
|
812
|
+
if ("number" != typeof t || isNaN(t)) return 0;
|
|
813
|
+
const clamped = Math.max(0, Math.min(1, t));
|
|
814
|
+
return clamped < .5 ? 4 * clamped * clamped * clamped : 1 - Math.pow(-2 * clamped + 2, 3) / 2;
|
|
815
|
+
}, easeOutQuart = t => {
|
|
816
|
+
if ("number" != typeof t || isNaN(t)) return 0;
|
|
817
|
+
const clamped = Math.max(0, Math.min(1, t));
|
|
818
|
+
return 1 - Math.pow(1 - clamped, 4);
|
|
819
|
+
}, vec2Length = (x, y) => {
|
|
820
|
+
if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
|
|
821
|
+
const maxComponent = Math.max(Math.abs(x), Math.abs(y));
|
|
822
|
+
if (0 === maxComponent) return 0;
|
|
823
|
+
const scaledX = x / maxComponent, scaledY = y / maxComponent;
|
|
824
|
+
return maxComponent * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
|
|
825
|
+
}, getInteractionIntensity = (isHovered, isActive) => ({
|
|
826
|
+
hoverIntensity: isHovered ? CONSTANTS$3.INTERACTION.HOVER_INTENSITY : 1,
|
|
827
|
+
activeIntensity: isActive ? CONSTANTS$3.INTERACTION.ACTIVE_INTENSITY : 1
|
|
828
|
+
})
|
|
829
|
+
/**
|
|
830
|
+
* Spring-damper integration helper
|
|
831
|
+
* Calculates the next value based on velocity, stiffness, and damping.
|
|
832
|
+
*/ , calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
|
|
807
833
|
const newVelocity = (velocity + (target - current) * stiffness) * damping;
|
|
808
834
|
return {
|
|
809
835
|
value: current + newVelocity,
|
|
@@ -1009,7 +1035,7 @@ const GlassFilter = memo(GlassFilterComponent, ((prevProps, nextProps) => prevP
|
|
|
1009
1035
|
}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, glassSize: glassSize = {
|
|
1010
1036
|
width: 0,
|
|
1011
1037
|
height: 0
|
|
1012
|
-
}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1,
|
|
1038
|
+
}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
|
|
1013
1039
|
// React 18 useId — stable, unique, and SSR-safe (no module-level counter)
|
|
1014
1040
|
const rawId = useId(), filterId = useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), containerRef = useForkRef(ref, null), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
|
|
1015
1041
|
// Lazy load shader utilities only when shader mode is needed
|
|
@@ -1307,7 +1333,7 @@ class {
|
|
|
1307
1333
|
}, {BORDER: BORDER, CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, BORDER_GRADIENT = BORDER.GRADIENT, WHITE = CONSTANTS$2.PALETTE.WHITE, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
|
|
1308
1334
|
if (!wrapperElement && !containerElement) return;
|
|
1309
1335
|
if (!validateGlassSize(params.glassSize)) return;
|
|
1310
|
-
const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, isFixedOrSticky: isFixedOrSticky = !1, borderAnimated: borderAnimated = !0, borderOpacityMultiplier: borderOpacityMultiplier = 1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity
|
|
1336
|
+
const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, isFixedOrSticky: isFixedOrSticky = !1, borderAnimated: borderAnimated = !0, borderOpacityMultiplier: borderOpacityMultiplier = 1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), overLightConfig = {
|
|
1311
1337
|
opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
|
|
1312
1338
|
contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
|
|
1313
1339
|
brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
|
|
@@ -1438,140 +1464,9 @@ class {
|
|
|
1438
1464
|
style.setProperty("--atomix-glass-container-shadow-opacity", effectiveWithoutEffects ? "0" : "1"),
|
|
1439
1465
|
style.setProperty("--atomix-glass-container-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"),
|
|
1440
1466
|
style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"),
|
|
1441
|
-
style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0
|
|
1467
|
+
style.setProperty("--atomix-glass-container-box-shadow", 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)");
|
|
1442
1468
|
}
|
|
1443
|
-
};
|
|
1444
|
-
|
|
1445
|
-
/**
|
|
1446
|
-
* Animation System for AtomixGlass Component
|
|
1447
|
-
*
|
|
1448
|
-
* Implements Phase 1 features from the AtomixGlass Feature Implementation Roadmap:
|
|
1449
|
-
* - Feature 1.1: Time-Based Animation System
|
|
1450
|
-
* - Feature 1.2: Multi-Layer Distortion System (FBM)
|
|
1451
|
-
*
|
|
1452
|
-
* @packageDocumentation
|
|
1453
|
-
*/
|
|
1454
|
-
// ============================================================================
|
|
1455
|
-
// Noise Functions for FBM (Feature 1.2)
|
|
1456
|
-
// ============================================================================
|
|
1457
|
-
/**
|
|
1458
|
-
* Perlin noise implementation for smooth gradient noise
|
|
1459
|
-
*
|
|
1460
|
-
* @param x - X coordinate
|
|
1461
|
-
* @param y - Y coordinate
|
|
1462
|
-
* @returns Noise value in range [0, 1]
|
|
1463
|
-
*/
|
|
1464
|
-
function perlinNoise(x, y) {
|
|
1465
|
-
// Simplified Perlin noise using pseudo-random gradients
|
|
1466
|
-
const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = fade(xf), v = fade(yf), A = p[X] + Y & 255, B = p[X + 1] + Y & 255, ga = grad(p[A], xf, yf), gb = grad(p[B], xf - 1, yf), gc = grad(p[A + 1 & 255], xf, yf - 1), gd = grad(p[B + 1 & 255], xf - 1, yf - 1), lerpX1 = lerp(ga, gb, u), lerpX2 = lerp(gc, gd, u);
|
|
1467
|
-
// Scale to [0, 1] range
|
|
1468
|
-
return (lerp(lerpX1, lerpX2, v) + 1) / 2;
|
|
1469
|
-
}
|
|
1470
|
-
|
|
1471
|
-
// ============================================================================
|
|
1472
|
-
// Fractal Brownian Motion (FBM) Engine (Feature 1.2)
|
|
1473
|
-
// ============================================================================
|
|
1474
|
-
/**
|
|
1475
|
-
* Creates an FBM engine with configurable parameters
|
|
1476
|
-
*
|
|
1477
|
-
* @param config - FBM configuration (octaves, lacunarity, gain)
|
|
1478
|
-
* @returns Object with fbm function
|
|
1479
|
-
*
|
|
1480
|
-
* @example
|
|
1481
|
-
* ```typescript
|
|
1482
|
-
* const fbmEngine = createFBMEngine({ octaves: 5, lacunarity: 2, gain: 0.5 });
|
|
1483
|
-
*
|
|
1484
|
-
* // Generate noise at position (0.5, 0.5) with time animation
|
|
1485
|
-
* const noiseValue = fbmEngine.fbm(0.5, 0.5, Date.now());
|
|
1486
|
-
* ```
|
|
1487
|
-
*/ function createFBMEngine(config) {
|
|
1488
|
-
/**
|
|
1489
|
-
* Fractal Brownian Motion function
|
|
1490
|
-
* Combines multiple octaves of noise for complex, natural patterns
|
|
1491
|
-
*
|
|
1492
|
-
* @param x - X coordinate
|
|
1493
|
-
* @param y - Y coordinate
|
|
1494
|
-
* @param time - Optional time value for animation
|
|
1495
|
-
* @returns FBM noise value in range [0, 1]
|
|
1496
|
-
*/
|
|
1497
|
-
const fbm = (x, y, time = 0) => {
|
|
1498
|
-
let value = 0, amplitude = .5, frequency = 1, phase = .001 * time;
|
|
1499
|
-
// Convert to seconds for reasonable animation speed
|
|
1500
|
-
for (let i = 0; i < config.octaves; i++)
|
|
1501
|
-
// Apply time-based phase shift to all octaves
|
|
1502
|
-
value += perlinNoise(x * frequency + phase, y * frequency + phase) * amplitude,
|
|
1503
|
-
frequency *= config.lacunarity, // Increase frequency
|
|
1504
|
-
amplitude *= config.gain;
|
|
1505
|
-
return value;
|
|
1506
|
-
};
|
|
1507
|
-
/**
|
|
1508
|
-
* Get FBM with simple time factor
|
|
1509
|
-
*/ return {
|
|
1510
|
-
fbm: fbm,
|
|
1511
|
-
fbmWithTime: (x, y, time) => fbm(x, y, time)
|
|
1512
|
-
};
|
|
1513
|
-
}
|
|
1514
|
-
|
|
1515
|
-
/**
|
|
1516
|
-
* Gets optimal FBM config based on quality preset
|
|
1517
|
-
*
|
|
1518
|
-
* @param quality - Quality preset level
|
|
1519
|
-
* @returns FBM configuration for the quality level
|
|
1520
|
-
*/ const fbmEngineCache = new Map;
|
|
1521
|
-
|
|
1522
|
-
// ============================================================================
|
|
1523
|
-
// Shader Utility Functions for Time-Based Effects
|
|
1524
|
-
// ============================================================================
|
|
1525
|
-
/**
|
|
1526
|
-
* Liquid glass distortion with time-based animation
|
|
1527
|
-
* Uses FBM to create organic, flowing liquid effects
|
|
1528
|
-
*
|
|
1529
|
-
* @param uv - UV coordinates (normalized 0-1)
|
|
1530
|
-
* @param time - Elapsed time in milliseconds
|
|
1531
|
-
* @param config - FBM configuration
|
|
1532
|
-
* @returns Distorted UV coordinates
|
|
1533
|
-
*/ function liquidGlassWithTime(uv, time, config) {
|
|
1534
|
-
const configKey = `${config.octaves}-${config.lacunarity}-${config.gain}`;
|
|
1535
|
-
let fbmEngine = fbmEngineCache.get(configKey);
|
|
1536
|
-
fbmEngine || (fbmEngine = createFBMEngine(config), fbmEngineCache.set(configKey, fbmEngine));
|
|
1537
|
-
// Animate noise with time
|
|
1538
|
-
const animatedNoise = fbmEngine.fbmWithTime(2 * uv.x + 1e-4 * time, 2 * uv.y + 15e-5 * time, time);
|
|
1539
|
-
return {
|
|
1540
|
-
x: uv.x + .04 * (animatedNoise - .5),
|
|
1541
|
-
y: uv.y + .04 * (animatedNoise - .5)
|
|
1542
|
-
};
|
|
1543
|
-
}
|
|
1544
|
-
|
|
1545
|
-
// ============================================================================
|
|
1546
|
-
// Helper Functions
|
|
1547
|
-
// ============================================================================
|
|
1548
|
-
/**
|
|
1549
|
-
* Fade curve for smooth interpolation (Perlin's fade function)
|
|
1550
|
-
*/ function fade(t) {
|
|
1551
|
-
return t * t * t * (t * (6 * t - 15) + 10);
|
|
1552
|
-
}
|
|
1553
|
-
|
|
1554
|
-
/**
|
|
1555
|
-
* Linear interpolation
|
|
1556
|
-
*/ function lerp(a, b, t) {
|
|
1557
|
-
return a + t * (b - a);
|
|
1558
|
-
}
|
|
1559
|
-
|
|
1560
|
-
/**
|
|
1561
|
-
* Gradient calculation for Perlin noise
|
|
1562
|
-
*/ function grad(hash, x, y) {
|
|
1563
|
-
const h = 15 & hash, u = h < 8 ? x : y, v = h < 4 ? y : 12 === h || 14 === h ? x : 0;
|
|
1564
|
-
return (1 & h ? -u : u) + (2 & h ? -v : v);
|
|
1565
|
-
}
|
|
1566
|
-
|
|
1567
|
-
/**
|
|
1568
|
-
* Permutation table for Perlin noise
|
|
1569
|
-
*/ const p = (() => {
|
|
1570
|
-
const permutation = [];
|
|
1571
|
-
for (let i = 0; i < 256; i++) permutation[i] = Math.floor(256 * Math.random());
|
|
1572
|
-
// Duplicate for overflow handling
|
|
1573
|
-
return [ ...permutation, ...permutation ];
|
|
1574
|
-
})(), {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
|
|
1469
|
+
}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
|
|
1575
1470
|
|
|
1576
1471
|
const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
|
|
1577
1472
|
parentElement && backgroundDetectionCache.set(parentElement, {
|
|
@@ -1586,10 +1481,7 @@ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new Weak
|
|
|
1586
1481
|
* Composable hook for AtomixGlass component logic
|
|
1587
1482
|
* Manages all state, calculations, and event handlers
|
|
1588
1483
|
*/
|
|
1589
|
-
function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, border: border, withBorder: withBorder = !0, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1
|
|
1590
|
-
// Default priority
|
|
1591
|
-
// Phase 1: Animation System Props
|
|
1592
|
-
withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
|
|
1484
|
+
function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, border: border, withBorder: withBorder = !0, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1}) {
|
|
1593
1485
|
// State
|
|
1594
1486
|
const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), resolvedBorder = useMemo((() =>
|
|
1595
1487
|
/**
|
|
@@ -1641,52 +1533,10 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
|
|
|
1641
1533
|
}), scaleVelocityRef = useRef({
|
|
1642
1534
|
x: 0,
|
|
1643
1535
|
y: 0
|
|
1644
|
-
})
|
|
1645
|
-
useRef(0);
|
|
1646
|
-
const mouseVelocityRef = useRef({
|
|
1536
|
+
}), mouseVelocityRef = useRef({
|
|
1647
1537
|
x: 0,
|
|
1648
1538
|
y: 0
|
|
1649
|
-
}), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1),
|
|
1650
|
-
// If quality preset is provided, use it as base
|
|
1651
|
-
const preset = (quality = distortionQuality, ATOMIX_GLASS.CONSTANTS.DISTORTION_QUALITY_PRESETS[quality]);
|
|
1652
|
-
// Override with custom values if provided
|
|
1653
|
-
var quality;
|
|
1654
|
-
return {
|
|
1655
|
-
octaves: distortionOctaves ?? preset.octaves,
|
|
1656
|
-
lacunarity: distortionLacunarity ?? preset.lacunarity,
|
|
1657
|
-
gain: distortionGain ?? preset.gain
|
|
1658
|
-
};
|
|
1659
|
-
}), [ distortionQuality, distortionOctaves, distortionLacunarity, distortionGain ]), fbmEngine = useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
|
|
1660
|
-
/**
|
|
1661
|
-
* Animation loop for time-based effects
|
|
1662
|
-
*/
|
|
1663
|
-
useEffect((() => {
|
|
1664
|
-
if (!effectiveWithTimeAnimation || "undefined" == typeof window) return;
|
|
1665
|
-
let lastFrameTime = performance.now();
|
|
1666
|
-
/**
|
|
1667
|
-
* Animation frame handler
|
|
1668
|
-
*/ const animate = currentTime => {
|
|
1669
|
-
// Calculate delta time
|
|
1670
|
-
const deltaTime = currentTime - lastFrameTime;
|
|
1671
|
-
lastFrameTime = currentTime;
|
|
1672
|
-
// Apply animation speed multiplier
|
|
1673
|
-
const scaledDelta = deltaTime * animationSpeed;
|
|
1674
|
-
elapsedTimeRef.current += scaledDelta, shaderTimeRef.current = elapsedTimeRef.current,
|
|
1675
|
-
// Continue animation loop
|
|
1676
|
-
animationFrameIdRef.current = requestAnimationFrame(animate);
|
|
1677
|
-
};
|
|
1678
|
-
// Start animation
|
|
1679
|
-
// Cleanup
|
|
1680
|
-
return animationStartTimeRef.current = performance.now(), animationFrameIdRef.current = requestAnimationFrame(animate),
|
|
1681
|
-
() => {
|
|
1682
|
-
null !== animationFrameIdRef.current && (cancelAnimationFrame(animationFrameIdRef.current),
|
|
1683
|
-
animationFrameIdRef.current = null);
|
|
1684
|
-
};
|
|
1685
|
-
}), [ effectiveWithTimeAnimation, animationSpeed ]);
|
|
1686
|
-
/**
|
|
1687
|
-
* Get current shader time for animations
|
|
1688
|
-
*/
|
|
1689
|
-
const getShaderTime = useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
|
|
1539
|
+
}), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
|
|
1690
1540
|
const [glassSize, setGlassSize] = useState({
|
|
1691
1541
|
width: 270,
|
|
1692
1542
|
height: 69
|
|
@@ -1746,9 +1596,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
|
|
|
1746
1596
|
effectiveBorderRadius: effectiveBorderRadius,
|
|
1747
1597
|
cachedRectRef: cachedRectRef
|
|
1748
1598
|
}), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
|
|
1749
|
-
/**
|
|
1750
|
-
* Apply time-based distortion to UV coordinates
|
|
1751
|
-
*/
|
|
1752
1599
|
// Extract border-radius from children
|
|
1753
1600
|
useEffect((() => {
|
|
1754
1601
|
const extractRadius = () => {
|
|
@@ -1908,7 +1755,7 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
|
|
|
1908
1755
|
* Get effective overLight value based on configuration
|
|
1909
1756
|
*/
|
|
1910
1757
|
const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = useMemo((() => {
|
|
1911
|
-
const isOverLight = getEffectiveOverLight(), hoverIntensity
|
|
1758
|
+
const isOverLight = getEffectiveOverLight(), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), baseConfig = {
|
|
1912
1759
|
isOverLight: isOverLight,
|
|
1913
1760
|
threshold: .7,
|
|
1914
1761
|
opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
|
|
@@ -1952,8 +1799,8 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
|
|
|
1952
1799
|
};
|
|
1953
1800
|
const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
|
|
1954
1801
|
internalGlobalMousePositionRef.current = {
|
|
1955
|
-
x: lerp
|
|
1956
|
-
y: lerp
|
|
1802
|
+
x: lerp(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
|
|
1803
|
+
y: lerp(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
|
|
1957
1804
|
};
|
|
1958
1805
|
// ── Calculate Elastic Physics ─────────────────────────────────────
|
|
1959
1806
|
let targetElasticTranslation = {
|
|
@@ -2120,8 +1967,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
|
|
|
2120
1967
|
overLightConfig: overLightConfig,
|
|
2121
1968
|
resolvedBorder: resolvedBorder,
|
|
2122
1969
|
transformStyle: transformStyle,
|
|
2123
|
-
getShaderTime: getShaderTime,
|
|
2124
|
-
applyTimeBasedDistortion: applyTimeBasedDistortion,
|
|
2125
1970
|
handleMouseEnter: handleMouseEnter,
|
|
2126
1971
|
handleMouseLeave: handleMouseLeave,
|
|
2127
1972
|
handleMouseDown: handleMouseDown,
|
|
@@ -2397,7 +2242,7 @@ const PERFORMANCE_PRESET = {
|
|
|
2397
2242
|
var explicit, position;
|
|
2398
2243
|
/**
|
|
2399
2244
|
* Extracts layout-related properties from a React `CSSProperties` object.
|
|
2400
|
-
*/ const {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle,
|
|
2245
|
+
*/ const {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown, resolvedBorder: resolvedBorder} = useAtomixGlass({
|
|
2401
2246
|
glassRef: glassRef,
|
|
2402
2247
|
contentRef: contentRef,
|
|
2403
2248
|
wrapperRef: internalWrapperRef,
|
|
@@ -2421,14 +2266,7 @@ const PERFORMANCE_PRESET = {
|
|
|
2421
2266
|
withBorder: withBorder,
|
|
2422
2267
|
debugBorderRadius: debugBorderRadius,
|
|
2423
2268
|
style: style,
|
|
2424
|
-
isFixedOrSticky: isFixedOrSticky
|
|
2425
|
-
withTimeAnimation: withTimeAnimation,
|
|
2426
|
-
animationSpeed: animationSpeed,
|
|
2427
|
-
withMultiLayerDistortion: withMultiLayerDistortion,
|
|
2428
|
-
distortionOctaves: distortionOctaves,
|
|
2429
|
-
distortionLacunarity: distortionLacunarity,
|
|
2430
|
-
distortionGain: distortionGain,
|
|
2431
|
-
distortionQuality: distortionQuality
|
|
2269
|
+
isFixedOrSticky: isFixedOrSticky
|
|
2432
2270
|
});
|
|
2433
2271
|
(
|
|
2434
2272
|
/**
|
|
@@ -3003,7 +2841,6 @@ const PERFORMANCE_PRESET = {
|
|
|
3003
2841
|
shaderVariant: shaderVariant,
|
|
3004
2842
|
withLiquidBlur: withLiquidBlur,
|
|
3005
2843
|
isFixedOrSticky: isFixedOrSticky,
|
|
3006
|
-
shaderTime: getShaderTime(),
|
|
3007
2844
|
withTimeAnimation: withTimeAnimation,
|
|
3008
2845
|
animationSpeed: animationSpeed,
|
|
3009
2846
|
withMultiLayerDistortion: withMultiLayerDistortion,
|
|
@@ -3057,40 +2894,15 @@ const PERFORMANCE_PRESET = {
|
|
|
3057
2894
|
*/ AtomixGlassInner.displayName = "AtomixGlass";
|
|
3058
2895
|
|
|
3059
2896
|
/** Memoized public export. Ref targets the root `.c-atomix-glass` wrapper. */
|
|
3060
|
-
const AtomixGlass = memo(AtomixGlassInner),
|
|
3061
|
-
// Add input validation
|
|
3062
|
-
if ("number" != typeof a || "number" != typeof b || "number" != typeof t) return 0;
|
|
3063
|
-
const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
|
|
3064
|
-
return clamped * clamped * (3 - 2 * clamped);
|
|
3065
|
-
}, calculateLength = (x, y) => {
|
|
3066
|
-
// Add input validation and error handling
|
|
3067
|
-
if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
|
|
3068
|
-
// Prevent potential overflow
|
|
3069
|
-
const maxX = Math.max(Math.abs(x), Math.abs(y));
|
|
3070
|
-
if (0 === maxX) return 0;
|
|
3071
|
-
const scaledX = x / maxX, scaledY = y / maxX;
|
|
3072
|
-
return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
|
|
3073
|
-
}, roundedRectSDF = (x, y, width, height, radius) => {
|
|
2897
|
+
const AtomixGlass = memo(AtomixGlassInner), roundedRectSDF = (x, y, width, height, radius) => {
|
|
3074
2898
|
// Add input validation
|
|
3075
2899
|
if ("number" != typeof x || "number" != typeof y || "number" != typeof width || "number" != typeof height || "number" != typeof radius) return 0;
|
|
3076
2900
|
const qx = Math.abs(x) - width + radius, qy = Math.abs(y) - height + radius;
|
|
3077
|
-
return Math.min(Math.max(qx, qy), 0) +
|
|
2901
|
+
return Math.min(Math.max(qx, qy), 0) + vec2Length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
|
|
3078
2902
|
}, createTexture = (x, y) => ({
|
|
3079
2903
|
x: "number" != typeof x || isNaN(x) ? .5 : Math.max(0, Math.min(1, x)),
|
|
3080
2904
|
y: "number" != typeof y || isNaN(y) ? .5 : Math.max(0, Math.min(1, y))
|
|
3081
|
-
}), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y),
|
|
3082
|
-
// Add input validation
|
|
3083
|
-
"number" != typeof value || "number" != typeof min || "number" != typeof max || isNaN(value) ? min : isNaN(min) ? 0 : isNaN(max) ? 1 : Math.max(min, Math.min(max, value)), easeInOutCubic = t => {
|
|
3084
|
-
// Add input validation
|
|
3085
|
-
if ("number" != typeof t || isNaN(t)) return 0;
|
|
3086
|
-
const clampedT = Math.max(0, Math.min(1, t));
|
|
3087
|
-
return clampedT < .5 ? 4 * clampedT * clampedT * clampedT : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
|
|
3088
|
-
}, easeOutQuart = t => {
|
|
3089
|
-
// Add input validation
|
|
3090
|
-
if ("number" != typeof t || isNaN(t)) return 0;
|
|
3091
|
-
const clampedT = Math.max(0, Math.min(1, t));
|
|
3092
|
-
return 1 - Math.pow(1 - clampedT, 4);
|
|
3093
|
-
}, noise2D = (x, y) => {
|
|
2905
|
+
}), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), noise2D = (x, y) => {
|
|
3094
2906
|
// Add input validation
|
|
3095
2907
|
if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
|
|
3096
2908
|
const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = easeInOutCubic(xf), v = easeInOutCubic(yf), hash = (i, j) => {
|
|
@@ -3129,13 +2941,13 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3129
2941
|
x: .5,
|
|
3130
2942
|
y: .5
|
|
3131
2943
|
};
|
|
3132
|
-
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance =
|
|
2944
|
+
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothstepEdge(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
|
|
3133
2945
|
// Add input validation
|
|
3134
2946
|
if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y) || isNaN(strength)) return {
|
|
3135
2947
|
x: 0,
|
|
3136
2948
|
y: 0
|
|
3137
2949
|
};
|
|
3138
|
-
const distance =
|
|
2950
|
+
const distance = vec2Length(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
|
|
3139
2951
|
// Limit distance to prevent extreme values
|
|
3140
2952
|
return {
|
|
3141
2953
|
x: x * (1 + distortion),
|
|
@@ -3147,7 +2959,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3147
2959
|
x: 0,
|
|
3148
2960
|
y: 0
|
|
3149
2961
|
};
|
|
3150
|
-
const distance =
|
|
2962
|
+
const distance = vec2Length(x, y);
|
|
3151
2963
|
// Prevent division by zero and extreme values
|
|
3152
2964
|
if (0 === distance) return {
|
|
3153
2965
|
x: 0,
|
|
@@ -3158,8 +2970,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3158
2970
|
x: Math.cos(angle) * distance * intensity,
|
|
3159
2971
|
y: Math.sin(angle) * distance * intensity
|
|
3160
2972
|
};
|
|
3161
|
-
})(ix, iy, .015 * baseDisplacement), scaled =
|
|
3162
|
-
return createTexture(
|
|
2973
|
+
})(ix, iy, .015 * baseDisplacement), scaled = smoothstepEdge(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
|
|
2974
|
+
return createTexture(clamp(finalX * scaled + .5, 0, 1), clamp(finalY * scaled + .5, 0, 1));
|
|
3163
2975
|
},
|
|
3164
2976
|
// Premium Apple-style fluid glass with enhanced organic flow
|
|
3165
2977
|
appleFluid: (uv, mousePosition) => {
|
|
@@ -3167,8 +2979,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3167
2979
|
x: .5,
|
|
3168
2980
|
y: .5
|
|
3169
2981
|
};
|
|
3170
|
-
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance =
|
|
3171
|
-
return createTexture(
|
|
2982
|
+
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothstepEdge(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
|
|
2983
|
+
return createTexture(clamp(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clamp(totalY + .5, 0, 1));
|
|
3172
2984
|
},
|
|
3173
2985
|
// High-end glass with advanced refraction and depth
|
|
3174
2986
|
premiumGlass: (uv, mousePosition) => {
|
|
@@ -3176,7 +2988,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3176
2988
|
x: .5,
|
|
3177
2989
|
y: .5
|
|
3178
2990
|
};
|
|
3179
|
-
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance =
|
|
2991
|
+
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), centerDistance = vec2Length(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
|
|
3180
2992
|
// Multi-layer depth effect
|
|
3181
2993
|
let depthX = 0, depthY = 0;
|
|
3182
2994
|
for (let layer = 0; layer < 3; layer++) {
|
|
@@ -3184,8 +2996,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3184
2996
|
depthX += Math.sin(ix * layerScale + layerTime) * layerStrength, depthY += Math.cos(iy * layerScale - layerTime) * layerStrength;
|
|
3185
2997
|
}
|
|
3186
2998
|
// Glass refraction with mouse influence
|
|
3187
|
-
const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask =
|
|
3188
|
-
return createTexture(
|
|
2999
|
+
const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothstepEdge(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
|
|
3000
|
+
return createTexture(clamp(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clamp(finalY + .5, 0, 1));
|
|
3189
3001
|
},
|
|
3190
3002
|
// Metallic liquid effect with shimmer
|
|
3191
3003
|
liquidMetal: (uv, mousePosition) => {
|
|
@@ -3193,8 +3005,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3193
3005
|
x: .5,
|
|
3194
3006
|
y: .5
|
|
3195
3007
|
};
|
|
3196
|
-
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance =
|
|
3197
|
-
return createTexture(
|
|
3008
|
+
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = vec2Length(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothstepEdge(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
|
|
3009
|
+
return createTexture(clamp(totalX + .5, 0, 1), clamp(totalY + .5, 0, 1));
|
|
3198
3010
|
},
|
|
3199
3011
|
// basiBasi - Expert Premium Glass Shader
|
|
3200
3012
|
// The most advanced shader with caustics, spectral dispersion, parallax depth, and volumetric effects
|
|
@@ -3203,7 +3015,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3203
3015
|
x: .5,
|
|
3204
3016
|
y: .5
|
|
3205
3017
|
};
|
|
3206
|
-
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance =
|
|
3018
|
+
const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) =>
|
|
3207
3019
|
// Add input validation
|
|
3208
3020
|
"number" != typeof x || "number" != typeof y || "number" != typeof time || "number" != typeof intensity || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(intensity) ? .5 : .5 * (Math.sin(8 * x + 2 * time) * Math.cos(8 * y - 2 * time) * .5 + Math.sin(8 * (x + .5) * 1.3 - 2 * time * .8) * Math.cos(8 * (y - .3) * 1.3 + 2 * time * .8) * .3 + Math.sin(8 * (x - .3) * .7 + 2 * time * 1.2) * Math.cos(8 * (y + .4) * .7 - 2 * time * 1.2) * .2 + 1) * intensity)(ix, iy, time, .8), causticDistortion = .02 * (causticIntensity - .5), refractionAngle = Math.atan2(iy, ix), spectralDispersion = ((x, y, angle) => {
|
|
3209
3021
|
// Add input validation
|
|
@@ -3221,7 +3033,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3221
3033
|
y: 0
|
|
3222
3034
|
}
|
|
3223
3035
|
};
|
|
3224
|
-
const distance =
|
|
3036
|
+
const distance = vec2Length(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
|
|
3225
3037
|
return {
|
|
3226
3038
|
r: {
|
|
3227
3039
|
x: Math.cos(angle) * redOffset,
|
|
@@ -3261,8 +3073,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3261
3073
|
return turbulence;
|
|
3262
3074
|
})(6 * ix, 6 * iy, time, 6), turbulenceX = .012 * Math.cos(turbulence * Math.PI * 2), turbulenceY = .012 * Math.sin(turbulence * Math.PI * 2), microSurface = ((x, y, time) =>
|
|
3263
3075
|
// Add input validation
|
|
3264
|
-
"number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance =
|
|
3265
|
-
return createTexture(
|
|
3076
|
+
"number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = vec2Length(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = vec2Length(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothstepEdge(.92, -.12, distanceToEdge), edgeSoftness = smoothstepEdge(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
|
|
3077
|
+
return createTexture(clamp(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clamp(finalY + .5, 0, 1));
|
|
3266
3078
|
},
|
|
3267
3079
|
// Aliases for compatibility
|
|
3268
3080
|
plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
|
|
@@ -3304,8 +3116,8 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3304
3116
|
let dx = pos.x * w - x, dy = pos.y * h - y;
|
|
3305
3117
|
// Apply edge smoothing for Apple-like effect
|
|
3306
3118
|
const edgeX = 2 * Math.min(x / w, (w - x) / w), edgeY = 2 * Math.min(y / h, (h - y) / h), edgeFactor = Math.min(edgeX, edgeY);
|
|
3307
|
-
dx *=
|
|
3308
|
-
rawValues.push(dx, dy);
|
|
3119
|
+
dx *= smoothstepEdge(0, .2, edgeFactor), dy *= smoothstepEdge(0, .2, edgeFactor),
|
|
3120
|
+
maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), rawValues.push(dx, dy);
|
|
3309
3121
|
}
|
|
3310
3122
|
// Improved normalization to prevent artifacts while maintaining intensity
|
|
3311
3123
|
maxScale = Math.max(maxScale, 1);
|
|
@@ -3315,9 +3127,9 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3315
3127
|
let rawIndex = 0;
|
|
3316
3128
|
for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
|
|
3317
3129
|
const dx = rawValues[rawIndex++] || 0, dy = rawValues[rawIndex++] || 0, edgeDistance = Math.min(x, y, w - x - 1, h - y - 1), edgeFactor = Math.min(1, edgeDistance / 2), r = dx * edgeFactor / maxScale + .5, g = dy * edgeFactor / maxScale + .5, pixelIndex = 4 * (y * w + x);
|
|
3318
|
-
data[pixelIndex] =
|
|
3319
|
-
data[pixelIndex + 1] =
|
|
3320
|
-
data[pixelIndex + 2] =
|
|
3130
|
+
data[pixelIndex] = clamp(255 * r, 0, 255), // Red channel (X displacement)
|
|
3131
|
+
data[pixelIndex + 1] = clamp(255 * g, 0, 255), // Green channel (Y displacement)
|
|
3132
|
+
data[pixelIndex + 2] = clamp(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
|
|
3321
3133
|
data[pixelIndex + 3] = 255;
|
|
3322
3134
|
}
|
|
3323
3135
|
return this.context.putImageData(imageData, 0, 0), this.canvas.toDataURL();
|
|
@@ -3345,9 +3157,7 @@ const AtomixGlass = memo(AtomixGlassInner), smoothStep = (a, b, t) => {
|
|
|
3345
3157
|
return this.canvasDPI;
|
|
3346
3158
|
}
|
|
3347
3159
|
},
|
|
3348
|
-
|
|
3349
|
-
fragmentShaders: fragmentShaders,
|
|
3350
|
-
liquidGlassWithTime: liquidGlassWithTime
|
|
3160
|
+
fragmentShaders: fragmentShaders
|
|
3351
3161
|
}, Symbol.toStringTag, {
|
|
3352
3162
|
value: "Module"
|
|
3353
3163
|
})), VideoPlayer = forwardRef((({src: src, type: type = "video", youtubeId: youtubeId, poster: poster, autoplay: autoplay = !1, loop: loop = !1, muted: muted = !1, controls: controls = !0, preload: preload = "metadata", width: width, height: height, aspectRatio: aspectRatio = "16:9", className: className = "", onPlay: onPlay, onPause: onPause, onEnded: onEnded, onTimeUpdate: onTimeUpdate, onVolumeChange: onVolumeChange, onFullscreenChange: onFullscreenChange, onError: onError, showDownload: showDownload = !1, showShare: showShare = !1, showSettings: showSettings = !0, playbackRates: playbackRates = [ .5, .75, 1, 1.25, 1.5, 2 ], subtitles: subtitles, quality: quality, ambientMode: ambientMode = !1, glass: glass = !1, glassOpacity: glassOpacity = 1, glassContent: glassContent, style: style, ...props}, ref) => {
|