Joururi/joururi-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unified spotlight and shape

Browse Source
This commit is contained in:
Alexis
2024-08-07 13:42:05 +02:00
parent 7cdc4eb287
commit cf561d2c88
1 changed files with 5 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/index.astro
View File

@@ -24,13 +24,9 @@ import Layout from '../layouts/Layout.astro';
</div> </div>
<div class="absolute inset-0 -z-30 isolate"> <div class="absolute inset-0 -z-30 isolate">
<div id="spotlight-filter"></div>
<div id="spotlight" class="bg-gradient-to-tr from-lime-500 from-35% via-green-500 via-70% to-emerald-500 to-100% opacity-50"></div>
</div>
<div class="absolute inset-0 -z-20 isolate">
<div id="shape-filter"></div> <div id="shape-filter"></div>
<div id="shape" class="bg-gradient-to-tr from-emerald-500 from-35% via-indigo-500 via-70% to-fuchsia-500 to-100% opacity-20"></div> <div id="shape" class="bg-gradient-to-tr from-emerald-500 from-35% via-indigo-500 via-70% to-fuchsia-500 to-100% opacity-20"></div>
<div id="spotlight" class="bg-gradient-to-tr from-lime-500 from-35% via-green-500 via-70% to-emerald-500 to-100% opacity-40"></div>
</div> </div>
<div <div
@@ -67,14 +63,14 @@ if (shape || spotlight) {
shape.animate({ shape.animate({
left: `${clientX}px`, left: `${clientX}px`,
top: `${clientY}px` top: `${clientY}px`
}, { duration: 1500, fill: "forwards" }) }, { duration: 2500, fill: "forwards" })
} }
if (spotlight) { if (spotlight) {
spotlight.animate({ spotlight.animate({
left: `calc(33% + ${clientX / 3}px)`, left: `calc(33% + ${clientX / 3}px)`,
top: `calc(33% + ${clientY / 3}px)` top: `calc(33% + ${clientY / 3}px)`
}, { duration: 1500, fill: "forwards" }) }, { duration: 2500, fill: "forwards" })
} }
}, { passive: true }) }, { passive: true })
} }
@@ -97,13 +93,12 @@ if (shape || spotlight) {
} }
} }
#shape-filter, #shape-filter {
#spotlight-filter {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
backdrop-filter: blur(12vmax); backdrop-filter: blur(10vmax);
} }
#shape, #shape,