Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cd72c8c

Browse files
Merge pull request #425 from Ansh-dhanani/main
Gradual blur added
2 parents 6fbf07d + a6c91f8 commit cd72c8c

File tree

12 files changed

+2142
-1
lines changed

12 files changed

+2142
-1
lines changed

‎package-lock.json

Lines changed: 100 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"preview": "vite preview"
1717
},
1818
"dependencies": {
19+
"@chakra-ui/icons": "^2.2.4",
1920
"@chakra-ui/react": "^3.20.0",
2021
"@emotion/react": "^11.14.0",
2122
"@gsap/react": "^2.1.2",
@@ -28,6 +29,7 @@
2829
"gsap": "^3.13.0",
2930
"lenis": "^1.3.5",
3031
"maath": "^0.10.8",
32+
"mathjs": "^14.6.0",
3133
"matter-js": "^0.20.0",
3234
"meshline": "^3.3.1",
3335
"motion": "^12.23.12",

‎src/constants/Categories.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Highlighted sidebar items
2-
export const NEW = ['Prismatic Burst', 'Gradient Blinds', 'Bubble Menu', 'Electric Border', 'Plasma', 'Prism', 'Logo Loop', 'Card Nav', 'Pill Nav', 'Target Cursor'];
2+
export const NEW = ['Gradual Blur','Prismatic Burst', 'Gradient Blinds', 'Bubble Menu', 'Electric Border', 'Plasma', 'Prism', 'Logo Loop', 'Card Nav', 'Pill Nav', 'Target Cursor'];
33
export const UPDATED = [];
44

55
// Used for main sidebar navigation
@@ -43,6 +43,7 @@ export const CATEGORIES = [
4343
{
4444
name: 'Animations',
4545
subcategories: [
46+
'Gradual Blur',
4647
'Animated Content',
4748
'Fade Content',
4849
'Electric Border',

‎src/constants/Components.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const getStarted = {
55
}
66

77
const animations = {
8+
'gradual-blur': () => import("../demo/Animations/GradualBlurDemo"),
89
'blob-cursor': () => import("../demo/Animations/BlobCursorDemo"),
910
'animated-content': () => import("../demo/Animations/AnimatedContentDemo"),
1011
'magnet': () => import("../demo/Animations/MagnetDemo"),
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { generateCliCommands } from '@/utils/utils';
2+
3+
import code from '@content/Animations/GradualBlur/GradualBlur.jsx?raw';
4+
import tailwind from '@tailwind/Animations/GradualBlur/GradualBlur.jsx?raw';
5+
import tsCode from '@ts-default/Animations/GradualBlur/GradualBlur.tsx?raw';
6+
import tsTailwind from '@ts-tailwind/Animations/GradualBlur/GradualBlur.tsx?raw';
7+
8+
export const gradualBlur = {
9+
...(generateCliCommands('Animations/GradualBlur')),
10+
Installation: `npm install gradualblur mathjs`,
11+
usage: `
12+
13+
import GradualBlur from 'gradualblur'
14+
15+
<GradualBlur
16+
position="bottom"
17+
strength={2}
18+
height="7rem"
19+
divCount={5}
20+
exponential={true}
21+
opacity={1}
22+
target="page"
23+
>
24+
<div>
25+
<p style={{ margin: '6px 0 0', opacity: 0.8 }}>
26+
</p>
27+
</div>
28+
</GradualBlur>`,
29+
code,
30+
tailwind,
31+
tsCode,
32+
tsTailwind
33+
}
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.gradual-blur-inner {
2+
position: relative;
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
/* Ensure backdrop-filter works with proper browser prefixes */
8+
.gradual-blur-inner > div {
9+
-webkit-backdrop-filter: inherit;
10+
backdrop-filter: inherit;
11+
}
12+
13+
/* Ensure proper rendering for the blur effect */
14+
.gradual-blur {
15+
isolation: isolate;
16+
}
17+
18+
/* Fallback for browsers that don't support backdrop-filter */
19+
@supports not (backdrop-filter: blur(1px)) {
20+
.gradual-blur-inner > div {
21+
background: rgba(0, 0, 0, 0.3);
22+
opacity: 0.5;
23+
}
24+
}
25+
26+
/* Fix for parent container positioning */
27+
.gradual-blur-fixed {
28+
position: fixed !important;
29+
top: 0;
30+
left: 0;
31+
right: 0;
32+
bottom: 0;
33+
pointer-events: none;
34+
z-index: 1000;
35+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /