fix: smooth the homepage first render

.github/workflows/verify.yml

@@ -23,6 +23,6 @@ jobs:
       - run: npm test
       - run: npm run build
       - run: npm audit
-      - run: npx playwright install --with-deps chromium
+      - run: npx playwright install chromium
       - run: npm run test:public
       - run: npm run test:session

app/_home/home.tsx

@@ -1,3 +1,4 @@
+import { preload } from 'react-dom';
 import { getNewsletterEnabled } from '@/lib/homepage-settings';
 import { Pricing } from './pricing';
 import { Newsletter } from './newsletter';
@@ -36,7 +37,15 @@ const structuredData = {
   ],
 };
 
+const criticalFonts = [
+  '/new/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2',
+  '/new/03bda585a99c6450-s.p.32sris142tqlb.woff2',
+];
+
 export default async function HomePage() {
+  for (const href of criticalFonts) {
+    preload(href, { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' });
+  }
   const newsletterEnabled = await getNewsletterEnabled();
   return (
     <PageShell>

app/_home/interactions.tsx

@@ -72,11 +72,20 @@ export function PageShell({ children }: { children: ReactNode }) {
     const sections = [
       ...root.querySelectorAll<HTMLElement>('main > section, main > div'),
     ];
-    sections.forEach((el) => el.classList.add('new-reveal'));
+    // Sections already on screen were painted by the server; animating them
+    // now would snap them back to a faded state after hydration.
+    const initiallyVisible = (el: HTMLElement) => {
+      const box = el.getBoundingClientRect();
+      return box.top < window.innerHeight && box.bottom > 0;
+    };
+    sections.forEach((el) => {
+      if (!initiallyVisible(el)) el.classList.add('new-reveal');
+    });
     let frame = 0;
     function reveal() {
       frame = 0;
       for (const el of sections) {
+        if (!el.classList.contains('new-reveal')) continue;
         const box = el.getBoundingClientRect();
         const margin = Math.min(box.height * 0.06, window.innerHeight * 0.2);
         if (box.top < window.innerHeight - margin && box.bottom > 0) {

app/_home/new.css

@@ -370,6 +370,7 @@
 }
 .meridian-page main > section:first-child {
   padding-block: 64px;
+  animation: new-enter 0.65s ease both;
 }
 .meridian-page main > section:first-child .flex.w-max > div {
   animation: new-marquee 40s linear infinite;

app/_home/source-gradient.tsx

@@ -168,7 +168,15 @@ export function SourceGradient({ variant }: { variant: number }) {
       }}
       aria-hidden="true"
     >
-      <canvas ref={ref} style={{ width: '100%', height: '100%', opacity: 0 }} />
+      <canvas
+        ref={ref}
+        style={{
+          width: '100%',
+          height: '100%',
+          opacity: 0,
+          transition: 'opacity 0.6s ease-out',
+        }}
+      />
     </div>
   );
 }

app/layout.tsx

@@ -25,6 +25,7 @@ const editorial = Lora({
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://jonasinfocus.com'),
+  icons: { icon: '/favicon.svg' },
   alternates: { canonical: '/' },
   openGraph: {
     title: 'Jonas | Websites, SaaS & web apps',