@@ -57,56 +63,60 @@ const shift = -(depth / scale) * 100;
+
+
diff --git a/apps/site/src/components/Preflight.astro b/apps/site/src/components/Preflight.astro
index 8db8944..0da6a2c 100644
--- a/apps/site/src/components/Preflight.astro
+++ b/apps/site/src/components/Preflight.astro
@@ -12,7 +12,7 @@ const { c } = Astro.props;
왼쪽 세로선이 로그라는 형식을 만든다.
*/}
-
+
{c.h2}
{c.lead}
diff --git a/apps/site/src/components/Showcase.astro b/apps/site/src/components/Showcase.astro
index 96a14ba..ae11738 100644
--- a/apps/site/src/components/Showcase.astro
+++ b/apps/site/src/components/Showcase.astro
@@ -12,7 +12,7 @@ const shots = [shotCoffee, shotSaas];
{/* 레이아웃 패밀리: Z축 캐스케이드. 두 판이 서로 겹치고 각도가 다르다 */}
-
+
{c.h2}
{c.lead}
diff --git a/apps/site/src/components/Typography.astro b/apps/site/src/components/Typography.astro
index ce27c82..f73d68a 100644
--- a/apps/site/src/components/Typography.astro
+++ b/apps/site/src/components/Typography.astro
@@ -9,7 +9,7 @@ const { c } = Astro.props;
---
-
+
{c.eyebrow}
{c.h2}
{c.lead}
diff --git a/apps/site/src/lib/hero-scene.ts b/apps/site/src/lib/hero-scene.ts
index bc62225..4734fc4 100644
--- a/apps/site/src/lib/hero-scene.ts
+++ b/apps/site/src/lib/hero-scene.ts
@@ -38,6 +38,12 @@ export interface HeroSceneOptions {
* WebGL 은 셰이더만 만진다. 매 프레임 DOM 을 쓰면 그 경계가 무너진다.
*/
onGate?: (index: number, total: number) => void;
+ /**
+ * 스크롤 진행도를 이 요소로 잰다. 기본은 캔버스 자신.
+ * 캔버스를 sticky/fixed 로 화면에 붙여두면 캔버스의 rect 는 변하지 않으므로
+ * 진행도가 고정된다 — 그때는 실제로 지나가는 섹션을 넘겨야 한다.
+ */
+ progressFrom?: HTMLElement;
}
const NOISE = `
@@ -70,7 +76,7 @@ export function mountHeroScene(opts: HeroSceneOptions): void {
io.observe(canvas);
}
-async function boot({ canvas, accentVar, glowVar, onGate }: HeroSceneOptions): Promise {
+async function boot({ canvas, accentVar, glowVar, onGate, progressFrom }: HeroSceneOptions): Promise {
let THREE: typeof import("three");
try {
THREE = await import("three");
@@ -305,10 +311,15 @@ async function boot({ canvas, accentVar, glowVar, onGate }: HeroSceneOptions): P
// 스크롤 진행도. addEventListener("scroll") 을 쓰지 않는다(하드 게이트 10).
// rect 는 프레임당 한 번만 읽는다. 두 번 읽으면 레이아웃을 두 번 강제한다.
- const rect = canvas.getBoundingClientRect();
- // 액자가 화면 위로 92% 지나갔을 때 마지막 게이트를 통과하게 잡았다.
- // 그 뒤로는 액자가 보이지 않으므로 계속 진행시킬 이유가 없다.
- const travel = rect.height * 0.92;
+ const rect = (progressFrom ?? canvas).getBoundingClientRect();
+ // 진행 거리.
+ // progressFrom 이 있으면 캔버스는 sticky 로 화면에 붙어 있고 섹션이 지나간다.
+ // 이때 캔버스가 실제로 화면에 머무는 거리는 (섹션 높이 - 뷰포트 높이)다.
+ // 섹션 높이를 그대로 쓰면 캔버스가 사라진 뒤에도 진행이 남아 마지막 게이트에
+ // 영영 도달하지 못한다 — 실측에서 6단계 중 3단계에서 멈췄다.
+ const travel = progressFrom
+ ? Math.max(rect.height - innerHeight, 1)
+ : rect.height * 0.92;
const progress = Math.min(Math.max(-rect.top / travel, 0), 1);
bgUniforms.uProgress.value = progress;
diff --git a/apps/site/src/styles/base.css b/apps/site/src/styles/base.css
index a93ffce..a361694 100644
--- a/apps/site/src/styles/base.css
+++ b/apps/site/src/styles/base.css
@@ -427,9 +427,19 @@ a:hover { color: var(--accent); }
.has-bg {
position: relative;
isolation: isolate;
- /* 배경 이미지는 컨테이너보다 크고 패럴랙스로 움직인다.
- clip 하지 않으면 그 초과분이 이웃 섹션 위로 넘친다. */
- overflow: clip;
+ /* `clip-path: inset(0)` 는 두 가지를 동시에 한다.
+ 1) 배경이 섹션 밖으로 넘치지 않게 자른다
+ 2) `position: fixed` 자식의 **컨테이닝 블록**이 된다
+
+ 2번이 핵심이다. 그래서 배경이 뷰포트에 고정되면서도 이 섹션 안에서만 보인다 —
+ 콘텐츠만 그 위를 지나가고 배경은 원경처럼 멈춰 있다.
+
+ `background-attachment: fixed` 를 쓰지 않은 이유는 iOS Safari 가 GPU 메모리
+ 때문에 그것을 throttle 해서 스크롤 중 배경이 튀기 때문이다.
+
+ 주의: 여기에 `transform`·`filter`·`mask` 를 추가하면 안 된다. 그것들도
+ 컨테이닝 블록을 만들지만, 그 순간 fixed 가 섹션 기준이 되어 고정이 사라진다. */
+ clip-path: inset(0);
}
/* ---- 유틸 -------------------------------------------------- */
diff --git a/packages/skill/references/motion.md b/packages/skill/references/motion.md
index 85d6c4e..79d6fc3 100644
--- a/packages/skill/references/motion.md
+++ b/packages/skill/references/motion.md
@@ -448,6 +448,38 @@ JS 쪽 판정도 한 곳에 모은다. 설정이 도중에 바뀌면 반영한
안 움직이는 섹션이 하나도 없으면 움직임에 의미가 없다는 뜻이고,
`design.md` 에 "여기는 의도적으로 정지"라고 적어두지 않으면 다음 사람이 "빠뜨린 것"으로 보고 채운다.
+### 패럴랙스의 원형은 "고정"이다
+
+**배경이 뷰포트에 멈춰 있고 콘텐츠만 그 위를 지나갈 때 원경이 된다.**
+느리게 같이 움직이는 것으로는 그 인상이 안 나온다 — 속도만 다를 뿐 방향이 같기 때문이다.
+"패럴랙스를 넣었는데 티가 안 난다"의 절반은 이것이다.
+
+**`background-attachment: fixed` 는 쓰지 마라.** iOS Safari 가 GPU 메모리 때문에 그것을
+throttle 해서 스크롤 중 배경이 튀거나 리셋된다.
+
+대신 **부모를 `position: fixed` 의 컨테이닝 블록으로 만든다**:
+
+```css
+.section { position: relative; clip-path: inset(0); } /* 컨테이닝 블록 + 클립 */
+.section > .bg { position: fixed; inset: 0; z-index: -1; }
+.section > .bg img { width: 100%; height: 100%; object-fit: cover; }
+```
+
+`clip-path` 는 두 가지를 동시에 한다 — 배경을 섹션 밖으로 못 나가게 자르고,
+fixed 자식의 기준을 뷰포트가 아니라 **자기 자신**으로 잡아준다.
+그래서 배경이 화면에 고정되면서도 그 섹션 안에서만 보인다.
+
+**두 가지 대가가 있다. 알고 써라.**
+
+1. **조상에 `transform`·`filter`·`mask` 를 추가하면 즉시 깨진다.** 그것들도 컨테이닝 블록을
+ 만들기 때문에 fixed 가 섹션 기준이 되어 고정이 사라진다. 위아래 페이드 마스크를 얹고 싶어도
+ 못 얹는다 — 경계는 clip 으로 딱 잘리는 것을 받아들여야 한다
+2. `prefers-reduced-motion` 에서는 `position: absolute` 로 되돌려라. 고정 배경은
+ 스크롤 중 시각 부하가 크다
+
+**전부 고정하지는 마라.** 가까이 있어야 할 재질(종이·질감)까지 원경으로 두면 거짓말이 된다.
+원경은 `fixed`, 중경은 아래의 비율 이동, 근경은 콘텐츠와 함께.
+
### 이동량은 절대값이 아니라 컨테이너 대비 비율이다
**패럴랙스가 "안 보인다"의 대부분은 이동량이 모자란 것이다.**
@@ -517,6 +549,25 @@ CSS-Tricks 의 예제도 `background-position: bottom 0px → bottom -400px`,
너무 강하게 넣으면 안전한 이미지가 아니라 **없는 이미지**가 나온다.
대비는 합성 방식으로 풀고, 이미지 자체는 볼 수 있게 만들어라.
+### sticky 캔버스의 진행도는 섹션 높이가 아니다
+
+캔버스를 `position: sticky; top: 0; height: 100dvh` 로 붙여두고 섹션이 지나가게 하는 패턴에서,
+진행도를 **섹션 높이로 나누면 안 된다.**
+
+캔버스가 실제로 화면에 머무는 거리는 **(섹션 높이 − 뷰포트 높이)** 다.
+섹션 높이를 쓰면 캔버스가 위로 사라진 뒤에도 진행이 남아 **끝에 영영 도달하지 못한다.**
+
+```js
+const travel = Math.max(section.getBoundingClientRect().height - innerHeight, 1);
+const progress = clamp(-section.getBoundingClientRect().top / travel, 0, 1);
+```
+
+실측: 섹션 1493px · 뷰포트 900px 에서 섹션 높이로 나눴더니 6단계 중 **3단계에서 멈췄다.**
+`height - innerHeight` 로 바꾸자 6단계를 다 돌았다.
+
+그리고 진행도의 기준 요소는 **캔버스가 아니라 섹션**이다. sticky/fixed 캔버스는 rect 가
+변하지 않으므로 자기 rect 로 재면 진행도가 고정된다.
+
### 배경도 한 섹션에 하나다
CSS 격자와 사진을 같이 깔았다가 걷어냈다. 두 배경이 서로 경쟁했고,
diff --git a/packages/skill/references/three.md b/packages/skill/references/three.md
index e10237f..c25270d 100644
--- a/packages/skill/references/three.md
+++ b/packages/skill/references/three.md
@@ -59,6 +59,34 @@ h1 이 36px 이어도 히어로가 압도적이다.
캔버스 위에 글자를 올려야 한다면 **하나만** 올려라. 그리고 거기엔 바탕을 깔아라.
+### 씬의 의미는 옆의 콘텐츠가 반응할 때 성립한다
+
+3D 에 은유를 담았는데 **그 의미를 자막으로 설명하고 있다면, 그림이 스스로 말하지 못한다는 뜻**이다.
+자막을 다듬을 게 아니라 배치를 의심해라.
+
+실측 사례 — 여섯 단계 파이프라인을 유리판 여섯 장으로 표현한 씬:
+
+| | 히어로에 뒀을 때 | 파이프라인 섹션으로 옮긴 뒤 |
+|---|---|---|
+| 옆에 있는 것 | 헤드라인과 CTA | **여섯 단계의 실제 이름과 설명** |
+| 의미 전달 | `게이트 01 / 06` 판독기 — **자막** | 판을 통과하면 그 단계가 켜진다 |
+| 사용자 반응 | "왜 저 상자가 있는지 모르겠다" | — |
+
+**같은 씬인데 자리를 옮기니 자막이 필요 없어졌다.** 콘텐츠가 반응하기 때문이다.
+
+```js
+mountScene({
+ canvas,
+ progressFrom: section, // sticky 캔버스는 자기 rect 로 진행도를 못 잰다
+ onGate(index) { // 값이 바뀔 때만 DOM 을 쓴다
+ stops.forEach((el, i) => el.classList.toggle("is-active", i === index));
+ },
+});
+```
+
+**씬을 넣을 자리를 고를 때 "여기에 두면 무엇이 반응하는가"를 먼저 물어라.**
+아무것도 반응하지 않으면 그것은 재질이지 주인공이 아니다.
+
### 재질일 때 — 배경 전면
주인공이 아니라 공간을 만드는 표면이다. 규칙이 반대가 된다.