claude:design: invert hero canvas — full-viewport field, brighter rune, gradient-faded edges

Reworks the HeroRuneCanvas from a small centered sprite into a
full-screen ASCII wave with the Stakecore mark embedded as a
brighter silhouette. Five linked changes:

1. Canvas geometry (hero.scss). The .hero-rune-canvas now spans
   `position: absolute; top: 0; left: 0; width: 100%; height: 100vh`
   instead of a 360-480px centered square. Still hidden below md
   to spare mobile devices the work.

2. Inverted colouring (hero.tsx drawFrame). Previously the wave
   only modulated cells INSIDE the rune silhouette; now every cell
   participates and the silhouette flips the fillStyle: cells
   outside the mark render in the original #6B6B6B gray, cells
   inside switch to #FFFFFF, so the rune reads as a lighter ASCII
   shape embedded in a dimmer field. Drawn as two passes per frame
   to keep fillStyle constant within each pass.

3. Aspect-preserving rune sprite (hero.tsx rasterize). With the
   canvas now full-viewport, blindly drawing the SVG into the full
   `cols × rows` buffer would stretch the mark horizontally on
   landscape (and squish it on portrait). Instead, rasterize into
   a centred sprite sized at 55% of the shorter grid axis,
   preserving the 340:380 SVG aspect ratio.

4. Top + bottom gradient fade. CSS mask-image
   `linear-gradient(to bottom, transparent 0%, black 25%, black 75%,
   transparent 100%)` keeps the middle 50% of the canvas (where the
   rune sits) at full opacity and softly fades both the top and
   bottom edges into the page background, so the wave doesn't cut
   off hard at the hero's overflow boundary.

5. Wave-speed dial-down (hero.tsx tick). Per-frame phase increment
   drops from `dt * 0.003` to `dt * 0.002` — wave advances ~33%
   slower. Frame rate (12fps throttle) unchanged.

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

Author: kuco23

src/components/sections/hero.scss

@@ -21,29 +21,28 @@
     @include t.up(lg) { padding: 140px 0 64px; }
 }
 
-// Fixed-grid ASCII display. Per-cell intensity = base sampled from the
-// rune SVG + a radial sine wave breathing outward. The rune is drawn as
-// dense glyphs; the wave makes everything pulse. No CSS mask needed —
-// the rune shape comes from the grid itself.
+// Fixed-grid ASCII display. The wave fills the full viewport (capped at
+// 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.
 .hero-rune-canvas {
     display: none;
 
     @include t.up(md) {
         display: block;
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 360px;
-        height: 360px;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
         opacity: 0.3;
         pointer-events: none;
         z-index: -1;
-    }
-
-    @include t.up(lg) {
-        width: 480px;
-        height: 480px;
+        // 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%);
     }
 }
 

src/components/sections/hero.tsx

@@ -115,23 +115,40 @@ const HeroRuneCanvas = () => {
       cy = rows / 2
     }
 
-    // Rasterize the rune SVG into an offscreen canvas at grid resolution,
-    // then read alpha-weighted luminance as the per-cell base intensity.
+    // Rasterize the rune SVG into a centered region of the grid so the
+    // wave can fill the full viewport without stretching the mark.
+    // Target ~40% of the shorter grid dimension; preserve SVG aspect
+    // (340 × 380); clamp + centre so the mark sits at the visual middle.
+    const SVG_ASPECT = 340 / 380
     const rasterize = () => new Promise<Float32Array>((resolve) => {
+      const arr = new Float32Array(cols * rows)
       const img = new Image()
       img.onload = () => {
+        // Sprite size in cells. Tied to the shorter grid axis so portrait
+        // and landscape viewports both show a centred, well-proportioned
+        // rune (not a stretched-to-edges blob).
+        const minor = Math.min(cols, rows)
+        let runeH = Math.max(20, Math.round(minor * 0.55))
+        let runeW = Math.round(runeH * SVG_ASPECT)
+        if (runeW > cols) {
+          runeW = cols
+          runeH = Math.round(runeW / SVG_ASPECT)
+        }
         const off = document.createElement('canvas')
-        off.width = cols
-        off.height = rows
+        off.width = runeW
+        off.height = runeH
         const octx = off.getContext('2d')
-        if (!octx) { resolve(new Float32Array(cols * rows)); return }
-        octx.drawImage(img, 0, 0, cols, rows)
-        const data = octx.getImageData(0, 0, cols, rows).data
-        const arr = new Float32Array(cols * rows)
-        for (let i = 0; i < cols * rows; i++) {
-          const r = data[i * 4]
-          const a = data[i * 4 + 3]
-          arr[i] = (r / 255) * (a / 255)
+        if (!octx) { resolve(arr); return }
+        octx.drawImage(img, 0, 0, runeW, runeH)
+        const data = octx.getImageData(0, 0, runeW, runeH).data
+        const xOffset = Math.floor((cols - runeW) / 2)
+        const yOffset = Math.floor((rows - runeH) / 2)
+        for (let y = 0; y < runeH; y++) {
+          for (let x = 0; x < runeW; x++) {
+            const r = data[(y * runeW + x) * 4]
+            const a = data[(y * runeW + x) * 4 + 3]
+            arr[(y + yOffset) * cols + (x + xOffset)] = (r / 255) * (a / 255)
+          }
         }
         resolve(arr)
       }
@@ -143,28 +160,32 @@ const HeroRuneCanvas = () => {
       ctx.fillStyle = '#000'
       ctx.fillRect(0, 0, w, h)
       ctx.font = `${cellSize}px 'Roboto Mono', ui-monospace, monospace`
-      ctx.fillStyle = '#6B6B6B'
       ctx.textBaseline = 'top'
 
-      for (let y = 0; y < rows; y++) {
-        for (let x = 0; x < cols; x++) {
-          // Cells outside the rune silhouette never render — the wave
-          // only modulates the brightness of cells where the SVG alpha
-          // mask said "inside".
-          const b = base[y * cols + x]
-          if (b < 0.05) continue
-          const dx = x - cx
-          const dy = y - cy
-          const dist = Math.sqrt(dx * dx + dy * dy)
-          // Two-octave radial wave for organic pulsing.
-          const wave =
-            0.5 + 0.5 * Math.sin(dist * 0.42 - phase) * 0.7
-            + 0.5 * Math.sin(dist * 0.18 - phase * 0.6) * 0.3
-          const intensity = b * 0.65 + wave * 0.35
-          const idx = Math.min(RAMP.length - 1, Math.floor(intensity * RAMP.length))
-          const c = RAMP[idx]
-          if (c === ' ') continue
-          ctx.fillText(c, x * cellSize, y * cellSize)
+      // Inverted layout: every cell renders the radial wave glyph; cells
+      // inside the rune silhouette use a brighter colour, so the mark
+      // appears as a lighter ASCII silhouette embedded in the dimmer
+      // field. Two passes keep fillStyle constant per pass.
+      for (let pass = 0; pass < 2; pass++) {
+        ctx.fillStyle = pass === 0 ? '#6B6B6B' : '#FFFFFF'
+        const wantInside = pass === 1
+        for (let y = 0; y < rows; y++) {
+          for (let x = 0; x < cols; x++) {
+            const b = base[y * cols + x]
+            const inside = b > 0.05
+            if (inside !== wantInside) continue
+            const dx = x - cx
+            const dy = y - cy
+            const dist = Math.sqrt(dx * dx + dy * dy)
+            // Two-octave radial wave for organic pulsing.
+            const wave =
+              0.5 + 0.5 * Math.sin(dist * 0.42 - phase) * 0.7
+              + 0.5 * Math.sin(dist * 0.18 - phase * 0.6) * 0.3
+            const idx = Math.min(RAMP.length - 1, Math.floor(wave * RAMP.length))
+            const c = RAMP[idx]
+            if (c === ' ') continue
+            ctx.fillText(c, x * cellSize, y * cellSize)
+          }
         }
       }
     }
@@ -188,7 +209,7 @@ const HeroRuneCanvas = () => {
       if (t - last < 80) return
       const dt = last === 0 ? 16 : t - last
       last = t
-      phase += dt * 0.003
+      phase += dt * 0.002
       drawFrame(phase)
     }
     if (!reduceMotion) raf = requestAnimationFrame(tick)