히어로와 파이프라인이 같은 씬을 쓰던 것을 나눈다

게이트 씬을 파이프라인으로 옮기면서 히어로에도 남겨뒀더니 같은 그림이
페이지에 두 번 나왔다. 역할이 다르면 씬도 달라야 한다.

  히어로     shader-plane 흐름 필드   노이즈를 두 번 접어 빛의 결을 만든다
                                      공간을 만드는 재질. 아무것도 반응 안 한다
  파이프라인 gate-scene 유리판 여섯   통과하면 그 단계가 켜진다. 주인공
  재료       shader-plane 스테이지    필터 타일이 앉는 무대

히어로에는 무거운 씬을 임포트하지 않는다 — three.md §0 대로 셰이더 플레인 하나다.
lib/hero-scene.ts -> lib/gate-scene.ts 로 리네임했다. 이름이 용도와 다르면
다음 사람이 히어로 것인 줄 알고 고친다.

대비 실측: 캔버스 배경 최악 8.46:1(가장 밝은 중앙 여백), h1 자리 14.83:1.
readPixels 로 재려다 전부 0 이 나왔다 — preserveDrawingBuffer: false 면
버퍼가 비어 있다. 스크린샷 픽셀로 쟀고, 글자 없는 영역만 골랐다.

스킬 three.md
  씬을 두 자리에 재사용하지 마라. 역할(주인공/재질/무대)로 나눠라
  파일 이름을 용도와 맞춰라
  WebGL 위 대비는 readPixels 가 아니라 스크린샷 픽셀로 잰다.
  0 을 검정으로 착각하면 대비가 통과한 것처럼 보인다

apps/site/src/components/Pipeline.astro

@@ -222,7 +222,7 @@ const { c } = Astro.props;
 
 <script>
   // 게이트를 통과할 때 해당 단계를 켠다. 값이 바뀔 때만 DOM 을 쓴다.
-  import { mountHeroScene } from "../lib/hero-scene";
+  import { mountGateScene } from "../lib/gate-scene";
 
   const canvas = document.getElementById("pipeline-canvas") as HTMLCanvasElement | null;
   const section = document.getElementById("pipeline");
@@ -230,7 +230,7 @@ const { c } = Astro.props;
 
   if (canvas && section && stops.length) {
     let last = -1;
-    mountHeroScene({
+    mountGateScene({
       canvas,
       accentVar: "--accent",
       glowVar: "--glow-2",