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 LCP: render splash logo as <img> (valid LCP element); faster blended transition; recenter tracer

Browse Source 
- Inline <svg> is not an LCP candidate; on mobile the tagline is hidden so the
  logo was the only large element -> NO_LCP. Serve the mark as
  /images/branding/splash-such.svg and render it via <img> (a valid LCP
  candidate, painted from SSR HTML).
- Transition: start the cross-fade on click (shimmer plays as the splash fades
  into the content) and shorten durations 1.2s -> 0.8s; snappier and blended.
- Tracer target back to the midpoint (computerX+0.5, computerY+0.5).
This commit is contained in:
jwinterm
2026-06-06 18:05:33 -04:00
parent ea012b63fe
commit c85383eff2
3 changed files with 41 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/procedural/nebula-field.tsx
+5 -4
View File
@@ -92,10 +92,11 @@ export const NebulaField = ({ className, density = 8, themeMode = 'dark', positi
// Position calculations
const computerX = position?.x ?? 18;
const computerY = position?.y ?? 18;
// Aim the streamers at the monitor's screen: slightly up-and-left of the icon's
// geometric center. Tweak these two offsets to move the convergence point.
const targetX = computerX - 1;
const targetY = computerY - 1.5;
// Aim the streamers at the monitor's screen. +2.5 hit low-and-right; -1/-1.5 hit
// high-and-left, so this is the midpoint. Tweak these two offsets to move the
// convergence point.
const targetX = computerX + 0.5;
const targetY = computerY + 0.5;
// Check for reduced motion preference
useEffect(() => {