kasaframe 0.0.0-stage → 0.1.3

package/packages/motion/src/transition.ts

@@ -0,0 +1,82 @@
+import { clamp, emit, progress, toEase, type Ease, type EaseName, type Style, safeTime } from "@kasaframe/core";
+
+export type TransitionName = "whip" | "zoomThrough" | "slide" | "matchCut" | "crossfade";
+
+export const TRANSITIONS: readonly TransitionName[] = ["whip", "zoomThrough", "slide", "matchCut", "crossfade"];
+
+export interface TransitionOpts {
+  /** 전환이 시작하는 시각. matchCut 은 이 순간 끊긴다 */
+  at: number;
+  dur?: number;
+  ease?: EaseName | Ease;
+  /** 화면 폭(px) — whip·slide 가 얼마나 밀지 */
+  width?: number;
+  dir?: "left" | "right" | "up" | "down";
+  source?: string;
+  scene?: string;
+  emit?: boolean;
+}
+
+export interface TransitionState {
+  /** 나가는 장면 */
+  out: Style;
+  /** 들어오는 장면 */
+  in: Style;
+  p: number;
+  /** 두 장면을 다 그려야 하는가 */
+  both: boolean;
+}
+
+const DUR: Record<TransitionName, number> = { whip: 0.32, zoomThrough: 0.5, slide: 0.45, matchCut: 0.25, crossfade: 0.4 };
+
+/** 0.5 를 지나며 0→1 로 넘어가는 짧은 계단 — 휙 지나가는 순간에 갈아 끼운다 */
+const swap = (p: number, w = 0.12): number => clamp((p - 0.5 + w / 2) / w);
+
+export function transition(name: TransitionName, t: number, opts: TransitionOpts): TransitionState {
+  t = safeTime(t);
+  if (!(TRANSITIONS as readonly string[]).includes(name)) throw new Error(`모르는 전환: ${name} (있는 것: ${TRANSITIONS.join(" · ")})`);
+  const dur = opts.dur ?? DUR[name];
+  const raw = progress(t, opts.at, dur);
+  const p = toEase(opts.ease, name === "slide" ? toEase("inOutCubic") : toEase("inOutQuart"))(raw);
+  const w = opts.width ?? 1920;
+  const dir = opts.dir ?? "left";
+  const sx = dir === "left" ? -1 : dir === "right" ? 1 : 0;
+  const sy = dir === "up" ? -1 : dir === "down" ? 1 : 0;
+  if (opts.emit !== false && raw > 0 && raw < 1) emit({ kind: "move", source: opts.source ?? name, scene: opts.scene, name: `transition:${name}`, value: 1 });
+  const both = raw > 0 && raw < 1;
+  switch (name) {
+    case "whip": {
+      const blur = Math.sin(Math.PI * p) * 28;
+      const k = swap(p);
+      return {
+        p,
+        both,
+        out: { x: sx * w * 0.5 * p, y: sy * w * 0.5 * p, blur, opacity: 1 - k },
+        in: { x: -sx * w * 0.5 * (1 - p), y: -sy * w * 0.5 * (1 - p), blur, opacity: k },
+      };
+    }
+    case "zoomThrough": {
+      const k = swap(p, 0.3);
+      return {
+        p,
+        both,
+        out: { scale: 1 + 2.2 * p, blur: 12 * p, opacity: 1 - k },
+        in: { scale: 0.7 + 0.3 * p, blur: 10 * (1 - p), opacity: k },
+      };
+    }
+    case "slide":
+      return {
+        p,
+        both,
+        out: { x: sx * w * p, y: sy * w * p },
+        in: { x: -sx * w * (1 - p), y: -sy * w * (1 - p) },
+      };
+    case "matchCut": {
+      // 같은 자리·같은 크기로 이어 붙이고, 들어온 쪽만 살짝 가라앉혀 끊김을 감춘다
+      const cut = t >= opts.at;
+      return { p: raw, both: false, out: { opacity: cut ? 0 : 1 }, in: { opacity: cut ? 1 : 0, scale: cut ? 1.03 - 0.03 * p : 1.03 } };
+    }
+    case "crossfade":
+      return { p, both, out: { opacity: 1 - p }, in: { opacity: p } };
+  }
+}

package/packages/motion/src/transition3d/cards.ts

@@ -0,0 +1,65 @@
+import * as THREE from "three";
+import { cardSlots, cardsRig, hump, rr } from "./rig.ts";
+import { aim, disposeTree, dust, frameRing, gridPlane, imageMaterial, raw, sky, type Kit } from "./world.ts";
+
+export function cards(k: Kit) {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const scene = new THREE.Scene();
+  scene.add(sky({ top: pal.deep, bottom: "#03050b", glow: pal.accent, dir: [0.3, 0.1, -1], amt: 0.45, pow: 5 }));
+  scene.add(gridPlane({ color: pal.accent, y: -2.2, width: 30, depth: 30, z: -2, focus: -2 }));
+
+  const slots = cardSlots(env);
+  const decor: { mesh: THREE.Group; base: THREE.Vector3; yaw: number; i: number }[] = [];
+  for (const [i, s] of slots.entries()) {
+    const g = new THREE.Group();
+    const w = aspect * s.scale;
+    const h = s.scale;
+    let mat;
+    if (s.img < 2) mat = imageMaterial(s.img === 0 ? k.from.texture : k.to.texture);
+    else {
+      // 다른 장면들 — 앞·뒤 그림을 흐리고 눌러 꾸밈으로만
+      mat = imageMaterial((s.img === 2 ? k.from : k.to).soft(), { double: true, back: pal.deep });
+      mat.uniforms.bias.value = 4;
+      mat.uniforms.dim.value = 0.3;
+      mat.uniforms.tint.value = raw(pal.deep);
+      mat.uniforms.tintAmt.value = 0.35;
+    }
+    g.add(new THREE.Mesh(new THREE.PlaneGeometry(w, h), mat));
+    const ring = new THREE.Mesh(
+      frameRing(w, h, 0.008 * Math.max(0.6, s.scale)),
+      new THREE.MeshBasicMaterial({ color: raw(s.img < 2 ? pal.glow : pal.accent), transparent: true, opacity: s.img < 2 ? 0.9 : 0.55, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide }),
+    );
+    g.add(ring);
+    g.position.set(...s.pos);
+    g.rotation.y = s.yaw;
+    scene.add(g);
+    if (s.img >= 2) decor.push({ mesh: g, base: g.position.clone(), yaw: s.yaw, i });
+  }
+
+  const n = 600;
+  const pts = new Float32Array(n * 3);
+  for (let i = 0; i < n; i++) {
+    pts[i * 3] = rr(seed, 600 + i, -9, 9);
+    pts[i * 3 + 1] = rr(seed, 1600 + i, -3, 4);
+    pts[i * 3 + 2] = rr(seed, 2600 + i, -12, -4);
+  }
+  scene.add(dust(pts, pal.glow, 0.02));
+
+  return {
+    frame(u: number, t: number) {
+      aim(k.cam, cardsRig(u, env).cam);
+      // 꾸밈 판만 떠다닌다 — 앞·뒤 판은 경계 프레임을 지키려 제자리
+      const k2 = 0.4 + 0.6 * hump(u);
+      for (const d of decor) {
+        d.mesh.position.set(d.base.x, d.base.y + 0.07 * k2 * Math.sin(t * 1.1 + d.i * 1.7), d.base.z);
+        d.mesh.rotation.y = d.yaw + 0.06 * k2 * Math.sin(t * 0.8 + d.i);
+      }
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}

package/packages/motion/src/transition3d/chain.ts

@@ -0,0 +1,84 @@
+import * as THREE from "three";
+import { CHAIN_GAP, FIT, chainRig, rr, type ChainOpts } from "./rig.ts";
+import { aim, disposeTree, dust, frameRing, gridPlane, raw, screenMaterial, sky, type Kit } from "./world.ts";
+
+/**
+ * 화면 속 화면 — 화면들이 깊이 방향으로 늘어서 있고, 카메라가 화면마다 꽉 찬 순간(arrivals)을 지나며 가운데가 녹은 화면을 뚫고 다음 화면으로.
+ * 도착 순간은 그 화면 그림 그대로라 박마다 한 겹씩 맞춰도 경계가 이어진다.
+ */
+export function chain(k: Kit, o: ChainOpts) {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const gap = o.gap ?? CHAIN_GAP;
+  const n = k.screens.length;
+  const scene = new THREE.Scene();
+  const skyMesh = sky({ top: "#0a1024", bottom: "#020308", glow: pal.accent, dir: [0, 0, -1], amt: 0.7, pow: 14 });
+  scene.add(skyMesh);
+  const len = (n - 1) * gap + 4;
+  const grids = [-1.25, 1.25].map((y) => gridPlane({ color: pal.accent, y, width: 12, depth: len, z: -len / 2 + 2, focus: 0 }));
+  scene.add(...grids);
+
+  const mats = k.screens.map((s, i) => {
+    const m = screenMaterial(s.texture, pal.glow, aspect, rr(seed, 300 + i, 0, 100));
+    const plane = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), m);
+    plane.position.z = -i * gap;
+    scene.add(plane);
+    // 화면 테두리 — 떠 있는 모니터. 꽉 찬 순간에는 시야 밖이다
+    const bezel = new THREE.Mesh(frameRing(aspect, 1, 0.05), new THREE.MeshBasicMaterial({ color: raw("#0d1018") }));
+    bezel.position.z = -i * gap - 0.001;
+    scene.add(bezel);
+    const halo = new THREE.Mesh(frameRing(aspect + 0.1, 1.1, 0.012), new THREE.MeshBasicMaterial({ color: raw(pal.glow), transparent: true, opacity: 0.85, blending: THREE.AdditiveBlending, depthWrite: false }));
+    halo.position.z = -i * gap;
+    scene.add(halo);
+    return m;
+  });
+
+  // 화면 사이 빛 고리·점 — 도착 카메라와 그 화면 사이(꽉 찬 순간의 시야)는 비운다
+  for (let g = 0; g < n - 1; g++) {
+    const near = -g * gap - 0.4;
+    const far = -(g + 1) * gap + FIT + 0.4;
+    for (let j = 0; j < 4; j++) {
+      const i = g * 4 + j;
+      const s = rr(seed, 100 + i, 1.15, 2.2);
+      const ring = new THREE.Mesh(
+        frameRing(aspect * s, s, rr(seed, 120 + i, 0.005, 0.013)),
+        new THREE.MeshBasicMaterial({ color: raw(j % 2 ? pal.accent : pal.glow), transparent: true, opacity: 0.7, blending: THREE.AdditiveBlending, depthWrite: false }),
+      );
+      ring.position.set(rr(seed, 140 + i, -0.15, 0.15), rr(seed, 160 + i, -0.1, 0.1), near + ((far - near) * (j + 0.5)) / 4);
+      ring.rotation.z = rr(seed, 180 + i, -0.4, 0.4);
+      scene.add(ring);
+    }
+    const m = 260;
+    const pts = new Float32Array(m * 3);
+    for (let i = 0; i < m; i++) {
+      let x = rr(seed, 400 + g * m + i, -4, 4);
+      const y = rr(seed, 2400 + g * m + i, -2.4, 2.4);
+      if (Math.abs(x) < 0.35 && Math.abs(y) < 0.3) x += x < 0 ? -0.4 : 0.4;
+      pts.set([x, y, rr(seed, 4400 + g * m + i, far, near)], i * 3);
+    }
+    scene.add(dust(pts, pal.glow, 0.014));
+  }
+
+  return {
+    frame(_u: number, t: number) {
+      const s = chainRig(t, env, o);
+      aim(k.cam, s.cam);
+      skyMesh.position.set(0, 0, s.cam.pos[2]);
+      for (const g of grids) (g.material as THREE.ShaderMaterial).uniforms.focus.value = s.cam.pos[2] - 4;
+      mats.forEach((m, i) => {
+        m.uniforms.dissolve.value = s.dissolve[i];
+        m.visible = s.dissolve[i] < 1;
+      });
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    /** 이번 프레임에 보일 수 있는 화면 — 지나온 화면은 스냅숏하지 않는다 */
+    visible(t: number): boolean[] {
+      const s = chainRig(t, env, o);
+      return k.screens.map((_, i) => i >= s.index && i <= s.index + 2 && s.dissolve[i] < 1);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}

package/packages/motion/src/transition3d/dive.ts

@@ -0,0 +1,181 @@
+import * as THREE from "three";
+import { RoundedBoxGeometry } from "three/addons/geometries/RoundedBoxGeometry.js";
+import { DIVE_DEPTH, FIT, diveRig, rr } from "./rig.ts";
+import { aim, disposeTree, dust, frameRing, gridPlane, imageMaterial, raw, screenMaterial, sky, type Kit, type Palette } from "./world.ts";
+
+function keyboardTexture(pal: Palette): THREE.CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = 1024;
+  c.height = 300;
+  const g = c.getContext("2d")!;
+  g.fillStyle = "#15171c";
+  g.fillRect(0, 0, c.width, c.height);
+  const rows = [14, 14, 13, 12, 9];
+  rows.forEach((n, r) => {
+    const kw = (c.width - 40) / 14.5;
+    let x = 20 + (14 - n) * kw * 0.5 * (r === 4 ? 0 : 1);
+    for (let i = 0; i < n; i++) {
+      const wide = r === 4 && i === 4 ? 5 : 1;
+      g.fillStyle = "#262a33";
+      g.beginPath();
+      g.roundRect(x + 3, 20 + r * 54 + 3, kw * wide - 6, 48, 6);
+      g.fill();
+      x += kw * wide;
+    }
+  });
+  g.fillStyle = pal.accent;
+  g.globalAlpha = 0.35;
+  g.fillRect(0, c.height - 4, c.width, 4);
+  const t = new THREE.CanvasTexture(c);
+  t.colorSpace = THREE.SRGBColorSpace;
+  return t;
+}
+
+export function dive(k: Kit) {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+
+  // 바깥 — 어두운 방, 책상 위 모니터
+  const outer = new THREE.Scene();
+  outer.add(sky({ top: pal.deep, bottom: "#05060a", glow: pal.accent, dir: [0, 0.2, -1], amt: 0.35 }));
+  const metal = new THREE.MeshStandardMaterial({ color: "#1b1e25", roughness: 0.42, metalness: 0.55 });
+  const bezel = new THREE.Mesh(new RoundedBoxGeometry(aspect + 0.12, 1.12, 0.08, 4, 0.03), metal);
+  bezel.position.z = -0.045;
+  outer.add(bezel);
+  const back = new THREE.Mesh(new RoundedBoxGeometry(aspect * 0.7, 0.62, 0.12, 4, 0.05), metal);
+  back.position.set(0, -0.04, -0.14);
+  outer.add(back);
+  const neck = new THREE.Mesh(new RoundedBoxGeometry(0.16, 0.5, 0.05, 2, 0.02), metal);
+  neck.position.set(0, -0.78, -0.16);
+  outer.add(neck);
+  const deskY = -1.03;
+  const foot = new THREE.Mesh(new RoundedBoxGeometry(0.74, 0.03, 0.4, 3, 0.012), metal);
+  foot.position.set(0, deskY + 0.015, -0.13);
+  outer.add(foot);
+  const desk = new THREE.Mesh(new THREE.PlaneGeometry(14, 8), new THREE.MeshStandardMaterial({ color: "#20232b", roughness: 0.7, metalness: 0.1 }));
+  desk.rotation.x = -Math.PI / 2;
+  desk.position.set(0, deskY, 1.5);
+  outer.add(desk);
+  const kbTex = keyboardTexture(pal);
+  const kb = new THREE.Mesh(
+    new RoundedBoxGeometry(1.25, 0.03, 0.38, 2, 0.01),
+    [metal, metal, new THREE.MeshStandardMaterial({ map: kbTex, roughness: 0.6 }), metal, metal, metal],
+  );
+  kb.position.set(-0.1, deskY + 0.015, 0.75);
+  kb.rotation.y = 0.04;
+  outer.add(kb);
+  outer.add(new THREE.HemisphereLight("#8fa4d8", "#08090c", 0.6));
+  const key = new THREE.DirectionalLight("#ffffff", 1.4);
+  key.position.set(-2, 3, 2.5);
+  outer.add(key);
+  const rim = new THREE.DirectionalLight(pal.accent, 1.2);
+  rim.position.set(2.5, 1.2, -2);
+  outer.add(rim);
+  const screenGlow = new THREE.PointLight(pal.glow, 2.2, 4, 1.4);
+  screenGlow.position.set(0, -0.2, 0.5);
+  outer.add(screenGlow);
+
+  // 화면 자리에 스텐실 1 — 안쪽 공간은 바깥에 있는 동안 여기로만 보인다
+  const mask = new THREE.Scene();
+  const maskMesh = new THREE.Mesh(
+    new THREE.PlaneGeometry(aspect, 1),
+    new THREE.MeshBasicMaterial({
+      colorWrite: false,
+      depthWrite: false,
+      depthTest: false,
+      stencilWrite: true,
+      stencilRef: 1,
+      stencilFunc: THREE.AlwaysStencilFunc,
+      stencilZPass: THREE.ReplaceStencilOp,
+    }),
+  );
+  mask.add(maskMesh);
+
+  // 안쪽 — 미지의 공간. 화면 모양 고리가 늘어선 통로 끝에 뒤 장면
+  const inner = new THREE.Scene();
+  inner.add(sky({ top: "#0a1024", bottom: "#020308", glow: pal.accent, dir: [0, 0, -1], amt: 0.7, pow: 14 }));
+  const rings: THREE.Mesh[] = [];
+  const nRing = 26;
+  for (let i = 0; i < nRing; i++) {
+    const z = -0.7 - (i / (nRing - 1)) * (DIVE_DEPTH - FIT - 1.6);
+    const s = rr(seed, 100 + i, 1.15, 2.2);
+    const m = new THREE.Mesh(
+      frameRing(aspect * s, s, rr(seed, 120 + i, 0.005, 0.013)),
+      new THREE.MeshBasicMaterial({ color: raw(i % 3 === 0 ? pal.glow : pal.accent), transparent: true, opacity: 0.75, blending: THREE.AdditiveBlending, depthWrite: false }),
+    );
+    m.position.set(rr(seed, 140 + i, -0.15, 0.15), rr(seed, 160 + i, -0.1, 0.1), z);
+    m.rotation.z = rr(seed, 180 + i, -0.35, 0.35);
+    inner.add(m);
+    rings.push(m);
+  }
+  for (const y of [-1.25, 1.25]) inner.add(gridPlane({ color: pal.accent, y, width: 12, depth: DIVE_DEPTH + 4, z: -DIVE_DEPTH / 2, focus: -4 }));
+  const n = 1800;
+  const pts = new Float32Array(n * 3);
+  for (let i = 0; i < n; i++) {
+    let x = rr(seed, 400 + i, -4, 4);
+    let y = rr(seed, 1400 + i, -2.4, 2.4);
+    // 카메라가 지나는 축 가까이는 비운다 — 코앞을 스치는 점이 큰 얼룩으로 찍힌다
+    if (Math.abs(x) < 0.35 && Math.abs(y) < 0.3) x += x < 0 ? -0.4 : 0.4;
+    pts[i * 3] = x;
+    pts[i * 3 + 1] = y;
+    pts[i * 3 + 2] = rr(seed, 2400 + i, -DIVE_DEPTH + FIT + 0.3, -0.2);
+  }
+  inner.add(dust(pts, pal.glow, 0.014));
+  const toMat = imageMaterial(k.to.texture);
+  const toPlane = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), toMat);
+  toPlane.position.z = -DIVE_DEPTH;
+  inner.add(toPlane);
+  const halo = new THREE.Mesh(frameRing(aspect, 1, 0.03), new THREE.MeshBasicMaterial({ color: raw(pal.glow), transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }));
+  halo.position.z = -DIVE_DEPTH;
+  inner.add(halo);
+  const innerMats: THREE.Material[] = [];
+  inner.traverse((o) => {
+    const m = (o as THREE.Mesh).material as THREE.Material | undefined;
+    if (m) innerMats.push(m);
+  });
+
+  // 위 — 앞 장면이 걸린 화면
+  const overlay = new THREE.Scene();
+  const screenMat = screenMaterial(k.from.texture, pal.glow, aspect, rr(seed, 0, 0, 100));
+  screenMat.depthTest = false;
+  screenMat.depthWrite = false;
+  overlay.add(new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), screenMat));
+
+  let wasInside: boolean | null = null;
+  return {
+    frame(u: number, t: number) {
+      const s = diveRig(u, env);
+      aim(k.cam, s.cam);
+      screenMat.uniforms.dissolve.value = s.dissolve;
+      screenMat.uniforms.glitch.value = s.glitch;
+      screenMat.uniforms.tick.value = Math.floor(t * 24);
+      screenMat.uniforms.sheen.value = 0.06 * Math.min(1, u / 0.3) * (1 - s.dissolve) * (u < 1 ? 1 : 0);
+      halo.material.opacity = 0.8 * (1 - Math.min(1, Math.max(0, (u - 0.8) / 0.18)));
+      if (wasInside !== s.inside) {
+        for (const m of innerMats) {
+          m.stencilWrite = !s.inside;
+          m.stencilRef = 1;
+          m.stencilFunc = THREE.EqualStencilFunc;
+          m.needsUpdate = true;
+        }
+        wasInside = s.inside;
+      }
+      const r = k.renderer;
+      r.clear(true, true, true);
+      if (s.inside) {
+        r.render(inner, k.cam);
+        return;
+      }
+      r.render(outer, k.cam);
+      r.clearDepth();
+      r.render(mask, k.cam);
+      r.render(inner, k.cam);
+      r.clearDepth();
+      r.render(overlay, k.cam);
+    },
+    dispose() {
+      for (const sc of [outer, mask, inner, overlay]) disposeTree(sc);
+      kbTex.dispose();
+    },
+  };
+}

package/packages/motion/src/transition3d/fold.ts

@@ -0,0 +1,110 @@
+import * as THREE from "three";
+import { foldRig, type FoldStyle } from "./rig.ts";
+import { aim, disposeTree, imageMaterial, raw, sky, type Kit } from "./world.ts";
+
+const STRIPS = 8;
+
+// 아래에서 위로 말려 올라가는 종이. 말린 선(rollY) 아래쪽이 원통에 감기고, 감길수록 반지름이 조금씩 커져 겹이 안 겹친다
+const ROLL_VERT = /* glsl */ `
+uniform float rollY;
+uniform float radius;
+varying vec2 vUv;
+varying float vShade;
+void main() {
+  vUv = uv;
+  vec3 p = position;
+  float s = rollY - p.y;
+  vShade = 0.0;
+  if (s > 0.0) {
+    float r = radius + s * 0.012;
+    float a = s / r;
+    p.y = rollY - r * sin(a);
+    p.z = r - r * cos(a);
+    vShade = 0.5 - 0.5 * cos(a);
+  }
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
+}`;
+
+const ROLL_FRAG = /* glsl */ `
+uniform sampler2D map;
+uniform float opacity;
+uniform vec3 backColor;
+varying vec2 vUv;
+varying float vShade;
+void main() {
+  vec3 c = texture2D(map, vUv).rgb;
+  if (!gl_FrontFacing) c = mix(c * 0.3, backColor, 0.6);
+  c *= 1.0 - 0.45 * vShade;
+  gl_FragColor = vec4(c, opacity);
+}`;
+
+export function fold(k: Kit, o: { fold?: FoldStyle }) {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const style = o.fold ?? "accordion";
+  const scene = new THREE.Scene();
+  scene.add(sky({ top: pal.deep, bottom: "#020308", glow: pal.accent, dir: [0, 0, -1], amt: 0.4, pow: 4 }));
+  // 뒤 장면은 바닥에 깔고 깊이를 안 쓴다 — 같은 면에 놓인 앞 장면 판과 깜빡이며 다투지 않게
+  const bMat = imageMaterial(k.to.texture);
+  bMat.depthWrite = false;
+  const bPlane = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), bMat);
+  bPlane.renderOrder = -1;
+  scene.add(bPlane);
+
+  let apply: (amount: number, slide: number, alpha: number) => void;
+  if (style === "roll") {
+    const mat = new THREE.ShaderMaterial({
+      vertexShader: ROLL_VERT,
+      fragmentShader: ROLL_FRAG,
+      uniforms: { map: { value: k.from.texture }, rollY: { value: -1 }, radius: { value: 0.06 }, opacity: { value: 1 }, backColor: { value: raw(pal.glow) } },
+      side: THREE.DoubleSide,
+      transparent: true,
+    });
+    const sheet = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1, 1, 320), mat);
+    scene.add(sheet);
+    apply = (amount, _slide, alpha) => {
+      mat.uniforms.rollY.value = amount;
+      mat.uniforms.opacity.value = alpha;
+      sheet.visible = alpha > 0;
+    };
+  } else {
+    const sw = aspect / STRIPS;
+    const strips = Array.from({ length: STRIPS }, (_, i) => {
+      const geo = new THREE.PlaneGeometry(sw, 1);
+      geo.translate(sw / 2, 0, 0);
+      const uv = geo.attributes.uv as THREE.BufferAttribute;
+      for (let j = 0; j < uv.count; j++) uv.setX(j, (i + uv.getX(j)) / STRIPS);
+      const mat = imageMaterial(k.from.texture, { double: true, back: pal.accent });
+      const m = new THREE.Mesh(geo, mat);
+      scene.add(m);
+      return { m, mat };
+    });
+    apply = (theta, slide, alpha) => {
+      const c = Math.cos(theta);
+      const s = Math.sin(theta);
+      strips.forEach(({ m, mat }, i) => {
+        // 짝수 띠는 바닥에 붙고 홀수 띠는 카메라 쪽으로 — 병풍처럼 왼쪽으로 접힌다
+        const x = -aspect / 2 + i * sw * c - slide;
+        const z = i % 2 ? sw * s : 0;
+        m.position.set(x, 0, z);
+        m.rotation.y = i % 2 ? theta : -theta;
+        mat.uniforms.dim.value = (i % 2 ? 0.42 : 0.12) * s;
+        mat.uniforms.opacity.value = alpha;
+        m.visible = alpha > 0;
+      });
+    };
+  }
+
+  return {
+    frame(u: number) {
+      const s = foldRig(u, env, style);
+      aim(k.cam, s.cam);
+      apply(s.amount, s.slide, s.alpha);
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}