github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Mobile nebula: keep left monitor + parallax, glide-and-fade with the hero

Browse Source 
A phone has no left gutter like desktop, and the nebula was position:fixed, so
scrolling slid the text up into the pinned monitor (overlap + jumps). Keep the
monitor to the left of the title and keep the parallax, but on mobile the field
glides up and out with the hero (slower-than-scroll lag for depth) and fades as it
leaves, so it never crosses the content below. Only the monitor/streamer layer
fades; the base gradient stays. Extra top room (pt-44) keeps it clear of the header
at rest. Desktop unchanged.

Dials: yRangeMobile (parallax), heroOpacity range (fade), pt-44 (top room).
This commit is contained in:
jwinterm
2026-06-07 08:05:34 -04:00
parent dd6943c7e8
commit 673d07a00e
2 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/page.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export default function Home() {
<HomeShell>
<div
id="main-content"
className="z-10 w-full max-w-7xl mx-auto flex flex-col items-center pt-32 pb-10 px-4 text-center scroll-mt-28"
className="z-10 w-full max-w-7xl mx-auto flex flex-col items-center pt-44 sm:pt-32 pb-10 px-4 text-center scroll-mt-28"
>
<h1
id="hero-title"