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:
jwinterm
2026-06-07 15:44:09 -04:00
parent f3607a28d1
commit a2955b4102
2 changed files with 15 additions and 6 deletions
+11 -5
View File
@@ -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; } }
+4 -1
View File
@@ -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}
/> />
))} ))}