히어로를 국소 레퍼런스로 다시 잡고, 국소 경로에 1′ 단계를 넣는다

히어로를 고치면서 레퍼런스를 다시 보지 않았다. lusion 하나에서 얻은
원리만 들고 판 폭과 액자 비율을 네 번 고쳤다 — 전부 계산이지 근거가 아니었다.

국소 레퍼런스 실측
  lusion.co         3D 가 첫 화면의 71%, h1 36px, 텍스트는 캔버스 위
  basement.studio   3D 가 100%, h1 87px 은 캔버스 아래(y=916)
  railway.com       h1 54px 1줄, 미디어는 그 아래
  우리(고치기 전)   3D 52% / 텍스트 43% — 둘 다 어중간

셋 다 3D 와 텍스트를 세로로 분리하고 3D 에 70% 이상을 준다.
CTA 가 첫 화면에 있어야 하므로 basement 형이 아닌 lusion 비율을 택했다.
현행 텍스트 24% / 액자 59%, 링크는 액자 캡션 줄로 내렸다.

3D 형태
  판 15x6 으로 액자 비율과 일치시켰다. 좁으면 통과 내내 좌우 테두리가
  남아 세로 기둥으로 보이고, 낮으면 액자 경계와 겹쳐 이중선이 된다
  sway 를 0.16+0.05i 로 되돌렸다. 키우니 문이 아니라 쌓아둔 사각형이 됐다
  모바일 액자 4/3 -> 1/1 (화면의 27% -> 36%)

스킬
  SKILL.md 0단계: 연장·국소 경로에 1′(국소 레퍼런스 1개) 추가.
  design.md 는 방향과 토큰까지만 답하고 형태를 답하지 않는다. 그 빈칸을
  메우는 것이 기본값이고 기본값의 총합이 슬롭이다. galleries.md 의
  국소 브리프 표에 진입점이 없던 것을 연결했다

apps/site/src/components/Hero.astro

@@ -31,9 +31,6 @@ const { c, ui } = Astro.props;
         copiedLabel={ui.copied}
         note={c.installNote}
       />
-      <p class="hero-links">
-        {c.links.map((l) => <a class="link-grow" href={l.href}>{l.label}</a>)}
-      </p>
     </div>
   </div>
 
@@ -52,7 +49,12 @@ const { c, ui } = Astro.props;
         <span class="ro-state" id="ro-state">{c.stage.pass}</span>
       </p>
     </div>
-    <figcaption>{c.stage.caption}</figcaption>
+    <figcaption>
+      <span class="cap-text">{c.stage.caption}</span>
+      <span class="cap-links">
+        {c.links.map((l) => <a class="link-grow" href={l.href}>{l.label}</a>)}
+      </span>
+    </figcaption>
   </figure>
 </section>
 
@@ -69,8 +71,11 @@ const { c, ui } = Astro.props;
     padding-inline: var(--space-4);
     display: grid;
     grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
-    gap: var(--space-6);
-    align-items: start;
+    gap: var(--space-5) var(--space-6);
+    /* 왼쪽 열은 h1 하나(2줄), 오른쪽은 셋이라 높이가 100px 차이 난다.
+       start 나 end 로 붙이면 그 차이가 한쪽에 몰려 구멍으로 보인다.
+       가운데로 두면 위아래로 갈려 여백으로 읽힌다. */
+    align-items: center;
     margin-bottom: var(--space-5);
   }
 
@@ -110,7 +115,7 @@ const { c, ui } = Astro.props;
 
   .stage-frame {
     position: relative;
-    aspect-ratio: 16 / 5.5;
+    aspect-ratio: 16 / 6;
     border: 1px solid var(--glass-edge);
     border-radius: var(--radius-frame);
     background: var(--surface-sunken);
@@ -167,15 +172,23 @@ const { c, ui } = Astro.props;
   }
 
   figcaption {
-    margin-top: var(--space-3);
+    margin-top: var(--space-2);
     font-size: var(--step-0);
     color: var(--ink-muted);
-    max-width: var(--measure);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--space-3) var(--space-5);
   }
+  .cap-text { max-width: var(--measure); }
+  .cap-links { display: flex; gap: var(--space-4); flex: none; }
 
   @media (max-width: 900px) {
     .hero-head { grid-template-columns: 1fr; gap: var(--space-5); }
-    .stage-frame { aspect-ratio: 4 / 3; }
+    /* 4/3 이면 320px 에서 액자가 193px, 화면의 27% 다. 데스크톱이 56% 인데
+       모바일에서만 3D 가 조연이 될 이유가 없다. 정사각으로 36% 를 준다. */
+    .stage-frame { aspect-ratio: 1 / 1; }
   }
 </style>
 

apps/site/src/lib/hero-scene.ts

@@ -223,13 +223,22 @@ async function boot({ canvas, accentVar, glowVar, onGate }: HeroSceneOptions): P
   });
 
   // 판은 깊이 축에 정면으로 선다. 떠다니는 사각형이 아니라 통과하는 문이다.
-  const GATE_GAP = 5.2;
+  //
+  // 폭이 중요하다. 액자는 가로로 길어(약 2.9:1) 카메라의 수평 시야가
+  // 거리 d 에서 2.23*d 인데, 판이 그보다 좁으면 통과하는 내내 좌우 테두리가
+  // 화면 안에 남는다. 그러면 "문을 지난다"가 아니라 세로 기둥 두 개가
+  // 지나가는 것으로 보인다 — 실제로 그렇게 보였다.
+  // 판을 액자 비율에 맞춰 첫 판이 화면을 덮게 하면, 가까워질수록 좌우가
+  // 화면 밖으로 빠지고 뒤 판들이 원근으로 남아 터널이 된다.
+  const GATE_GAP = 6.4;
   const panes: import("three").Mesh[] = [];
-  const geo = new THREE.PlaneGeometry(7.4, 5.2, 1, 1);
+  const geo = new THREE.PlaneGeometry(15, 6, 1, 1);
   for (let i = 0; i < PANE_COUNT; i++) {
     const m = new THREE.Mesh(geo, paneMat);
     // 좌우로 조금씩 어긋나게 세워 통과할 때 옆면이 스친다
-    const sway = (i % 2 === 0 ? 1 : -1) * (0.5 + i * 0.12);
+    // 어긋남은 아주 작게. 판이 좌우로 흩어지면 '통과하는 문'이 아니라
+    // '쌓아둔 사각형'이 된다. 중심축이 살아야 원근이 터널로 읽힌다.
+    const sway = (i % 2 === 0 ? 1 : -1) * (0.16 + i * 0.05);
     m.position.set(sway, Math.sin(i * 1.3) * 0.32, -i * GATE_GAP);
     m.rotation.set(0, sway * 0.05, sway * 0.018);
     m.userData["index"] = i;