@once-ui-system/core 1.5.0 → 1.5.2

package/README.md

@@ -0,0 +1,54 @@
+<br/>
+
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://docs.once-ui.com/trademarks/icon-dark.svg" width="64" height="64">
+    <source media="(prefers-color-scheme: light)" srcset="https://docs.once-ui.com/trademarks/icon-light.svg" width="64" height="64">
+    <img alt="Once UI Logo" src="https://docs.once-ui.com/trademarks/icon-dark.svg" width="64" height="64">
+  </picture><picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://docs.once-ui.com/trademarks/type-dark.svg" width="200" height="64">
+    <source media="(prefers-color-scheme: light)" srcset="https://docs.once-ui.com/trademarks/type-light.svg" width="200" height="64">
+    <img alt="Once UI Wordmark" src="https://docs.once-ui.com/trademarks/type-dark.svg" width="200" height="64">
+  </picture>
+
+  <br/>
+
+  The indie design system for Next.js apps
+
+  [![npm version](https://img.shields.io/npm/v/@once-ui-system/core.svg)](https://www.npmjs.com/package/@once-ui-system/core)
+  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE.md)
+  [![npm downloads](https://img.shields.io/npm/dm/@once-ui-system/core.svg)](https://www.npmjs.com/package/@once-ui-system/core)
+  [![Discord](https://img.shields.io/discord/1083398120035074148?color=7289da&logo=discord&logoColor=white)](https://discord.com/invite/5EyAQ4eNdS)
+</div>
+
+
+
+<br/>
+
+## Documentation
+
+Learn how to set up and build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).
+
+## Installation
+
+```bash
+npm install @once-ui-system/core
+```
+
+## Authors
+
+Built and maintained by [**Lorant One**](https://lorant.one).
+
+## Community
+
+Join the [Design Engineers Club](https://discord.com/invite/5EyAQ4eNdS) for help, support and discussion.
+
+Found a bug? Report it [here](https://github.com/once-ui-system/core/issues/new?labels=bug&template=bug_report.md). Got a feature request? Submit it [here](https://github.com/once-ui-system/core/issues/new?labels=feature%20request&template=feature_request.md).
+
+## Contributing
+
+Please read our [CONTRIBUTING.md](https://github.com/once-ui-system/core/blob/main/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to Once UI.
+
+## Sponsors
+
+Once UI is an indie project. [Sponsor us](https://github.com/sponsors/once-ui-system) and get featured on our site!

package/dist/README.md

@@ -0,0 +1,54 @@
+<br/>
+
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://docs.once-ui.com/trademarks/icon-dark.svg" width="64" height="64">
+    <source media="(prefers-color-scheme: light)" srcset="https://docs.once-ui.com/trademarks/icon-light.svg" width="64" height="64">
+    <img alt="Once UI Logo" src="https://docs.once-ui.com/trademarks/icon-dark.svg" width="64" height="64">
+  </picture><picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://docs.once-ui.com/trademarks/type-dark.svg" width="200" height="64">
+    <source media="(prefers-color-scheme: light)" srcset="https://docs.once-ui.com/trademarks/type-light.svg" width="200" height="64">
+    <img alt="Once UI Wordmark" src="https://docs.once-ui.com/trademarks/type-dark.svg" width="200" height="64">
+  </picture>
+
+  <br/>
+
+  The indie design system for Next.js apps
+
+  [![npm version](https://img.shields.io/npm/v/@once-ui-system/core.svg)](https://www.npmjs.com/package/@once-ui-system/core)
+  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE.md)
+  [![npm downloads](https://img.shields.io/npm/dm/@once-ui-system/core.svg)](https://www.npmjs.com/package/@once-ui-system/core)
+  [![Discord](https://img.shields.io/discord/1083398120035074148?color=7289da&logo=discord&logoColor=white)](https://discord.com/invite/5EyAQ4eNdS)
+</div>
+
+
+
+<br/>
+
+## Documentation
+
+Learn how to set up and build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).
+
+## Installation
+
+```bash
+npm install @once-ui-system/core
+```
+
+## Authors
+
+Built and maintained by [**Lorant One**](https://lorant.one).
+
+## Community
+
+Join the [Design Engineers Club](https://discord.com/invite/5EyAQ4eNdS) for help, support and discussion.
+
+Found a bug? Report it [here](https://github.com/once-ui-system/core/issues/new?labels=bug&template=bug_report.md). Got a feature request? Submit it [here](https://github.com/once-ui-system/core/issues/new?labels=feature%20request&template=feature_request.md).
+
+## Contributing
+
+Please read our [CONTRIBUTING.md](https://github.com/once-ui-system/core/blob/main/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to Once UI.
+
+## Sponsors
+
+Once UI is an indie project. [Sponsor us](https://github.com/sponsors/once-ui-system) and get featured on our site!

package/dist/components/CountdownFx.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CountFxProps } from ".";
+export interface CountdownFxProps extends Omit<CountFxProps, 'value' | 'format' | 'separator' | 'effect'> {
+    targetDate: Date | string;
+    format?: "HH:MM:SS" | "DD:HH:MM:SS" | "MM:SS";
+    effect?: CountFxProps['effect'];
+    onComplete?: () => void;
+}
+declare const CountdownFx: React.FC<CountdownFxProps>;
+export { CountdownFx };
+//# sourceMappingURL=CountdownFx.d.ts.map

package/dist/components/CountdownFx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownFx.d.ts","sourceRoot":"","sources":["../../src/components/CountdownFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAsB,YAAY,EAAE,MAAM,GAAG,CAAC;AAErD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,CAAC;IACvG,UAAU,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,OAAO,CAAC;IAC9C,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkH3C,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/CountdownFx.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Row, Text, CountFx } from ".";
+const CountdownFx = ({ targetDate, format = "HH:MM:SS", effect = "wheel", onComplete, ...countFxProps }) => {
+    const [timeRemaining, setTimeRemaining] = useState({
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        total: 0,
+    });
+    useEffect(() => {
+        const calculateTimeRemaining = () => {
+            const now = new Date().getTime();
+            const target = typeof targetDate === 'string' ? new Date(targetDate).getTime() : targetDate.getTime();
+            const difference = target - now;
+            if (difference <= 0) {
+                setTimeRemaining({ days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 });
+                if (onComplete) {
+                    onComplete();
+                }
+                return;
+            }
+            const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((difference % (1000 * 60)) / 1000);
+            setTimeRemaining({ days, hours, minutes, seconds, total: difference });
+        };
+        calculateTimeRemaining();
+        const interval = setInterval(calculateTimeRemaining, 1000);
+        return () => clearInterval(interval);
+    }, [targetDate, onComplete]);
+    const padZero = (num) => num.toString().padStart(2, '0');
+    const renderTimeUnit = (value, key) => {
+        const paddedValue = padZero(value);
+        const digits = paddedValue.split('');
+        return (_jsx(Row, { gap: "0", inline: true, children: digits.map((digit, index) => (_jsx(CountFx, { value: parseInt(digit), effect: effect, speed: 400, ...countFxProps }, `${key}-${index}`))) }, key));
+    };
+    const renderSeparator = () => (_jsx(Text, { ...countFxProps, style: { width: '0.5em', textAlign: 'center' }, children: ":" }, `sep-${Math.random()}`));
+    if (timeRemaining.total === 0) {
+        return (_jsxs(Row, { gap: "0", align: "center", textVariant: countFxProps.variant, style: { fontVariantNumeric: 'tabular-nums' }, children: [format === "DD:HH:MM:SS" && (_jsxs(_Fragment, { children: [renderTimeUnit(0, 'days'), renderSeparator()] })), renderTimeUnit(0, 'hours'), renderSeparator(), renderTimeUnit(0, 'minutes'), format !== "MM:SS" && (_jsxs(_Fragment, { children: [renderSeparator(), renderTimeUnit(0, 'seconds')] }))] }));
+    }
+    return (_jsxs(Row, { gap: "0", align: "center", style: { fontVariantNumeric: 'tabular-nums' }, children: [format === "DD:HH:MM:SS" && timeRemaining.days > 0 && (_jsxs(_Fragment, { children: [renderTimeUnit(timeRemaining.days, 'days'), renderSeparator()] })), format !== "MM:SS" && (_jsxs(_Fragment, { children: [renderTimeUnit(format === "DD:HH:MM:SS" ? timeRemaining.hours : timeRemaining.days * 24 + timeRemaining.hours, 'hours'), renderSeparator()] })), renderTimeUnit(timeRemaining.minutes, 'minutes'), renderSeparator(), renderTimeUnit(timeRemaining.seconds, 'seconds')] }));
+};
+CountdownFx.displayName = "CountdownFx";
+export { CountdownFx };
+//# sourceMappingURL=CountdownFx.js.map

package/dist/components/CountdownFx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownFx.js","sourceRoot":"","sources":["../../src/components/CountdownFx.tsx"],"names":[],"mappings":"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"}

package/dist/components/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/components/Heading.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGrE,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACrD,WAAW,GACX,YAAY,GACZ,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE9B,QAAA,MAAM,OAAO;KAAI,CAAC,SAAS,WAAW,2RA4BnC,YAAY,CAAC,CAAC,CAAC;;CAsEjB,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/components/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGrE,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,GACrD,WAAW,GACX,YAAY,GACZ,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE9B,QAAA,MAAM,OAAO;KAAI,CAAC,SAAS,WAAW,2RA4BnC,YAAY,CAAC,CAAC,CAAC;;CAsEjB,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/MatrixFx.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
 import { Flex } from ".";
+interface BulgeConfig {
+    type?: "ripple" | "wave";
+    duration?: number;
+    intensity?: number;
+    repeat?: boolean;
+    delay?: number;
+}
 interface MatrixFxProps extends React.ComponentProps<typeof Flex> {
     speed?: number;
     colors?: string[];
@@ -8,8 +15,10 @@ interface MatrixFxProps extends React.ComponentProps<typeof Flex> {
     revealFrom?: "center" | "top" | "bottom" | "left" | "right";
     trigger?: "hover" | "instant" | "mount";
     flicker?: boolean;
+    bulge?: BulgeConfig;
     children?: React.ReactNode;
 }
 declare const MatrixFx: React.ForwardRefExoticComponent<Omit<MatrixFxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { MatrixFx };
+export type { BulgeConfig };
 //# sourceMappingURL=MatrixFx.d.ts.map

package/dist/components/MatrixFx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MatrixFx.d.ts","sourceRoot":"","sources":["../../src/components/MatrixFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,mGAoYb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"MatrixFx.d.ts","sourceRoot":"","sources":["../../src/components/MatrixFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,mGAgrBb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/MatrixFx.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
 import { Flex } from ".";
-const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"], size = 3, spacing = 3, revealFrom = "center", trigger = "instant", flicker = false, children, ...rest }, forwardedRef) => {
+const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"], size = 3, spacing = 3, revealFrom = "center", trigger = "instant", flicker = false, bulge, children, ...rest }, forwardedRef) => {
     const containerRef = useRef(null);
     const canvasRef = useRef(null);
     const animationRef = useRef(undefined);
@@ -12,6 +12,7 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
     const hideStartProgressRef = useRef(0);
     const isHoveredRef = useRef(false);
     const mountAnimationCompleteRef = useRef(false);
+    const bulgeStartTimeRef = useRef(Date.now());
     useEffect(() => {
         if (forwardedRef) {
             if ("current" in forwardedRef) {
@@ -51,15 +52,18 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
             const computedColor = getComputedStyle(container).getPropertyValue(`--${color}`);
             return computedColor || color;
         });
-        // Create dot grid
+        // Create dot grid with padding to prevent edge gaps during displacement
         const totalSize = size + spacing;
-        const cols = Math.ceil(canvasWidth / totalSize);
-        const rows = Math.ceil(canvasHeight / totalSize);
+        const maxDisplacement = (bulge?.intensity ?? 10) * 2; // Account for max possible displacement
+        const paddedWidth = canvasWidth + maxDisplacement * 2;
+        const paddedHeight = canvasHeight + maxDisplacement * 2;
+        const cols = Math.ceil(paddedWidth / totalSize);
+        const rows = Math.ceil(paddedHeight / totalSize);
         const dots = [];
         for (let row = 0; row < rows; row++) {
             for (let col = 0; col < cols; col++) {
-                const x = col * totalSize + size / 2;
-                const y = row * totalSize + size / 2;
+                const x = col * totalSize + size / 2 - maxDisplacement;
+                const y = row * totalSize + size / 2 - maxDisplacement;
                 // Calculate distance from reveal origin
                 let distanceFromOrigin = 0;
                 const centerX = canvasWidth / 2;
@@ -101,9 +105,56 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
         const maxDistance = Math.max(...dots.map((d) => d.distanceFromOrigin));
         // Animation loop
         const startTime = Date.now();
+        // Bulge configuration
+        const bulgeEnabled = !!bulge;
+        const bulgeType = bulge?.type ?? "ripple"; // Default: ripple
+        const bulgeDuration = bulge?.duration ?? 3; // Default: 3 seconds per wave
+        const bulgeIntensity = bulge?.intensity ?? 10; // Default: 10px displacement
+        const bulgeRepeat = bulge?.repeat ?? true; // Default: true
+        const bulgeDelay = bulge?.delay ?? 0; // Default: 0ms
+        // Calculate center point for circular wave
+        const centerX = canvasWidth / 2;
+        const centerY = canvasHeight / 2;
+        const maxRadius = Math.sqrt(centerX * centerX + centerY * centerY);
         const animate = () => {
             ctx.clearRect(0, 0, canvasWidth, canvasHeight);
             const time = (Date.now() - startTime) / 1000; // Time in seconds
+            // Calculate circular wave radius (travels from center to edge)
+            let waveProgress = 0;
+            let showBulge = false;
+            let bulgeFadeOut = 1; // Multiplier for fading out bulge effect (1 = full effect, 0 = no effect)
+            if (bulgeEnabled) {
+                const bulgeElapsed = (Date.now() - bulgeStartTimeRef.current) / 1000;
+                const delaySeconds = bulgeDelay / 1000;
+                const totalCycleDuration = bulgeDuration + delaySeconds;
+                const adjustedTime = bulgeElapsed - delaySeconds;
+                const fadeStartPercent = 0.6; // Start fading at 60% of wave duration
+                if (adjustedTime >= 0) {
+                    showBulge = true;
+                    if (bulgeRepeat) {
+                        // Continuous repeating wave
+                        const cycleTime = adjustedTime % totalCycleDuration;
+                        waveProgress = cycleTime < bulgeDuration ? cycleTime / bulgeDuration : 0;
+                        showBulge = cycleTime < bulgeDuration; // Only show during active wave, not delay
+                    }
+                    else {
+                        // Single wave with opacity fade during last 40%
+                        if (adjustedTime <= bulgeDuration) {
+                            waveProgress = adjustedTime / bulgeDuration;
+                            // Start fading opacity at 60% of duration
+                            if (waveProgress >= fadeStartPercent) {
+                                const fadeProgress = (waveProgress - fadeStartPercent) / (1 - fadeStartPercent);
+                                bulgeFadeOut = 1 - fadeProgress; // Fade from 1 to 0
+                            }
+                        }
+                        else {
+                            waveProgress = 0;
+                            showBulge = false;
+                        }
+                    }
+                }
+            }
+            const waveRadius = waveProgress * maxRadius * 1.5; // Travel beyond edges for smooth cycle
             // For instant trigger, show all dots immediately at full opacity
             if (trigger === "instant") {
                 dots.forEach((dot) => {
@@ -115,8 +166,74 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                         const flickerMultiplier = 0.6 + (flickerValue * 0.4); // Oscillate between 0.6 and 1.0
                         opacity *= flickerMultiplier;
                     }
-                    ctx.globalAlpha = opacity;
-                    ctx.fillRect(dot.x, dot.y, size, size);
+                    // Calculate bulge displacement
+                    let offsetX = 0;
+                    let offsetY = 0;
+                    let sizeMultiplier = 1;
+                    let bulgeOpacity = 1;
+                    if (bulgeEnabled && showBulge) {
+                        if (bulgeType === "ripple") {
+                            // Ripple: circular wave from center
+                            const dx = dot.x - centerX;
+                            const dy = dot.y - centerY;
+                            const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+                            const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
+                            const waveWidth = maxRadius * 0.15;
+                            const distanceNorm = distanceToWave / waveWidth;
+                            const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
+                            const angle = Math.atan2(dy, dx);
+                            const displacementAmount = waveFactor * bulgeIntensity * bulgeFadeOut;
+                            offsetX = Math.cos(angle) * displacementAmount;
+                            offsetY = Math.sin(angle) * displacementAmount;
+                            sizeMultiplier = 1 + waveFactor * 0.8 * bulgeFadeOut;
+                            const waveOpacity = 0.3 + waveFactor * 0.7;
+                            bulgeOpacity = 1 + (waveOpacity - 1) * bulgeFadeOut;
+                        }
+                        else if (bulgeType === "wave") {
+                            // Wave: Organic S-curve from bottom-left to top-right with rotation
+                            const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
+                            // Start wave off-screen before bottom-left, end off-screen after top-right
+                            const wavePosOnDiagonal = (waveProgress * diagonalLength * 1.4) - (diagonalLength * 0.2);
+                            // Calculate distance along the diagonal (from bottom-left to top-right)
+                            const normalizedX = dot.x / canvasWidth;
+                            const normalizedY = 1 - (dot.y / canvasHeight);
+                            const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
+                            // Distance from wave front
+                            const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
+                            const waveWidth = diagonalLength * 0.25;
+                            const distanceNorm = distanceToWaveFront / waveWidth;
+                            // Smooth wave factor with wider influence
+                            const waveFactor = Math.exp(-distanceNorm * distanceNorm * 2.5);
+                            // Create rotating S-curve with multiple frequency components
+                            const perpendicularOffset = normalizedY - normalizedX;
+                            // Primary S-curve that rotates over time
+                            const rotationPhase = waveProgress * Math.PI * 3; // Rotates 1.5 times during animation
+                            const primaryFreq = 3; // Number of S-curves along the wave
+                            const sCurvePrimary = Math.sin(perpendicularOffset * Math.PI * primaryFreq + rotationPhase);
+                            // Secondary curve for complexity (higher frequency, lower amplitude)
+                            const secondaryFreq = 7;
+                            const sCurveSecondary = Math.sin(perpendicularOffset * Math.PI * secondaryFreq - rotationPhase * 1.5) * 0.4;
+                            // Combine curves for organic motion
+                            const sCurveFactor = sCurvePrimary + sCurveSecondary;
+                            // Wave straightens at the edges (distanceNorm affects curve strength)
+                            const curveStrength = 1 - Math.abs(distanceNorm) * 0.5;
+                            const modulatedCurve = sCurveFactor * curveStrength;
+                            // Apply displacement
+                            const baseDisplacement = waveFactor * bulgeIntensity * bulgeFadeOut;
+                            const diagonalAngle = Math.PI / 4;
+                            // Perpendicular displacement creates the S-curve
+                            const perpAngle = diagonalAngle + Math.PI / 2;
+                            offsetX = Math.cos(diagonalAngle) * baseDisplacement + Math.cos(perpAngle) * modulatedCurve * baseDisplacement * 0.8;
+                            offsetY = -Math.sin(diagonalAngle) * baseDisplacement - Math.sin(perpAngle) * modulatedCurve * baseDisplacement * 0.8;
+                            sizeMultiplier = 1 + waveFactor * 0.5 * bulgeFadeOut;
+                            const waveOpacity = 0.4 + waveFactor * 0.6;
+                            bulgeOpacity = 1 + (waveOpacity - 1) * bulgeFadeOut;
+                        }
+                    }
+                    ctx.globalAlpha = opacity * bulgeOpacity;
+                    const adjustedSize = size * sizeMultiplier;
+                    const sizeOffset = (adjustedSize - size) / 2;
+                    ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
                 });
                 ctx.globalAlpha = 1;
                 animationRef.current = requestAnimationFrame(animate);
@@ -149,9 +266,53 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                             }
                         }
                         if (opacity > 0) {
+                            // Calculate bulge displacement
+                            let offsetX = 0;
+                            let offsetY = 0;
+                            let sizeMultiplier = 1;
+                            let bulgeOpacity = 1;
+                            if (bulgeEnabled) {
+                                if (bulgeType === "ripple") {
+                                    const dx = dot.x - centerX;
+                                    const dy = dot.y - centerY;
+                                    const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+                                    const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
+                                    const waveWidth = maxRadius * 0.15;
+                                    const distanceNorm = distanceToWave / waveWidth;
+                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
+                                    const angle = Math.atan2(dy, dx);
+                                    const displacementAmount = waveFactor * bulgeIntensity;
+                                    offsetX = Math.cos(angle) * displacementAmount;
+                                    offsetY = Math.sin(angle) * displacementAmount;
+                                    sizeMultiplier = 1 + waveFactor * 0.8;
+                                    bulgeOpacity = 0.3 + waveFactor * 0.7;
+                                }
+                                else if (bulgeType === "wave") {
+                                    const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
+                                    const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
+                                    const normalizedX = dot.x / canvasWidth;
+                                    const normalizedY = 1 - (dot.y / canvasHeight);
+                                    const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
+                                    const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
+                                    const waveWidth = diagonalLength * 0.2;
+                                    const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
+                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
+                                    const perpendicularOffset = normalizedY - normalizedX;
+                                    const sCurvePhase = perpendicularOffset * Math.PI * 2;
+                                    const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
+                                    const baseDisplacement = waveFactor * bulgeIntensity;
+                                    const diagonalAngle = Math.PI / 4;
+                                    offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                    offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                    sizeMultiplier = 1 + waveFactor * 0.6;
+                                    bulgeOpacity = 0.4 + waveFactor * 0.6;
+                                }
+                            }
                             ctx.fillStyle = dot.color;
-                            ctx.globalAlpha = opacity;
-                            ctx.fillRect(dot.x, dot.y, size, size);
+                            ctx.globalAlpha = opacity * bulgeOpacity;
+                            const adjustedSize = size * sizeMultiplier;
+                            const sizeOffset = (adjustedSize - size) / 2;
+                            ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
                         }
                     });
                 }
@@ -165,8 +326,52 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                             const flickerMultiplier = 0.6 + (flickerValue * 0.4);
                             opacity *= flickerMultiplier;
                         }
-                        ctx.globalAlpha = opacity;
-                        ctx.fillRect(dot.x, dot.y, size, size);
+                        // Calculate bulge displacement
+                        let offsetX = 0;
+                        let offsetY = 0;
+                        let sizeMultiplier = 1;
+                        let bulgeOpacity = 1;
+                        if (bulgeEnabled) {
+                            if (bulgeType === "ripple") {
+                                const dx = dot.x - centerX;
+                                const dy = dot.y - centerY;
+                                const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+                                const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
+                                const waveWidth = maxRadius * 0.15;
+                                const distanceNorm = distanceToWave / waveWidth;
+                                const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
+                                const angle = Math.atan2(dy, dx);
+                                const displacementAmount = waveFactor * bulgeIntensity;
+                                offsetX = Math.cos(angle) * displacementAmount;
+                                offsetY = Math.sin(angle) * displacementAmount;
+                                sizeMultiplier = 1 + waveFactor * 0.8;
+                                bulgeOpacity = 0.3 + waveFactor * 0.7;
+                            }
+                            else if (bulgeType === "wave") {
+                                const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
+                                const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
+                                const normalizedX = dot.x / canvasWidth;
+                                const normalizedY = 1 - (dot.y / canvasHeight);
+                                const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
+                                const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
+                                const waveWidth = diagonalLength * 0.2;
+                                const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
+                                const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
+                                const perpendicularOffset = normalizedY - normalizedX;
+                                const sCurvePhase = perpendicularOffset * Math.PI * 2;
+                                const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
+                                const baseDisplacement = waveFactor * bulgeIntensity;
+                                const diagonalAngle = Math.PI / 4;
+                                offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                sizeMultiplier = 1 + waveFactor * 0.6;
+                                bulgeOpacity = 0.4 + waveFactor * 0.6;
+                            }
+                        }
+                        ctx.globalAlpha = opacity * bulgeOpacity;
+                        const adjustedSize = size * sizeMultiplier;
+                        const sizeOffset = (adjustedSize - size) / 2;
+                        ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
                     });
                 }
                 ctx.globalAlpha = 1;
@@ -200,9 +405,53 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                         }
                     }
                     if (opacity > 0) {
+                        // Calculate bulge displacement
+                        let offsetX = 0;
+                        let offsetY = 0;
+                        let sizeMultiplier = 1;
+                        let bulgeOpacity = 1;
+                        if (bulgeEnabled) {
+                            if (bulgeType === "ripple") {
+                                const dx = dot.x - centerX;
+                                const dy = dot.y - centerY;
+                                const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+                                const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
+                                const waveWidth = maxRadius * 0.15;
+                                const distanceNorm = distanceToWave / waveWidth;
+                                const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
+                                const angle = Math.atan2(dy, dx);
+                                const displacementAmount = waveFactor * bulgeIntensity;
+                                offsetX = Math.cos(angle) * displacementAmount;
+                                offsetY = Math.sin(angle) * displacementAmount;
+                                sizeMultiplier = 1 + waveFactor * 0.8;
+                                bulgeOpacity = 0.3 + waveFactor * 0.7;
+                            }
+                            else if (bulgeType === "wave") {
+                                const diagonalLength = Math.sqrt(canvasWidth * canvasWidth + canvasHeight * canvasHeight);
+                                const wavePosOnDiagonal = waveProgress * diagonalLength * 1.2;
+                                const normalizedX = dot.x / canvasWidth;
+                                const normalizedY = 1 - (dot.y / canvasHeight);
+                                const dotDiagonalPos = (normalizedX + normalizedY) / 2 * diagonalLength;
+                                const distanceToWaveFront = dotDiagonalPos - wavePosOnDiagonal;
+                                const waveWidth = diagonalLength * 0.2;
+                                const distanceNorm = Math.abs(distanceToWaveFront) / waveWidth;
+                                const waveFactor = Math.exp(-distanceNorm * distanceNorm * 3);
+                                const perpendicularOffset = normalizedY - normalizedX;
+                                const sCurvePhase = perpendicularOffset * Math.PI * 2;
+                                const sCurveFactor = Math.sin(sCurvePhase + waveProgress * Math.PI * 2);
+                                const baseDisplacement = waveFactor * bulgeIntensity;
+                                const diagonalAngle = Math.PI / 4;
+                                offsetX = Math.cos(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                offsetY = -Math.sin(diagonalAngle) * baseDisplacement + sCurveFactor * baseDisplacement * 0.5;
+                                sizeMultiplier = 1 + waveFactor * 0.6;
+                                bulgeOpacity = 0.4 + waveFactor * 0.6;
+                            }
+                        }
                         ctx.fillStyle = dot.color;
-                        ctx.globalAlpha = opacity;
-                        ctx.fillRect(dot.x, dot.y, size, size);
+                        ctx.globalAlpha = opacity * bulgeOpacity;
+                        const adjustedSize = size * sizeMultiplier;
+                        const sizeOffset = (adjustedSize - size) / 2;
+                        ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
                     }
                 });
             }
@@ -232,9 +481,31 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                                 }
                             }
                             if (opacity > 0) {
+                                // Calculate bulge displacement
+                                let offsetX = 0;
+                                let offsetY = 0;
+                                let sizeMultiplier = 1;
+                                let bulgeOpacity = 1;
+                                if (bulgeEnabled) {
+                                    const dx = dot.x - centerX;
+                                    const dy = dot.y - centerY;
+                                    const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+                                    const distanceToWave = Math.abs(distanceFromCenter - waveRadius);
+                                    const waveWidth = maxRadius * 0.15;
+                                    const distanceNorm = distanceToWave / waveWidth;
+                                    const waveFactor = Math.exp(-distanceNorm * distanceNorm * 4);
+                                    const angle = Math.atan2(dy, dx);
+                                    const displacementAmount = waveFactor * bulgeIntensity;
+                                    offsetX = Math.cos(angle) * displacementAmount * 0.3;
+                                    offsetY = Math.sin(angle) * displacementAmount * 0.3 - waveFactor * bulgeIntensity;
+                                    sizeMultiplier = 1 + waveFactor * 0.8;
+                                    bulgeOpacity = 0.3 + waveFactor * 0.7;
+                                }
                                 ctx.fillStyle = dot.color;
-                                ctx.globalAlpha = opacity;
-                                ctx.fillRect(dot.x, dot.y, size, size);
+                                ctx.globalAlpha = opacity * bulgeOpacity;
+                                const adjustedSize = size * sizeMultiplier;
+                                const sizeOffset = (adjustedSize - size) / 2;
+                                ctx.fillRect(dot.x + offsetX - sizeOffset, dot.y + offsetY - sizeOffset, adjustedSize, adjustedSize);
                             }
                         });
                     }
@@ -254,7 +525,7 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                 cancelAnimationFrame(animationRef.current);
             }
         };
-    }, [colors, size, spacing, speed, revealFrom, trigger, flicker]);
+    }, [colors, size, spacing, speed, revealFrom, trigger, flicker, bulge]);
     const handleMouseEnter = () => {
         if (trigger === "hover" && !isHoveredRef.current) {
             const now = Date.now();
@@ -275,6 +546,10 @@ const MatrixFx = React.forwardRef(({ speed = 1, colors = ["brand-solid-medium"],
                 // Fresh start
                 revealStartTimeRef.current = now;
             }
+            // Reset bulge animation on each hover when repeat is false
+            if (bulge && !bulge.repeat) {
+                bulgeStartTimeRef.current = now;
+            }
             isHoveredRef.current = true;
             hideStartProgressRef.current = 0; // Clear hide state
         }