From ed35b64f5e03eb8411a20d4431425149eed9251a Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 14:23:31 +0530
Subject: [PATCH 01/12] gradual blur animation added

---
 package-lock.json                             | 100 ++++
 package.json                                  |   2 +
 public/assets/Person2.png                     | Bin 0 -> 160028 bytes
 src/constants/Categories.js                   |   3 +-
 src/constants/Components.js                   |   1 +
 .../code/Animations/gradualblurCode.js        |  37 ++
 .../Animations/GradualBlur/GradualBlur.css    |  35 ++
 .../Animations/GradualBlur/GradualBlur.jsx    | 387 ++++++++++++++++
 src/demo/Animations/GradualBlurDemo.jsx       | 332 +++++++++++++
 .../Animations/GradualBlur/GradualBlur.css    |  35 ++
 .../Animations/GradualBlur/GradualBlur.jsx    | 387 ++++++++++++++++
 .../Animations/GradualBlur/GradualBlur.css    |  20 +
 .../Animations/GradualBlur/GradualBlur.tsx    | 435 ++++++++++++++++++
 .../Animations/GradualBlur/GradualBlur.tsx    | 429 +++++++++++++++++
 14 files changed, 2202 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/Person2.png
 create mode 100644 src/constants/code/Animations/gradualblurCode.js
 create mode 100644 src/content/Animations/GradualBlur/GradualBlur.css
 create mode 100644 src/content/Animations/GradualBlur/GradualBlur.jsx
 create mode 100644 src/demo/Animations/GradualBlurDemo.jsx
 create mode 100644 src/tailwind/Animations/GradualBlur/GradualBlur.css
 create mode 100644 src/tailwind/Animations/GradualBlur/GradualBlur.jsx
 create mode 100644 src/ts-default/Animations/GradualBlur/GradualBlur.css
 create mode 100644 src/ts-default/Animations/GradualBlur/GradualBlur.tsx
 create mode 100644 src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx

diff --git a/package-lock.json b/package-lock.json
index 6d4af841..1eb71510 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "react-bits",
 			"version": "0.0.0",
 			"dependencies": {
+				"@chakra-ui/icons": "^2.2.4",
 				"@chakra-ui/react": "^3.20.0",
 				"@emotion/react": "^11.14.0",
 				"@react-three/drei": "^10.1.2",
@@ -19,6 +20,7 @@
 				"gsap": "^3.13.0",
 				"lenis": "^1.3.5",
 				"maath": "^0.10.8",
+				"mathjs": "^14.6.0",
 				"matter-js": "^0.20.0",
 				"meshline": "^3.3.1",
 				"motion": "^12.23.12",
@@ -471,6 +473,16 @@
 			"integrity": "sha512-ZqNlhKcZW6MW1LxWIOfh9YVrBykvzyFad3bOh6JJFraDnNa3NXboRDiaI8dmrbb0ZHXCU1Tsq6WQsKV2Vpp5dw==",
 			"dev": true
 		},
+		"node_modules/@chakra-ui/icons": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.2.4.tgz",
+			"integrity": "sha512-l5QdBgwrAg3Sc2BRqtNkJpfuLw/pWRDwwT58J6c4PqQT6wzXxyNa8Q0PForu1ltB5qEiFb1kxr/F/HO1EwNa6g==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@chakra-ui/react": ">=2.0.0",
+				"react": ">=18"
+			}
+		},
 		"node_modules/@chakra-ui/react": {
 			"version": "3.20.0",
 			"resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-3.20.0.tgz",
@@ -4396,6 +4408,19 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/complex.js": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.4.2.tgz",
+			"integrity": "sha512-qtx7HRhPGSCBtGiST4/WGHuW+zeaND/6Ld+db6PbrulIB1i2Ev/2UPiqcmpQNPSyfBKraC0EOvOKCB5dGZKt3g==",
+			"license": "MIT",
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/rawify"
+			}
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4686,6 +4711,12 @@
 				}
 			}
 		},
+		"node_modules/decimal.js": {
+			"version": "10.6.0",
+			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+			"integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+			"license": "MIT"
+		},
 		"node_modules/deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -5091,6 +5122,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/escape-latex": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+			"integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==",
+			"license": "MIT"
+		},
 		"node_modules/escape-string-regexp": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -5716,6 +5753,19 @@
 				"node": ">=12.20.0"
 			}
 		},
+		"node_modules/fraction.js": {
+			"version": "5.3.4",
+			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+			"integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+			"license": "MIT",
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/rawify"
+			}
+		},
 		"node_modules/framer-motion": {
 			"version": "12.23.12",
 			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
@@ -6771,6 +6821,12 @@
 				"react": "^19.0.0"
 			}
 		},
+		"node_modules/javascript-natural-sort": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+			"integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+			"license": "MIT"
+		},
 		"node_modules/jiti": {
 			"version": "2.4.2",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
@@ -7340,6 +7396,29 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/mathjs": {
+			"version": "14.6.0",
+			"resolved": "https://registry.npmjs.org/mathjs/-/mathjs-14.6.0.tgz",
+			"integrity": "sha512-5vI2BLB5GKQmiSK9BH6hVkZ+GgqpdnOgEfmHl7mqVmdQObLynr63KueyYYLCQMzj66q69mV2XZZGQqqxeftQbA==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@babel/runtime": "^7.26.10",
+				"complex.js": "^2.2.5",
+				"decimal.js": "^10.4.3",
+				"escape-latex": "^1.2.0",
+				"fraction.js": "^5.2.1",
+				"javascript-natural-sort": "^0.7.1",
+				"seedrandom": "^3.0.5",
+				"tiny-emitter": "^2.1.0",
+				"typed-function": "^4.2.1"
+			},
+			"bin": {
+				"mathjs": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">= 18"
+			}
+		},
 		"node_modules/matter-js": {
 			"version": "0.20.0",
 			"resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.20.0.tgz",
@@ -8641,6 +8720,12 @@
 			"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
 			"license": "MIT"
 		},
+		"node_modules/seedrandom": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+			"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
+			"license": "MIT"
+		},
 		"node_modules/semver": {
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -9105,6 +9190,12 @@
 			"integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
 			"license": "MIT"
 		},
+		"node_modules/tiny-emitter": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+			"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+			"license": "MIT"
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -9347,6 +9438,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/typed-function": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/typed-function/-/typed-function-4.2.1.tgz",
+			"integrity": "sha512-EGjWssW7Tsk4DGfE+5yluuljS1OGYWiI1J6e8puZz9nTMM51Oug8CD5Zo4gWMsOhq5BI+1bF+rWTm4Vbj3ivRA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 18"
+			}
+		},
 		"node_modules/typescript": {
 			"version": "5.7.3",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
diff --git a/package.json b/package.json
index 1e316517..e4ab18c8 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@chakra-ui/icons": "^2.2.4",
 		"@chakra-ui/react": "^3.20.0",
 		"@emotion/react": "^11.14.0",
 		"@react-three/drei": "^10.1.2",
@@ -27,6 +28,7 @@
 		"gsap": "^3.13.0",
 		"lenis": "^1.3.5",
 		"maath": "^0.10.8",
+		"mathjs": "^14.6.0",
 		"matter-js": "^0.20.0",
 		"meshline": "^3.3.1",
 		"motion": "^12.23.12",
diff --git a/public/assets/Person2.png b/public/assets/Person2.png
new file mode 100644
index 0000000000000000000000000000000000000000..ebf53e76d49038f2f9e4ec520d4b1323eed90549
GIT binary patch
diff --git a/src/constants/Categories.js b/src/constants/Categories.js
index 29378fcc..485a7800 100644
--- a/src/constants/Categories.js
+++ b/src/constants/Categories.js
@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Gradient Blinds', 'Bubble Menu', 'Electric Border', 'Plasma', 'Prism', 'Logo Loop', 'Card Nav', 'Pill Nav', 'Faulty Terminal', 'Light Rays', 'Sticker Peel', 'Galaxy', 'Glass Surface', 'Curved Loop', 'Target Cursor'];
+export const NEW = ['Gradualblur','Gradient Blinds', 'Bubble Menu', 'Electric Border', 'Plasma', 'Prism', 'Logo Loop', 'Card Nav', 'Pill Nav', 'Faulty Terminal', 'Light Rays', 'Sticker Peel', 'Galaxy', 'Glass Surface', 'Curved Loop', 'Target Cursor'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -43,6 +43,7 @@ export const CATEGORIES = [
   {
     name: 'Animations',
     subcategories: [
+      'Gradual Blur',
       'Animated Content',
       'Fade Content',
       'Electric Border',
diff --git a/src/constants/Components.js b/src/constants/Components.js
index f3e99622..3603accd 100644
--- a/src/constants/Components.js
+++ b/src/constants/Components.js
@@ -5,6 +5,7 @@ const getStarted = {
 }
 
 const animations = {
+  'gradual-blur': () => import("../demo/Animations/GradualBlurDemo"),
   'blob-cursor': () => import("../demo/Animations/BlobCursorDemo"),
   'animated-content': () => import("../demo/Animations/AnimatedContentDemo"),
   'magnet': () => import("../demo/Animations/MagnetDemo"),
diff --git a/src/constants/code/Animations/gradualblurCode.js b/src/constants/code/Animations/gradualblurCode.js
new file mode 100644
index 00000000..ed2b022d
--- /dev/null
+++ b/src/constants/code/Animations/gradualblurCode.js
@@ -0,0 +1,37 @@
+import { generateCliCommands } from '@/utils/utils';
+
+import code from '@content/Animations/GradualBlur/GradualBlur.jsx?raw';
+import css from '@content/Animations/GradualBlur/GradualBlur.css?raw';
+import tailwind from '@tailwind/Animations/GradualBlur/GradualBlur.jsx?raw';
+import tsCode from '@ts-default/Animations/GradualBlur/GradualBlur.tsx?raw';
+import tsTailwind from '@ts-tailwind/Animations/GradualBlur/GradualBlur.tsx?raw';
+
+export const gradualBlur = {
+  ...generateCliCommands("Animations/GradualBlur"),
+  installation: `npm install gradualblur`,
+  usage: `
+// created by ANSH DHANANI
+// Component inspired by gradual blur overlay effects
+  
+import GradualBlur from 'gradualblur'
+
+<GradualBlur
+  position="bottom"
+  strength={2}
+  height="7rem"
+  divCount={5}
+  exponential={true}
+  opacity={1}
+  target="page"
+>
+  <div>
+    <p style={{ margin: '6px 0 0', opacity: 0.8 }}>
+    </p>
+  </div>
+</GradualBlur>`,
+  code,
+  css,
+  tailwind,
+  tsCode,
+  tsTailwind,
+};
diff --git a/src/content/Animations/GradualBlur/GradualBlur.css b/src/content/Animations/GradualBlur/GradualBlur.css
new file mode 100644
index 00000000..663c9126
--- /dev/null
+++ b/src/content/Animations/GradualBlur/GradualBlur.css
@@ -0,0 +1,35 @@
+.gradual-blur-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Ensure backdrop-filter works with proper browser prefixes */
+.gradual-blur-inner > div {
+  -webkit-backdrop-filter: inherit;
+  backdrop-filter: inherit;
+}
+
+/* Ensure proper rendering for the blur effect */
+.gradual-blur {
+  isolation: isolate;
+}
+
+/* Fallback for browsers that don't support backdrop-filter */
+@supports not (backdrop-filter: blur(1px)) {
+  .gradual-blur-inner > div {
+    background: rgba(0, 0, 0, 0.3);
+    opacity: 0.5;
+  }
+}
+
+/* Fix for parent container positioning */
+.gradual-blur-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1000;
+}
diff --git a/src/content/Animations/GradualBlur/GradualBlur.jsx b/src/content/Animations/GradualBlur/GradualBlur.jsx
new file mode 100644
index 00000000..dfa871dd
--- /dev/null
+++ b/src/content/Animations/GradualBlur/GradualBlur.jsx
@@ -0,0 +1,387 @@
+import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
+import * as math from 'mathjs';
+
+// Default configuration - simplified and clean
+const DEFAULT_CONFIG = {
+  position: 'bottom',
+  strength: 2,
+  height: '6rem',
+  divCount: 5,
+  exponential: false,
+  zIndex: 1000,
+  animated: false,
+  duration: '0.3s',
+  easing: 'ease-out',
+  opacity: 1,
+  curve: 'linear',
+  responsive: false,
+  target: 'parent', // NEW: 'parent' | 'page'
+  className: '',
+  style: {}
+};
+
+// Streamlined presets - height-only approach
+const PRESETS = {
+  // Basic positions
+  top: { position: 'top', height: '6rem' },
+  bottom: { position: 'bottom', height: '6rem' },
+  left: { position: 'left', height: '6rem' },
+  right: { position: 'right', height: '6rem' },
+  
+  // Intensity variations
+  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
+  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
+  
+  // Style variations
+  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
+  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
+  
+  // Common use cases
+  header: { position: 'top', height: '8rem', curve: 'ease-out' },
+  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
+  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
+  
+  // Page-level presets
+  'page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
+  'page-footer': { position: 'bottom', height: '10rem', target: 'page', strength: 3 }
+};
+
+// Curve functions - essential ones only
+const CURVE_FUNCTIONS = {
+  linear: (progress) => progress,
+  bezier: (progress) => progress * progress * (3 - 2 * progress),
+  'ease-in': (progress) => progress * progress,
+  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
+  'ease-in-out': (progress) => 
+    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
+};
+
+// Utility functions
+const mergeConfigs = (...configs) => {
+  return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
+};
+
+const getGradientDirection = (position) => {
+  const directions = {
+    top: 'to top',
+    bottom: 'to bottom',
+    left: 'to left',
+    right: 'to right'
+  };
+  return directions[position] || 'to bottom';
+};
+
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// Custom hooks
+const useResponsiveHeight = (responsive, config) => {
+  const [height, setHeight] = useState(config.height);
+  
+  const updateHeight = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newHeight = config.height;
+    
+    if (screenWidth <= 480 && config.mobileHeight) {
+      newHeight = config.mobileHeight;
+    } else if (screenWidth <= 768 && config.tabletHeight) {
+      newHeight = config.tabletHeight;
+    } else if (screenWidth <= 1024 && config.desktopHeight) {
+      newHeight = config.desktopHeight;
+    }
+    
+    setHeight(newHeight);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, [responsive, updateHeight]);
+
+  return responsive ? height : config.height;
+};
+
+const useResponsiveWidth = (responsive, config) => {
+  const [width, setWidth] = useState(config.width);
+  
+  const updateWidth = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newWidth = config.width;
+    
+    if (screenWidth <= 480 && config.mobileWidth) {
+      newWidth = config.mobileWidth;
+    } else if (screenWidth <= 768 && config.tabletWidth) {
+      newWidth = config.tabletWidth;
+    } else if (screenWidth <= 1024 && config.desktopWidth) {
+      newWidth = config.desktopWidth;
+    }
+    
+    setWidth(newWidth);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateWidth();
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, [responsive, updateWidth]);
+
+  return responsive ? width : config.width;
+};
+
+const useIntersectionObserver = (ref, shouldObserve = false) => {
+  const [isVisible, setIsVisible] = useState(!shouldObserve);
+  
+  useEffect(() => {
+    if (!shouldObserve || !ref.current) return;
+    
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref, shouldObserve]);
+  
+  return isVisible;
+};
+
+// Main component
+const GradualBlur = (props) => {
+  const containerRef = useRef(null);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Merge configurations
+  const config = useMemo(() => {
+    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+    return mergeConfigs(DEFAULT_CONFIG, presetConfig, props);
+  }, [props]);
+
+  // Responsive height and width
+  const responsiveHeight = useResponsiveHeight(config.responsive, config);
+  const responsiveWidth = useResponsiveWidth(config.responsive, config);
+
+  // Intersection observer for scroll animations
+  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
+
+  // Memoized blur divs generation
+  const blurDivs = useMemo(() => {
+    const divs = [];
+    const increment = 100 / config.divCount;
+    const currentStrength = isHovered && config.hoverIntensity ? 
+      config.strength * config.hoverIntensity : config.strength;
+    
+    const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+    
+    for (let i = 1; i <= config.divCount; i++) {
+      let progress = i / config.divCount;
+      progress = curveFunc(progress);
+      
+      // Calculate blur value
+      let blurValue;
+      if (config.exponential) {
+        blurValue = math.pow(2, progress * 4) * 0.0625 * currentStrength;
+      } else {
+        blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
+      }
+      
+      // Calculate gradient positions
+      const p1 = math.round((increment * i - increment) * 10) / 10;
+      const p2 = math.round((increment * i) * 10) / 10;
+      const p3 = math.round((increment * i + increment) * 10) / 10;
+      const p4 = math.round((increment * i + increment * 2) * 10) / 10;
+      
+      // Generate gradient
+      let gradient = `transparent ${p1}%, black ${p2}%`;
+      if (p3 <= 100) gradient += `, black ${p3}%`;
+      if (p4 <= 100) gradient += `, transparent ${p4}%`;
+      
+      const direction = getGradientDirection(config.position);
+      
+      const divStyle = {
+        position: 'absolute',
+        inset: '0',
+        maskImage: `linear-gradient(${direction}, ${gradient})`,
+        WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
+        backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        WebkitBackdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        opacity: config.opacity,
+        transition: config.animated && config.animated !== 'scroll' ? 
+          `backdrop-filter ${config.duration} ${config.easing}` : undefined
+      };
+      
+      divs.push(<div key={i} style={divStyle} />);
+    }
+    
+    return divs;
+  }, [config, isHovered]);
+
+  // Container styles with target-aware positioning
+  const containerStyle = useMemo(() => {
+    const isVertical = ['top', 'bottom'].includes(config.position);
+    const isHorizontal = ['left', 'right'].includes(config.position);
+    const isPageTarget = config.target === 'page';
+    
+    const baseStyle = {
+      // Position based on target
+      position: isPageTarget ? 'fixed' : 'absolute',
+      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+      opacity: isVisible ? 1 : 0,
+      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
+      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex, // Higher z-index for page targeting
+      ...config.style
+    };
+
+    // Apply dimensions and positioning
+    if (isVertical) {
+      baseStyle.height = responsiveHeight;
+      baseStyle.width = responsiveWidth || '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.left = 0;
+      baseStyle.right = 0;
+    } else if (isHorizontal) {
+      baseStyle.width = responsiveWidth || responsiveHeight; // Use width prop if provided, otherwise use height value
+      baseStyle.height = '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.top = 0;
+      baseStyle.bottom = 0;
+    }
+
+    return baseStyle;
+  }, [config, responsiveHeight, responsiveWidth, isVisible]);
+
+  // Event handlers
+  const handleMouseEnter = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(true);
+    }
+  }, [config.hoverIntensity]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(false);
+    }
+  }, [config.hoverIntensity]);
+
+  // Animation complete callback
+  useEffect(() => {
+    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
+      const timer = setTimeout(
+        () => config.onAnimationComplete(),
+        parseFloat(config.duration) * 1000
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`gradual-blur ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
+      style={containerStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div 
+        className="gradual-blur-inner" 
+        style={{ 
+          position: 'relative', 
+          width: '100%', 
+          height: '100%'
+        }}
+      >
+        {blurDivs}
+      </div>
+    </div>
+  );
+};
+
+// Factory function for creating instances with different targets
+export const createPageBlur = (props = {}) => {
+  return <GradualBlur {...props} target="page" />;
+};
+
+export const createParentBlur = (props = {}) => {
+  return <GradualBlur {...props} target="parent" />;
+};
+
+// Export utilities
+export { PRESETS, CURVE_FUNCTIONS };
+
+export default React.memo(GradualBlur);
+
+// CSS injection function
+const injectStyles = () => {
+  if (typeof document === 'undefined') return;
+  
+  const styleId = 'gradual-blur-styles';
+  if (document.getElementById(styleId)) return;
+  
+  const styleElement = document.createElement('style');
+  styleElement.id = styleId;
+  styleElement.textContent = `
+    .gradual-blur {
+      pointer-events: none;
+    }
+
+    .gradual-blur-page {
+      /* Page-level blur styles */
+    }
+
+    .gradual-blur-parent {
+      /* Parent-level blur styles */
+    }
+
+    .gradual-blur-inner {
+      pointer-events: none;
+    }
+
+    /* Hover support */
+    .gradual-blur:hover .gradual-blur-inner {
+      /* Hover effects can be added here */
+    }
+
+    /* Animation support */
+    .gradual-blur {
+      transition: opacity 0.3s ease-out;
+    }
+
+    /* Responsive utilities */
+    @media (max-width: 480px) {
+      .gradual-blur-responsive {
+        /* Mobile specific styles */
+      }
+    }
+
+    @media (max-width: 768px) {
+      .gradual-blur-responsive {
+        /* Tablet specific styles */
+      }
+    }
+  `;
+  
+  document.head.appendChild(styleElement);
+};
+
+// Inject styles on component mount
+if (typeof document !== 'undefined') {
+  injectStyles();
+}
diff --git a/src/demo/Animations/GradualBlurDemo.jsx b/src/demo/Animations/GradualBlurDemo.jsx
new file mode 100644
index 00000000..a5f6b6de
--- /dev/null
+++ b/src/demo/Animations/GradualBlurDemo.jsx
@@ -0,0 +1,332 @@
+import { useState } from "react";
+import {
+  Box,
+  Heading,
+  Text,
+  VStack,
+  HStack,
+  SimpleGrid,
+  Code,
+  Image,
+  Link,
+  Button,
+} from "@chakra-ui/react";
+import {
+  CodeTab,
+  PreviewTab,
+  CliTab,
+  TabsLayout,
+} from "../../components/common/TabsLayout";
+
+import Customize from "../../components/common/Preview/Customize";
+import CodeExample from "../../components/code/CodeExample";
+import CliInstallation from "../../components/code/CliInstallation";
+import PropTable from "../../components/common/Preview/PropTable";
+import PreviewSelect from "../../components/common/Preview/PreviewSelect";
+import PreviewSlider from "../../components/common/Preview/PreviewSlider";
+
+import { gradualBlur } from "../../constants/code/Animations/gradualblurCode";
+import GradualBlur from "../../content/Animations/GradualBlur/GradualBlur";
+
+const GradualBlurDemo = () => {
+  const propData = [
+    {
+      name: "position",
+      type: `"top" | "bottom" | "left" | "right"`,
+      default: `"bottom"`,
+      description: "Position of the blur overlay.",
+    },
+    {
+      name: "strength",
+      type: "number",
+      default: "2",
+      description: "Overall blur strength multiplier.",
+    },
+    {
+      name: "height",
+      type: "string",
+      default: `"7rem"`,
+      description: "Height of the blur region.",
+    },
+    {
+      name: "width",
+      type: "string",
+      default: `"100%"`,
+      description: "Width of the blur region.",
+    },
+    {
+      name: "divCount",
+      type: "number",
+      default: "5",
+      description: "Number of stacked blur layers.",
+    },
+    {
+      name: "exponential",
+      type: "boolean",
+      default: "false",
+      description: "Use exponential blur progression.",
+    },
+    {
+      name: "animated",
+      type: `"boolean" | "scroll"`,
+      default: "false",
+      description: "Enable animation or scroll-based reveal.",
+    },
+    {
+      name: "duration",
+      type: "string",
+      default: `"0.3s"`,
+      description: "Animation duration.",
+    },
+    {
+      name: "easing",
+      type: "string",
+      default: `"ease-out"`,
+      description: "Animation easing function.",
+    },
+    {
+      name: "opacity",
+      type: "number",
+      default: "1",
+      description: "Layer opacity.",
+    },
+    {
+      name: "curve",
+      type: `"linear" | "bezier" | "ease-in-out"`,
+      default: `"linear"`,
+      description: "Controls blur progression curve.",
+    },
+    {
+      name: "responsive",
+      type: "boolean",
+      default: "false",
+      description: "Enable responsive heights.",
+    },
+    {
+      name: "preset",
+      type: `"top" | "bottom"`,
+      default: "—",
+      description: "Quickly apply a preset config.",
+    },
+    {
+      name: "gpuOptimized",
+      type: "boolean",
+      default: "false",
+      description: "Enable GPU optimization (`will-change`).",
+    },
+    {
+      name: "hoverIntensity",
+      type: "number",
+      default: "—",
+      description: "Increase blur strength on hover.",
+    },
+    {
+      name: "target",
+      type: `"parent" | "page"`,
+      default: `"parent"`,
+      description: "Position relative to parent container or entire page.",
+    },
+    {
+      name: "onAnimationComplete",
+      type: "() => void",
+      default: "—",
+      description: "Callback after animation finishes.",
+    },
+    {
+      name: "className",
+      type: "string",
+      default: "—",
+      description: "Custom CSS class.",
+    },
+    {
+      name: "style",
+      type: "React.CSSProperties",
+      default: "—",
+      description: "Inline style overrides.",
+    },
+  ];
+
+  const [blurProps, setBlurProps] = useState({
+    position: "bottom",
+    strength: 2,
+    height: "7rem",
+    divCount: 5,
+    curve: "linear",
+    exponential: false,
+    opacity: 1,
+  });
+
+  return (
+    <TabsLayout>
+      <PreviewTab>
+        <Box
+          position="relative"
+          className="demo-container"
+          h="200vh" // Visible height
+          overflowY="auto" // Make it vertically scrollable
+          overflowX="hidden"
+          // pr={3}
+        >
+          <Heading
+            position="absolute"
+            left="0px"
+            top="50%"
+            transform="translateY(-50%) rotate(-90deg)"
+            fontSize="9vh"
+            whiteSpace="nowrap"
+            zIndex={50}
+            color="white"
+            textShadow="2px 2px 4px rgba(0,0,0,0.5)"
+          >
+            Gradual Blur
+          </Heading>
+
+          {/* Right side rotated text */}
+          <Heading
+            position="absolute"
+            right="0px"
+            top="50%"
+            transform="translateY(-50%) rotate(90deg)"
+            fontSize="8vh"
+            whiteSpace="nowrap"
+            zIndex={50}
+            color="white"
+            textShadow="2px 2px 4px rgba(0,0,0,0.5)"
+          >
+            Gradual Blur
+          </Heading>
+
+          {/* GradualBlur effect - controlled by position prop */}
+          <GradualBlur
+            {...blurProps}
+            target="page"
+            zIndex={-1}
+            width={blurProps.position === 'left' || blurProps.position === 'right' ? "25rem" : "100%"}
+            height={blurProps.position === 'top' ? "14rem" : blurProps.height}
+          />
+
+          {/* Top text */}
+          <Heading position="absolute" top="10vh" fontSize="20vh" zIndex={50}>
+            Scroll Down
+          </Heading>
+
+          <Box
+            marginY="100px"
+            bg="white"
+            borderRadius="5px"
+            overflow="hidden"
+            boxShadow="0 4px 20px rgba(0,0,0,0.2)"
+            display="flex"
+            flexDirection="column"
+            height="500px"
+          >
+            {/* Profile Image */}
+            <Image
+              padding="0.5"
+              src="/assets/Person2.png"
+              alt="Ansh Dhanani"
+              w="100%"
+              h="440px"
+              objectFit="cover"
+            />
+
+            {/* Name & Link - positioned at bottom */}
+            <Box p={4} >
+              <VStack align="start" spacing={0}>
+                <Text fontWeight="bold" fontSize="lg" color="black" mb={-4}>
+                  Ansh Dhanani
+                </Text>
+                <Link
+                  href="https://github/Ansh-dhanani"
+                  fontSize="13px"
+                  color="gray.500"
+                  isExternal
+                >
+                  @dhanani._ansh
+                </Link>
+              </VStack>
+            </Box>
+          </Box>
+
+          {/* Bottom text */}
+          <Heading position="absolute" bottom="87px" fontSize="20vh" zIndex={50}>
+            Gradual Blur
+          </Heading>
+        </Box>
+
+        {/* Controls */}
+        <Customize>
+          <PreviewSelect
+            title="Position"
+            name="gradual-blur-position"
+            value={blurProps.position}
+            options={[
+              { label: "Top", value: "top" },
+              { label: "Bottom", value: "bottom" },
+              { label: "Left", value: "left" },
+              { label: "Right", value: "right" },
+            ]}
+            onChange={(v) => setBlurProps((p) => ({ ...p, position: v }))}
+          />
+          <PreviewSelect
+            title="Curve"
+            name="gradual-blur-curve"
+            value={blurProps.curve}
+            options={[
+              { label: "Linear", value: "linear" },
+              { label: "Bezier", value: "bezier" },
+              { label: "Ease In Out", value: "ease-in-out" },
+            ]}
+            onChange={(v) => setBlurProps((p) => ({ ...p, curve: v }))}
+          />
+          <PreviewSelect
+            title="Exponential"
+            name="gradual-blur-exponential"
+            value={blurProps.exponential.toString()}
+            options={[
+              { label: "True", value: "true" },
+              { label: "False", value: "false" },
+            ]}
+            onChange={(v) => setBlurProps((p) => ({ ...p, exponential: v === "true" }))}
+          />
+          <PreviewSlider
+            title="Strength"
+            min={1}
+            max={5}
+            step={0.5}
+            value={blurProps.strength}
+            onChange={(v) => setBlurProps((p) => ({ ...p, strength: v }))}
+          />
+          <PreviewSlider
+            title="Div Count"
+            min={1}
+            max={10}
+            step={1}
+            value={blurProps.divCount}
+            onChange={(v) => setBlurProps((p) => ({ ...p, divCount: v }))}
+          />
+          <PreviewSlider
+            title="Opacity"
+            min={0.1}
+            max={1}
+            step={0.1}
+            value={blurProps.opacity}
+            onChange={(v) => setBlurProps((p) => ({ ...p, opacity: v }))}
+          />
+        </Customize>
+
+        <PropTable data={propData} />
+      </PreviewTab>
+
+      <CodeTab>
+        <CodeExample codeObject={gradualBlur} />
+      </CodeTab>
+
+      <CliTab>
+        <CliInstallation {...gradualBlur} />
+      </CliTab>
+    </TabsLayout>
+  );
+};
+
+export default GradualBlurDemo;
diff --git a/src/tailwind/Animations/GradualBlur/GradualBlur.css b/src/tailwind/Animations/GradualBlur/GradualBlur.css
new file mode 100644
index 00000000..663c9126
--- /dev/null
+++ b/src/tailwind/Animations/GradualBlur/GradualBlur.css
@@ -0,0 +1,35 @@
+.gradual-blur-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Ensure backdrop-filter works with proper browser prefixes */
+.gradual-blur-inner > div {
+  -webkit-backdrop-filter: inherit;
+  backdrop-filter: inherit;
+}
+
+/* Ensure proper rendering for the blur effect */
+.gradual-blur {
+  isolation: isolate;
+}
+
+/* Fallback for browsers that don't support backdrop-filter */
+@supports not (backdrop-filter: blur(1px)) {
+  .gradual-blur-inner > div {
+    background: rgba(0, 0, 0, 0.3);
+    opacity: 0.5;
+  }
+}
+
+/* Fix for parent container positioning */
+.gradual-blur-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1000;
+}
diff --git a/src/tailwind/Animations/GradualBlur/GradualBlur.jsx b/src/tailwind/Animations/GradualBlur/GradualBlur.jsx
new file mode 100644
index 00000000..dfa871dd
--- /dev/null
+++ b/src/tailwind/Animations/GradualBlur/GradualBlur.jsx
@@ -0,0 +1,387 @@
+import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
+import * as math from 'mathjs';
+
+// Default configuration - simplified and clean
+const DEFAULT_CONFIG = {
+  position: 'bottom',
+  strength: 2,
+  height: '6rem',
+  divCount: 5,
+  exponential: false,
+  zIndex: 1000,
+  animated: false,
+  duration: '0.3s',
+  easing: 'ease-out',
+  opacity: 1,
+  curve: 'linear',
+  responsive: false,
+  target: 'parent', // NEW: 'parent' | 'page'
+  className: '',
+  style: {}
+};
+
+// Streamlined presets - height-only approach
+const PRESETS = {
+  // Basic positions
+  top: { position: 'top', height: '6rem' },
+  bottom: { position: 'bottom', height: '6rem' },
+  left: { position: 'left', height: '6rem' },
+  right: { position: 'right', height: '6rem' },
+  
+  // Intensity variations
+  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
+  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
+  
+  // Style variations
+  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
+  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
+  
+  // Common use cases
+  header: { position: 'top', height: '8rem', curve: 'ease-out' },
+  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
+  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
+  
+  // Page-level presets
+  'page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
+  'page-footer': { position: 'bottom', height: '10rem', target: 'page', strength: 3 }
+};
+
+// Curve functions - essential ones only
+const CURVE_FUNCTIONS = {
+  linear: (progress) => progress,
+  bezier: (progress) => progress * progress * (3 - 2 * progress),
+  'ease-in': (progress) => progress * progress,
+  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
+  'ease-in-out': (progress) => 
+    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
+};
+
+// Utility functions
+const mergeConfigs = (...configs) => {
+  return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
+};
+
+const getGradientDirection = (position) => {
+  const directions = {
+    top: 'to top',
+    bottom: 'to bottom',
+    left: 'to left',
+    right: 'to right'
+  };
+  return directions[position] || 'to bottom';
+};
+
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// Custom hooks
+const useResponsiveHeight = (responsive, config) => {
+  const [height, setHeight] = useState(config.height);
+  
+  const updateHeight = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newHeight = config.height;
+    
+    if (screenWidth <= 480 && config.mobileHeight) {
+      newHeight = config.mobileHeight;
+    } else if (screenWidth <= 768 && config.tabletHeight) {
+      newHeight = config.tabletHeight;
+    } else if (screenWidth <= 1024 && config.desktopHeight) {
+      newHeight = config.desktopHeight;
+    }
+    
+    setHeight(newHeight);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, [responsive, updateHeight]);
+
+  return responsive ? height : config.height;
+};
+
+const useResponsiveWidth = (responsive, config) => {
+  const [width, setWidth] = useState(config.width);
+  
+  const updateWidth = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newWidth = config.width;
+    
+    if (screenWidth <= 480 && config.mobileWidth) {
+      newWidth = config.mobileWidth;
+    } else if (screenWidth <= 768 && config.tabletWidth) {
+      newWidth = config.tabletWidth;
+    } else if (screenWidth <= 1024 && config.desktopWidth) {
+      newWidth = config.desktopWidth;
+    }
+    
+    setWidth(newWidth);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateWidth();
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, [responsive, updateWidth]);
+
+  return responsive ? width : config.width;
+};
+
+const useIntersectionObserver = (ref, shouldObserve = false) => {
+  const [isVisible, setIsVisible] = useState(!shouldObserve);
+  
+  useEffect(() => {
+    if (!shouldObserve || !ref.current) return;
+    
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref, shouldObserve]);
+  
+  return isVisible;
+};
+
+// Main component
+const GradualBlur = (props) => {
+  const containerRef = useRef(null);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Merge configurations
+  const config = useMemo(() => {
+    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+    return mergeConfigs(DEFAULT_CONFIG, presetConfig, props);
+  }, [props]);
+
+  // Responsive height and width
+  const responsiveHeight = useResponsiveHeight(config.responsive, config);
+  const responsiveWidth = useResponsiveWidth(config.responsive, config);
+
+  // Intersection observer for scroll animations
+  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
+
+  // Memoized blur divs generation
+  const blurDivs = useMemo(() => {
+    const divs = [];
+    const increment = 100 / config.divCount;
+    const currentStrength = isHovered && config.hoverIntensity ? 
+      config.strength * config.hoverIntensity : config.strength;
+    
+    const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+    
+    for (let i = 1; i <= config.divCount; i++) {
+      let progress = i / config.divCount;
+      progress = curveFunc(progress);
+      
+      // Calculate blur value
+      let blurValue;
+      if (config.exponential) {
+        blurValue = math.pow(2, progress * 4) * 0.0625 * currentStrength;
+      } else {
+        blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
+      }
+      
+      // Calculate gradient positions
+      const p1 = math.round((increment * i - increment) * 10) / 10;
+      const p2 = math.round((increment * i) * 10) / 10;
+      const p3 = math.round((increment * i + increment) * 10) / 10;
+      const p4 = math.round((increment * i + increment * 2) * 10) / 10;
+      
+      // Generate gradient
+      let gradient = `transparent ${p1}%, black ${p2}%`;
+      if (p3 <= 100) gradient += `, black ${p3}%`;
+      if (p4 <= 100) gradient += `, transparent ${p4}%`;
+      
+      const direction = getGradientDirection(config.position);
+      
+      const divStyle = {
+        position: 'absolute',
+        inset: '0',
+        maskImage: `linear-gradient(${direction}, ${gradient})`,
+        WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
+        backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        WebkitBackdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        opacity: config.opacity,
+        transition: config.animated && config.animated !== 'scroll' ? 
+          `backdrop-filter ${config.duration} ${config.easing}` : undefined
+      };
+      
+      divs.push(<div key={i} style={divStyle} />);
+    }
+    
+    return divs;
+  }, [config, isHovered]);
+
+  // Container styles with target-aware positioning
+  const containerStyle = useMemo(() => {
+    const isVertical = ['top', 'bottom'].includes(config.position);
+    const isHorizontal = ['left', 'right'].includes(config.position);
+    const isPageTarget = config.target === 'page';
+    
+    const baseStyle = {
+      // Position based on target
+      position: isPageTarget ? 'fixed' : 'absolute',
+      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+      opacity: isVisible ? 1 : 0,
+      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
+      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex, // Higher z-index for page targeting
+      ...config.style
+    };
+
+    // Apply dimensions and positioning
+    if (isVertical) {
+      baseStyle.height = responsiveHeight;
+      baseStyle.width = responsiveWidth || '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.left = 0;
+      baseStyle.right = 0;
+    } else if (isHorizontal) {
+      baseStyle.width = responsiveWidth || responsiveHeight; // Use width prop if provided, otherwise use height value
+      baseStyle.height = '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.top = 0;
+      baseStyle.bottom = 0;
+    }
+
+    return baseStyle;
+  }, [config, responsiveHeight, responsiveWidth, isVisible]);
+
+  // Event handlers
+  const handleMouseEnter = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(true);
+    }
+  }, [config.hoverIntensity]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(false);
+    }
+  }, [config.hoverIntensity]);
+
+  // Animation complete callback
+  useEffect(() => {
+    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
+      const timer = setTimeout(
+        () => config.onAnimationComplete(),
+        parseFloat(config.duration) * 1000
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`gradual-blur ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
+      style={containerStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div 
+        className="gradual-blur-inner" 
+        style={{ 
+          position: 'relative', 
+          width: '100%', 
+          height: '100%'
+        }}
+      >
+        {blurDivs}
+      </div>
+    </div>
+  );
+};
+
+// Factory function for creating instances with different targets
+export const createPageBlur = (props = {}) => {
+  return <GradualBlur {...props} target="page" />;
+};
+
+export const createParentBlur = (props = {}) => {
+  return <GradualBlur {...props} target="parent" />;
+};
+
+// Export utilities
+export { PRESETS, CURVE_FUNCTIONS };
+
+export default React.memo(GradualBlur);
+
+// CSS injection function
+const injectStyles = () => {
+  if (typeof document === 'undefined') return;
+  
+  const styleId = 'gradual-blur-styles';
+  if (document.getElementById(styleId)) return;
+  
+  const styleElement = document.createElement('style');
+  styleElement.id = styleId;
+  styleElement.textContent = `
+    .gradual-blur {
+      pointer-events: none;
+    }
+
+    .gradual-blur-page {
+      /* Page-level blur styles */
+    }
+
+    .gradual-blur-parent {
+      /* Parent-level blur styles */
+    }
+
+    .gradual-blur-inner {
+      pointer-events: none;
+    }
+
+    /* Hover support */
+    .gradual-blur:hover .gradual-blur-inner {
+      /* Hover effects can be added here */
+    }
+
+    /* Animation support */
+    .gradual-blur {
+      transition: opacity 0.3s ease-out;
+    }
+
+    /* Responsive utilities */
+    @media (max-width: 480px) {
+      .gradual-blur-responsive {
+        /* Mobile specific styles */
+      }
+    }
+
+    @media (max-width: 768px) {
+      .gradual-blur-responsive {
+        /* Tablet specific styles */
+      }
+    }
+  `;
+  
+  document.head.appendChild(styleElement);
+};
+
+// Inject styles on component mount
+if (typeof document !== 'undefined') {
+  injectStyles();
+}
diff --git a/src/ts-default/Animations/GradualBlur/GradualBlur.css b/src/ts-default/Animations/GradualBlur/GradualBlur.css
new file mode 100644
index 00000000..d57b0bdc
--- /dev/null
+++ b/src/ts-default/Animations/GradualBlur/GradualBlur.css
@@ -0,0 +1,20 @@
+/* GradualBlur.css */
+
+/* Container */
+.gradual-blur {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  pointer-events: none; /* so it doesn’t block interactions */
+}
+
+/* Common gradient layers */
+.gradual-blur > div {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transition: opacity 0.3s ease;
+  will-change: opacity;
+}
diff --git a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
new file mode 100644
index 00000000..7634c973
--- /dev/null
+++ b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
@@ -0,0 +1,435 @@
+import React, {
+  CSSProperties,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  PropsWithChildren,
+} from "react";
+import * as math from "mathjs";
+import "./Gradualblur.css";
+
+type GradualBlurProps = {
+  // Basic options
+  position?: "top" | "bottom" | "left" | "right";
+  strength?: number;
+  height?: string;
+  width?: string;
+  divCount?: number;
+  exponential?: boolean;
+  zIndex?: number;
+
+  // Animation options
+  animated?: boolean | "scroll";
+  duration?: string;
+  easing?: string;
+
+  // Styling options
+  opacity?: number;
+  curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "ease-in-out";
+
+  // Responsive options
+  responsive?: boolean;
+  mobileHeight?: string;
+  tabletHeight?: string;
+  desktopHeight?: string;
+  mobileWidth?: string;
+  tabletWidth?: string;
+  desktopWidth?: string;
+
+  // Advanced options
+  preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
+  gpuOptimized?: boolean;
+  hoverIntensity?: number;
+  target?: "parent" | "page";
+
+  // Event handlers
+  onAnimationComplete?: () => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+// Default configuration
+const DEFAULT_CONFIG: Partial<GradualBlurProps> = {
+  position: 'bottom',
+  strength: 2,
+  height: '6rem',
+  divCount: 5,
+  exponential: false,
+  zIndex: 1000,
+  animated: false,
+  duration: '0.3s',
+  easing: 'ease-out',
+  opacity: 1,
+  curve: 'linear',
+  responsive: false,
+  target: 'parent',
+  className: '',
+  style: {}
+};
+
+// Streamlined presets
+const PRESETS: Record<string, Partial<GradualBlurProps>> = {
+  // Basic positions
+  top: { position: 'top', height: '6rem' },
+  bottom: { position: 'bottom', height: '6rem' },
+  left: { position: 'left', height: '6rem' },
+  right: { position: 'right', height: '6rem' },
+  
+  // Intensity variations
+  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
+  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
+  
+  // Style variations
+  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
+  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
+  
+  // Common use cases
+  header: { position: 'top', height: '8rem', curve: 'ease-out' },
+  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
+  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
+  
+  // Page-level presets
+  'page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
+  'page-footer': { position: 'bottom', height: '10rem', target: 'page', strength: 3 }
+};
+
+// Curve functions
+const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
+  linear: (progress) => progress,
+  bezier: (progress) => progress * progress * (3 - 2 * progress),
+  'ease-in': (progress) => progress * progress,
+  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
+  'ease-in-out': (progress) => 
+    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
+};
+
+// Utility functions
+const mergeConfigs = (...configs: Partial<GradualBlurProps>[]): Partial<GradualBlurProps> => {
+  return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
+};
+
+const getGradientDirection = (position: string): string => {
+  const directions: Record<string, string> = {
+    top: 'to top',
+    bottom: 'to bottom',
+    left: 'to left',
+    right: 'to right'
+  };
+  return directions[position] || 'to bottom';
+};
+
+const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void => {
+  let timeout: NodeJS.Timeout;
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// Custom hooks
+const useResponsiveHeight = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
+  const [height, setHeight] = useState(config.height);
+  
+  const updateHeight = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newHeight = config.height;
+    
+    if (screenWidth <= 480 && config.mobileHeight) {
+      newHeight = config.mobileHeight;
+    } else if (screenWidth <= 768 && config.tabletHeight) {
+      newHeight = config.tabletHeight;
+    } else if (screenWidth <= 1024 && config.desktopHeight) {
+      newHeight = config.desktopHeight;
+    }
+    
+    setHeight(newHeight);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, [responsive, updateHeight]);
+
+  return responsive ? height : config.height;
+};
+
+const useResponsiveWidth = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
+  const [width, setWidth] = useState(config.width);
+  
+  const updateWidth = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newWidth = config.width;
+    
+    if (screenWidth <= 480 && config.mobileWidth) {
+      newWidth = config.mobileWidth;
+    } else if (screenWidth <= 768 && config.tabletWidth) {
+      newWidth = config.tabletWidth;
+    } else if (screenWidth <= 1024 && config.desktopWidth) {
+      newWidth = config.desktopWidth;
+    }
+    
+    setWidth(newWidth);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateWidth();
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, [responsive, updateWidth]);
+
+  return responsive ? width : config.width;
+};
+
+const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObserve: boolean = false) => {
+  const [isVisible, setIsVisible] = useState(!shouldObserve);
+  
+  useEffect(() => {
+    if (!shouldObserve || !ref.current) return;
+    
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref, shouldObserve]);
+  
+  return isVisible;
+};
+
+const GradualBlur: React.FC<PropsWithChildren<GradualBlurProps>> = (props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Merge configurations
+  const config = useMemo(() => {
+    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+    return mergeConfigs(DEFAULT_CONFIG, presetConfig, props) as Required<GradualBlurProps>;
+  }, [props]);
+
+  // Responsive height and width
+  const responsiveHeight = useResponsiveHeight(config.responsive, config);
+  const responsiveWidth = useResponsiveWidth(config.responsive, config);
+
+  // Intersection observer for scroll animations
+  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
+
+  // Memoized blur divs generation
+  const blurDivs = useMemo(() => {
+    const divs: React.ReactNode[] = [];
+    const increment = 100 / config.divCount;
+    const currentStrength = isHovered && config.hoverIntensity ? 
+      config.strength * config.hoverIntensity : config.strength;
+    
+    const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+    
+    for (let i = 1; i <= config.divCount; i++) {
+      let progress = i / config.divCount;
+      progress = curveFunc(progress);
+      
+      // Calculate blur value
+      let blurValue: number;
+      if (config.exponential) {
+        blurValue = Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
+      } else {
+        blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
+      }
+      
+      // Calculate gradient positions
+      const p1 = math.round((increment * i - increment) * 10) / 10;
+      const p2 = math.round((increment * i) * 10) / 10;
+      const p3 = math.round((increment * i + increment) * 10) / 10;
+      const p4 = math.round((increment * i + increment * 2) * 10) / 10;
+      
+      // Generate gradient
+      let gradient = `transparent ${p1}%, black ${p2}%`;
+      if (p3 <= 100) gradient += `, black ${p3}%`;
+      if (p4 <= 100) gradient += `, transparent ${p4}%`;
+      
+      const direction = getGradientDirection(config.position);
+      
+      const divStyle: CSSProperties = {
+        position: 'absolute',
+        inset: '0',
+        maskImage: `linear-gradient(${direction}, ${gradient})`,
+        WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
+        backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        WebkitBackdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        opacity: config.opacity,
+        transition: config.animated && config.animated !== 'scroll' ? 
+          `backdrop-filter ${config.duration} ${config.easing}` : undefined
+      };
+      
+      divs.push(<div key={i} style={divStyle} />);
+    }
+    
+    return divs;
+  }, [config, isHovered]);
+
+  // Container styles with target-aware positioning
+  const containerStyle: CSSProperties = useMemo(() => {
+    const isVertical = ['top', 'bottom'].includes(config.position);
+    const isHorizontal = ['left', 'right'].includes(config.position);
+    const isPageTarget = config.target === 'page';
+    
+    const baseStyle: CSSProperties = {
+      // Position based on target
+      position: isPageTarget ? 'fixed' : 'absolute',
+      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+      opacity: isVisible ? 1 : 0,
+      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
+      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
+      ...config.style
+    };
+
+    // Apply dimensions and positioning
+    if (isVertical) {
+      baseStyle.height = responsiveHeight;
+      baseStyle.width = responsiveWidth || '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.left = 0;
+      baseStyle.right = 0;
+    } else if (isHorizontal) {
+      baseStyle.width = responsiveWidth || responsiveHeight;
+      baseStyle.height = '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.top = 0;
+      baseStyle.bottom = 0;
+    }
+
+    return baseStyle;
+  }, [config, responsiveHeight, responsiveWidth, isVisible]);
+
+  // Event handlers
+  const handleMouseEnter = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(true);
+    }
+  }, [config.hoverIntensity]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(false);
+    }
+  }, [config.hoverIntensity]);
+
+  // Animation complete callback
+  useEffect(() => {
+    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
+      const timer = setTimeout(
+        () => config.onAnimationComplete!(),
+        parseFloat(config.duration) * 1000
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`gradual-blur ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
+      style={containerStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div 
+        className="gradual-blur-inner" 
+        style={{ 
+          position: 'relative', 
+          width: '100%', 
+          height: '100%'
+        }}
+      >
+        {blurDivs}
+      </div>
+    </div>
+  );
+};
+
+// Factory function for creating instances with different targets
+export const createPageBlur = (props: Partial<GradualBlurProps> = {}) => {
+  return <GradualBlur {...props} target="page" />;
+};
+
+export const createParentBlur = (props: Partial<GradualBlurProps> = {}) => {
+  return <GradualBlur {...props} target="parent" />;
+};
+
+// Export utilities
+export { PRESETS, CURVE_FUNCTIONS };
+
+export default React.memo(GradualBlur);
+
+// CSS injection function
+const injectStyles = () => {
+  if (typeof document === 'undefined') return;
+  
+  const styleId = 'gradual-blur-styles';
+  if (document.getElementById(styleId)) return;
+  
+  const styleElement = document.createElement('style');
+  styleElement.id = styleId;
+  styleElement.textContent = `
+    .gradual-blur {
+      pointer-events: none;
+    }
+
+    .gradual-blur-page {
+      /* Page-level blur styles */
+    }
+
+    .gradual-blur-parent {
+      /* Parent-level blur styles */
+    }
+
+    .gradual-blur-inner {
+      pointer-events: none;
+    }
+
+    /* Hover support */
+    .gradual-blur:hover .gradual-blur-inner {
+      /* Hover effects can be added here */
+    }
+
+    /* Animation support */
+    .gradual-blur {
+      transition: opacity 0.3s ease-out;
+    }
+
+    /* Responsive utilities */
+    @media (max-width: 480px) {
+      .gradual-blur-responsive {
+        /* Mobile specific styles */
+      }
+    }
+
+    @media (max-width: 768px) {
+      .gradual-blur-responsive {
+        /* Tablet specific styles */
+      }
+    }
+  `;
+  
+  document.head.appendChild(styleElement);
+};
+
+// Inject styles on component mount
+if (typeof document !== 'undefined') {
+  injectStyles();
+}
diff --git a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
new file mode 100644
index 00000000..66b52512
--- /dev/null
+++ b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
@@ -0,0 +1,429 @@
+import React, {
+  CSSProperties,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  PropsWithChildren,
+} from "react";
+import * as math from "mathjs";
+
+type GradualBlurProps = PropsWithChildren<{
+  // Basic options
+  position?: "top" | "bottom" | "left" | "right";
+  strength?: number;
+  height?: string;
+  width?: string;
+  divCount?: number;
+  exponential?: boolean;
+  zIndex?: number;
+
+  // Animation options
+  animated?: boolean | "scroll";
+  duration?: string;
+  easing?: string;
+
+  // Styling options
+  opacity?: number;
+  curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "ease-in-out";
+
+  // Responsive options
+  responsive?: boolean;
+  mobileHeight?: string;
+  tabletHeight?: string;
+  desktopHeight?: string;
+  mobileWidth?: string;
+  tabletWidth?: string;
+  desktopWidth?: string;
+
+  // Advanced options
+  preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
+  gpuOptimized?: boolean;
+  hoverIntensity?: number;
+  target?: "parent" | "page";
+
+  // Event handlers
+  onAnimationComplete?: () => void;
+  className?: string;
+  style?: CSSProperties;
+}>;
+
+// Default configuration
+const DEFAULT_CONFIG: Partial<GradualBlurProps> = {
+  position: 'bottom',
+  strength: 2,
+  height: '6rem',
+  divCount: 5,
+  exponential: false,
+  zIndex: 40,
+  animated: false,
+  duration: '0.3s',
+  easing: 'ease-out',
+  opacity: 1,
+  curve: 'linear',
+  responsive: false,
+  target: 'parent',
+  className: '',
+  style: {}
+};
+
+// Streamlined presets
+const PRESETS: Record<string, Partial<GradualBlurProps>> = {
+  // Basic positions
+  top: { position: 'top', height: '6rem' },
+  bottom: { position: 'bottom', height: '6rem' },
+  left: { position: 'left', height: '6rem' },
+  right: { position: 'right', height: '6rem' },
+  
+  // Intensity variations
+  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
+  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
+  
+  // Style variations
+  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
+  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
+  
+  // Common use cases
+  header: { position: 'top', height: '8rem', curve: 'ease-out' },
+  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
+  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
+  
+  // Page-level presets
+  'page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
+  'page-footer': { position: 'bottom', height: '10rem', target: 'page', strength: 3 }
+};
+
+// Curve functions
+const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
+  linear: (progress) => progress,
+  bezier: (progress) => progress * progress * (3 - 2 * progress),
+  'ease-in': (progress) => progress * progress,
+  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
+  'ease-in-out': (progress) => 
+    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
+};
+
+// Utility functions
+const mergeConfigs = (...configs: Partial<GradualBlurProps>[]): Partial<GradualBlurProps> => {
+  return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
+};
+
+const getGradientDirection = (position: string): string => {
+  const directions: Record<string, string> = {
+    top: 'to top',
+    bottom: 'to bottom',
+    left: 'to left',
+    right: 'to right'
+  };
+  return directions[position] || 'to bottom';
+};
+
+const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void => {
+  let timeout: NodeJS.Timeout;
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// Custom hooks
+const useResponsiveHeight = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
+  const [height, setHeight] = useState(config.height);
+  
+  const updateHeight = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newHeight = config.height;
+    
+    if (screenWidth <= 480 && config.mobileHeight) {
+      newHeight = config.mobileHeight;
+    } else if (screenWidth <= 768 && config.tabletHeight) {
+      newHeight = config.tabletHeight;
+    } else if (screenWidth <= 1024 && config.desktopHeight) {
+      newHeight = config.desktopHeight;
+    }
+    
+    setHeight(newHeight);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, [responsive, updateHeight]);
+
+  return responsive ? height : config.height;
+};
+
+const useResponsiveWidth = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
+  const [width, setWidth] = useState(config.width);
+  
+  const updateWidth = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newWidth = config.width;
+    
+    if (screenWidth <= 480 && config.mobileWidth) {
+      newWidth = config.mobileWidth;
+    } else if (screenWidth <= 768 && config.tabletWidth) {
+      newWidth = config.tabletWidth;
+    } else if (screenWidth <= 1024 && config.desktopWidth) {
+      newWidth = config.desktopWidth;
+    }
+    
+    setWidth(newWidth);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateWidth();
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, [responsive, updateWidth]);
+
+  return responsive ? width : config.width;
+};
+
+const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObserve: boolean = false) => {
+  const [isVisible, setIsVisible] = useState(!shouldObserve);
+  
+  useEffect(() => {
+    if (!shouldObserve || !ref.current) return;
+    
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref, shouldObserve]);
+  
+  return isVisible;
+};
+
+const GradualBlur: React.FC<GradualBlurProps> = (props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Merge configurations
+  const config = useMemo(() => {
+    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+    return mergeConfigs(DEFAULT_CONFIG, presetConfig, props) as Required<GradualBlurProps>;
+  }, [props]);
+
+  // Responsive height and width
+  const responsiveHeight = useResponsiveHeight(config.responsive, config);
+  const responsiveWidth = useResponsiveWidth(config.responsive, config);
+
+  // Intersection observer for scroll animations
+  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
+
+  // Memoized blur divs generation
+  const blurDivs = useMemo(() => {
+    const divs: React.ReactNode[] = [];
+    const increment = 100 / config.divCount;
+    const currentStrength = isHovered && config.hoverIntensity ? 
+      config.strength * config.hoverIntensity : config.strength;
+    
+    const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+    
+    for (let i = 1; i <= config.divCount; i++) {
+      let progress = i / config.divCount;
+      progress = curveFunc(progress);
+      
+      // Calculate blur value
+      let blurValue: number;
+      if (config.exponential) {
+        blurValue = Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
+      } else {
+        blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
+      }
+      
+      // Calculate gradient positions
+      const p1 = math.round((increment * i - increment) * 10) / 10;
+      const p2 = math.round((increment * i) * 10) / 10;
+      const p3 = math.round((increment * i + increment) * 10) / 10;
+      const p4 = math.round((increment * i + increment * 2) * 10) / 10;
+      
+      // Generate gradient
+      let gradient = `transparent ${p1}%, black ${p2}%`;
+      if (p3 <= 100) gradient += `, black ${p3}%`;
+      if (p4 <= 100) gradient += `, transparent ${p4}%`;
+      
+      const direction = getGradientDirection(config.position);
+      
+      const divStyle: CSSProperties = {
+        maskImage: `linear-gradient(${direction}, ${gradient})`,
+        WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
+        backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        opacity: config.opacity,
+        transition: config.animated && config.animated !== 'scroll' ? 
+          `backdrop-filter ${config.duration} ${config.easing}` : undefined
+      };
+      
+      divs.push(
+        <div
+          key={i}
+          className="absolute inset-0"
+          style={divStyle}
+        />
+      );
+    }
+    
+    return divs;
+  }, [config, isHovered]);
+
+  // Container styles with target-aware positioning
+  const containerStyle: CSSProperties = useMemo(() => {
+    const isVertical = ['top', 'bottom'].includes(config.position);
+    const isHorizontal = ['left', 'right'].includes(config.position);
+    const isPageTarget = config.target === 'page';
+    
+    const baseStyle: CSSProperties = {
+      // Position based on target
+      position: isPageTarget ? 'fixed' : 'absolute',
+      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+      opacity: isVisible ? 1 : 0,
+      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
+      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
+      ...config.style
+    };
+
+    // Apply dimensions and positioning
+    if (isVertical) {
+      baseStyle.height = responsiveHeight;
+      baseStyle.width = responsiveWidth || '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.left = 0;
+      baseStyle.right = 0;
+    } else if (isHorizontal) {
+      baseStyle.width = responsiveWidth || responsiveHeight;
+      baseStyle.height = '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.top = 0;
+      baseStyle.bottom = 0;
+    }
+
+    return baseStyle;
+  }, [config, responsiveHeight, responsiveWidth, isVisible]);
+
+  // Event handlers
+  const handleMouseEnter = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(true);
+    }
+  }, [config.hoverIntensity]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(false);
+    }
+  }, [config.hoverIntensity]);
+
+  // Animation complete callback
+  useEffect(() => {
+    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
+      const timer = setTimeout(
+        () => config.onAnimationComplete!(),
+        parseFloat(config.duration) * 1000
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`gradual-blur relative isolate ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
+      style={containerStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className="relative w-full h-full">{blurDivs}</div>
+      {props.children && <div className="relative">{props.children}</div>}
+    </div>
+  );
+};
+
+// Factory function for creating instances with different targets
+export const createPageBlur = (props: Partial<GradualBlurProps> = {}) => {
+  return <GradualBlur {...props} target="page" />;
+};
+
+export const createParentBlur = (props: Partial<GradualBlurProps> = {}) => {
+  return <GradualBlur {...props} target="parent" />;
+};
+
+// Export utilities
+export { PRESETS, CURVE_FUNCTIONS };
+
+export default React.memo(GradualBlur);
+
+// CSS injection function
+const injectStyles = () => {
+  if (typeof document === 'undefined') return;
+  
+  const styleId = 'gradual-blur-styles';
+  if (document.getElementById(styleId)) return;
+  
+  const styleElement = document.createElement('style');
+  styleElement.id = styleId;
+  styleElement.textContent = `
+    .gradual-blur {
+      pointer-events: none;
+    }
+
+    .gradual-blur-page {
+      /* Page-level blur styles */
+    }
+
+    .gradual-blur-parent {
+      /* Parent-level blur styles */
+    }
+
+    .gradual-blur-inner {
+      pointer-events: none;
+    }
+
+    /* Hover support */
+    .gradual-blur:hover .gradual-blur-inner {
+      /* Hover effects can be added here */
+    }
+
+    /* Animation support */
+    .gradual-blur {
+      transition: opacity 0.3s ease-out;
+    }
+
+    /* Responsive utilities */
+    @media (max-width: 480px) {
+      .gradual-blur-responsive {
+        /* Mobile specific styles */
+      }
+    }
+
+    @media (max-width: 768px) {
+      .gradual-blur-responsive {
+        /* Tablet specific styles */
+      }
+    }
+  `;
+  
+  document.head.appendChild(styleElement);
+};
+
+// Inject styles on component mount
+if (typeof document !== 'undefined') {
+  injectStyles();
+}

From 2805d9f608d74368d2616c85bea00359ed8eceb9 Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 17:18:22 +0530
Subject: [PATCH 02/12] all set

---
 .../code/Animations/gradualblurCode.js        |  16 +-
 src/demo/Animations/GradualBlurDemo.jsx       |   2 +-
 .../GradualBlur/Gradual\346\236\201ur.tsx"    | 429 ++++++++++++++++++
 3 files changed, 439 insertions(+), 8 deletions(-)
 create mode 100644 "src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"

diff --git a/src/constants/code/Animations/gradualblurCode.js b/src/constants/code/Animations/gradualblurCode.js
index ed2b022d..2702c548 100644
--- a/src/constants/code/Animations/gradualblurCode.js
+++ b/src/constants/code/Animations/gradualblurCode.js
@@ -5,14 +5,16 @@ import css from '@content/Animations/GradualBlur/GradualBlur.css?raw';
 import tailwind from '@tailwind/Animations/GradualBlur/GradualBlur.jsx?raw';
 import tsCode from '@ts-default/Animations/GradualBlur/GradualBlur.tsx?raw';
 import tsTailwind from '@ts-tailwind/Animations/GradualBlur/GradualBlur.tsx?raw';
+import Installation from '../../../docs/Installation';
 
 export const gradualBlur = {
-  ...generateCliCommands("Animations/GradualBlur"),
-  installation: `npm install gradualblur`,
-  usage: `
-// created by ANSH DHANANI
+  ...(generateCliCommands('Animations/GradualBlur')),
+  Installation:`npm install gradualblur`
+  ,usage: `
+
 // Component inspired by gradual blur overlay effects
-  
+
+// if imported seperatly then  
 import GradualBlur from 'gradualblur'
 
 <GradualBlur
@@ -33,5 +35,5 @@ import GradualBlur from 'gradualblur'
   css,
   tailwind,
   tsCode,
-  tsTailwind,
-};
+  tsTailwind
+}
diff --git a/src/demo/Animations/GradualBlurDemo.jsx b/src/demo/Animations/GradualBlurDemo.jsx
index a5f6b6de..a557a76c 100644
--- a/src/demo/Animations/GradualBlurDemo.jsx
+++ b/src/demo/Animations/GradualBlurDemo.jsx
@@ -237,7 +237,7 @@ const GradualBlurDemo = () => {
                   Ansh Dhanani
                 </Text>
                 <Link
-                  href="https://github/Ansh-dhanani"
+                  href="https://github.com/Ansh-dhanani"
                   fontSize="13px"
                   color="gray.500"
                   isExternal
diff --git "a/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx" "b/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
new file mode 100644
index 00000000..d14ab17b
--- /dev/null
+++ "b/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
@@ -0,0 +1,429 @@
+import React, {
+  CSSProperties,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  PropsWithChildren,
+} from "react";
+import * as math from "mathjs";
+
+type GradualBlurProps = PropsWithChildren<{
+  // Basic options
+  position?: "top" | "bottom" | "left" | "right";
+  strength?: number;
+  height?: string;
+  width?: string;
+  divCount?: number;
+  exponential?: boolean;
+  zIndex?: number;
+
+  // Animation options
+  animated?: boolean | "scroll";
+  duration?: string;
+  easing?: string;
+
+  // Styling options
+  opacity?: number;
+  curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "极ease-in-out";
+
+  // Responsive options
+  responsive?: boolean;
+  mobileHeight?: string;
+  tabletHeight?: string;
+  desktopHeight?: string;
+  mobileWidth?: string;
+  tabletWidth?: string;
+  desktopWidth?: string;
+
+  // Advanced options
+  preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
+  gpuOptimized?: boolean;
+  hoverIntensity?: number;
+  target?: "parent" | "page";
+
+  // Event handlers
+  onAnimationComplete?: () => void;
+  className?: string;
+  style?: CSSProperties;
+}>;
+
+// Default configuration
+const DEFAULT_CONFIG: Partial<GradualBlurProps> = {
+  position: 'bottom',
+  strength: 2,
+  height: '6rem',
+  divCount: 5,
+  exponential: false,
+  zIndex: 40,
+  animated: false,
+  duration: '0.3s',
+  easing: 'ease-out',
+  opacity: 1,
+  curve: 'linear',
+  responsive: false,
+  target: 'parent',
+  className: '',
+  style: {}
+};
+
+// Streamlined presets
+const PRESETS: Record<string, Partial<GradualBlurProps>> = {
+  // Basic positions
+  top: { position: 'top', height: '6rem' },
+  bottom: { position: 'bottom', height: '6rem' },
+  left: { position: 'left', height: '6rem' },
+  right: { position: 'right', height: '6rem' },
+  
+  // Intensity variations
+  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
+  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
+  
+  // Style variations
+  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
+  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
+  
+  // Common use cases
+  header: { position: 'top', height: '8rem', curve: 'ease-out' },
+  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
+  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
+  
+  // Page-level presets
+  '极page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
+  'page-footer': { position: 'bottom', height: '10rem', target: '极page', strength: 3 }
+};
+
+// Curve functions
+const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
+  linear: (progress) => progress,
+  bezier: (progress) => progress * progress * (3 - 2 * progress),
+  'ease-in': (progress) => progress * progress,
+  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
+  'ease-in-out': (progress) => 
+    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
+};
+
+// Utility functions
+const mergeConfigs = (...configs: Partial<GradualBlurProps>[]): Partial<GradualBlurProps> => {
+  return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
+};
+
+const getGradientDirection = (position: string): string => {
+  const directions: Record<string, string> = {
+    top: 'to top',
+    bottom: 'to bottom',
+    left: 'to left',
+    right: 'to right'
+  };
+  return directions[position] || 'to bottom';
+};
+
+const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void => {
+  let timeout: NodeJS.Timeout;
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// Custom hooks
+const useResponsiveHeight = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
+  const [height, setHeight] = useState(config.height);
+  
+  const updateHeight = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newHeight = config.height;
+    
+    if (screenWidth <= 480 && config.mobileHeight) {
+      newHeight = config.mobileHeight;
+    } else if (screenWidth <= 768 && config.tabletHeight) {
+      newHeight = config.tabletHeight;
+    } else if (screenWidth <= 1024 && config.desktopHeight) {
+      newHeight = config.desktopHeight;
+    }
+    
+    setHeight(newHeight);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, [responsive, updateHeight]);
+
+  return responsive ? height : config.height;
+};
+
+const useResponsiveWidth = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
+  const [width, setWidth] = useState(config.width);
+  
+  const updateWidth = useCallback(debounce(() => {
+    if (!responsive极) return;
+    
+    const screenWidth = window.innerWidth;
+    let newWidth = config.width;
+    
+    if (screenWidth <= 480 && config.mobileWidth) {
+      newWidth = config.mobileWidth;
+    } else if (screenWidth <= 768 && config.tabletWidth) {
+      newWidth = config.tabletWidth;
+    } else if (screenWidth <= 1024 && config.desktopWidth) {
+      newWidth = config.desktopWidth;
+    }
+    
+    setWidth(newWidth);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateWidth();
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, [responsive, updateWidth]);
+
+  return responsive ? width : config.width;
+};
+
+const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObserve: boolean = false) => {
+  const [isVisible, setIsVisible] = useState(!shouldObserve);
+  
+  useEffect(() => {
+    if (!shouldObserve || !ref.current) return;
+    
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref, shouldObserve]);
+  
+  return isVisible;
+};
+
+const GradualBlur: React.FC<GradualBlurProps> = (props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Merge configurations
+  const config = useMemo(() => {
+    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+    return mergeConfigs(DEFAULT_CONFIG, presetConfig, props) as Required<GradualBlurProps>;
+  }, [props]);
+
+  // Responsive height and width
+  const responsiveHeight = useResponsiveHeight(config.responsive, config);
+  const responsiveWidth = useResponsiveWidth(config.responsive, config);
+
+  // Intersection observer for scroll animations
+  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
+
+  // Memoized blur divs generation
+  const blurDivs = useMemo(() => {
+    const divs: React.ReactNode[] = [];
+    const increment = 100 / config.divCount;
+    const currentStrength = isHovered && config.hoverIntensity ? 
+      config.strength * config.hoverIntensity : config.strength;
+    
+    const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+    
+    for (let i = 1; i <= config.divCount; i++) {
+      let progress = i / config.divCount;
+      progress = curveFunc(progress);
+      
+      // Calculate blur value
+      let blurValue: number;
+      if (config.exponential) {
+        blurValue = Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
+      } else {
+        blurValue = 0.0625 * (progress * config.divCount + 极1) * currentStrength;
+      }
+      
+      // Calculate gradient positions
+      const p极1 = math.round((increment * i - increment) * 10) / 10;
+      const p2 = math.round((increment * i) * 10) / 10;
+      const p3 = math.round((increment * i + increment) * 10) / 10;
+      const p4 = math.round((increment * i + increment * 2) * 10) / 10;
+      
+      // Generate gradient
+      let gradient = `transparent ${p1}%, black ${p2}%`;
+      if (p3 <= 100) gradient += `, black ${p3}%`;
+      if (p4 <= 100) gradient += `, transparent ${p4}%`;
+      
+      const direction = getGradientDirection(config.position);
+      
+      const divStyle: CSSProperties = {
+        maskImage: `linear-gradient(${direction}, ${gradient})`,
+        WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
+        backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        opacity: config.opacity,
+        transition: config.animated && config.animated !== 'scroll' ? 
+          `backdrop-filter ${config.duration} ${config.easing}` : undefined
+      };
+      
+      divs.push(
+        <div
+          key={i}
+          className="absolute inset-0"
+          style={divStyle}
+        />
+      );
+    }
+    
+    return divs;
+  }, [config, isHovered]);
+
+  // Container styles with target-aware positioning
+  const containerStyle: CSSProperties = useMemo(() => {
+    const isVertical = ['top', 'bottom'].includes(config.position);
+    const isHorizontal = ['left', 'right'].includes(config.position);
+    const isPageTarget = config.target === 'page';
+    
+    const baseStyle: CSSProperties = {
+      // Position based on target
+      position: isPageTarget ? 'fixed' : 'absolute',
+      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+      opacity: isVisible ? 1 : 0,
+      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
+      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
+      ...config.style
+    };
+
+    // Apply dimensions and positioning
+    if (isVertical) {
+      baseStyle.height = responsiveHeight;
+      baseStyle.width = responsiveWidth || '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.left = 0;
+      baseStyle.right = 0;
+    } else if (isHorizontal) {
+      baseStyle.width = responsiveWidth || responsiveHeight;
+      baseStyle.height = '100%';
+      baseStyle[极config.position] = 0;
+      baseStyle.top = 0;
+      baseStyle.bottom = 0;
+    }
+
+    return baseStyle;
+  }, [config, responsiveHeight, responsiveWidth, isVisible]);
+
+  // Event handlers
+  const handleMouseEnter = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(true);
+    }
+  }, [config.hoverIntensity]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(false);
+    }
+  }, [config.hoverIntensity]);
+
+  // Animation complete callback
+  useEffect(() => {
+    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
+      const timer = setTimeout(
+        () => config.onAnimationComplete!(),
+        parseFloat(config.duration) * 1000
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`gradual-blur relative isolate ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
+      style={containerStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave极={handleMouseLeave}
+    >
+      <div className="relative w-full h-full">{blurDivs}</div>
+      {props.children && <div className="relative">{props.children}</div>}
+    </div>
+  );
+};
+
+// Factory function for creating instances with different targets
+export const createPageBlur = (props: Partial<GradualBlurProps> = {}) => {
+  return <GradualBlur {...props} target="page" />;
+};
+
+export const createParentBlur = (props: Partial<GradualBlurProps> = {}) => {
+  return <GradualBlur {...props} target="parent" />;
+};
+
+// Export utilities
+export { PRESETS, CURVE_FUNCTIONS };
+
+export default React.memo(GradualBlur);
+
+// CSS injection function
+const injectStyles = () => {
+  if (typeof document === 'undefined') return;
+  
+  const styleId = 'gradual-blur-styles';
+  if (document.getElementById(styleId)) return;
+  
+  const styleElement = document.createElement('style');
+  styleElement.id = styleId;
+  styleElement.textContent = `
+    .gradual-blur {
+      pointer-events: none;
+    }
+
+    .gradual-blur-page {
+      /* Page-level blur styles */
+    }
+
+    .gradual-blur-parent {
+      /* Parent-level blur styles */
+    }
+
+    .gradual-blur-inner {
+      pointer-events: none;
+    }
+
+    /* Hover support */
+    .gradual-blur:hover .gradual-blur-inner {
+      /* Hover effects can be added here */
+    }
+
+    /* Animation support */
+    .gradual-blur {
+      transition: opacity 0.3s ease-out;
+    }
+
+    /* Responsive utilities */
+    @media (max-width: 480px) {
+      .gradual-blur-responsive {
+        /* Mobile specific styles */
+      }
+    }
+
+    @media (max-width: 768px) {
+      .gradual-blur-responsive {
+        /* Tablet specific styles */
+      }
+    }
+  `;
+  
+  document.head.appendChild(styleElement);
+};
+
+// Inject styles on component mount
+if (typeof document !== 'undefined') {
+  injectStyles();
+}

From d95377852ce58dbcff47310e912e3c678b11990c Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 17:20:48 +0530
Subject: [PATCH 03/12] all set final

---
 src/demo/Animations/GradualBlurDemo.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/demo/Animations/GradualBlurDemo.jsx b/src/demo/Animations/GradualBlurDemo.jsx
index a557a76c..ab9d19ce 100644
--- a/src/demo/Animations/GradualBlurDemo.jsx
+++ b/src/demo/Animations/GradualBlurDemo.jsx
@@ -32,7 +32,7 @@ const GradualBlurDemo = () => {
   const propData = [
     {
       name: "position",
-      type: `"top" | "bottom" | "left" | "right"`,
+      type: `"top" | "bottom | left | right"`,
       default: `"bottom"`,
       description: "Position of the blur overlay.",
     },
@@ -262,9 +262,7 @@ const GradualBlurDemo = () => {
             value={blurProps.position}
             options={[
               { label: "Top", value: "top" },
-              { label: "Bottom", value: "bottom" },
-              { label: "Left", value: "left" },
-              { label: "Right", value: "right" },
+              { label: "Bottom", value: "bottom" }
             ]}
             onChange={(v) => setBlurProps((p) => ({ ...p, position: v }))}
           />

From e6057d3220b612b8752be31a54ea24ad817a053f Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 17:24:08 +0530
Subject: [PATCH 04/12] all set

---
 .../GradualBlur/Gradual\346\236\201ur.tsx"    | 429 ------------------
 1 file changed, 429 deletions(-)
 delete mode 100644 "src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"

diff --git "a/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx" "b/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
deleted file mode 100644
index d14ab17b..00000000
--- "a/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
+++ /dev/null
@@ -1,429 +0,0 @@
-import React, {
-  CSSProperties,
-  useEffect,
-  useRef,
-  useState,
-  useMemo,
-  useCallback,
-  PropsWithChildren,
-} from "react";
-import * as math from "mathjs";
-
-type GradualBlurProps = PropsWithChildren<{
-  // Basic options
-  position?: "top" | "bottom" | "left" | "right";
-  strength?: number;
-  height?: string;
-  width?: string;
-  divCount?: number;
-  exponential?: boolean;
-  zIndex?: number;
-
-  // Animation options
-  animated?: boolean | "scroll";
-  duration?: string;
-  easing?: string;
-
-  // Styling options
-  opacity?: number;
-  curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "极ease-in-out";
-
-  // Responsive options
-  responsive?: boolean;
-  mobileHeight?: string;
-  tabletHeight?: string;
-  desktopHeight?: string;
-  mobileWidth?: string;
-  tabletWidth?: string;
-  desktopWidth?: string;
-
-  // Advanced options
-  preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
-  gpuOptimized?: boolean;
-  hoverIntensity?: number;
-  target?: "parent" | "page";
-
-  // Event handlers
-  onAnimationComplete?: () => void;
-  className?: string;
-  style?: CSSProperties;
-}>;
-
-// Default configuration
-const DEFAULT_CONFIG: Partial<GradualBlurProps> = {
-  position: 'bottom',
-  strength: 2,
-  height: '6rem',
-  divCount: 5,
-  exponential: false,
-  zIndex: 40,
-  animated: false,
-  duration: '0.3s',
-  easing: 'ease-out',
-  opacity: 1,
-  curve: 'linear',
-  responsive: false,
-  target: 'parent',
-  className: '',
-  style: {}
-};
-
-// Streamlined presets
-const PRESETS: Record<string, Partial<GradualBlurProps>> = {
-  // Basic positions
-  top: { position: 'top', height: '6rem' },
-  bottom: { position: 'bottom', height: '6rem' },
-  left: { position: 'left', height: '6rem' },
-  right: { position: 'right', height: '6rem' },
-  
-  // Intensity variations
-  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
-  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
-  
-  // Style variations
-  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
-  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
-  
-  // Common use cases
-  header: { position: 'top', height: '8rem', curve: 'ease-out' },
-  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
-  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
-  
-  // Page-level presets
-  '极page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
-  'page-footer': { position: 'bottom', height: '10rem', target: '极page', strength: 3 }
-};
-
-// Curve functions
-const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
-  linear: (progress) => progress,
-  bezier: (progress) => progress * progress * (3 - 2 * progress),
-  'ease-in': (progress) => progress * progress,
-  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
-  'ease-in-out': (progress) => 
-    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
-};
-
-// Utility functions
-const mergeConfigs = (...configs: Partial<GradualBlurProps>[]): Partial<GradualBlurProps> => {
-  return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
-};
-
-const getGradientDirection = (position: string): string => {
-  const directions: Record<string, string> = {
-    top: 'to top',
-    bottom: 'to bottom',
-    left: 'to left',
-    right: 'to right'
-  };
-  return directions[position] || 'to bottom';
-};
-
-const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void => {
-  let timeout: NodeJS.Timeout;
-  return function executedFunction(...args: Parameters<T>) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-};
-
-// Custom hooks
-const useResponsiveHeight = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
-  const [height, setHeight] = useState(config.height);
-  
-  const updateHeight = useCallback(debounce(() => {
-    if (!responsive) return;
-    
-    const screenWidth = window.innerWidth;
-    let newHeight = config.height;
-    
-    if (screenWidth <= 480 && config.mobileHeight) {
-      newHeight = config.mobileHeight;
-    } else if (screenWidth <= 768 && config.tabletHeight) {
-      newHeight = config.tabletHeight;
-    } else if (screenWidth <= 1024 && config.desktopHeight) {
-      newHeight = config.desktopHeight;
-    }
-    
-    setHeight(newHeight);
-  }, 100), [responsive, config]);
-
-  useEffect(() => {
-    if (!responsive) return;
-    
-    updateHeight();
-    window.addEventListener('resize', updateHeight);
-    return () => window.removeEventListener('resize', updateHeight);
-  }, [responsive, updateHeight]);
-
-  return responsive ? height : config.height;
-};
-
-const useResponsiveWidth = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
-  const [width, setWidth] = useState(config.width);
-  
-  const updateWidth = useCallback(debounce(() => {
-    if (!responsive极) return;
-    
-    const screenWidth = window.innerWidth;
-    let newWidth = config.width;
-    
-    if (screenWidth <= 480 && config.mobileWidth) {
-      newWidth = config.mobileWidth;
-    } else if (screenWidth <= 768 && config.tabletWidth) {
-      newWidth = config.tabletWidth;
-    } else if (screenWidth <= 1024 && config.desktopWidth) {
-      newWidth = config.desktopWidth;
-    }
-    
-    setWidth(newWidth);
-  }, 100), [responsive, config]);
-
-  useEffect(() => {
-    if (!responsive) return;
-    
-    updateWidth();
-    window.addEventListener('resize', updateWidth);
-    return () => window.removeEventListener('resize', updateWidth);
-  }, [responsive, updateWidth]);
-
-  return responsive ? width : config.width;
-};
-
-const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObserve: boolean = false) => {
-  const [isVisible, setIsVisible] = useState(!shouldObserve);
-  
-  useEffect(() => {
-    if (!shouldObserve || !ref.current) return;
-    
-    const observer = new IntersectionObserver(
-      ([entry]) => setIsVisible(entry.isIntersecting),
-      { threshold: 0.1 }
-    );
-    
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [ref, shouldObserve]);
-  
-  return isVisible;
-};
-
-const GradualBlur: React.FC<GradualBlurProps> = (props) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
-  
-  // Merge configurations
-  const config = useMemo(() => {
-    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
-    return mergeConfigs(DEFAULT_CONFIG, presetConfig, props) as Required<GradualBlurProps>;
-  }, [props]);
-
-  // Responsive height and width
-  const responsiveHeight = useResponsiveHeight(config.responsive, config);
-  const responsiveWidth = useResponsiveWidth(config.responsive, config);
-
-  // Intersection observer for scroll animations
-  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
-
-  // Memoized blur divs generation
-  const blurDivs = useMemo(() => {
-    const divs: React.ReactNode[] = [];
-    const increment = 100 / config.divCount;
-    const currentStrength = isHovered && config.hoverIntensity ? 
-      config.strength * config.hoverIntensity : config.strength;
-    
-    const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
-    
-    for (let i = 1; i <= config.divCount; i++) {
-      let progress = i / config.divCount;
-      progress = curveFunc(progress);
-      
-      // Calculate blur value
-      let blurValue: number;
-      if (config.exponential) {
-        blurValue = Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
-      } else {
-        blurValue = 0.0625 * (progress * config.divCount + 极1) * currentStrength;
-      }
-      
-      // Calculate gradient positions
-      const p极1 = math.round((increment * i - increment) * 10) / 10;
-      const p2 = math.round((increment * i) * 10) / 10;
-      const p3 = math.round((increment * i + increment) * 10) / 10;
-      const p4 = math.round((increment * i + increment * 2) * 10) / 10;
-      
-      // Generate gradient
-      let gradient = `transparent ${p1}%, black ${p2}%`;
-      if (p3 <= 100) gradient += `, black ${p3}%`;
-      if (p4 <= 100) gradient += `, transparent ${p4}%`;
-      
-      const direction = getGradientDirection(config.position);
-      
-      const divStyle: CSSProperties = {
-        maskImage: `linear-gradient(${direction}, ${gradient})`,
-        WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
-        backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
-        opacity: config.opacity,
-        transition: config.animated && config.animated !== 'scroll' ? 
-          `backdrop-filter ${config.duration} ${config.easing}` : undefined
-      };
-      
-      divs.push(
-        <div
-          key={i}
-          className="absolute inset-0"
-          style={divStyle}
-        />
-      );
-    }
-    
-    return divs;
-  }, [config, isHovered]);
-
-  // Container styles with target-aware positioning
-  const containerStyle: CSSProperties = useMemo(() => {
-    const isVertical = ['top', 'bottom'].includes(config.position);
-    const isHorizontal = ['left', 'right'].includes(config.position);
-    const isPageTarget = config.target === 'page';
-    
-    const baseStyle: CSSProperties = {
-      // Position based on target
-      position: isPageTarget ? 'fixed' : 'absolute',
-      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
-      opacity: isVisible ? 1 : 0,
-      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
-      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
-      ...config.style
-    };
-
-    // Apply dimensions and positioning
-    if (isVertical) {
-      baseStyle.height = responsiveHeight;
-      baseStyle.width = responsiveWidth || '100%';
-      baseStyle[config.position] = 0;
-      baseStyle.left = 0;
-      baseStyle.right = 0;
-    } else if (isHorizontal) {
-      baseStyle.width = responsiveWidth || responsiveHeight;
-      baseStyle.height = '100%';
-      baseStyle[极config.position] = 0;
-      baseStyle.top = 0;
-      baseStyle.bottom = 0;
-    }
-
-    return baseStyle;
-  }, [config, responsiveHeight, responsiveWidth, isVisible]);
-
-  // Event handlers
-  const handleMouseEnter = useCallback(() => {
-    if (config.hoverIntensity) {
-      setIsHovered(true);
-    }
-  }, [config.hoverIntensity]);
-
-  const handleMouseLeave = useCallback(() => {
-    if (config.hoverIntensity) {
-      setIsHovered(false);
-    }
-  }, [config.hoverIntensity]);
-
-  // Animation complete callback
-  useEffect(() => {
-    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
-      const timer = setTimeout(
-        () => config.onAnimationComplete!(),
-        parseFloat(config.duration) * 1000
-      );
-      return () => clearTimeout(timer);
-    }
-  }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
-
-  return (
-    <div 
-      ref={containerRef}
-      className={`gradual-blur relative isolate ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
-      style={containerStyle}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave极={handleMouseLeave}
-    >
-      <div className="relative w-full h-full">{blurDivs}</div>
-      {props.children && <div className="relative">{props.children}</div>}
-    </div>
-  );
-};
-
-// Factory function for creating instances with different targets
-export const createPageBlur = (props: Partial<GradualBlurProps> = {}) => {
-  return <GradualBlur {...props} target="page" />;
-};
-
-export const createParentBlur = (props: Partial<GradualBlurProps> = {}) => {
-  return <GradualBlur {...props} target="parent" />;
-};
-
-// Export utilities
-export { PRESETS, CURVE_FUNCTIONS };
-
-export default React.memo(GradualBlur);
-
-// CSS injection function
-const injectStyles = () => {
-  if (typeof document === 'undefined') return;
-  
-  const styleId = 'gradual-blur-styles';
-  if (document.getElementById(styleId)) return;
-  
-  const styleElement = document.createElement('style');
-  styleElement.id = styleId;
-  styleElement.textContent = `
-    .gradual-blur {
-      pointer-events: none;
-    }
-
-    .gradual-blur-page {
-      /* Page-level blur styles */
-    }
-
-    .gradual-blur-parent {
-      /* Parent-level blur styles */
-    }
-
-    .gradual-blur-inner {
-      pointer-events: none;
-    }
-
-    /* Hover support */
-    .gradual-blur:hover .gradual-blur-inner {
-      /* Hover effects can be added here */
-    }
-
-    /* Animation support */
-    .gradual-blur {
-      transition: opacity 0.3s ease-out;
-    }
-
-    /* Responsive utilities */
-    @media (max-width: 480px) {
-      .gradual-blur-responsive {
-        /* Mobile specific styles */
-      }
-    }
-
-    @media (max-width: 768px) {
-      .gradual-blur-responsive {
-        /* Tablet specific styles */
-      }
-    }
-  `;
-  
-  document.head.appendChild(styleElement);
-};
-
-// Inject styles on component mount
-if (typeof document !== 'undefined') {
-  injectStyles();
-}

From 311ca060c905fba42e5b92c684142f3f8cd9b825 Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 17:37:55 +0530
Subject: [PATCH 05/12] real final *

---
 src/ts-default/Animations/GradualBlur/GradualBlur.tsx  | 2 +-
 src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
index 7634c973..f7524cfa 100644
--- a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
+++ b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
@@ -195,7 +195,7 @@ const useResponsiveWidth = (responsive: boolean = false, config: Partial<Gradual
   return responsive ? width : config.width;
 };
 
-const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObserve: boolean = false) => {
+const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement | null>, shouldObserve: boolean = false) => {
   const [isVisible, setIsVisible] = useState(!shouldObserve);
   
   useEffect(() => {
diff --git a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
index 66b52512..7442973e 100644
--- a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
+++ b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
@@ -213,7 +213,7 @@ const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObs
 };
 
 const GradualBlur: React.FC<GradualBlurProps> = (props) => {
-  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [isHovered, setIsHovered] = useState(false);
   
   // Merge configurations

From 84721a1c8e21f293323586d0304e0c1df14f6bfb Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 19:29:14 +0530
Subject: [PATCH 06/12] as per requested

---
 public/assets/Person2.png                     | Bin 160028 -> 0 bytes
 src/constants/Categories.js                   |   2 +-
 .../code/Animations/gradualblurCode.js        |  10 +----
 src/demo/Animations/GradualBlurDemo.jsx       |  13 +++----
 .../Animations/GradualBlur/GradualBlur.css    |  35 ------------------
 5 files changed, 9 insertions(+), 51 deletions(-)
 delete mode 100644 public/assets/Person2.png
 delete mode 100644 src/tailwind/Animations/GradualBlur/GradualBlur.css

diff --git a/public/assets/Person2.png b/public/assets/Person2.png
deleted file mode 100644
index ebf53e76d49038f2f9e4ec520d4b1323eed90549..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/src/constants/Categories.js b/src/constants/Categories.js
index 485a7800..85b4fd2c 100644
--- a/src/constants/Categories.js
+++ b/src/constants/Categories.js
@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Gradualblur','Gradient Blinds', 'Bubble Menu', 'Electric Border', 'Plasma', 'Prism', 'Logo Loop', 'Card Nav', 'Pill Nav', 'Faulty Terminal', 'Light Rays', 'Sticker Peel', 'Galaxy', 'Glass Surface', 'Curved Loop', 'Target Cursor'];
+export const NEW = ['Gradual blur','Gradient Blinds', 'Bubble Menu', 'Electric Border', 'Plasma', 'Prism', 'Logo Loop', 'Card Nav', 'Pill Nav', 'Faulty Terminal', 'Light Rays', 'Sticker Peel', 'Galaxy', 'Glass Surface', 'Curved Loop', 'Target Cursor'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
diff --git a/src/constants/code/Animations/gradualblurCode.js b/src/constants/code/Animations/gradualblurCode.js
index 2702c548..141e8cea 100644
--- a/src/constants/code/Animations/gradualblurCode.js
+++ b/src/constants/code/Animations/gradualblurCode.js
@@ -1,20 +1,15 @@
 import { generateCliCommands } from '@/utils/utils';
 
 import code from '@content/Animations/GradualBlur/GradualBlur.jsx?raw';
-import css from '@content/Animations/GradualBlur/GradualBlur.css?raw';
 import tailwind from '@tailwind/Animations/GradualBlur/GradualBlur.jsx?raw';
 import tsCode from '@ts-default/Animations/GradualBlur/GradualBlur.tsx?raw';
 import tsTailwind from '@ts-tailwind/Animations/GradualBlur/GradualBlur.tsx?raw';
-import Installation from '../../../docs/Installation';
 
 export const gradualBlur = {
   ...(generateCliCommands('Animations/GradualBlur')),
-  Installation:`npm install gradualblur`
-  ,usage: `
+  Installation: `npm install gradualblur mathjs`,
+  usage: `
 
-// Component inspired by gradual blur overlay effects
-
-// if imported seperatly then  
 import GradualBlur from 'gradualblur'
 
 <GradualBlur
@@ -32,7 +27,6 @@ import GradualBlur from 'gradualblur'
   </div>
 </GradualBlur>`,
   code,
-  css,
   tailwind,
   tsCode,
   tsTailwind
diff --git a/src/demo/Animations/GradualBlurDemo.jsx b/src/demo/Animations/GradualBlurDemo.jsx
index ab9d19ce..56860044 100644
--- a/src/demo/Animations/GradualBlurDemo.jsx
+++ b/src/demo/Animations/GradualBlurDemo.jsx
@@ -162,7 +162,7 @@ const GradualBlurDemo = () => {
         <Box
           position="relative"
           className="demo-container"
-          h="200vh" // Visible height
+          h="140vh" // Visible height
           overflowY="auto" // Make it vertically scrollable
           overflowX="hidden"
           // pr={3}
@@ -211,7 +211,7 @@ const GradualBlurDemo = () => {
           </Heading>
 
           <Box
-            marginY="100px"
+            marginY="50px"
             bg="white"
             borderRadius="5px"
             overflow="hidden"
@@ -223,8 +223,8 @@ const GradualBlurDemo = () => {
             {/* Profile Image */}
             <Image
               padding="0.5"
-              src="/assets/Person2.png"
-              alt="Ansh Dhanani"
+              src="https://plus.unsplash.com/premium_photo-1730063330492-3ff4f985952e?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="A beautiful Flower"
               w="100%"
               h="440px"
               objectFit="cover"
@@ -234,15 +234,14 @@ const GradualBlurDemo = () => {
             <Box p={4} >
               <VStack align="start" spacing={0}>
                 <Text fontWeight="bold" fontSize="lg" color="black" mb={-4}>
-                  Ansh Dhanani
+                  A beautiful Flower
                 </Text>
                 <Link
-                  href="https://github.com/Ansh-dhanani"
                   fontSize="13px"
                   color="gray.500"
                   isExternal
                 >
-                  @dhanani._ansh
+                  @Flower
                 </Link>
               </VStack>
             </Box>
diff --git a/src/tailwind/Animations/GradualBlur/GradualBlur.css b/src/tailwind/Animations/GradualBlur/GradualBlur.css
deleted file mode 100644
index 663c9126..00000000
--- a/src/tailwind/Animations/GradualBlur/GradualBlur.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.gradual-blur-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-/* Ensure backdrop-filter works with proper browser prefixes */
-.gradual-blur-inner > div {
-  -webkit-backdrop-filter: inherit;
-  backdrop-filter: inherit;
-}
-
-/* Ensure proper rendering for the blur effect */
-.gradual-blur {
-  isolation: isolate;
-}
-
-/* Fallback for browsers that don't support backdrop-filter */
-@supports not (backdrop-filter: blur(1px)) {
-  .gradual-blur-inner > div {
-    background: rgba(0, 0, 0, 0.3);
-    opacity: 0.5;
-  }
-}
-
-/* Fix for parent container positioning */
-.gradual-blur-fixed {
-  position: fixed !important;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  z-index: 1000;
-}

From e943e962ee468259228743470c6f170ee6800f07 Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 19:31:40 +0530
Subject: [PATCH 07/12] installation gradualblur to mathjs

---
 src/constants/code/Animations/gradualblurCode.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/code/Animations/gradualblurCode.js b/src/constants/code/Animations/gradualblurCode.js
index 141e8cea..6f61c464 100644
--- a/src/constants/code/Animations/gradualblurCode.js
+++ b/src/constants/code/Animations/gradualblurCode.js
@@ -7,7 +7,7 @@ import tsTailwind from '@ts-tailwind/Animations/GradualBlur/GradualBlur.tsx?raw'
 
 export const gradualBlur = {
   ...(generateCliCommands('Animations/GradualBlur')),
-  Installation: `npm install gradualblur mathjs`,
+  Installation: `npm install mathjs`,
   usage: `
 
 import GradualBlur from 'gradualblur'

From 473e006d10266d4528e3adba4a4cd86a40a5253f Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 20:07:17 +0530
Subject: [PATCH 08/12] fixed

---
 src/constants/Categories.js                   |  2 +-
 .../code/Animations/gradualblurCode.js        |  2 +-
 src/demo/Animations/GradualBlurDemo.jsx       |  7 +-
 .../Animations/GradualBlur/GradualBlur.jsx    | 85 ++++---------------
 .../Animations/GradualBlur/GradualBlur.tsx    | 14 ---
 5 files changed, 21 insertions(+), 89 deletions(-)

diff --git a/src/constants/Categories.js b/src/constants/Categories.js
index 85b4fd2c..5374c4a1 100644
--- a/src/constants/Categories.js
+++ b/src/constants/Categories.js
@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Gradual blur','Gradient Blinds', 'Bubble Menu', 'Electric Border', 'Plasma', 'Prism', 'Logo Loop', 'Card Nav', 'Pill Nav', 'Faulty Terminal', 'Light Rays', 'Sticker Peel', 'Galaxy', 'Glass Surface', 'Curved Loop', 'Target Cursor'];
+export const NEW = ['Gradual Blur','Gradient Blinds', 'Bubble Menu', 'Electric Border', 'Plasma', 'Prism', 'Logo Loop', 'Card Nav', 'Pill Nav', 'Faulty Terminal', 'Light Rays', 'Sticker Peel', 'Galaxy', 'Glass Surface', 'Curved Loop', 'Target Cursor'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
diff --git a/src/constants/code/Animations/gradualblurCode.js b/src/constants/code/Animations/gradualblurCode.js
index 6f61c464..57ab5ec3 100644
--- a/src/constants/code/Animations/gradualblurCode.js
+++ b/src/constants/code/Animations/gradualblurCode.js
@@ -7,7 +7,7 @@ import tsTailwind from '@ts-tailwind/Animations/GradualBlur/GradualBlur.tsx?raw'
 
 export const gradualBlur = {
   ...(generateCliCommands('Animations/GradualBlur')),
-  Installation: `npm install mathjs`,
+  installation: `npm install mathjs`,
   usage: `
 
 import GradualBlur from 'gradualblur'
diff --git a/src/demo/Animations/GradualBlurDemo.jsx b/src/demo/Animations/GradualBlurDemo.jsx
index 56860044..dea7de73 100644
--- a/src/demo/Animations/GradualBlurDemo.jsx
+++ b/src/demo/Animations/GradualBlurDemo.jsx
@@ -26,7 +26,7 @@ import PreviewSelect from "../../components/common/Preview/PreviewSelect";
 import PreviewSlider from "../../components/common/Preview/PreviewSlider";
 
 import { gradualBlur } from "../../constants/code/Animations/gradualblurCode";
-import GradualBlur from "../../content/Animations/GradualBlur/GradualBlur";
+import GradualBlur from "../../tailwind/Animations/GradualBlur/GradualBlur";
 
 const GradualBlurDemo = () => {
   const propData = [
@@ -162,10 +162,9 @@ const GradualBlurDemo = () => {
         <Box
           position="relative"
           className="demo-container"
-          h="140vh" // Visible height
-          overflowY="auto" // Make it vertically scrollable
+          h="140vh"
+          overflowY="auto"
           overflowX="hidden"
-          // pr={3}
         >
           <Heading
             position="absolute"
diff --git a/src/tailwind/Animations/GradualBlur/GradualBlur.jsx b/src/tailwind/Animations/GradualBlur/GradualBlur.jsx
index dfa871dd..8978ba3f 100644
--- a/src/tailwind/Animations/GradualBlur/GradualBlur.jsx
+++ b/src/tailwind/Animations/GradualBlur/GradualBlur.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
 import * as math from 'mathjs';
 
-// Default configuration - simplified and clean
 const DEFAULT_CONFIG = {
   position: 'bottom',
   strength: 2,
@@ -15,7 +14,7 @@ const DEFAULT_CONFIG = {
   opacity: 1,
   curve: 'linear',
   responsive: false,
-  target: 'parent', // NEW: 'parent' | 'page'
+  target: 'page',
   className: '',
   style: {}
 };
@@ -246,7 +245,7 @@ const GradualBlur = (props) => {
       pointerEvents: config.hoverIntensity ? 'auto' : 'none',
       opacity: isVisible ? 1 : 0,
       transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
-      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex, // Higher z-index for page targeting
+      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
       ...config.style
     };
 
@@ -258,7 +257,7 @@ const GradualBlur = (props) => {
       baseStyle.left = 0;
       baseStyle.right = 0;
     } else if (isHorizontal) {
-      baseStyle.width = responsiveWidth || responsiveHeight; // Use width prop if provided, otherwise use height value
+      baseStyle.width = responsiveWidth || responsiveHeight;
       baseStyle.height = '100%';
       baseStyle[config.position] = 0;
       baseStyle.top = 0;
@@ -295,18 +294,23 @@ const GradualBlur = (props) => {
   return (
     <div 
       ref={containerRef}
-      className={`gradual-blur ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
-      style={containerStyle}
+      className={`pointer-events-none ${config.target === 'page' ? 'fixed' : 'absolute'} ${config.className}`}
+      style={{
+        pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+        opacity: isVisible ? 1 : 0,
+        transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
+        zIndex: config.target === 'page' ? config.zIndex + 100 : config.zIndex,
+        ...(config.position === 'top' && { top: 0, left: 0, right: 0, height: responsiveHeight, width: responsiveWidth || '100%' }),
+        ...(config.position === 'bottom' && { bottom: 0, left: 0, right: 0, height: responsiveHeight, width: responsiveWidth || '100%' }),
+        ...(config.position === 'left' && { left: 0, top: 0, bottom: 0, width: responsiveWidth || responsiveHeight, height: '100%' }),
+        ...(config.position === 'right' && { right: 0, top: 0, bottom: 0, width: responsiveWidth || responsiveHeight, height: '100%' }),
+        ...config.style
+      }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <div 
-        className="gradual-blur-inner" 
-        style={{ 
-          position: 'relative', 
-          width: '100%', 
-          height: '100%'
-        }}
+        className="relative w-full h-full pointer-events-none"
       >
         {blurDivs}
       </div>
@@ -328,60 +332,3 @@ export { PRESETS, CURVE_FUNCTIONS };
 
 export default React.memo(GradualBlur);
 
-// CSS injection function
-const injectStyles = () => {
-  if (typeof document === 'undefined') return;
-  
-  const styleId = 'gradual-blur-styles';
-  if (document.getElementById(styleId)) return;
-  
-  const styleElement = document.createElement('style');
-  styleElement.id = styleId;
-  styleElement.textContent = `
-    .gradual-blur {
-      pointer-events: none;
-    }
-
-    .gradual-blur-page {
-      /* Page-level blur styles */
-    }
-
-    .gradual-blur-parent {
-      /* Parent-level blur styles */
-    }
-
-    .gradual-blur-inner {
-      pointer-events: none;
-    }
-
-    /* Hover support */
-    .gradual-blur:hover .gradual-blur-inner {
-      /* Hover effects can be added here */
-    }
-
-    /* Animation support */
-    .gradual-blur {
-      transition: opacity 0.3s ease-out;
-    }
-
-    /* Responsive utilities */
-    @media (max-width: 480px) {
-      .gradual-blur-responsive {
-        /* Mobile specific styles */
-      }
-    }
-
-    @media (max-width: 768px) {
-      .gradual-blur-responsive {
-        /* Tablet specific styles */
-      }
-    }
-  `;
-  
-  document.head.appendChild(styleElement);
-};
-
-// Inject styles on component mount
-if (typeof document !== 'undefined') {
-  injectStyles();
-}
diff --git a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
index f7524cfa..e0ce7e90 100644
--- a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
+++ b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
@@ -11,7 +11,6 @@ import * as math from "mathjs";
 import "./Gradualblur.css";
 
 type GradualBlurProps = {
-  // Basic options
   position?: "top" | "bottom" | "left" | "right";
   strength?: number;
   height?: string;
@@ -20,16 +19,13 @@ type GradualBlurProps = {
   exponential?: boolean;
   zIndex?: number;
 
-  // Animation options
   animated?: boolean | "scroll";
   duration?: string;
   easing?: string;
 
-  // Styling options
   opacity?: number;
   curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "ease-in-out";
 
-  // Responsive options
   responsive?: boolean;
   mobileHeight?: string;
   tabletHeight?: string;
@@ -38,13 +34,11 @@ type GradualBlurProps = {
   tabletWidth?: string;
   desktopWidth?: string;
 
-  // Advanced options
   preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
   gpuOptimized?: boolean;
   hoverIntensity?: number;
   target?: "parent" | "page";
 
-  // Event handlers
   onAnimationComplete?: () => void;
   className?: string;
   style?: CSSProperties;
@@ -391,37 +385,29 @@ const injectStyles = () => {
     }
 
     .gradual-blur-page {
-      /* Page-level blur styles */
     }
 
     .gradual-blur-parent {
-      /* Parent-level blur styles */
     }
 
     .gradual-blur-inner {
       pointer-events: none;
     }
 
-    /* Hover support */
     .gradual-blur:hover .gradual-blur-inner {
-      /* Hover effects can be added here */
     }
 
-    /* Animation support */
     .gradual-blur {
       transition: opacity 0.3s ease-out;
     }
 
-    /* Responsive utilities */
     @media (max-width: 480px) {
       .gradual-blur-responsive {
-        /* Mobile specific styles */
       }
     }
 
     @media (max-width: 768px) {
       .gradual-blur-responsive {
-        /* Tablet specific styles */
       }
     }
   `;

From 18de22fbc42fc798b1ac04ff97499c9bcd7b01b0 Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 20:56:29 +0530
Subject: [PATCH 09/12] responsiveness improved

---
 .../code/Animations/gradualblurCode.js        |   2 +-
 src/demo/Animations/GradualBlurDemo.jsx       |  51 +--
 .../Animations/GradualBlur/GradualBlur.css    |  35 ++
 .../Animations/GradualBlur/GradualBlur.tsx    |   2 +-
 .../GradualBlur/Gradual\346\236\201ur.tsx"    | 429 ++++++++++++++++++
 .../Animations/GradualBlurDemo.jsx"           |   0
 6 files changed, 486 insertions(+), 33 deletions(-)
 create mode 100644 src/tailwind/Animations/GradualBlur/GradualBlur.css
 create mode 100644 "src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
 create mode 100644 "src\346\236\201demo/Animations/GradualBlurDemo.jsx"

diff --git a/src/constants/code/Animations/gradualblurCode.js b/src/constants/code/Animations/gradualblurCode.js
index 57ab5ec3..141e8cea 100644
--- a/src/constants/code/Animations/gradualblurCode.js
+++ b/src/constants/code/Animations/gradualblurCode.js
@@ -7,7 +7,7 @@ import tsTailwind from '@ts-tailwind/Animations/GradualBlur/GradualBlur.tsx?raw'
 
 export const gradualBlur = {
   ...(generateCliCommands('Animations/GradualBlur')),
-  installation: `npm install mathjs`,
+  Installation: `npm install gradualblur mathjs`,
   usage: `
 
 import GradualBlur from 'gradualblur'
diff --git a/src/demo/Animations/GradualBlurDemo.jsx b/src/demo/Animations/GradualBlurDemo.jsx
index dea7de73..f838a37f 100644
--- a/src/demo/Animations/GradualBlurDemo.jsx
+++ b/src/demo/Animations/GradualBlurDemo.jsx
@@ -162,38 +162,11 @@ const GradualBlurDemo = () => {
         <Box
           position="relative"
           className="demo-container"
-          h="140vh"
+          h={{ base: "90vh", md: "130vh" }}
           overflowY="auto"
           overflowX="hidden"
         >
-          <Heading
-            position="absolute"
-            left="0px"
-            top="50%"
-            transform="translateY(-50%) rotate(-90deg)"
-            fontSize="9vh"
-            whiteSpace="nowrap"
-            zIndex={50}
-            color="white"
-            textShadow="2px 2px 4px rgba(0,0,0,0.5)"
-          >
-            Gradual Blur
-          </Heading>
-
-          {/* Right side rotated text */}
-          <Heading
-            position="absolute"
-            right="0px"
-            top="50%"
-            transform="translateY(-50%) rotate(90deg)"
-            fontSize="8vh"
-            whiteSpace="nowrap"
-            zIndex={50}
-            color="white"
-            textShadow="2px 2px 4px rgba(0,0,0,0.5)"
-          >
-            Gradual Blur
-          </Heading>
+          
 
           {/* GradualBlur effect - controlled by position prop */}
           <GradualBlur
@@ -205,7 +178,15 @@ const GradualBlurDemo = () => {
           />
 
           {/* Top text */}
-          <Heading position="absolute" top="10vh" fontSize="20vh" zIndex={50}>
+          <Heading 
+            position="absolute" 
+            top="1vh" 
+            fontSize={{ base: "15vw", md: "14vw",lg:"10vw" }} 
+            zIndex={50}
+            lineHeight={1}
+            textAlign="center"
+            width="100%"
+          >
             Scroll Down
           </Heading>
 
@@ -247,7 +228,15 @@ const GradualBlurDemo = () => {
           </Box>
 
           {/* Bottom text */}
-          <Heading position="absolute" bottom="87px" fontSize="20vh" zIndex={50}>
+          <Heading 
+            position="absolute" 
+            bottom="0" 
+            fontSize={{ base: "13vw", md: "14vw",lg:"10vw" }} 
+            zIndex={50}
+            lineHeight={1}
+            textAlign="center"
+            width="100%"
+          >
             Gradual Blur
           </Heading>
         </Box>
diff --git a/src/tailwind/Animations/GradualBlur/GradualBlur.css b/src/tailwind/Animations/GradualBlur/GradualBlur.css
new file mode 100644
index 00000000..663c9126
--- /dev/null
+++ b/src/tailwind/Animations/GradualBlur/GradualBlur.css
@@ -0,0 +1,35 @@
+.gradual-blur-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Ensure backdrop-filter works with proper browser prefixes */
+.gradual-blur-inner > div {
+  -webkit-backdrop-filter: inherit;
+  backdrop-filter: inherit;
+}
+
+/* Ensure proper rendering for the blur effect */
+.gradual-blur {
+  isolation: isolate;
+}
+
+/* Fallback for browsers that don't support backdrop-filter */
+@supports not (backdrop-filter: blur(1px)) {
+  .gradual-blur-inner > div {
+    background: rgba(0, 0, 0, 0.3);
+    opacity: 0.5;
+  }
+}
+
+/* Fix for parent container positioning */
+.gradual-blur-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1000;
+}
diff --git a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
index 7442973e..66b52512 100644
--- a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
+++ b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
@@ -213,7 +213,7 @@ const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObs
 };
 
 const GradualBlur: React.FC<GradualBlurProps> = (props) => {
-  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+  const containerRef = useRef<HTMLDivElement>(null);
   const [isHovered, setIsHovered] = useState(false);
   
   // Merge configurations
diff --git "a/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx" "b/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
new file mode 100644
index 00000000..d14ab17b
--- /dev/null
+++ "b/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
@@ -0,0 +1,429 @@
+import React, {
+  CSSProperties,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  PropsWithChildren,
+} from "react";
+import * as math from "mathjs";
+
+type GradualBlurProps = PropsWithChildren<{
+  // Basic options
+  position?: "top" | "bottom" | "left" | "right";
+  strength?: number;
+  height?: string;
+  width?: string;
+  divCount?: number;
+  exponential?: boolean;
+  zIndex?: number;
+
+  // Animation options
+  animated?: boolean | "scroll";
+  duration?: string;
+  easing?: string;
+
+  // Styling options
+  opacity?: number;
+  curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "极ease-in-out";
+
+  // Responsive options
+  responsive?: boolean;
+  mobileHeight?: string;
+  tabletHeight?: string;
+  desktopHeight?: string;
+  mobileWidth?: string;
+  tabletWidth?: string;
+  desktopWidth?: string;
+
+  // Advanced options
+  preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
+  gpuOptimized?: boolean;
+  hoverIntensity?: number;
+  target?: "parent" | "page";
+
+  // Event handlers
+  onAnimationComplete?: () => void;
+  className?: string;
+  style?: CSSProperties;
+}>;
+
+// Default configuration
+const DEFAULT_CONFIG: Partial<GradualBlurProps> = {
+  position: 'bottom',
+  strength: 2,
+  height: '6rem',
+  divCount: 5,
+  exponential: false,
+  zIndex: 40,
+  animated: false,
+  duration: '0.3s',
+  easing: 'ease-out',
+  opacity: 1,
+  curve: 'linear',
+  responsive: false,
+  target: 'parent',
+  className: '',
+  style: {}
+};
+
+// Streamlined presets
+const PRESETS: Record<string, Partial<GradualBlurProps>> = {
+  // Basic positions
+  top: { position: 'top', height: '6rem' },
+  bottom: { position: 'bottom', height: '6rem' },
+  left: { position: 'left', height: '6rem' },
+  right: { position: 'right', height: '6rem' },
+  
+  // Intensity variations
+  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
+  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
+  
+  // Style variations
+  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
+  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
+  
+  // Common use cases
+  header: { position: 'top', height: '8rem', curve: 'ease-out' },
+  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
+  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
+  
+  // Page-level presets
+  '极page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
+  'page-footer': { position: 'bottom', height: '10rem', target: '极page', strength: 3 }
+};
+
+// Curve functions
+const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
+  linear: (progress) => progress,
+  bezier: (progress) => progress * progress * (3 - 2 * progress),
+  'ease-in': (progress) => progress * progress,
+  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
+  'ease-in-out': (progress) => 
+    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
+};
+
+// Utility functions
+const mergeConfigs = (...configs: Partial<GradualBlurProps>[]): Partial<GradualBlurProps> => {
+  return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
+};
+
+const getGradientDirection = (position: string): string => {
+  const directions: Record<string, string> = {
+    top: 'to top',
+    bottom: 'to bottom',
+    left: 'to left',
+    right: 'to right'
+  };
+  return directions[position] || 'to bottom';
+};
+
+const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void => {
+  let timeout: NodeJS.Timeout;
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+// Custom hooks
+const useResponsiveHeight = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
+  const [height, setHeight] = useState(config.height);
+  
+  const updateHeight = useCallback(debounce(() => {
+    if (!responsive) return;
+    
+    const screenWidth = window.innerWidth;
+    let newHeight = config.height;
+    
+    if (screenWidth <= 480 && config.mobileHeight) {
+      newHeight = config.mobileHeight;
+    } else if (screenWidth <= 768 && config.tabletHeight) {
+      newHeight = config.tabletHeight;
+    } else if (screenWidth <= 1024 && config.desktopHeight) {
+      newHeight = config.desktopHeight;
+    }
+    
+    setHeight(newHeight);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, [responsive, updateHeight]);
+
+  return responsive ? height : config.height;
+};
+
+const useResponsiveWidth = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
+  const [width, setWidth] = useState(config.width);
+  
+  const updateWidth = useCallback(debounce(() => {
+    if (!responsive极) return;
+    
+    const screenWidth = window.innerWidth;
+    let newWidth = config.width;
+    
+    if (screenWidth <= 480 && config.mobileWidth) {
+      newWidth = config.mobileWidth;
+    } else if (screenWidth <= 768 && config.tabletWidth) {
+      newWidth = config.tabletWidth;
+    } else if (screenWidth <= 1024 && config.desktopWidth) {
+      newWidth = config.desktopWidth;
+    }
+    
+    setWidth(newWidth);
+  }, 100), [responsive, config]);
+
+  useEffect(() => {
+    if (!responsive) return;
+    
+    updateWidth();
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, [responsive, updateWidth]);
+
+  return responsive ? width : config.width;
+};
+
+const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObserve: boolean = false) => {
+  const [isVisible, setIsVisible] = useState(!shouldObserve);
+  
+  useEffect(() => {
+    if (!shouldObserve || !ref.current) return;
+    
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref, shouldObserve]);
+  
+  return isVisible;
+};
+
+const GradualBlur: React.FC<GradualBlurProps> = (props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Merge configurations
+  const config = useMemo(() => {
+    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+    return mergeConfigs(DEFAULT_CONFIG, presetConfig, props) as Required<GradualBlurProps>;
+  }, [props]);
+
+  // Responsive height and width
+  const responsiveHeight = useResponsiveHeight(config.responsive, config);
+  const responsiveWidth = useResponsiveWidth(config.responsive, config);
+
+  // Intersection observer for scroll animations
+  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
+
+  // Memoized blur divs generation
+  const blurDivs = useMemo(() => {
+    const divs: React.ReactNode[] = [];
+    const increment = 100 / config.divCount;
+    const currentStrength = isHovered && config.hoverIntensity ? 
+      config.strength * config.hoverIntensity : config.strength;
+    
+    const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
+    
+    for (let i = 1; i <= config.divCount; i++) {
+      let progress = i / config.divCount;
+      progress = curveFunc(progress);
+      
+      // Calculate blur value
+      let blurValue: number;
+      if (config.exponential) {
+        blurValue = Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
+      } else {
+        blurValue = 0.0625 * (progress * config.divCount + 极1) * currentStrength;
+      }
+      
+      // Calculate gradient positions
+      const p极1 = math.round((increment * i - increment) * 10) / 10;
+      const p2 = math.round((increment * i) * 10) / 10;
+      const p3 = math.round((increment * i + increment) * 10) / 10;
+      const p4 = math.round((increment * i + increment * 2) * 10) / 10;
+      
+      // Generate gradient
+      let gradient = `transparent ${p1}%, black ${p2}%`;
+      if (p3 <= 100) gradient += `, black ${p3}%`;
+      if (p4 <= 100) gradient += `, transparent ${p4}%`;
+      
+      const direction = getGradientDirection(config.position);
+      
+      const divStyle: CSSProperties = {
+        maskImage: `linear-gradient(${direction}, ${gradient})`,
+        WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
+        backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+        opacity: config.opacity,
+        transition: config.animated && config.animated !== 'scroll' ? 
+          `backdrop-filter ${config.duration} ${config.easing}` : undefined
+      };
+      
+      divs.push(
+        <div
+          key={i}
+          className="absolute inset-0"
+          style={divStyle}
+        />
+      );
+    }
+    
+    return divs;
+  }, [config, isHovered]);
+
+  // Container styles with target-aware positioning
+  const containerStyle: CSSProperties = useMemo(() => {
+    const isVertical = ['top', 'bottom'].includes(config.position);
+    const isHorizontal = ['left', 'right'].includes(config.position);
+    const isPageTarget = config.target === 'page';
+    
+    const baseStyle: CSSProperties = {
+      // Position based on target
+      position: isPageTarget ? 'fixed' : 'absolute',
+      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+      opacity: isVisible ? 1 : 0,
+      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
+      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
+      ...config.style
+    };
+
+    // Apply dimensions and positioning
+    if (isVertical) {
+      baseStyle.height = responsiveHeight;
+      baseStyle.width = responsiveWidth || '100%';
+      baseStyle[config.position] = 0;
+      baseStyle.left = 0;
+      baseStyle.right = 0;
+    } else if (isHorizontal) {
+      baseStyle.width = responsiveWidth || responsiveHeight;
+      baseStyle.height = '100%';
+      baseStyle[极config.position] = 0;
+      baseStyle.top = 0;
+      baseStyle.bottom = 0;
+    }
+
+    return baseStyle;
+  }, [config, responsiveHeight, responsiveWidth, isVisible]);
+
+  // Event handlers
+  const handleMouseEnter = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(true);
+    }
+  }, [config.hoverIntensity]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (config.hoverIntensity) {
+      setIsHovered(false);
+    }
+  }, [config.hoverIntensity]);
+
+  // Animation complete callback
+  useEffect(() => {
+    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
+      const timer = setTimeout(
+        () => config.onAnimationComplete!(),
+        parseFloat(config.duration) * 1000
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`gradual-blur relative isolate ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
+      style={containerStyle}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave极={handleMouseLeave}
+    >
+      <div className="relative w-full h-full">{blurDivs}</div>
+      {props.children && <div className="relative">{props.children}</div>}
+    </div>
+  );
+};
+
+// Factory function for creating instances with different targets
+export const createPageBlur = (props: Partial<GradualBlurProps> = {}) => {
+  return <GradualBlur {...props} target="page" />;
+};
+
+export const createParentBlur = (props: Partial<GradualBlurProps> = {}) => {
+  return <GradualBlur {...props} target="parent" />;
+};
+
+// Export utilities
+export { PRESETS, CURVE_FUNCTIONS };
+
+export default React.memo(GradualBlur);
+
+// CSS injection function
+const injectStyles = () => {
+  if (typeof document === 'undefined') return;
+  
+  const styleId = 'gradual-blur-styles';
+  if (document.getElementById(styleId)) return;
+  
+  const styleElement = document.createElement('style');
+  styleElement.id = styleId;
+  styleElement.textContent = `
+    .gradual-blur {
+      pointer-events: none;
+    }
+
+    .gradual-blur-page {
+      /* Page-level blur styles */
+    }
+
+    .gradual-blur-parent {
+      /* Parent-level blur styles */
+    }
+
+    .gradual-blur-inner {
+      pointer-events: none;
+    }
+
+    /* Hover support */
+    .gradual-blur:hover .gradual-blur-inner {
+      /* Hover effects can be added here */
+    }
+
+    /* Animation support */
+    .gradual-blur {
+      transition: opacity 0.3s ease-out;
+    }
+
+    /* Responsive utilities */
+    @media (max-width: 480px) {
+      .gradual-blur-responsive {
+        /* Mobile specific styles */
+      }
+    }
+
+    @media (max-width: 768px) {
+      .gradual-blur-responsive {
+        /* Tablet specific styles */
+      }
+    }
+  `;
+  
+  document.head.appendChild(styleElement);
+};
+
+// Inject styles on component mount
+if (typeof document !== 'undefined') {
+  injectStyles();
+}
diff --git "a/src\346\236\201demo/Animations/GradualBlurDemo.jsx" "b/src\346\236\201demo/Animations/GradualBlurDemo.jsx"
new file mode 100644
index 00000000..e69de29b

From 8be4c8aa1ca664a0a71dfcbe9be4977f044bb8ba Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 21:04:10 +0530
Subject: [PATCH 10/12] removed unnecessary files

---
 .../Animations/GradualBlur/GradualBlur.css    |  35 --
 .../GradualBlur/Gradual\346\236\201ur.tsx"    | 429 ------------------
 .../Animations/GradualBlurDemo.jsx"           |   0
 3 files changed, 464 deletions(-)
 delete mode 100644 src/tailwind/Animations/GradualBlur/GradualBlur.css
 delete mode 100644 "src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
 delete mode 100644 "src\346\236\201demo/Animations/GradualBlurDemo.jsx"

diff --git a/src/tailwind/Animations/GradualBlur/GradualBlur.css b/src/tailwind/Animations/GradualBlur/GradualBlur.css
deleted file mode 100644
index 663c9126..00000000
--- a/src/tailwind/Animations/GradualBlur/GradualBlur.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.gradual-blur-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-/* Ensure backdrop-filter works with proper browser prefixes */
-.gradual-blur-inner > div {
-  -webkit-backdrop-filter: inherit;
-  backdrop-filter: inherit;
-}
-
-/* Ensure proper rendering for the blur effect */
-.gradual-blur {
-  isolation: isolate;
-}
-
-/* Fallback for browsers that don't support backdrop-filter */
-@supports not (backdrop-filter: blur(1px)) {
-  .gradual-blur-inner > div {
-    background: rgba(0, 0, 0, 0.3);
-    opacity: 0.5;
-  }
-}
-
-/* Fix for parent container positioning */
-.gradual-blur-fixed {
-  position: fixed !important;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  z-index: 1000;
-}
diff --git "a/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx" "b/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
deleted file mode 100644
index d14ab17b..00000000
--- "a/src/ts-tailwind/Animations/GradualBlur/Gradual\346\236\201ur.tsx"
+++ /dev/null
@@ -1,429 +0,0 @@
-import React, {
-  CSSProperties,
-  useEffect,
-  useRef,
-  useState,
-  useMemo,
-  useCallback,
-  PropsWithChildren,
-} from "react";
-import * as math from "mathjs";
-
-type GradualBlurProps = PropsWithChildren<{
-  // Basic options
-  position?: "top" | "bottom" | "left" | "right";
-  strength?: number;
-  height?: string;
-  width?: string;
-  divCount?: number;
-  exponential?: boolean;
-  zIndex?: number;
-
-  // Animation options
-  animated?: boolean | "scroll";
-  duration?: string;
-  easing?: string;
-
-  // Styling options
-  opacity?: number;
-  curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "极ease-in-out";
-
-  // Responsive options
-  responsive?: boolean;
-  mobileHeight?: string;
-  tabletHeight?: string;
-  desktopHeight?: string;
-  mobileWidth?: string;
-  tabletWidth?: string;
-  desktopWidth?: string;
-
-  // Advanced options
-  preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
-  gpuOptimized?: boolean;
-  hoverIntensity?: number;
-  target?: "parent" | "page";
-
-  // Event handlers
-  onAnimationComplete?: () => void;
-  className?: string;
-  style?: CSSProperties;
-}>;
-
-// Default configuration
-const DEFAULT_CONFIG: Partial<GradualBlurProps> = {
-  position: 'bottom',
-  strength: 2,
-  height: '6rem',
-  divCount: 5,
-  exponential: false,
-  zIndex: 40,
-  animated: false,
-  duration: '0.3s',
-  easing: 'ease-out',
-  opacity: 1,
-  curve: 'linear',
-  responsive: false,
-  target: 'parent',
-  className: '',
-  style: {}
-};
-
-// Streamlined presets
-const PRESETS: Record<string, Partial<GradualBlurProps>> = {
-  // Basic positions
-  top: { position: 'top', height: '6rem' },
-  bottom: { position: 'bottom', height: '6rem' },
-  left: { position: 'left', height: '6rem' },
-  right: { position: 'right', height: '6rem' },
-  
-  // Intensity variations
-  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
-  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
-  
-  // Style variations
-  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
-  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
-  
-  // Common use cases
-  header: { position: 'top', height: '8rem', curve: 'ease-out' },
-  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
-  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
-  
-  // Page-level presets
-  '极page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
-  'page-footer': { position: 'bottom', height: '10rem', target: '极page', strength: 3 }
-};
-
-// Curve functions
-const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
-  linear: (progress) => progress,
-  bezier: (progress) => progress * progress * (3 - 2 * progress),
-  'ease-in': (progress) => progress * progress,
-  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
-  'ease-in-out': (progress) => 
-    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
-};
-
-// Utility functions
-const mergeConfigs = (...configs: Partial<GradualBlurProps>[]): Partial<GradualBlurProps> => {
-  return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
-};
-
-const getGradientDirection = (position: string): string => {
-  const directions: Record<string, string> = {
-    top: 'to top',
-    bottom: 'to bottom',
-    left: 'to left',
-    right: 'to right'
-  };
-  return directions[position] || 'to bottom';
-};
-
-const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void => {
-  let timeout: NodeJS.Timeout;
-  return function executedFunction(...args: Parameters<T>) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-};
-
-// Custom hooks
-const useResponsiveHeight = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
-  const [height, setHeight] = useState(config.height);
-  
-  const updateHeight = useCallback(debounce(() => {
-    if (!responsive) return;
-    
-    const screenWidth = window.innerWidth;
-    let newHeight = config.height;
-    
-    if (screenWidth <= 480 && config.mobileHeight) {
-      newHeight = config.mobileHeight;
-    } else if (screenWidth <= 768 && config.tabletHeight) {
-      newHeight = config.tabletHeight;
-    } else if (screenWidth <= 1024 && config.desktopHeight) {
-      newHeight = config.desktopHeight;
-    }
-    
-    setHeight(newHeight);
-  }, 100), [responsive, config]);
-
-  useEffect(() => {
-    if (!responsive) return;
-    
-    updateHeight();
-    window.addEventListener('resize', updateHeight);
-    return () => window.removeEventListener('resize', updateHeight);
-  }, [responsive, updateHeight]);
-
-  return responsive ? height : config.height;
-};
-
-const useResponsiveWidth = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
-  const [width, setWidth] = useState(config.width);
-  
-  const updateWidth = useCallback(debounce(() => {
-    if (!responsive极) return;
-    
-    const screenWidth = window.innerWidth;
-    let newWidth = config.width;
-    
-    if (screenWidth <= 480 && config.mobileWidth) {
-      newWidth = config.mobileWidth;
-    } else if (screenWidth <= 768 && config.tabletWidth) {
-      newWidth = config.tabletWidth;
-    } else if (screenWidth <= 1024 && config.desktopWidth) {
-      newWidth = config.desktopWidth;
-    }
-    
-    setWidth(newWidth);
-  }, 100), [responsive, config]);
-
-  useEffect(() => {
-    if (!responsive) return;
-    
-    updateWidth();
-    window.addEventListener('resize', updateWidth);
-    return () => window.removeEventListener('resize', updateWidth);
-  }, [responsive, updateWidth]);
-
-  return responsive ? width : config.width;
-};
-
-const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObserve: boolean = false) => {
-  const [isVisible, setIsVisible] = useState(!shouldObserve);
-  
-  useEffect(() => {
-    if (!shouldObserve || !ref.current) return;
-    
-    const observer = new IntersectionObserver(
-      ([entry]) => setIsVisible(entry.isIntersecting),
-      { threshold: 0.1 }
-    );
-    
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [ref, shouldObserve]);
-  
-  return isVisible;
-};
-
-const GradualBlur: React.FC<GradualBlurProps> = (props) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
-  
-  // Merge configurations
-  const config = useMemo(() => {
-    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
-    return mergeConfigs(DEFAULT_CONFIG, presetConfig, props) as Required<GradualBlurProps>;
-  }, [props]);
-
-  // Responsive height and width
-  const responsiveHeight = useResponsiveHeight(config.responsive, config);
-  const responsiveWidth = useResponsiveWidth(config.responsive, config);
-
-  // Intersection observer for scroll animations
-  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
-
-  // Memoized blur divs generation
-  const blurDivs = useMemo(() => {
-    const divs: React.ReactNode[] = [];
-    const increment = 100 / config.divCount;
-    const currentStrength = isHovered && config.hoverIntensity ? 
-      config.strength * config.hoverIntensity : config.strength;
-    
-    const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
-    
-    for (let i = 1; i <= config.divCount; i++) {
-      let progress = i / config.divCount;
-      progress = curveFunc(progress);
-      
-      // Calculate blur value
-      let blurValue: number;
-      if (config.exponential) {
-        blurValue = Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
-      } else {
-        blurValue = 0.0625 * (progress * config.divCount + 极1) * currentStrength;
-      }
-      
-      // Calculate gradient positions
-      const p极1 = math.round((increment * i - increment) * 10) / 10;
-      const p2 = math.round((increment * i) * 10) / 10;
-      const p3 = math.round((increment * i + increment) * 10) / 10;
-      const p4 = math.round((increment * i + increment * 2) * 10) / 10;
-      
-      // Generate gradient
-      let gradient = `transparent ${p1}%, black ${p2}%`;
-      if (p3 <= 100) gradient += `, black ${p3}%`;
-      if (p4 <= 100) gradient += `, transparent ${p4}%`;
-      
-      const direction = getGradientDirection(config.position);
-      
-      const divStyle: CSSProperties = {
-        maskImage: `linear-gradient(${direction}, ${gradient})`,
-        WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
-        backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
-        opacity: config.opacity,
-        transition: config.animated && config.animated !== 'scroll' ? 
-          `backdrop-filter ${config.duration} ${config.easing}` : undefined
-      };
-      
-      divs.push(
-        <div
-          key={i}
-          className="absolute inset-0"
-          style={divStyle}
-        />
-      );
-    }
-    
-    return divs;
-  }, [config, isHovered]);
-
-  // Container styles with target-aware positioning
-  const containerStyle: CSSProperties = useMemo(() => {
-    const isVertical = ['top', 'bottom'].includes(config.position);
-    const isHorizontal = ['left', 'right'].includes(config.position);
-    const isPageTarget = config.target === 'page';
-    
-    const baseStyle: CSSProperties = {
-      // Position based on target
-      position: isPageTarget ? 'fixed' : 'absolute',
-      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
-      opacity: isVisible ? 1 : 0,
-      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
-      zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
-      ...config.style
-    };
-
-    // Apply dimensions and positioning
-    if (isVertical) {
-      baseStyle.height = responsiveHeight;
-      baseStyle.width = responsiveWidth || '100%';
-      baseStyle[config.position] = 0;
-      baseStyle.left = 0;
-      baseStyle.right = 0;
-    } else if (isHorizontal) {
-      baseStyle.width = responsiveWidth || responsiveHeight;
-      baseStyle.height = '100%';
-      baseStyle[极config.position] = 0;
-      baseStyle.top = 0;
-      baseStyle.bottom = 0;
-    }
-
-    return baseStyle;
-  }, [config, responsiveHeight, responsiveWidth, isVisible]);
-
-  // Event handlers
-  const handleMouseEnter = useCallback(() => {
-    if (config.hoverIntensity) {
-      setIsHovered(true);
-    }
-  }, [config.hoverIntensity]);
-
-  const handleMouseLeave = useCallback(() => {
-    if (config.hoverIntensity) {
-      setIsHovered(false);
-    }
-  }, [config.hoverIntensity]);
-
-  // Animation complete callback
-  useEffect(() => {
-    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
-      const timer = setTimeout(
-        () => config.onAnimationComplete!(),
-        parseFloat(config.duration) * 1000
-      );
-      return () => clearTimeout(timer);
-    }
-  }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
-
-  return (
-    <div 
-      ref={containerRef}
-      className={`gradual-blur relative isolate ${config.target === 'page' ? 'gradual-blur-page' : 'gradual-blur-parent'} ${config.className}`}
-      style={containerStyle}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave极={handleMouseLeave}
-    >
-      <div className="relative w-full h-full">{blurDivs}</div>
-      {props.children && <div className="relative">{props.children}</div>}
-    </div>
-  );
-};
-
-// Factory function for creating instances with different targets
-export const createPageBlur = (props: Partial<GradualBlurProps> = {}) => {
-  return <GradualBlur {...props} target="page" />;
-};
-
-export const createParentBlur = (props: Partial<GradualBlurProps> = {}) => {
-  return <GradualBlur {...props} target="parent" />;
-};
-
-// Export utilities
-export { PRESETS, CURVE_FUNCTIONS };
-
-export default React.memo(GradualBlur);
-
-// CSS injection function
-const injectStyles = () => {
-  if (typeof document === 'undefined') return;
-  
-  const styleId = 'gradual-blur-styles';
-  if (document.getElementById(styleId)) return;
-  
-  const styleElement = document.createElement('style');
-  styleElement.id = styleId;
-  styleElement.textContent = `
-    .gradual-blur {
-      pointer-events: none;
-    }
-
-    .gradual-blur-page {
-      /* Page-level blur styles */
-    }
-
-    .gradual-blur-parent {
-      /* Parent-level blur styles */
-    }
-
-    .gradual-blur-inner {
-      pointer-events: none;
-    }
-
-    /* Hover support */
-    .gradual-blur:hover .gradual-blur-inner {
-      /* Hover effects can be added here */
-    }
-
-    /* Animation support */
-    .gradual-blur {
-      transition: opacity 0.3s ease-out;
-    }
-
-    /* Responsive utilities */
-    @media (max-width: 480px) {
-      .gradual-blur-responsive {
-        /* Mobile specific styles */
-      }
-    }
-
-    @media (max-width: 768px) {
-      .gradual-blur-responsive {
-        /* Tablet specific styles */
-      }
-    }
-  `;
-  
-  document.head.appendChild(styleElement);
-};
-
-// Inject styles on component mount
-if (typeof document !== 'undefined') {
-  injectStyles();
-}
diff --git "a/src\346\236\201demo/Animations/GradualBlurDemo.jsx" "b/src\346\236\201demo/Animations/GradualBlurDemo.jsx"
deleted file mode 100644
index e69de29b..00000000

From 22e7dea18cdac3dea2fda1b4cf581da3f87787e8 Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Tue, 26 Aug 2025 21:49:24 +0530
Subject: [PATCH 11/12] defaults changes

---
 src/demo/Animations/GradualBlurDemo.jsx       |  37 ++-
 .../Animations/GradualBlur/GradualBlur.jsx    | 313 +++++++++++-------
 .../Animations/GradualBlur/GradualBlur.tsx    |  49 ++-
 .../Animations/GradualBlur/GradualBlur.tsx    |  70 ++--
 4 files changed, 265 insertions(+), 204 deletions(-)

diff --git a/src/demo/Animations/GradualBlurDemo.jsx b/src/demo/Animations/GradualBlurDemo.jsx
index f838a37f..782012f8 100644
--- a/src/demo/Animations/GradualBlurDemo.jsx
+++ b/src/demo/Animations/GradualBlurDemo.jsx
@@ -63,7 +63,7 @@ const GradualBlurDemo = () => {
     {
       name: "exponential",
       type: "boolean",
-      default: "false",
+      default: "true",
       description: "Use exponential blur progression.",
     },
     {
@@ -93,7 +93,7 @@ const GradualBlurDemo = () => {
     {
       name: "curve",
       type: `"linear" | "bezier" | "ease-in-out"`,
-      default: `"linear"`,
+      default: `"bezier"`,
       description: "Controls blur progression curve.",
     },
     {
@@ -151,8 +151,8 @@ const GradualBlurDemo = () => {
     strength: 2,
     height: "7rem",
     divCount: 5,
-    curve: "linear",
-    exponential: false,
+    curve: "bezier",
+    exponential: true,
     opacity: 1,
   });
 
@@ -162,13 +162,22 @@ const GradualBlurDemo = () => {
         <Box
           position="relative"
           className="demo-container"
-          h={{ base: "90vh", md: "130vh" }}
+          h="70rem"
           overflowY="auto"
           overflowX="hidden"
         >
-          
+          <style>
+            {`
+              .demo-container::-webkit-scrollbar {
+                display: none;
+              }
+              .demo-container {
+                -ms-overflow-style: none;
+                scrollbar-width: none;
+              }
+            `}
+          </style>
 
-          {/* GradualBlur effect - controlled by position prop */}
           <GradualBlur
             {...blurProps}
             target="page"
@@ -177,11 +186,11 @@ const GradualBlurDemo = () => {
             height={blurProps.position === 'top' ? "14rem" : blurProps.height}
           />
 
-          {/* Top text */}
+
           <Heading 
             position="absolute" 
             top="1vh" 
-            fontSize={{ base: "15vw", md: "14vw",lg:"10vw" }} 
+            fontSize={{ base: "4rem", md: "5rem",lg:"7rem" }} 
             zIndex={50}
             lineHeight={1}
             textAlign="center"
@@ -200,7 +209,7 @@ const GradualBlurDemo = () => {
             flexDirection="column"
             height="500px"
           >
-            {/* Profile Image */}
+
             <Image
               padding="0.5"
               src="https://plus.unsplash.com/premium_photo-1730063330492-3ff4f985952e?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -210,7 +219,7 @@ const GradualBlurDemo = () => {
               objectFit="cover"
             />
 
-            {/* Name & Link - positioned at bottom */}
+
             <Box p={4} >
               <VStack align="start" spacing={0}>
                 <Text fontWeight="bold" fontSize="lg" color="black" mb={-4}>
@@ -227,11 +236,11 @@ const GradualBlurDemo = () => {
             </Box>
           </Box>
 
-          {/* Bottom text */}
+
           <Heading 
             position="absolute" 
             bottom="0" 
-            fontSize={{ base: "13vw", md: "14vw",lg:"10vw" }} 
+            fontSize={{ base: "4rem", md: "5rem",lg:"7rem" }} 
             zIndex={50}
             lineHeight={1}
             textAlign="center"
@@ -241,7 +250,7 @@ const GradualBlurDemo = () => {
           </Heading>
         </Box>
 
-        {/* Controls */}
+
         <Customize>
           <PreviewSelect
             title="Position"
diff --git a/src/tailwind/Animations/GradualBlur/GradualBlur.jsx b/src/tailwind/Animations/GradualBlur/GradualBlur.jsx
index 8978ba3f..6d50d7ff 100644
--- a/src/tailwind/Animations/GradualBlur/GradualBlur.jsx
+++ b/src/tailwind/Animations/GradualBlur/GradualBlur.jsx
@@ -1,58 +1,76 @@
-import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
-import * as math from 'mathjs';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+} from "react";
+import * as math from "mathjs";
 
 const DEFAULT_CONFIG = {
-  position: 'bottom',
+  position: "bottom",
   strength: 2,
-  height: '6rem',
+  height: "6rem",
   divCount: 5,
-  exponential: false,
-  zIndex: 1000,
+  exponential: true,
+  zIndex: 40,
   animated: false,
-  duration: '0.3s',
-  easing: 'ease-out',
+  duration: "0.3s",
+  easing: "ease-out",
   opacity: 1,
-  curve: 'linear',
+  curve: "bezier",
   responsive: false,
-  target: 'page',
-  className: '',
-  style: {}
+  target: "page",
+  className: "",
+  style: {},
 };
 
 // Streamlined presets - height-only approach
 const PRESETS = {
   // Basic positions
-  top: { position: 'top', height: '6rem' },
-  bottom: { position: 'bottom', height: '6rem' },
-  left: { position: 'left', height: '6rem' },
-  right: { position: 'right', height: '6rem' },
-  
+  top: { position: "top", height: "6rem" },
+  bottom: { position: "bottom", height: "6rem" },
+  left: { position: "left", height: "6rem" },
+  right: { position: "right", height: "6rem" },
+
   // Intensity variations
-  subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
-  intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
-  
+  subtle: { height: "4rem", strength: 1, opacity: 0.8, divCount: 3 },
+  intense: { height: "10rem", strength: 4, divCount: 8, exponential: true },
+
   // Style variations
-  smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
-  sharp: { height: '5rem', curve: 'linear', divCount: 4 },
-  
+  smooth: { height: "8rem", curve: "bezier", divCount: 10 },
+  sharp: { height: "5rem", curve: "linear", divCount: 4 },
+
   // Common use cases
-  header: { position: 'top', height: '8rem', curve: 'ease-out' },
-  footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
-  sidebar: { position: 'left', height: '6rem', strength: 2.5 },
-  
+  header: { position: "top", height: "8rem", curve: "ease-out" },
+  footer: { position: "bottom", height: "8rem", curve: "ease-out" },
+  sidebar: { position: "left", height: "6rem", strength: 2.5 },
+
   // Page-level presets
-  'page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
-  'page-footer': { position: 'bottom', height: '10rem', target: 'page', strength: 3 }
+  "page-header": {
+    position: "top",
+    height: "10rem",
+    target: "page",
+    strength: 3,
+  },
+  "page-footer": {
+    position: "bottom",
+    height: "10rem",
+    target: "page",
+    strength: 3,
+  },
 };
 
 // Curve functions - essential ones only
 const CURVE_FUNCTIONS = {
   linear: (progress) => progress,
   bezier: (progress) => progress * progress * (3 - 2 * progress),
-  'ease-in': (progress) => progress * progress,
-  'ease-out': (progress) => 1 - Math.pow(1 - progress, 2),
-  'ease-in-out': (progress) => 
-    progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
+  "ease-in": (progress) => progress * progress,
+  "ease-out": (progress) => 1 - Math.pow(1 - progress, 2),
+  "ease-in-out": (progress) =>
+    progress < 0.5
+      ? 2 * progress * progress
+      : 1 - Math.pow(-2 * progress + 2, 2) / 2,
 };
 
 // Utility functions
@@ -62,12 +80,12 @@ const mergeConfigs = (...configs) => {
 
 const getGradientDirection = (position) => {
   const directions = {
-    top: 'to top',
-    bottom: 'to bottom',
-    left: 'to left',
-    right: 'to right'
+    top: "to top",
+    bottom: "to bottom",
+    left: "to left",
+    right: "to right",
   };
-  return directions[position] || 'to bottom';
+  return directions[position] || "to bottom";
 };
 
 const debounce = (func, wait) => {
@@ -85,30 +103,33 @@ const debounce = (func, wait) => {
 // Custom hooks
 const useResponsiveHeight = (responsive, config) => {
   const [height, setHeight] = useState(config.height);
-  
-  const updateHeight = useCallback(debounce(() => {
-    if (!responsive) return;
-    
-    const screenWidth = window.innerWidth;
-    let newHeight = config.height;
-    
-    if (screenWidth <= 480 && config.mobileHeight) {
-      newHeight = config.mobileHeight;
-    } else if (screenWidth <= 768 && config.tabletHeight) {
-      newHeight = config.tabletHeight;
-    } else if (screenWidth <= 1024 && config.desktopHeight) {
-      newHeight = config.desktopHeight;
-    }
-    
-    setHeight(newHeight);
-  }, 100), [responsive, config]);
+
+  const updateHeight = useCallback(
+    debounce(() => {
+      if (!responsive) return;
+
+      const screenWidth = window.innerWidth;
+      let newHeight = config.height;
+
+      if (screenWidth <= 480 && config.mobileHeight) {
+        newHeight = config.mobileHeight;
+      } else if (screenWidth <= 768 && config.tabletHeight) {
+        newHeight = config.tabletHeight;
+      } else if (screenWidth <= 1024 && config.desktopHeight) {
+        newHeight = config.desktopHeight;
+      }
+
+      setHeight(newHeight);
+    }, 100),
+    [responsive, config]
+  );
 
   useEffect(() => {
     if (!responsive) return;
-    
+
     updateHeight();
-    window.addEventListener('resize', updateHeight);
-    return () => window.removeEventListener('resize', updateHeight);
+    window.addEventListener("resize", updateHeight);
+    return () => window.removeEventListener("resize", updateHeight);
   }, [responsive, updateHeight]);
 
   return responsive ? height : config.height;
@@ -116,30 +137,33 @@ const useResponsiveHeight = (responsive, config) => {
 
 const useResponsiveWidth = (responsive, config) => {
   const [width, setWidth] = useState(config.width);
-  
-  const updateWidth = useCallback(debounce(() => {
-    if (!responsive) return;
-    
-    const screenWidth = window.innerWidth;
-    let newWidth = config.width;
-    
-    if (screenWidth <= 480 && config.mobileWidth) {
-      newWidth = config.mobileWidth;
-    } else if (screenWidth <= 768 && config.tabletWidth) {
-      newWidth = config.tabletWidth;
-    } else if (screenWidth <= 1024 && config.desktopWidth) {
-      newWidth = config.desktopWidth;
-    }
-    
-    setWidth(newWidth);
-  }, 100), [responsive, config]);
+
+  const updateWidth = useCallback(
+    debounce(() => {
+      if (!responsive) return;
+
+      const screenWidth = window.innerWidth;
+      let newWidth = config.width;
+
+      if (screenWidth <= 480 && config.mobileWidth) {
+        newWidth = config.mobileWidth;
+      } else if (screenWidth <= 768 && config.tabletWidth) {
+        newWidth = config.tabletWidth;
+      } else if (screenWidth <= 1024 && config.desktopWidth) {
+        newWidth = config.desktopWidth;
+      }
+
+      setWidth(newWidth);
+    }, 100),
+    [responsive, config]
+  );
 
   useEffect(() => {
     if (!responsive) return;
-    
+
     updateWidth();
-    window.addEventListener('resize', updateWidth);
-    return () => window.removeEventListener('resize', updateWidth);
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
   }, [responsive, updateWidth]);
 
   return responsive ? width : config.width;
@@ -147,19 +171,19 @@ const useResponsiveWidth = (responsive, config) => {
 
 const useIntersectionObserver = (ref, shouldObserve = false) => {
   const [isVisible, setIsVisible] = useState(!shouldObserve);
-  
+
   useEffect(() => {
     if (!shouldObserve || !ref.current) return;
-    
+
     const observer = new IntersectionObserver(
       ([entry]) => setIsVisible(entry.isIntersecting),
       { threshold: 0.1 }
     );
-    
+
     observer.observe(ref.current);
     return () => observer.disconnect();
   }, [ref, shouldObserve]);
-  
+
   return isVisible;
 };
 
@@ -167,10 +191,11 @@ const useIntersectionObserver = (ref, shouldObserve = false) => {
 const GradualBlur = (props) => {
   const containerRef = useRef(null);
   const [isHovered, setIsHovered] = useState(false);
-  
+
   // Merge configurations
   const config = useMemo(() => {
-    const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
+    const presetConfig =
+      props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
     return mergeConfigs(DEFAULT_CONFIG, presetConfig, props);
   }, [props]);
 
@@ -179,21 +204,26 @@ const GradualBlur = (props) => {
   const responsiveWidth = useResponsiveWidth(config.responsive, config);
 
   // Intersection observer for scroll animations
-  const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
+  const isVisible = useIntersectionObserver(
+    containerRef,
+    config.animated === "scroll"
+  );
 
   // Memoized blur divs generation
   const blurDivs = useMemo(() => {
     const divs = [];
     const increment = 100 / config.divCount;
-    const currentStrength = isHovered && config.hoverIntensity ? 
-      config.strength * config.hoverIntensity : config.strength;
-    
+    const currentStrength =
+      isHovered && config.hoverIntensity
+        ? config.strength * config.hoverIntensity
+        : config.strength;
+
     const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
-    
+
     for (let i = 1; i <= config.divCount; i++) {
       let progress = i / config.divCount;
       progress = curveFunc(progress);
-      
+
       // Calculate blur value
       let blurValue;
       if (config.exponential) {
@@ -201,64 +231,68 @@ const GradualBlur = (props) => {
       } else {
         blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
       }
-      
+
       // Calculate gradient positions
       const p1 = math.round((increment * i - increment) * 10) / 10;
-      const p2 = math.round((increment * i) * 10) / 10;
+      const p2 = math.round(increment * i * 10) / 10;
       const p3 = math.round((increment * i + increment) * 10) / 10;
       const p4 = math.round((increment * i + increment * 2) * 10) / 10;
-      
+
       // Generate gradient
       let gradient = `transparent ${p1}%, black ${p2}%`;
       if (p3 <= 100) gradient += `, black ${p3}%`;
       if (p4 <= 100) gradient += `, transparent ${p4}%`;
-      
+
       const direction = getGradientDirection(config.position);
-      
+
       const divStyle = {
-        position: 'absolute',
-        inset: '0',
+        position: "absolute",
+        inset: "0",
         maskImage: `linear-gradient(${direction}, ${gradient})`,
         WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
         backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
         WebkitBackdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
         opacity: config.opacity,
-        transition: config.animated && config.animated !== 'scroll' ? 
-          `backdrop-filter ${config.duration} ${config.easing}` : undefined
+        transition:
+          config.animated && config.animated !== "scroll"
+            ? `backdrop-filter ${config.duration} ${config.easing}`
+            : undefined,
       };
-      
+
       divs.push(<div key={i} style={divStyle} />);
     }
-    
+
     return divs;
   }, [config, isHovered]);
 
   // Container styles with target-aware positioning
   const containerStyle = useMemo(() => {
-    const isVertical = ['top', 'bottom'].includes(config.position);
-    const isHorizontal = ['left', 'right'].includes(config.position);
-    const isPageTarget = config.target === 'page';
-    
+    const isVertical = ["top", "bottom"].includes(config.position);
+    const isHorizontal = ["left", "right"].includes(config.position);
+    const isPageTarget = config.target === "page";
+
     const baseStyle = {
       // Position based on target
-      position: isPageTarget ? 'fixed' : 'absolute',
-      pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+      position: isPageTarget ? "fixed" : "absolute",
+      pointerEvents: config.hoverIntensity ? "auto" : "none",
       opacity: isVisible ? 1 : 0,
-      transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
+      transition: config.animated
+        ? `opacity ${config.duration} ${config.easing}`
+        : undefined,
       zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
-      ...config.style
+      ...config.style,
     };
 
     // Apply dimensions and positioning
     if (isVertical) {
       baseStyle.height = responsiveHeight;
-      baseStyle.width = responsiveWidth || '100%';
+      baseStyle.width = responsiveWidth || "100%";
       baseStyle[config.position] = 0;
       baseStyle.left = 0;
       baseStyle.right = 0;
     } else if (isHorizontal) {
       baseStyle.width = responsiveWidth || responsiveHeight;
-      baseStyle.height = '100%';
+      baseStyle.height = "100%";
       baseStyle[config.position] = 0;
       baseStyle.top = 0;
       baseStyle.bottom = 0;
@@ -282,7 +316,11 @@ const GradualBlur = (props) => {
 
   // Animation complete callback
   useEffect(() => {
-    if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
+    if (
+      isVisible &&
+      config.animated === "scroll" &&
+      config.onAnimationComplete
+    ) {
       const timer = setTimeout(
         () => config.onAnimationComplete(),
         parseFloat(config.duration) * 1000
@@ -292,26 +330,50 @@ const GradualBlur = (props) => {
   }, [isVisible, config.animated, config.duration, config.onAnimationComplete]);
 
   return (
-    <div 
+    <div
       ref={containerRef}
-      className={`pointer-events-none ${config.target === 'page' ? 'fixed' : 'absolute'} ${config.className}`}
+      className={`pointer-events-none ${config.target === "page" ? "fixed" : "absolute"} ${config.className}`}
       style={{
-        pointerEvents: config.hoverIntensity ? 'auto' : 'none',
+        pointerEvents: config.hoverIntensity ? "auto" : "none",
         opacity: isVisible ? 1 : 0,
-        transition: config.animated ? `opacity ${config.duration} ${config.easing}` : undefined,
-        zIndex: config.target === 'page' ? config.zIndex + 100 : config.zIndex,
-        ...(config.position === 'top' && { top: 0, left: 0, right: 0, height: responsiveHeight, width: responsiveWidth || '100%' }),
-        ...(config.position === 'bottom' && { bottom: 0, left: 0, right: 0, height: responsiveHeight, width: responsiveWidth || '100%' }),
-        ...(config.position === 'left' && { left: 0, top: 0, bottom: 0, width: responsiveWidth || responsiveHeight, height: '100%' }),
-        ...(config.position === 'right' && { right: 0, top: 0, bottom: 0, width: responsiveWidth || responsiveHeight, height: '100%' }),
-        ...config.style
+        transition: config.animated
+          ? `opacity ${config.duration} ${config.easing}`
+          : undefined,
+        zIndex: config.target === "page" ? config.zIndex + 100 : config.zIndex,
+        ...(config.position === "top" && {
+          top: 0,
+          left: 0,
+          right: 0,
+          height: responsiveHeight,
+          width: responsiveWidth || "100%",
+        }),
+        ...(config.position === "bottom" && {
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: responsiveHeight,
+          width: responsiveWidth || "100%",
+        }),
+        ...(config.position === "left" && {
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: responsiveWidth || responsiveHeight,
+          height: "100%",
+        }),
+        ...(config.position === "right" && {
+          right: 0,
+          top: 0,
+          bottom: 0,
+          width: responsiveWidth || responsiveHeight,
+          height: "100%",
+        }),
+        ...config.style,
       }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <div 
-        className="relative w-full h-full pointer-events-none"
-      >
+      <div className="relative w-full h-full pointer-events-none">
         {blurDivs}
       </div>
     </div>
@@ -331,4 +393,3 @@ export const createParentBlur = (props = {}) => {
 export { PRESETS, CURVE_FUNCTIONS };
 
 export default React.memo(GradualBlur);
-
diff --git a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
index e0ce7e90..a6846e0e 100644
--- a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
+++ b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
@@ -44,52 +44,51 @@ type GradualBlurProps = {
   style?: CSSProperties;
 };
 
-// Default configuration
+
 const DEFAULT_CONFIG: Partial<GradualBlurProps> = {
   position: 'bottom',
   strength: 2,
   height: '6rem',
   divCount: 5,
-  exponential: false,
-  zIndex: 1000,
+  exponential: true,
+  zIndex: 40,
   animated: false,
   duration: '0.3s',
   easing: 'ease-out',
   opacity: 1,
-  curve: 'linear',
+  curve: 'bezier',
   responsive: false,
-  target: 'parent',
+  target: 'page',
   className: '',
   style: {}
 };
 
-// Streamlined presets
+
 const PRESETS: Record<string, Partial<GradualBlurProps>> = {
-  // Basic positions
+
   top: { position: 'top', height: '6rem' },
   bottom: { position: 'bottom', height: '6rem' },
   left: { position: 'left', height: '6rem' },
   right: { position: 'right', height: '6rem' },
   
-  // Intensity variations
+
   subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
   intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
   
-  // Style variations
+
   smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
   sharp: { height: '5rem', curve: 'linear', divCount: 4 },
   
-  // Common use cases
+
   header: { position: 'top', height: '8rem', curve: 'ease-out' },
   footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
   sidebar: { position: 'left', height: '6rem', strength: 2.5 },
   
-  // Page-level presets
+
   'page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
   'page-footer': { position: 'bottom', height: '10rem', target: 'page', strength: 3 }
 };
 
-// Curve functions
 const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
   linear: (progress) => progress,
   bezier: (progress) => progress * progress * (3 - 2 * progress),
@@ -99,7 +98,6 @@ const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
     progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
 };
 
-// Utility functions
 const mergeConfigs = (...configs: Partial<GradualBlurProps>[]): Partial<GradualBlurProps> => {
   return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
 };
@@ -126,7 +124,7 @@ const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): (.
   };
 };
 
-// Custom hooks
+
 const useResponsiveHeight = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
   const [height, setHeight] = useState(config.height);
   
@@ -211,20 +209,19 @@ const GradualBlur: React.FC<PropsWithChildren<GradualBlurProps>> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isHovered, setIsHovered] = useState(false);
   
-  // Merge configurations
+
   const config = useMemo(() => {
     const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
     return mergeConfigs(DEFAULT_CONFIG, presetConfig, props) as Required<GradualBlurProps>;
   }, [props]);
 
-  // Responsive height and width
+
   const responsiveHeight = useResponsiveHeight(config.responsive, config);
   const responsiveWidth = useResponsiveWidth(config.responsive, config);
 
-  // Intersection observer for scroll animations
   const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
 
-  // Memoized blur divs generation
+
   const blurDivs = useMemo(() => {
     const divs: React.ReactNode[] = [];
     const increment = 100 / config.divCount;
@@ -276,14 +273,13 @@ const GradualBlur: React.FC<PropsWithChildren<GradualBlurProps>> = (props) => {
     return divs;
   }, [config, isHovered]);
 
-  // Container styles with target-aware positioning
   const containerStyle: CSSProperties = useMemo(() => {
     const isVertical = ['top', 'bottom'].includes(config.position);
     const isHorizontal = ['left', 'right'].includes(config.position);
     const isPageTarget = config.target === 'page';
     
     const baseStyle: CSSProperties = {
-      // Position based on target
+  
       position: isPageTarget ? 'fixed' : 'absolute',
       pointerEvents: config.hoverIntensity ? 'auto' : 'none',
       opacity: isVisible ? 1 : 0,
@@ -292,7 +288,7 @@ const GradualBlur: React.FC<PropsWithChildren<GradualBlurProps>> = (props) => {
       ...config.style
     };
 
-    // Apply dimensions and positioning
+
     if (isVertical) {
       baseStyle.height = responsiveHeight;
       baseStyle.width = responsiveWidth || '100%';
@@ -310,7 +306,7 @@ const GradualBlur: React.FC<PropsWithChildren<GradualBlurProps>> = (props) => {
     return baseStyle;
   }, [config, responsiveHeight, responsiveWidth, isVisible]);
 
-  // Event handlers
+
   const handleMouseEnter = useCallback(() => {
     if (config.hoverIntensity) {
       setIsHovered(true);
@@ -323,7 +319,7 @@ const GradualBlur: React.FC<PropsWithChildren<GradualBlurProps>> = (props) => {
     }
   }, [config.hoverIntensity]);
 
-  // Animation complete callback
+
   useEffect(() => {
     if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
       const timer = setTimeout(
@@ -356,7 +352,7 @@ const GradualBlur: React.FC<PropsWithChildren<GradualBlurProps>> = (props) => {
   );
 };
 
-// Factory function for creating instances with different targets
+
 export const createPageBlur = (props: Partial<GradualBlurProps> = {}) => {
   return <GradualBlur {...props} target="page" />;
 };
@@ -365,12 +361,12 @@ export const createParentBlur = (props: Partial<GradualBlurProps> = {}) => {
   return <GradualBlur {...props} target="parent" />;
 };
 
-// Export utilities
+
 export { PRESETS, CURVE_FUNCTIONS };
 
 export default React.memo(GradualBlur);
 
-// CSS injection function
+
 const injectStyles = () => {
   if (typeof document === 'undefined') return;
   
@@ -415,7 +411,6 @@ const injectStyles = () => {
   document.head.appendChild(styleElement);
 };
 
-// Inject styles on component mount
 if (typeof document !== 'undefined') {
   injectStyles();
 }
diff --git a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
index 66b52512..0dd9676b 100644
--- a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
+++ b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
@@ -10,7 +10,7 @@ import React, {
 import * as math from "mathjs";
 
 type GradualBlurProps = PropsWithChildren<{
-  // Basic options
+
   position?: "top" | "bottom" | "left" | "right";
   strength?: number;
   height?: string;
@@ -19,16 +19,15 @@ type GradualBlurProps = PropsWithChildren<{
   exponential?: boolean;
   zIndex?: number;
 
-  // Animation options
+
   animated?: boolean | "scroll";
   duration?: string;
   easing?: string;
 
-  // Styling options
+
   opacity?: number;
   curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "ease-in-out";
 
-  // Responsive options
   responsive?: boolean;
   mobileHeight?: string;
   tabletHeight?: string;
@@ -37,64 +36,62 @@ type GradualBlurProps = PropsWithChildren<{
   tabletWidth?: string;
   desktopWidth?: string;
 
-  // Advanced options
+
   preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
   gpuOptimized?: boolean;
   hoverIntensity?: number;
   target?: "parent" | "page";
 
-  // Event handlers
   onAnimationComplete?: () => void;
   className?: string;
   style?: CSSProperties;
 }>;
 
-// Default configuration
+
 const DEFAULT_CONFIG: Partial<GradualBlurProps> = {
   position: 'bottom',
   strength: 2,
   height: '6rem',
   divCount: 5,
-  exponential: false,
+  exponential: true,
   zIndex: 40,
   animated: false,
   duration: '0.3s',
   easing: 'ease-out',
   opacity: 1,
-  curve: 'linear',
+  curve: 'bezier',
   responsive: false,
-  target: 'parent',
+  target: 'page',
   className: '',
   style: {}
 };
 
-// Streamlined presets
+
 const PRESETS: Record<string, Partial<GradualBlurProps>> = {
-  // Basic positions
+
   top: { position: 'top', height: '6rem' },
   bottom: { position: 'bottom', height: '6rem' },
   left: { position: 'left', height: '6rem' },
   right: { position: 'right', height: '6rem' },
   
-  // Intensity variations
+
   subtle: { height: '4rem', strength: 1, opacity: 0.8, divCount: 3 },
   intense: { height: '10rem', strength: 4, divCount: 8, exponential: true },
-  
-  // Style variations
+
   smooth: { height: '8rem', curve: 'bezier', divCount: 10 },
   sharp: { height: '5rem', curve: 'linear', divCount: 4 },
   
-  // Common use cases
+
   header: { position: 'top', height: '8rem', curve: 'ease-out' },
   footer: { position: 'bottom', height: '8rem', curve: 'ease-out' },
   sidebar: { position: 'left', height: '6rem', strength: 2.5 },
   
-  // Page-level presets
+
   'page-header': { position: 'top', height: '10rem', target: 'page', strength: 3 },
   'page-footer': { position: 'bottom', height: '10rem', target: 'page', strength: 3 }
 };
 
-// Curve functions
+
 const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
   linear: (progress) => progress,
   bezier: (progress) => progress * progress * (3 - 2 * progress),
@@ -104,7 +101,7 @@ const CURVE_FUNCTIONS: Record<string, (progress: number) => number> = {
     progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
 };
 
-// Utility functions
+
 const mergeConfigs = (...configs: Partial<GradualBlurProps>[]): Partial<GradualBlurProps> => {
   return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
 };
@@ -131,7 +128,7 @@ const debounce = <T extends (...args: any[]) => void>(func: T, wait: number): (.
   };
 };
 
-// Custom hooks
+
 const useResponsiveHeight = (responsive: boolean = false, config: Partial<GradualBlurProps>) => {
   const [height, setHeight] = useState(config.height);
   
@@ -213,23 +210,23 @@ const useIntersectionObserver = (ref: React.RefObject<HTMLDivElement>, shouldObs
 };
 
 const GradualBlur: React.FC<GradualBlurProps> = (props) => {
-  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const [isHovered, setIsHovered] = useState(false);
   
-  // Merge configurations
+
   const config = useMemo(() => {
     const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
     return mergeConfigs(DEFAULT_CONFIG, presetConfig, props) as Required<GradualBlurProps>;
   }, [props]);
 
-  // Responsive height and width
+
   const responsiveHeight = useResponsiveHeight(config.responsive, config);
   const responsiveWidth = useResponsiveWidth(config.responsive, config);
 
-  // Intersection observer for scroll animations
+
   const isVisible = useIntersectionObserver(containerRef, config.animated === 'scroll');
 
-  // Memoized blur divs generation
+
   const blurDivs = useMemo(() => {
     const divs: React.ReactNode[] = [];
     const increment = 100 / config.divCount;
@@ -242,7 +239,7 @@ const GradualBlur: React.FC<GradualBlurProps> = (props) => {
       let progress = i / config.divCount;
       progress = curveFunc(progress);
       
-      // Calculate blur value
+
       let blurValue: number;
       if (config.exponential) {
         blurValue = Number(math.pow(2, progress * 4)) * 0.0625 * currentStrength;
@@ -250,13 +247,13 @@ const GradualBlur: React.FC<GradualBlurProps> = (props) => {
         blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
       }
       
-      // Calculate gradient positions
+
       const p1 = math.round((increment * i - increment) * 10) / 10;
       const p2 = math.round((increment * i) * 10) / 10;
       const p3 = math.round((increment * i + increment) * 10) / 10;
       const p4 = math.round((increment * i + increment * 2) * 10) / 10;
       
-      // Generate gradient
+
       let gradient = `transparent ${p1}%, black ${p2}%`;
       if (p3 <= 100) gradient += `, black ${p3}%`;
       if (p4 <= 100) gradient += `, transparent ${p4}%`;
@@ -284,14 +281,14 @@ const GradualBlur: React.FC<GradualBlurProps> = (props) => {
     return divs;
   }, [config, isHovered]);
 
-  // Container styles with target-aware positioning
+
   const containerStyle: CSSProperties = useMemo(() => {
     const isVertical = ['top', 'bottom'].includes(config.position);
     const isHorizontal = ['left', 'right'].includes(config.position);
     const isPageTarget = config.target === 'page';
     
     const baseStyle: CSSProperties = {
-      // Position based on target
+
       position: isPageTarget ? 'fixed' : 'absolute',
       pointerEvents: config.hoverIntensity ? 'auto' : 'none',
       opacity: isVisible ? 1 : 0,
@@ -300,7 +297,7 @@ const GradualBlur: React.FC<GradualBlurProps> = (props) => {
       ...config.style
     };
 
-    // Apply dimensions and positioning
+
     if (isVertical) {
       baseStyle.height = responsiveHeight;
       baseStyle.width = responsiveWidth || '100%';
@@ -318,7 +315,7 @@ const GradualBlur: React.FC<GradualBlurProps> = (props) => {
     return baseStyle;
   }, [config, responsiveHeight, responsiveWidth, isVisible]);
 
-  // Event handlers
+
   const handleMouseEnter = useCallback(() => {
     if (config.hoverIntensity) {
       setIsHovered(true);
@@ -331,7 +328,7 @@ const GradualBlur: React.FC<GradualBlurProps> = (props) => {
     }
   }, [config.hoverIntensity]);
 
-  // Animation complete callback
+
   useEffect(() => {
     if (isVisible && config.animated === 'scroll' && config.onAnimationComplete) {
       const timer = setTimeout(
@@ -356,7 +353,7 @@ const GradualBlur: React.FC<GradualBlurProps> = (props) => {
   );
 };
 
-// Factory function for creating instances with different targets
+
 export const createPageBlur = (props: Partial<GradualBlurProps> = {}) => {
   return <GradualBlur {...props} target="page" />;
 };
@@ -365,12 +362,12 @@ export const createParentBlur = (props: Partial<GradualBlurProps> = {}) => {
   return <GradualBlur {...props} target="parent" />;
 };
 
-// Export utilities
+
 export { PRESETS, CURVE_FUNCTIONS };
 
 export default React.memo(GradualBlur);
 
-// CSS injection function
+
 const injectStyles = () => {
   if (typeof document === 'undefined') return;
   
@@ -423,7 +420,6 @@ const injectStyles = () => {
   document.head.appendChild(styleElement);
 };
 
-// Inject styles on component mount
 if (typeof document !== 'undefined') {
   injectStyles();
 }

From a6c91f8aa6c54e3de3d9c809addcac94a7929d91 Mon Sep 17 00:00:00 2001
From: Ansh-Dhanani <dhananiansh01@gmail.com>
Date: Wed, 27 Aug 2025 09:20:29 +0530
Subject: [PATCH 12/12] dependency problem of gsap from SplitText.jsx installed

---
 package-lock.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 650db539..2a101c0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4023,7 +4023,7 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
 			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-			"devOptional": true,
+			"dev": true,
 			"dependencies": {
 				"fill-range": "^7.1.1"
 			},
@@ -5575,7 +5575,7 @@
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
 			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-			"devOptional": true,
+			"dev": true,
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
 			},
@@ -6412,7 +6412,7 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"devOptional": true,
+			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -6457,7 +6457,7 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"devOptional": true,
+			"dev": true,
 			"dependencies": {
 				"is-extglob": "^2.1.1"
 			},
@@ -6503,7 +6503,7 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"devOptional": true,
+			"dev": true,
 			"engines": {
 				"node": ">=0.12.0"
 			}
@@ -7977,7 +7977,7 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"devOptional": true,
+			"dev": true,
 			"engines": {
 				"node": ">=8.6"
 			},
@@ -9085,7 +9085,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"devOptional": true,
+			"dev": true,
 			"dependencies": {
 				"is-number": "^7.0.0"
 			},
