From c926620f281abcb1cbcf8aa3f3d163fb5a49e788 Mon Sep 17 00:00:00 2001 From: itsskofficial Date: Sat, 24 Oct 2026 14:30:48 +0530 Subject: [PATCH] Lay out the enter screen as one column so nothing overlaps The words, ring, quote and corner marks were each pinned in place, so on phones with browser bars the hint ran into the quote. They now sit in one flowing column: the words above and below the ring on phones and upright tablets, either side of it on laptops and landscape phones, and the quote above the corner marks or centred between them. The ring sizes itself from the screen height too. The corner ring mark blends on its spinning wrapper, which removes the black square behind it. Co-Authored-By: Claude Opus 5.5 --- components/home/Preloader.jsx | 224 +++++++++++++++++----------------- 1 file changed, 113 insertions(+), 111 deletions(-) diff --git a/components/home/Preloader.jsx b/components/home/Preloader.jsx index ab5a871..dd45ced 100644 --- a/components/home/Preloader.jsx +++ b/components/home/Preloader.jsx @@ -330,131 +330,133 @@ export default function Preloader({ onEnter }) { autoDraw() } }} - className="gutter group fixed inset-0 z-[100] touch-none select-none bg-ink text-paper outline-none" + className="group fixed inset-0 z-[100] touch-none select-none bg-ink text-paper outline-none" style={phase === "leaving" ? { WebkitMaskImage: mask, maskImage: mask } : undefined} > - {/* the ghost enso: traces itself while loading, brightens as the visitor's circle comes round */} -
-
- - - {phase === "loading" && ( - - {String(count).padStart(3, "0")} - - )} - -
-
- - {/* the ink */} - - + {/* + * One column, so nothing can overlap at any size: the middle holds the words and the ring, + * the bottom holds the quote and the corner marks. Phones and upright tablets stack the words + * above and below the ring; laptops and phones held sideways put them either side of it. + */} - {/* the words: Draw the circle on the left of the ring, the hint on its right */} - - {ready && ( - +
+ -
- {/* "Draw the circle": above the ring on narrow screens, to its left on wide or short ones */} -

- Draw the circle -

- {/* the hint: below the ring on narrow screens, to its right on wide or short ones */} -
- + + {/* the ghost enso: traces itself while loading, brightens as the visitor's circle comes round */} +
+ + + {phase === "loading" && ( + - {hint} - -
-
- - )} - - - {/* the quote at the bottom: above the bottom row on phones, centred in it on wide screens */} - -
- “Nature is an infinite sphere whose center is everywhere and whose circumference is nowhere.” -
-
Blaise Pascal
- - - {/* bottom: the mark, and the sound state */} -
-
- - + {String(count).padStart(3, "0")} + + )} + +
+ +
+ {ready && ( + + {hint} + + )} +
+
+
+ + {/* the bottom: quote above the corner marks on narrow screens, centred between them on wide ones */} +
+ +
+ “Nature is an infinite sphere whose center is everywhere and whose circumference is nowhere.” +
+
Blaise Pascal
+ + +
+
+ {/* the blend sits on the spinning wrapper: a transformed element only blends with what is inside it */} + + + + Existence +
+ + + {soundOn ? "Sound on" : "Sound off"} - Existence
- - - {soundOn ? "Sound on" : "Sound off"} -
+ + {/* the ink, above everything else on the screen */} + {/* the ring on the iris edge; outside the mask so the mask cannot hide it */}