mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-19 05:48:33 +02:00
Splash logo: drop framer wrapper + CSS filter (cleaner LCP); nudge tracer
- Logo is a plain <img fetchPriority=high> in a plain div (no framer-motion, no drop-shadow filter) so it is a clean, statically-painted LCP candidate. Water filter + a CSS zoom apply only on enter. - Tracer target nudged to computerX/Y +1.5 (between the low-right +2.5 and the high-left +0.5).
This commit is contained in:
@@ -104,18 +104,19 @@ export function HeroSplash({ onEnter, sectionRef, leaving }: { onEnter: () => vo
|
||||
className="pointer-events-none absolute h-[120%] w-[120%] rounded-full bg-[radial-gradient(circle,rgba(34,211,238,0.2),transparent_65%)] motion-safe:animate-pulse"
|
||||
style={{ animationDuration: "4.5s" }}
|
||||
/>
|
||||
<motion.div
|
||||
{/* Plain div, no framer: keeps the logo (the LCP element) a clean,
|
||||
statically-painted image. The water filter + zoom only apply on enter. */}
|
||||
<div
|
||||
className={entering ? "splash-zoom" : undefined}
|
||||
style={{ filter: entering ? "url(#splash-water)" : undefined }}
|
||||
initial={{ opacity: 1, scale: 1 }}
|
||||
animate={entering ? { scale: [1, 1.06, 1.14] } : undefined}
|
||||
transition={entering ? { duration: 0.8, ease: "easeInOut" } : undefined}
|
||||
>
|
||||
<img
|
||||
src="/images/branding/splash-such.svg"
|
||||
alt="Such Software"
|
||||
className="h-auto w-[min(72vw,42vh)] drop-shadow-[0_0_40px_rgba(34,211,238,0.25)]"
|
||||
fetchPriority="high"
|
||||
className="h-auto w-[min(72vw,42vh)]"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Cover text hidden on mobile (logo + corner icons carry it there); fades out on enter */}
|
||||
|
||||
Reference in New Issue
Block a user