From 80a5596b1169d946ba76290df5e8afa63a66d077 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Sun, 22 Mar 2026 16:13:08 +0800
Subject: [PATCH] perf(hero): pause animations when hero scrolls out of view

Uses IntersectionObserver to toggle an .offscreen class on the hero
element, which sets animation-play-state: paused on the sheen, noise,
and scroll-cue animations. Avoids unnecessary GPU work while the hero
is not visible.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/main.js   | 10 ++++++++++
 website/static/style.css |  6 ++++++
 2 files changed, 16 insertions(+)

diff --git a/website/static/main.js b/website/static/main.js
index 83d5be04..da58fe22 100644
--- a/website/static/main.js
+++ b/website/static/main.js
@@ -41,6 +41,16 @@ function initRevealSections() {
 
 initRevealSections();
 
+// Pause hero animations when scrolled out of view
+(function () {
+  var hero = document.querySelector('.hero');
+  if (!hero || !('IntersectionObserver' in window)) return;
+  var observer = new IntersectionObserver(function (entries) {
+    hero.classList.toggle('offscreen', !entries[0].isIntersecting);
+  });
+  observer.observe(hero);
+})();
+
 // Relative time formatting
 function relativeTime(isoStr) {
   var date = new Date(isoStr);
diff --git a/website/static/style.css b/website/static/style.css
index efc2afb2..17cd5fc6 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -152,6 +152,12 @@ kbd {
   animation: sheen-drift 18s linear infinite;
 }
 
+.hero.offscreen .hero-sheen,
+.hero.offscreen .hero-noise,
+.hero.offscreen .hero-scrollcue::after {
+  animation-play-state: paused;
+}
+
 .hero-noise {
   opacity: 0.1;
   background-image: