claude:perf(hero): enable rune canvas on phones, gate RAF on intersection + page visibility

Co-Authored-By: Claude <noreply@anthropic.com>

Author: kuco23

src/components/sections/hero.scss

@@ -24,25 +24,24 @@
 // the initial screen height so it doesn't keep growing on long pages);
 // cells inside the rune silhouette render brighter, painting the
 // Stakecore mark as a lighter ASCII shape embedded in the dimmer field.
+// Renders at every breakpoint — the RAF loop is gated by
+// IntersectionObserver + page visibility so off-screen / backgrounded
+// instances don't burn cycles on phones.
 .hero-rune-canvas {
-    display: none;
-
-    @include t.up(md) {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100vh;
-        opacity: 0.3;
-        pointer-events: none;
-        z-index: -1;
-        // Fade the lower half toward the page background so the wave
-        // dissolves into the dark body instead of cutting off at the
-        // hero's overflow edge.
-        mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
-        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
-    }
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    opacity: 0.3;
+    pointer-events: none;
+    z-index: -1;
+    // Fade the lower half toward the page background so the wave
+    // dissolves into the dark body instead of cutting off at the
+    // hero's overflow edge.
+    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
 }
 
 .hero .container {

src/components/sections/heroRuneCanvas.tsx

@@ -242,6 +242,11 @@ const HeroRuneCanvas = () => {
     let last = 0
     let raf = 0
     let ready = false
+    // RAF only runs when the canvas is in-viewport AND the tab is in
+    // the foreground. Start optimistic so we don't delay the first
+    // paint while waiting for the IntersectionObserver to fire.
+    let intersecting = true
+    let pageVisible = !document.hidden
     const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
 
     const drawFrame = () => {
@@ -261,12 +266,41 @@ const HeroRuneCanvas = () => {
       drawFrame()
     }
 
+    const startLoop = () => {
+      if (raf !== 0) return
+      if (reduceMotion || !intersecting || !pageVisible) return
+      // Reset the time-since-last so the first frame after a resume
+      // doesn't see a huge dt and jump the wave forward.
+      last = 0
+      raf = requestAnimationFrame(tick)
+    }
+
+    const stopLoop = () => {
+      if (raf === 0) return
+      cancelAnimationFrame(raf)
+      raf = 0
+    }
+
     setup()
     rasterize().then(() => {
       ready = true
       if (reduceMotion) drawFrame()
+      else startLoop()
     })
-    if (!reduceMotion) raf = requestAnimationFrame(tick)
+
+    const io = new IntersectionObserver(([entry]) => {
+      intersecting = entry.isIntersecting
+      if (intersecting) startLoop()
+      else stopLoop()
+    })
+    io.observe(canvas)
+
+    const onVisibility = () => {
+      pageVisible = !document.hidden
+      if (pageVisible) startLoop()
+      else stopLoop()
+    }
+    document.addEventListener('visibilitychange', onVisibility)
 
     const onResize = () => {
       setup()
@@ -277,7 +311,9 @@ const HeroRuneCanvas = () => {
     window.addEventListener('resize', onResize)
 
     return () => {
-      cancelAnimationFrame(raf)
+      io.disconnect()
+      document.removeEventListener('visibilitychange', onVisibility)
+      stopLoop()
       window.removeEventListener('resize', onResize)
       gl.deleteTexture(glyphTex)
       gl.deleteTexture(runeTex)