ben/Squiggleverse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance space backdrop and star layer effects with improved positioning and parallax adjustments

Browse Source
This commit is contained in:
ben
2026-07-09 10:03:08 -07:00
parent 3cb3f3c015
commit 0c69b1fe0e
1 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+26 -10
View File
@@ -62,12 +62,12 @@ a {
.space-backdrop::after, .space-backdrop::after,
.star-layer { .star-layer {
pointer-events: none; pointer-events: none;
position: absolute;
inset: 0; inset: 0;
z-index: -1; z-index: -1;
} }
.space-backdrop { .space-backdrop {
position: fixed;
overflow: hidden; overflow: hidden;
background: background:
radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.2), transparent 23rem), radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.2), transparent 23rem),
@@ -79,18 +79,20 @@ a {
.space-backdrop::before { .space-backdrop::before {
content: ''; content: '';
position: absolute;
inset: -16svh -8vw; inset: -16svh -8vw;
background: background:
radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.22), transparent 28rem), radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.22), transparent 28rem),
radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.18), transparent 24rem), radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.18), transparent 24rem),
radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.44), transparent 35rem); radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.44), transparent 35rem);
filter: blur(18px); filter: blur(18px);
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.08), 0); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0);
will-change: transform; will-change: transform;
} }
.space-backdrop::after { .space-backdrop::after {
content: ''; content: '';
position: absolute;
opacity: 0.2; opacity: 0.2;
background-image: background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
@@ -100,6 +102,7 @@ a {
} }
.star-layer { .star-layer {
position: absolute;
inset: -18svh -10vw; inset: -18svh -10vw;
background-repeat: repeat; background-repeat: repeat;
transform-origin: center top; transform-origin: center top;
@@ -120,7 +123,7 @@ a {
9rem 11rem, 9rem 11rem,
13rem 17rem, 13rem 17rem,
19rem 23rem; 19rem 23rem;
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.1), 0); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0);
} }
.star-layer-far { .star-layer-far {
@@ -137,7 +140,7 @@ a {
17rem 19rem, 17rem 19rem,
23rem 29rem, 23rem 29rem,
31rem 37rem; 31rem 37rem;
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.24), 0);
} }
.star-layer-near { .star-layer-near {
@@ -154,7 +157,7 @@ a {
24rem 31rem, 24rem 31rem,
36rem 42rem, 36rem 42rem,
19rem 23rem; 19rem 23rem;
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.28), 0); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.48), 0);
} }
.hero { .hero {
@@ -302,25 +305,38 @@ a {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.space-backdrop {
background:
radial-gradient(circle at 50% -4%, rgba(170, 132, 232, 0.1), transparent 17rem),
radial-gradient(ellipse at 6% 42%, rgba(76, 10, 130, 0.11), transparent 18rem),
radial-gradient(ellipse at 94% 48%, rgba(56, 5, 107, 0.1), transparent 19rem),
radial-gradient(ellipse at 50% 86%, rgba(89, 0, 151, 0.16), transparent 27rem),
linear-gradient(180deg, #020007 0%, #03000a 30%, #060011 58%, #0d001d 82%, #020007 100%);
}
.space-backdrop::before { .space-backdrop::before {
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.05), 0); background:
radial-gradient(ellipse at 8% 32%, rgba(95, 35, 154, 0.08), transparent 18rem),
radial-gradient(ellipse at 92% 34%, rgba(82, 38, 145, 0.07), transparent 17rem),
radial-gradient(ellipse at 52% 86%, rgba(102, 0, 176, 0.12), transparent 25rem);
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.12), 0);
} }
.star-layer { .star-layer {
inset: -10svh -18vw; inset: -16svh -20vw;
} }
.star-layer-far { .star-layer-far {
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.08), 0); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.2), 0);
} }
.star-layer-dust { .star-layer-dust {
opacity: 0.68; opacity: 0.68;
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.06), 0); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.12), 0);
} }
.star-layer-near { .star-layer-near {
transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0); transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.38), 0);
} }
.hero { .hero {