kasaframe 0.1.1 → 0.1.3

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

@@ -4,12 +4,12 @@ import type { Vec3 } from "../camera.ts";
 export type { Vec3 };
 
 /** 3D 일곱 가지 + gl-transitions(`gl:<이름>`) + SmoothUI 덮개(`smooth:<이름>`) */
-export type Transition3dName = "dive" | "portal" | "cards" | "shatter" | "zoomOut" | "fold" | "diveChain" | "whip" | `gl:${string}` | `smooth:${string}`;
+export type Transition3dName = "dive" | "portal" | "cards" | "shatter" | "zoomOut" | "fold" | "diveChain" | "whip" | "rise" | "land" | `gl:${string}` | `smooth:${string}`;
 
-export const TRANSITIONS_3D = ["dive", "portal", "cards", "shatter", "zoomOut", "fold", "diveChain", "whip"] as const satisfies readonly Transition3dName[];
+export const TRANSITIONS_3D = ["dive", "portal", "cards", "shatter", "zoomOut", "fold", "diveChain", "whip", "rise", "land"] as const satisfies readonly Transition3dName[];
 
 /** 혼자 쓸 때(장면 길이를 안 줄 때) 기본 길이 */
-export const DUR_3D: Record<(typeof TRANSITIONS_3D)[number], number> = { dive: 2.8, portal: 2.2, cards: 2.6, shatter: 2.2, zoomOut: 2.4, fold: 2.0, diveChain: 2.4, whip: 1.2 };
+export const DUR_3D: Record<(typeof TRANSITIONS_3D)[number], number> = { dive: 2.8, portal: 2.2, cards: 2.6, shatter: 2.2, zoomOut: 2.4, fold: 2.0, diveChain: 2.4, whip: 1.2, rise: 1.8, land: 1.6 };
 
 /** 혼자 쓸 때 기본 길이 — 셰이더 전환(gl·smooth)은 짧게 */
 export const durOf = (kind: Transition3dName): number => (kind in DUR_3D ? DUR_3D[kind as keyof typeof DUR_3D] : 1.2);
@@ -156,15 +156,18 @@ export function diveRig(u: number, env: Env): DiveState {
     const fly = seg(u, 0.5, 1, "outCubic");
     pos = mixV([0, 0, -0.06], [0, 0, -DIVE_DEPTH + FIT], fly);
     look = mixV([0, 0, -1], [0, 0, -DIVE_DEPTH], Math.min(1, fly * 1.6));
-    // 통로를 나는 동안 한 바퀴 통째로 돈다
-    barrel = side * 2 * Math.PI * seg(u, 0.54, 0.9, "inOutCubic");
+    // 통로를 나는 동안 한 바퀴 통째로 돈다 — 끝 판이 화면의 25% 를 넘기 전(u 0.78)에 다 돈다. 커진 밝은 판이 어두운 통로 위에서 돌면
+    // 칸마다 밝음·어둠이 빠르게 오가 섬광 검사(frame.flash)에 걸린다
+    barrel = side * 2 * Math.PI * seg(u, 0.52, 0.78, "inOutCubic");
   }
   const roll = side * -0.14 * hump(seg(u, 0.28, 0.9)) + barrel;
   return {
     cam: { pos, look, roll: u <= 0 || u >= 1 ? 0 : roll },
-    dissolve: seg(u, 0.33, 0.47, "inOutQuad"),
+    // 화면은 가장 멀리 물러난 동안 통로로 녹는다 — 다시 다가가 화면이 시야를 채울 때 밝은 앞 장면이 한 번 더 차오르면
+    // 밝음·어둠이 한 전환 안에서 두 번 오가 섬광 검사(frame.flash)에 걸린다
+    dissolve: seg(u, 0.18, 0.32, "inOutQuad"),
     inside: pos[2] < 0.04,
-    glitch: hump(seg(u, 0.2, 0.36)),
+    glitch: hump(seg(u, 0.08, 0.26)),
   };
 }
 
@@ -480,14 +483,15 @@ export function arrivalsOn(beats: Beats, grid: BeatGrid, from: number, n: number
 // ── 휙 넘기기: 제자리에서 90° 를 휙 돈다 ──
 
 /**
- * 반대로 살짝 감았다가(예비 동작) 확 돌고, 4.5% 넘쳤다가 되돌아와 선다. 도는 동안 몸을 기울이고 화각을 넓힌다.
+ * 반대로 살짝 감았다가(예비 동작) 확 돌고, 1.5% 넘쳤다가 되돌아와 선다. 도는 동안 몸을 기울이고 화각을 넓힌다.
  * 양 끝은 기울기·화각 0 — 앞 판·뒤 판이 꽉 찬다
  */
 export function whipRig(u: number, env: Env): { cam: Pose; side: 1 | -1 } {
   const side = rand(env.seed, 13) < 0.5 ? -1 : 1;
   const edge = u <= 0 || u >= 1;
   const wind = -0.045 * Math.sin(Math.PI * seg(u, 0, 0.24));
-  const turn = u < 0.8 ? 1.045 * seg(u, 0.14, 0.8, "inOutQuart") : 1 + 0.045 * (0.5 + 0.5 * Math.cos(Math.PI * seg(u, 0.8, 1)));
+  // 넘침은 1.5% — 밝은 판 가장자리가 되돌아오며 칸을 한 번 더 쓸면 섬광 검사(frame.flash)가 꺾임을 두 번 더 센다
+  const turn = u < 0.8 ? 1.015 * seg(u, 0.14, 0.8, "inOutQuart") : 1 + 0.015 * (0.5 + 0.5 * Math.cos(Math.PI * seg(u, 0.8, 1)));
   const p = u <= 0 ? 0 : u >= 1 ? 1 : turn + wind;
   const yaw = (side * Math.PI * p) / 2;
   return {
@@ -500,3 +504,97 @@ export function whipRig(u: number, env: Env): { cam: Pose; side: 1 | -1 } {
     },
   };
 }
+
+// ── 공간 잇기: 2D 와 3D 사이를 같은 공간으로 ──
+
+/** 판 위 주인공 상자 — 판 좌표(가로 aspect·세로 1, 가운데가 0, 위가 +). 앞 장면이 stage.hero 로 짚은 요소를 잰다 */
+export interface HeroBox {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/** 주인공 블록이 서는 높이 — 2D 상자가 클수록 높게, 화면 높이의 1/3 안에서 */
+export const liftOf = (hero: HeroBox): number => Math.min(0.22, 0.08 + 0.45 * Math.min(hero.w, hero.h));
+
+/** rise — 뒤 장면 벽이 서는 깊이. 누운 앞 판(깊이 1) 끝보다 멀어 끝 구도에서 블록이 카메라 뒤로 빠진다 */
+export const RISE_WALL = 1 + FIT + 0.35;
+
+export interface RiseState {
+  cam: Pose;
+  /** 앞 판이 아래 가장자리를 축으로 뒤로 누운 각(0 → -π/2) — 판의 법선이 위를 보게 되어 블록이 바로 선다 */
+  lie: number;
+  /** 주인공 블록 높이(판 법선 방향) */
+  lift: number;
+}
+
+/**
+ * 2D → 3D. 처음엔 앞 장면 판이 화면을 꽉 채우고(경계 프레임 그대로), 주인공 상자가 같은 화면 자리에서 블록으로 솟는다.
+ * 판이 아래 가장자리를 축으로 뒤로 누워 바닥이 되면 블록은 그 위에 선 물체가 되고, 카메라가 깊이로 기울어 들어가
+ * 블록 위를 지나 바닥 끝 벽(뒤 장면 첫 화면)을 정면으로 꽉 채우며 선다
+ */
+export function riseRig(u: number, env: Env, hero: HeroBox): RiseState {
+  const hx = hero.x;
+  const near = -(hero.y + 0.5);
+  // 블록 위를 높이 지난다 — 낮게 스치면 블록 옆면이 화면을 크게 쓸어 섬광 검사(frame.flash)에 걸린다
+  const keys: Vec3[] = [
+    [0, 0, FIT],
+    [hx * 0.2, 0.16, FIT * 0.85],
+    [hx * 0.1, 0.52, near - 0.35],
+    [0, 0, -RISE_WALL + FIT],
+  ];
+  const looks: Vec3[] = [
+    [0, 0, 0],
+    [hx * 0.45, -0.32, near * 0.7],
+    [0, -0.1, -RISE_WALL],
+    [0, 0, -RISE_WALL],
+  ];
+  const sway = rand(env.seed, 70) < 0.5 ? -1 : 1;
+  const edge = u <= 0 || u >= 1;
+  return {
+    cam: { pos: spline(keys, u), look: spline(looks, u), roll: edge ? 0 : sway * 0.06 * hump(seg(u, 0.15, 0.9)) },
+    lie: (-Math.PI / 2) * seg(u, 0.1, 0.6, "inOutCubic"),
+    lift: u <= 0 ? 0 : liftOf(hero) * seg(u, 0, 0.42, "outCubic"),
+  };
+}
+
+/** land — 뒤 장면 판의 크기와 자리. 작게 두어야 카메라가 다가가며(뒤로 물러나지 않고) 판이 화면을 꽉 채운다 */
+export const LAND_CARD = 0.4;
+export const LAND_Z = 0.3;
+
+export interface LandState {
+  cam: Pose;
+  /** 뒤 장면 판이 누운 각(-π/2 누움 → 0 섰다) — 아래 가장자리가 축 */
+  lie: number;
+  /** 뒤 장면 주인공 블록 높이 — 판이 서며 평면으로 내려앉는다 */
+  lift: number;
+  /** 뒤 장면 판의 불투명도 — 처음 프레임은 앞 장면 그대로 */
+  alpha: number;
+}
+
+/**
+ * 3D → 2D. 앞 장면(3D 샷 마지막 화면)이 꽉 찬 채 시작해, 그 앞 공간에 누워 있던 판 하나가 일어서고 카메라가 그 판으로 다가간다.
+ * 판 위 주인공 블록은 평면으로 내려앉고, 판이 화면을 정면으로 꽉 채운 순간이 뒤 장면 첫 화면이다
+ */
+export function landRig(u: number, env: Env, hero: HeroBox): LandState {
+  const z = LAND_Z;
+  const keys: Vec3[] = [
+    [0, 0, FIT],
+    [hero.x * LAND_CARD * 0.2, 0.08, FIT * 0.85],
+    [0, 0.04, z + FIT * LAND_CARD * 1.5],
+    [0, 0, z + FIT * LAND_CARD],
+  ];
+  const looks: Vec3[] = [
+    [0, 0, 0],
+    [0, -0.12, z - 0.2],
+    [0, -0.02, z],
+    [0, 0, z],
+  ];
+  return {
+    cam: { pos: spline(keys, u), look: spline(looks, u) },
+    lie: (-Math.PI / 2) * (1 - seg(u, 0.12, 0.85, "inOutCubic")),
+    lift: u >= 1 ? 0 : liftOf(hero) * LAND_CARD * (1 - seg(u, 0.45, 0.95, "inOutCubic")),
+    alpha: seg(u, 0, 0.14),
+  };
+}

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

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import { clamp } from "@kasaframe/core";
 import { hump, rr, seg, shatterRig, tileAmount, tileGrid, tiles, type Tile } from "./rig.ts";
-import { aim, disposeTree, imageMaterial, raw, sky, type Kit } from "./world.ts";
+import { aim, bridgeSky, disposeTree, imageMaterial, raw, sky, type Kit } from "./world.ts";
 
 // 칸 꼭짓점을 칸 번호의 같은 식으로 셈한다 — 이웃 칸의 맞닿은 모서리가 비트까지 같아야 조립된 그림에 금이 안 간다
 function tileGeometry(aspect: number, cols: number, rows: number, c: number, r: number): THREE.BufferGeometry {
@@ -20,7 +20,9 @@ export function shatter(k: Kit) {
   const { aspect, pal, seed } = k;
   const env = { aspect, seed };
   const scene = new THREE.Scene();
-  scene.add(sky({ top: pal.deep, bottom: "#020308", glow: pal.accent, dir: [0, 0, -1], amt: 0.6, pow: 8 }));
+  // 깨진 틈으로 보이는 하늘은 앞 화면 → 뒤 화면 평균 밝기로 넘어간다(bridgeSky) — 밝은 화면 틈으로 어두운 하늘이 번쩍이면 섬광으로 잡힌다
+  const air = sky({ top: pal.deep, bottom: pal.deep, glow: pal.accent, dir: [0, 0, -1], amt: 0.3, pow: 8 });
+  scene.add(air);
   const { cols } = tileGrid(env, ROWS);
   const sides: { tile: Tile; mesh: THREE.Mesh; c: THREE.Vector3 }[][] = [[], []];
   for (const side of [0, 1] as const) {
@@ -58,6 +60,7 @@ export function shatter(k: Kit) {
   return {
     frame(u: number) {
       aim(k.cam, shatterRig(u, env).cam);
+      bridgeSky(k, air, u);
       for (const side of [0, 1] as const) {
         for (const { tile, mesh, c } of sides[side]) {
           const a = tileAmount(u, tile, side);

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

@@ -0,0 +1,173 @@
+import * as THREE from "three";
+import { LAND_CARD, LAND_Z, RISE_WALL, landRig, liftOf, riseRig, seg, type HeroBox } from "./rig.ts";
+import { aim, bridgeSky, disposeTree, gridPlane, imageMaterial, sky, type ImageMaterial, type Kit, type KindRun, type Screen } from "./world.ts";
+
+/** 화면 비율로 준 주인공 상자(왼쪽 위가 0, CSS 처럼) */
+export interface HeroRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+interface Hero {
+  box: HeroBox;
+  color: THREE.Color;
+}
+
+const CENTER: HeroRect = { x: 0.3, y: 0.38, w: 0.4, h: 0.24 };
+const WHITE = new THREE.Color(1, 1, 1);
+
+function toBox(r: HeroRect, aspect: number): HeroBox {
+  return { x: (r.x + r.w / 2 - 0.5) * aspect, y: 0.5 - (r.y + r.h / 2), w: r.w * aspect, h: r.h };
+}
+
+// 2D 에서 칠한 색 그대로 3D 블록 옆면에 — 같은 것은 2D·3D 에서 같은 색이어야 한 물체로 읽힌다
+function colorOf(el: Element, fallback: string): THREE.Color {
+  const cs = getComputedStyle(el);
+  const solid = (c: string) => !!c && c !== "transparent" && !/rgba\([^)]*,\s*0\)$/.test(c);
+  const css = solid(cs.backgroundColor) ? cs.backgroundColor : solid(cs.color) ? cs.color : fallback;
+  return new THREE.Color().setStyle(css, THREE.LinearSRGBColorSpace);
+}
+
+/**
+ * 살아 있는 장면 화면에서 주인공 상자를 잰다 — 장면이 stage.hero 로 짚은 [data-kf-hero], 없으면 가장 넓은 글 덩어리.
+ * 그림만 있는 화면(정지 그림·영상)이면 준 상자(rect), 그것도 없으면 가운데
+ */
+function heroOf(screen: Screen, aspect: number, rect: HeroRect | undefined, accent: string): Hero {
+  const box = screen.box;
+  if (rect || !box) return { box: toBox(rect ?? CENTER, aspect), color: new THREE.Color().setStyle(accent, THREE.LinearSRGBColorSpace) };
+  const br = box.getBoundingClientRect();
+  let el: Element | null = box.querySelector("[data-kf-hero]");
+  if (!el) {
+    let best = 0;
+    for (const cand of Array.from(box.querySelectorAll("div,span,h1,h2,p"))) {
+      if (!cand.textContent?.trim() || cand.children.length > 3) continue;
+      const r = cand.getBoundingClientRect();
+      const a = r.width * r.height;
+      if (a > best && a < br.width * br.height * 0.6) {
+        best = a;
+        el = cand;
+      }
+    }
+  }
+  const r = el?.getBoundingClientRect();
+  if (!el || !r || br.width < 1 || r.width < 1) return { box: toBox(CENTER, aspect), color: new THREE.Color().setStyle(accent, THREE.LinearSRGBColorSpace) };
+  const fx = (r.left - br.left) / br.width;
+  const fy = (r.top - br.top) / br.height;
+  const clip = (v: number) => Math.min(1, Math.max(0, v));
+  const x = clip(fx);
+  const y = clip(fy);
+  return { box: toBox({ x, y, w: clip(fx + r.width / br.width) - x, h: clip(fy + r.height / br.height) - y }, aspect), color: colorOf(el, accent) };
+}
+
+/**
+ * 장면 판 하나 + 그 위 주인공 블록. 원점은 판의 아래 가장자리 가운데(눕고 서는 축). size 는 판 높이
+ * — 블록 윗면은 판 그림의 같은 자리를 잘라 붙여, 솟기 전과 후가 같은 그림이다
+ */
+function page(map: THREE.Texture, aspect: number, size: number) {
+  const group = new THREE.Group();
+  const mat = imageMaterial(map, { double: true });
+  const plane = new THREE.Mesh(new THREE.PlaneGeometry(aspect * size, size), mat);
+  plane.position.y = size / 2;
+  group.add(plane);
+  const top = imageMaterial(map);
+  const side = (k: number) => new THREE.MeshBasicMaterial({ color: new THREE.Color(), transparent: true, userData: { k } });
+  const sides = [side(0.78), side(0.78), side(0.9), side(0.6), side(0.5)];
+  const block = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), [sides[0], sides[1], sides[2], sides[3], top, sides[4]]);
+  group.add(block);
+  // 솟은 자리의 그늘 — 비스듬히 볼 때 판에 같은 그림이 두 번 보이지 않게 눌러 둔다
+  const socket = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0, depthWrite: false }));
+  group.add(socket);
+  return {
+    group,
+    mats: [mat, top] as ImageMaterial[],
+    /** wash — 판을 그 색(하늘) 쪽으로 물들이는 몫. 멀어지는 판 가장자리가 하늘 위에서 칸마다 쓸려 섬광으로 잡히지 않게 */
+    set(hero: Hero, lift: number, alpha: number, wash = 0, tone?: THREE.Color) {
+      const h = hero.box;
+      const e = Math.max(lift, 1e-4);
+      block.visible = lift > 1e-4;
+      block.position.set(h.x * size, (h.y + 0.5) * size, e / 2);
+      block.scale.set(h.w * size, h.h * size, e);
+      top.uniforms.uvRect.value.set((h.x - h.w / 2) / aspect + 0.5, h.y - h.h / 2 + 0.5, h.w / aspect, h.h);
+      // 옆면은 2D 색에 바탕을 조금 섞어 — 진한 옆면이 카메라 가까이 화면을 크게 쓸면 섬광 검사(frame.flash)에 걸린다
+      for (const s of sides) {
+        s.color.copy(hero.color).lerp(WHITE, 0.35).multiplyScalar(s.userData.k as number);
+        if (tone) s.color.lerp(tone, wash);
+      }
+      socket.visible = block.visible;
+      socket.position.set(h.x * size, (h.y + 0.5) * size, 0.0008);
+      socket.scale.set(h.w * size, h.h * size, 1);
+      (socket.material as THREE.MeshBasicMaterial).opacity = 0.45 * Math.min(1, lift / (liftOf(h) * size));
+      for (const m of [mat, top]) {
+        m.uniforms.opacity.value = alpha;
+        m.uniforms.tintAmt.value = wash;
+        if (tone) m.uniforms.tint.value.copy(tone);
+      }
+      for (const s of sides) s.opacity = alpha;
+      group.visible = alpha > 0;
+    },
+  };
+}
+
+/** rise(2D→3D) — 앞 장면 판이 바닥으로 눕고 주인공이 블록으로 서며, 카메라가 그 위를 지나 뒤 장면 벽 앞에 선다 */
+export function rise(k: Kit, o: { hero?: HeroRect }): KindRun {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const scene = new THREE.Scene();
+  const air = sky({ top: pal.deep, bottom: pal.deep, glow: pal.accent, dir: [0, 0, -1], amt: 0.2, pow: 4 });
+  scene.add(air);
+  // 눕은 판에 이어지는 바닥 — 정지한 옅은 모눈이라 공간의 깊이만 알린다
+  scene.add(gridPlane({ color: pal.accent, y: -0.5, width: aspect * 3, depth: RISE_WALL + 1, z: -(RISE_WALL + 1) / 2, focus: -RISE_WALL }));
+  const a = page(k.from.texture, aspect, 1);
+  a.group.position.set(0, -0.5, 0);
+  scene.add(a.group);
+  const wall = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), imageMaterial(k.to.texture));
+  wall.position.set(0, 0, -RISE_WALL);
+  scene.add(wall);
+  return {
+    frame(u) {
+      const hero = heroOf(k.from, aspect, o.hero, pal.accent);
+      const s = riseRig(u, env, hero.box);
+      a.group.rotation.x = s.lie;
+      aim(k.cam, s.cam);
+      bridgeSky(k, air, u);
+      // 블록이 다 선 뒤 카메라가 고개를 드는 동안 판·블록이 하늘 색으로 물든다 — 빠르게 쓸려 가는 판과 블록이 칸마다 밝음·어둠을 오가지 않게
+      a.set(hero, s.lift, 1, 0.92 * seg(u, 0.18, 0.5, "inOutCubic"), air.material.uniforms.top.value);
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}
+
+/** land(3D→2D) — 앞 장면(3D 샷 끝 화면) 앞 공간에 누운 판이 일어서고, 카메라가 다가가 그 판이 뒤 장면 첫 화면이 된다 */
+export function land(k: Kit, o: { hero?: HeroRect }): KindRun {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const scene = new THREE.Scene();
+  const air = sky({ top: pal.deep, bottom: pal.deep, glow: pal.accent, dir: [0, 0, -1], amt: 0.2, pow: 4 });
+  scene.add(air);
+  const back = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), imageMaterial(k.from.texture));
+  scene.add(back);
+  const b = page(k.to.texture, aspect, LAND_CARD);
+  b.group.position.set(0, -LAND_CARD / 2, LAND_Z);
+  scene.add(b.group);
+  return {
+    frame(u) {
+      const hero = heroOf(k.to, aspect, o.hero, pal.accent);
+      const s = landRig(u, env, hero.box);
+      b.group.rotation.x = s.lie;
+      aim(k.cam, s.cam);
+      bridgeSky(k, air, u);
+      b.set(hero, s.lift, s.alpha, 0.85 * (1 - seg(u, 0.3, 0.85, "inOutCubic")), air.material.uniforms.top.value);
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}

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

@@ -1,6 +1,6 @@
 import * as THREE from "three";
-import { FIT, rr, whipRig } from "./rig.ts";
-import { aim, disposeTree, dust, frameRing, imageMaterial, raw, sky, type Kit, type KindRun } from "./world.ts";
+import { FIT, hump, rr, seg, whipRig } from "./rig.ts";
+import { aim, bridgeSky, disposeTree, dust, frameRing, imageMaterial, raw, sky, type Kit, type KindRun } from "./world.ts";
 
 /**
  * 휙 넘기기 — 카메라는 제자리에서 돌고, 앞 판은 정면·뒤 판은 옆(90°)에 선다. 둘레에 판과 빛줄을 둘러
@@ -11,7 +11,9 @@ export function whip(k: Kit): KindRun {
   const env = { aspect, seed };
   const side = whipRig(0, env).side;
   const scene = new THREE.Scene();
-  scene.add(sky({ top: pal.deep, bottom: "#03050b", glow: pal.accent, dir: [-side, 0, -1], amt: 0.5, pow: 3 }));
+  // 하늘은 앞 화면 → 뒤 화면 평균 밝기로 서서히 넘어간다(bridgeSky) — 두 화면 사이로 다른 밝기의 하늘이 쓸려 지나가면 섬광으로 잡힌다
+  const air = sky({ top: pal.deep, bottom: pal.deep, glow: pal.accent, dir: [-side, 0, -1], amt: 0.2, pow: 3 });
+  scene.add(air);
   const at = (yaw: number, r: number, y = 0): THREE.Vector3 => new THREE.Vector3(-Math.sin(yaw) * r, y, -Math.cos(yaw) * r);
 
   const place = (mesh: THREE.Object3D, yaw: number, r: number, y = 0) => {
@@ -19,8 +21,10 @@ export function whip(k: Kit): KindRun {
     mesh.rotation.y = yaw;
     scene.add(mesh);
   };
-  place(new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), imageMaterial(k.from.texture)), 0, FIT);
-  place(new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), imageMaterial(k.to.texture)), (side * Math.PI) / 2, FIT);
+  const fromMat = imageMaterial(k.from.texture);
+  const toMat = imageMaterial(k.to.texture);
+  place(new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), fromMat), 0, FIT);
+  place(new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), toMat), (side * Math.PI) / 2, FIT);
 
   // 사이를 메우는 판 — 앞·뒤 그림을 흐리게 눌러 쓴다. 정면·옆 판 자리(꽉 찬 시야)는 비운다
   for (let i = 0; i < 7; i++) {
@@ -29,7 +33,8 @@ export function whip(k: Kit): KindRun {
     const s = rr(seed, 220 + i, 0.45, 0.8);
     const mat = imageMaterial((i % 2 ? k.from : k.to).soft(), { double: true, back: pal.deep });
     mat.uniforms.bias.value = 3;
-    mat.uniforms.dim.value = 0.35;
+    // 하늘과 비슷한 밝기로 — 판과 하늘이 칸마다 밝음·어둠으로 엇갈리지 않게 눌러 둔다
+    mat.uniforms.opacity.value = 0.35;
     const g = new THREE.Group();
     g.add(new THREE.Mesh(new THREE.PlaneGeometry(aspect * s, s), mat));
     g.add(new THREE.Mesh(frameRing(aspect * s, s, 0.008), new THREE.MeshBasicMaterial({ color: raw(pal.glow), transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending, depthWrite: false })));
@@ -55,6 +60,14 @@ export function whip(k: Kit): KindRun {
   return {
     frame(u) {
       aim(k.cam, whipRig(u, env).cam);
+      bridgeSky(k, air, u);
+      // 가장 빠르게 쓸리는 동안 두 판의 대비를 하늘(두 화면 평균) 쪽으로 누른다 — 진짜 셔터가 번져 대비가 죽는 것처럼.
+      // 밝고 어두운 무늬가 섞인 화면이 빠르게 쓸리면 칸마다 밝음·어둠이 여러 번 오가 섬광으로 잡힌다. 양 끝은 0 이라 경계 프레임은 그대로
+      const wash = 0.65 * hump(seg(u, 0.12, 0.88));
+      for (const m of [fromMat, toMat]) {
+        m.uniforms.tint.value.copy(air.material.uniforms.top.value);
+        m.uniforms.tintAmt.value = wash;
+      }
       k.renderer.clear(true, true, true);
       k.renderer.render(scene, k.cam);
     },

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

@@ -584,6 +584,60 @@ export function sky(o: { top: string; bottom: string; glow: string; dir?: [numbe
   return m;
 }
 
+const lumOf = (buf: Uint8Array, i: number): number => buf[i * 4] * 54 + buf[i * 4 + 1] * 183 + buf[i * 4 + 2] * 19;
+
+// 화면 그림의 바탕 쪽 색 — 판이 화면에 찍는 값 그대로(imageMaterial 로 32×18 판에 그려 읽는다). 렌더러마다 판 하나.
+// 그냥 평균은 흰 바탕 위 검은 글도 회색으로 섞어 판 가장자리가 하늘 위에서 도드라진다
+const probes = new WeakMap<THREE.WebGLRenderer, { rt: THREE.WebGLRenderTarget; scene: THREE.Scene; cam: THREE.OrthographicCamera; mat: ImageMaterial; buf: Uint8Array }>();
+export function screenTone(renderer: THREE.WebGLRenderer, map: THREE.Texture, out = new THREE.Color()): THREE.Color {
+  let p = probes.get(renderer);
+  if (!p) {
+    const mat = imageMaterial(map);
+    const scene = new THREE.Scene();
+    scene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat));
+    p = { rt: new THREE.WebGLRenderTarget(32, 18, { depthBuffer: false }), scene, cam: new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1), mat, buf: new Uint8Array(32 * 18 * 4) };
+    probes.set(renderer, p);
+  }
+  p.mat.uniforms.map.value = map;
+  const prev = renderer.getRenderTarget();
+  renderer.setRenderTarget(p.rt);
+  renderer.clear(true, false, false);
+  renderer.render(p.scene, p.cam);
+  renderer.readRenderTargetPixels(p.rt, 0, 0, 32, 18, p.buf);
+  renderer.setRenderTarget(prev);
+  // 밝기 순으로 줄 세워 가운데 절반만 평균 — 흰 바탕 위 검은 글은 바탕색이 되고, 반반인 화면은 그 사이가 된다.
+  // 가장 많은 색(최빈값)은 비슷한 두 색 사이에서 프레임마다 뒤집혀 하늘이 한 프레임씩 번쩍였다 — 줄 세운 값의 평균은 이어진다
+  const n0 = p.buf.length / 4;
+  const order = Array.from({ length: n0 }, (_, i) => i).sort((x, y) => lumOf(p.buf, x) - lumOf(p.buf, y) || x - y);
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  const lo = Math.floor(n0 * 0.25);
+  const hi = Math.ceil(n0 * 0.75);
+  for (let k = lo; k < hi; k++) {
+    const i = order[k] * 4;
+    r += p.buf[i];
+    g += p.buf[i + 1];
+    b += p.buf[i + 2];
+  }
+  const n = hi - lo;
+  return out.setRGB(r / n / 255, g / n / 255, b / n / 255);
+}
+
+/**
+ * 화면 사이로 보이는 하늘을 앞 화면 바탕색 → 뒤 화면 바탕색으로 서서히 넘긴다. 밝은 화면과 어두운 공간이 칸마다 엇갈려 오가면
+ * 섬광 검사(frame.flash)에 걸린다 — 밝기가 크게 다른 두 화면 사이에서도 하늘이 그 사이 밝기로 한 번만 넘어간다.
+ * 매 프레임 sky 의 top·bottom 을 고친다(살아 있는 화면은 프레임마다 바탕이 바뀐다)
+ */
+export function bridgeSky(k: Kit, sky: THREE.Mesh<THREE.SphereGeometry, THREE.ShaderMaterial>, u: number, o: { shade?: number } = {}): void {
+  const a = screenTone(k.renderer, k.from.texture, new THREE.Color());
+  const b = screenTone(k.renderer, k.to.texture, new THREE.Color());
+  const p = u <= 0 ? 0 : u >= 1 ? 1 : u * u * (3 - 2 * u);
+  const c = a.lerp(b, p).multiplyScalar(1 - (o.shade ?? 0.04));
+  sky.material.uniforms.top.value.copy(c);
+  sky.material.uniforms.bottom.value.copy(c).multiplyScalar(0.94);
+}
+
 /** 시드로 흩은 빛 점들 — 지나가는 속도감. 같은 시드면 같은 자리 */
 export function dust(positions: Float32Array, color: string, size: number): THREE.Points {
   const geo = new THREE.BufferGeometry();

package/packages/motion/src/transitions2d/catalog.ts

@@ -27,7 +27,7 @@ export interface TransitionEntry {
 
 const SPDX: Record<string, string> = { MIT: "MIT", "BSD 2 Clause": "BSD-2-Clause", "BSD 3 Clause": "BSD-3-Clause" };
 
-const KASAFRAME_3D: TransitionEntry[] = ["dive", "portal", "cards", "shatter", "zoomOut", "fold", "diveChain", "whip"].map((name) => ({
+const KASAFRAME_3D: TransitionEntry[] = ["dive", "portal", "cards", "shatter", "zoomOut", "fold", "diveChain", "whip", "rise", "land"].map((name) => ({
   name,
   source: "kasaframe",
   license: "kasaframe",

package/packages/patterns/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@kasaframe/patterns",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*.ts"
+  },
+  "dependencies": {
+    "@kasaframe/core": "0.0.0",
+    "@kasaframe/motion": "^0.0.0",
+    "@kasaframe/themes": "0.0.0"
+  }
+}

package/packages/patterns/src/bars/rank.ts

@@ -0,0 +1,119 @@
+import { applyStyle, clamp, combine } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { area, beatStops, decimalsOf, factRoll, glider, node, slotsOf, spaced, moving } from "../kit.ts";
+import { cssColor, objectFor } from "../objects.ts";
+import type { Pattern } from "../types.ts";
+
+export interface BarsContent {
+  items: { label: string; value: number; unit?: string }[];
+  unit?: string;
+  highlight?: string;
+  source?: string;
+}
+
+/**
+ * 막대가 순위대로 박마다 한 줄씩 자라고 값이 같은 진행도로 굴러 오른다(막대 길이 = 값). 다 자라면 짚개가 강조 줄과 다른 줄을 번갈아 짚는다.
+ * 단위·이름이 객체 사전의 막대 물체면(지연 ms) 그 색·모서리. 자라는 시각을 장면 끝까지 펴서 쉬지 않는 몫을 막대가 진다.
+ */
+const pattern: Pattern<BarsContent> = {
+  id: "bars.rank",
+  type: "bars",
+  does: "막대가 순위대로 박마다 자라고 값이 굴러 오른다, 다 자라면 짚개가 강조 줄과 다른 줄을 번갈아 짚는다",
+  energy: ["mid"],
+  family: "grow",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.5, max: 9 },
+  themes: { "og-measure": 0.6, "debug-hud": 0.4 },
+  fits(c) {
+    const items = c?.items;
+    if (!Array.isArray(items) || items.length < 2) return "items 가 둘보다 적다";
+    if (items.length > 8) return "items 가 여덟을 넘는다";
+    for (const [i, it] of items.entries()) {
+      if (typeof it?.label !== "string" || !it.label.trim()) return `items[${i}].label 이 비었다`;
+      if (!Number.isFinite(it.value) || it.value < 0) return `items[${i}].value 가 0 이상 수가 아니다`;
+    }
+    if (!items.some((it) => it.value > 0)) return "값이 다 0 이다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const rows = [...c.items].sort((a, b) => b.value - a.value);
+    const n = rows.length;
+    const max = Math.max(...rows.map((r) => r.value));
+    const hot = c.highlight ? rows.findIndex((r) => r.label === c.highlight) : 0;
+    const obj = objectFor(c.unit) ?? objectFor(rows[0].unit) ?? null;
+    const barObj = obj?.shape2d.kind === "bar" ? obj : null;
+    const barColor = barObj ? cssColor(barObj.color) : "var(--kf-accent)";
+    const radius = barObj?.shape2d.radius === "pill" ? "999px" : "var(--kf-radius-sm)";
+
+    const gridH = h * (vertical ? 0.7 : 0.84);
+    const rowH = gridH / n;
+    const barH = Math.round(rowH * 0.56);
+    const fmtVal = (r: BarsContent["items"][number], text: string) => {
+      const unit = r.unit ?? c.unit ?? "";
+      return `${text}${unit ? ` ${unit}` : ""}`;
+    };
+    // 소수 자리는 줄끼리 같게 — 746 과 612.5 가 나란히면 746.0
+    const dec = Math.max(...rows.map((r) => decimalsOf(r.value)));
+    const finals = rows.map((r) => fmtVal(r, factRoll(Infinity, { from: 0, to: r.value, at: 0, dur: 1, decimals: dec }).text));
+    const labelPx = Math.round(Math.min(rowH * 0.36, fitSize(rows.reduce((a, r) => (textEm(r.label) > textEm(a) ? r.label : a), ""), w * (vertical ? 0.9 : 0.3), rowH, { hShare: 0.36, max: 72 * u, min: 30 * u })));
+    const valPx = Math.round(Math.min(barH * 0.62, labelPx * 1.15));
+    const labelW = vertical ? 0 : Math.round(Math.max(...rows.map((r) => textEm(r.label))) * labelPx + 32 * u);
+    const valW = Math.round(Math.max(...finals.map((f) => textEm(f))) * valPx * 1.05 + 24 * u);
+    const trackW = w * 0.94 - labelW - valW;
+    const x0 = w * 0.03;
+    const y0 = (h - gridH) / 2;
+
+    const host = node(root, "position:absolute;inset:0");
+    const hits = spaced(kit.hits.length ? kit.hits : [0], 0.3);
+    // 줄마다 자라기 시작하는 박 — 마지막 줄이 끝에서 강조할 틈(0.7초)을 남기고 다 자라게 편다
+    // 줄은 박마다 하나씩 0.75초에 자란다 — 장면 길이에 맞춰 늘이면 긴 장면에서 줄 사이가 멈춘 화면이 된다
+    const growDur = 0.75;
+    const starts: number[] = [];
+    for (const b of hits) if (starts.length < n && (!starts.length || b >= starts[starts.length - 1] + 0.32)) starts.push(b);
+    while (starts.length < n) starts.push((starts[starts.length - 1] ?? 0) + 0.4);
+    const hotAt = Math.max(...starts) + growDur;
+
+    const lines = rows.map((r, i) => {
+      const y = y0 + i * rowH;
+      const row = node(host, `position:absolute;left:${x0}px;top:${y}px;width:${w * 0.94}px;height:${rowH}px`);
+      const label = node(row, vertical
+        ? `position:absolute;left:0;top:0;font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:600;color:var(--kf-ink);white-space:nowrap;line-height:1`
+        : `position:absolute;left:0;top:50%;width:${labelW - 16 * u}px;margin-top:-0.55em;text-align:right;font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:600;color:var(--kf-ink);white-space:nowrap;line-height:1.1;min-height:1.1em`);
+      const barTop = vertical ? labelPx * 1.2 : (rowH - barH) / 2;
+      const track = node(row, `position:absolute;left:${labelW}px;top:${barTop}px;width:${trackW}px;height:${vertical ? Math.round(rowH - labelPx * 1.4) : barH}px`);
+      const bar = node(track, `position:absolute;left:0;top:0;bottom:0;width:${((r.value / max) * 100).toFixed(3)}%;background:${i === hot ? barColor : "var(--kf-dim)"};border-radius:${radius};transform-origin:0 50%`);
+      const val = node(row, `position:absolute;top:${barTop}px;height:${vertical ? Math.round(rowH - labelPx * 1.4) : barH}px;display:flex;align-items:center;font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;color:var(--kf-ink);font-variant-numeric:tabular-nums;white-space:nowrap`);
+      const writeLabel = slots.write(label, { ctx, text: r.label, at: starts[i], dur: 0.25, seed: `${kit.seed}:l${i}` });
+      const landed = slots.land(val, { ctx, at: starts[i] + growDur, seed: `${kit.seed}:v${i}` });
+      return { r, i, row, bar, val, writeLabel, landed };
+    });
+    const hotLine = lines[Math.max(0, hot)];
+    kit.stage?.hero(hotLine.val);
+    // 다 자라면 짚개가 강조 줄 ↔ 다른 줄을 박마다 번갈아 짚는다 — 강조 줄과 견주는 몫
+    const point = glider(host, [hotLine.row, ...lines.filter((L) => L !== hotLine).map((L) => L.row)], { hub: true, pad: 0.04 });
+    const hotLand = slots.land(hotLine.val, { ctx, at: hotAt, seed: `${kit.seed}:hot` });
+    const stops = beatStops(kit.hits, hotAt - 0.1, ctx.dur);
+
+    return (t: number) => {
+      moving("bars.rank", ctx);
+      for (const L of lines) {
+        const at = starts[L.i];
+        L.row.style.visibility = t >= at ? "visible" : "hidden";
+        if (t < at) continue;
+        L.writeLabel(t);
+        const roll = factRoll(t, { from: 0, to: L.r.value, at, dur: growDur, decimals: dec });
+        applyStyle(L.bar, { scaleX: Math.max(0.004, roll.p) });
+        L.val.textContent = fmtVal(L.r, roll.text);
+        L.val.style.left = `${labelW + trackW * (L.r.value / max) * roll.p + 16 * u}px`;
+        applyStyle(L.val, L.i === hotLine.i ? combine(L.landed(t), hotLand(t)) : L.landed(t));
+      }
+      point(t, stops);
+    };
+  },
+};
+
+export default pattern;