denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add shader gradient background with halo effect

Browse Source 
- Installed @shadergradient/react, three, and @types/three
- Created ShaderGradientBackground component with custom gradient settings
- Integrated background into root layout with blur effect (120px) and reduced opacity (0.5)
- Adjusted body background to work harmoniously with shader gradient
- Used sphere type with pink/orange gradient colors (#b01040, #b04a17, #e167c5)
- Configured animation, grain, and lighting for atmospheric effect
This commit is contained in:
denshooter
2026-01-27 01:25:02 +01:00
parent 9266b22fb4
commit a814a7cab9
6 changed files with 160 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
DIRECTUS_CHECKLIST.md
View File

@@ -167,7 +167,7 @@ consent.hide | de | Ausblenden
## Collection: content_pages
Diese sind für **längere Inhalte**. Nutze den Rich-Text-Editor in Directus oder Markdown.
Diese sind für **längere Inhalte**. Nutze den Ric-Text-Editor in Directus oder Markdown.
### Home – Hero (langere Beschreibung)
- **slug**: home-hero

76
app/components/ShaderGradientBackground.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client";
import React from "react";
import { ShaderGradientCanvas, ShaderGradient } from "@shadergradient/react";
const ShaderGradientBackground = () => {
return (
<div
style={{
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
zIndex: -1,
filter: "blur(120px)",
opacity: 0.5,
pointerEvents: "none",
}}
>
<ShaderGradientCanvas
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
}}
>
<ShaderGradient
animate="on"
axesHelper="off"
brightness={1.2}
cAzimuthAngle={180}
cDistance={3.6}
cPolarAngle={90}
cameraZoom={1}
color1="#b01040"
color2="#b04a17"
color3="#e167c5"
destination="onCanvas"
embedMode="off"
envPreset="city"
format="gif"
fov={45}
frameRate={10}
gizmoHelper="hide"
grain="on"
lightType="3d"
pixelDensity={2.9}
positionX={-1.4}
positionY={0}
positionZ={0}
range="disabled"
rangeEnd={40}
rangeStart={0}
reflection={0.1}
rotationX={0}
rotationY={10}
rotationZ={50}
shader="defaults"
type="sphere"
uAmplitude={4.2}
uDensity={0.8}
uFrequency={5.5}
uSpeed={0.4}
uStrength={4.6}
uTime={0}
wireframe={false}
/>
</ShaderGradientCanvas>
</div>
);
};
export default ShaderGradientBackground;

3
app/globals.css
View File

@@ -27,7 +27,7 @@
}
body {
background-color: var(--background);
background: linear-gradient(135deg, rgba(250, 248, 243, 0.95) 0%, rgba(250, 248, 243, 0.92) 100%);
color: var(--foreground);
font-family: "Inter", sans-serif;
margin: 0;
@@ -36,6 +36,7 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
position: relative;
}
/* Custom Selection */

2
app/layout.tsx
View File

@@ -5,6 +5,7 @@ import React from "react";
import ClientProviders from "./components/ClientProviders";
import { cookies } from "next/headers";
import { getBaseUrl } from "@/lib/seo";
import ShaderGradientBackground from "./components/ShaderGradientBackground";
const inter = Inter({
variable: "--font-inter",
@@ -33,6 +34,7 @@ export default async function RootLayout({
<meta charSet="utf-8" />
</head>
<body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
<ShaderGradientBackground />
<ClientProviders>{children}</ClientProviders>
</body>
</html>

88
package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@next/bundle-analyzer": "^15.1.7",
"@prisma/client": "^5.22.0",
"@sentry/nextjs": "^10.36.0",
"@shadergradient/react": "^2.4.20",
"@tiptap/extension-color": "^3.15.3",
"@tiptap/extension-highlight": "^3.15.3",
"@tiptap/extension-link": "^3.15.3",
@@ -19,6 +20,7 @@
"@tiptap/html": "^3.15.3",
"@tiptap/react": "^3.15.3",
"@tiptap/starter-kit": "^3.15.3",
"@types/three": "^0.182.0",
"@vercel/og": "^0.6.5",
"clsx": "^2.1.1",
"dotenv": "^16.6.1",
@@ -38,6 +40,7 @@
"redis": "^5.8.2",
"sanitize-html": "^2.17.0",
"tailwind-merge": "^2.6.0",
"three": "^0.182.0",
"zod": "^4.3.5"
},
"devDependencies": {
@@ -1335,6 +1338,12 @@
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
"node_modules/@dimforge/rapier3d-compat": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
"integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
"license": "Apache-2.0"
},
"node_modules/@discoveryjs/json-ext": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -5263,6 +5272,16 @@
"webpack": ">=4.40.0"
}
},
"node_modules/@shadergradient/react": {
"version": "2.4.20",
"resolved": "https://registry.npmjs.org/@shadergradient/react/-/react-2.4.20.tgz",
"integrity": "sha512-MVYvYgTHK3d36C2jNKzt4OzWeyNyc/bWI0zKRyv5EgI2hmUee8nD0cmuNX9X1lw1RCcuof6n1Rnj63jWepZHJA==",
"license": "MIT",
"peerDependencies": {
"react": "^18.2.0 || ^19.0.0",
"react-dom": "^18.2.0 || ^19.0.0"
}
},
"node_modules/@shuding/opentype.js": {
"version": "1.4.0-beta.0",
"resolved": "https://registry.npmjs.org/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz",
@@ -6726,6 +6745,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/@tweenjs/tween.js": {
"version": "23.1.3",
"resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
"integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
"license": "MIT"
},
"node_modules/@types/aria-query": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -7094,6 +7119,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/stats.js": {
"version": "0.17.4",
"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
"integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
"license": "MIT"
},
"node_modules/@types/tedious": {
"version": "4.0.14",
"resolved": "https://registry.npmjs.org/@types/tedious/-/tedious-4.0.14.tgz",
@@ -7103,6 +7134,27 @@
"@types/node": "*"
}
},
"node_modules/@types/three": {
"version": "0.182.0",
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz",
"integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==",
"license": "MIT",
"dependencies": {
"@dimforge/rapier3d-compat": "~0.12.0",
"@tweenjs/tween.js": "~23.1.3",
"@types/stats.js": "*",
"@types/webxr": ">=0.5.17",
"@webgpu/types": "*",
"fflate": "~0.8.2",
"meshoptimizer": "~0.22.0"
}
},
"node_modules/@types/three/node_modules/fflate": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
"license": "MIT"
},
"node_modules/@types/tough-cookie": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -7121,6 +7173,12 @@
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
"license": "MIT"
},
"node_modules/@types/webxr": {
"version": "0.5.24",
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
"integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
"license": "MIT"
},
"node_modules/@types/whatwg-mimetype": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz",
@@ -7592,6 +7650,12 @@
"@xtuc/long": "4.2.2"
}
},
"node_modules/@webgpu/types": {
"version": "0.1.69",
"resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
"integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
"license": "BSD-3-Clause"
},
"node_modules/@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -13365,6 +13429,12 @@
"node": ">= 8"
}
},
"node_modules/meshoptimizer": {
"version": "0.22.0",
"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
"integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
"license": "MIT"
},
"node_modules/micromark": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -14088,17 +14158,6 @@
}
}
},
"node_modules/next-intl/node_modules/@swc/helpers": {
"version": "0.5.18",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
"integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
"license": "Apache-2.0",
"optional": true,
"peer": true,
"dependencies": {
"tslib": "^2.8.0"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -14837,7 +14896,6 @@
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
@@ -17029,6 +17087,12 @@
"node": ">=0.8"
}
},
"node_modules/three": {
"version": "0.182.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
"integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
"license": "MIT"
},
"node_modules/tiny-inflate": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",

3
package.json
View File

@@ -55,6 +55,7 @@
"@next/bundle-analyzer": "^15.1.7",
"@prisma/client": "^5.22.0",
"@sentry/nextjs": "^10.36.0",
"@shadergradient/react": "^2.4.20",
"@tiptap/extension-color": "^3.15.3",
"@tiptap/extension-highlight": "^3.15.3",
"@tiptap/extension-link": "^3.15.3",
@@ -63,6 +64,7 @@
"@tiptap/html": "^3.15.3",
"@tiptap/react": "^3.15.3",
"@tiptap/starter-kit": "^3.15.3",
"@types/three": "^0.182.0",
"@vercel/og": "^0.6.5",
"clsx": "^2.1.1",
"dotenv": "^16.6.1",
@@ -82,6 +84,7 @@
"redis": "^5.8.2",
"sanitize-html": "^2.17.0",
"tailwind-merge": "^2.6.0",
"three": "^0.182.0",
"zod": "^4.3.5"
},
"devDependencies": {