mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
Nebula: fatten mobile streamers (undo aspect-squish), fade out the cursor
- Streamers were rendering and hitting the monitor but invisible on phones: preserveAspectRatio=none squishes the stroke horizontally on a narrow viewport, so 0.12 went sub-pixel. Fatten 2.5x on mobile so they actually show. - Terminal cursor now types 'such', backspaces, blinks ~6 times, then fades out completely instead of blinking forever (it was distracting).
This commit is contained in:
@@ -245,13 +245,19 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 0;
|
width: 0;
|
||||||
border-right: 1.5px solid currentColor;
|
border-right: 1.5px solid currentColor;
|
||||||
animation: nebula-type 5s steps(4, end) forwards, nebula-caret 0.9s steps(1, end) infinite;
|
/* type "such", hold, backspace (nebula-type, once); blink a finite number of times
|
||||||
|
(nebula-caret); then fade the whole thing out so it stops being distracting. */
|
||||||
|
animation:
|
||||||
|
nebula-type 3s steps(4, end) forwards,
|
||||||
|
nebula-caret 0.8s steps(1, end) 10,
|
||||||
|
nebula-term-out 0.6s ease-in 7.4s forwards;
|
||||||
}
|
}
|
||||||
@keyframes nebula-type {
|
@keyframes nebula-type {
|
||||||
0% { width: 0; }
|
0% { width: 0; }
|
||||||
16% { width: 4ch; }
|
27% { width: 4ch; }
|
||||||
60% { width: 4ch; }
|
67% { width: 4ch; }
|
||||||
74% { width: 0; }
|
87% { width: 0; }
|
||||||
100% { width: 0; }
|
100% { width: 0; }
|
||||||
}
|
}
|
||||||
@keyframes nebula-caret { 50% { border-color: transparent; } }
|
@keyframes nebula-caret { 0%, 50% { border-color: currentColor; } 50.01%, 100% { border-color: transparent; } }
|
||||||
|
@keyframes nebula-term-out { to { opacity: 0; } }
|
||||||
@@ -284,7 +284,10 @@ export const NebulaField = ({ className, density = 8, themeMode = 'dark', positi
|
|||||||
d={d}
|
d={d}
|
||||||
themeMode={themeMode}
|
themeMode={themeMode}
|
||||||
onHit={handleHit}
|
onHit={handleHit}
|
||||||
width={themeMode === 'light' ? 0.08 : 0.12}
|
// preserveAspectRatio="none" squishes the stroke horizontally on a narrow
|
||||||
|
// phone, so the thin lines render sub-pixel and vanish. Fatten them on
|
||||||
|
// mobile to compensate (dial: the 2.5x factor).
|
||||||
|
width={(themeMode === 'light' ? 0.08 : 0.12) * (isMobile ? 2.5 : 1)}
|
||||||
index={i}
|
index={i}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user