kasaframe 0.0.0-stage → 0.1.1

package/packages/motion/src/moves/truchet.ts

@@ -0,0 +1,85 @@
+import { clamp, ease, rand, safeTime } from "@kasaframe/core";
+import { mark } from "./fit.ts";
+
+export interface TruchetOpts {
+  /** 칸 크기(px) */
+  cell?: number;
+  bg?: string;
+  line?: string;
+  /** 물결이 지나는 칸의 강조색 */
+  accent?: string;
+  lineWidth?: number;
+  /** 박마다 몇 칸이 90° 도는 시각들 */
+  hits?: number[];
+  /** 한 박에 도는 칸의 몫 */
+  share?: number;
+  /** 강조색 물결이 퍼지는 속도(px/초) — 박 사이에도 화면이 흐르게 */
+  wave?: number;
+  seed?: string | number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 트루셰 타일 미로 — 칸마다 사분원 둘(방향은 시드), 박마다 몇 칸이 물결 차례로 90° 돌고, 가운데에서 강조색 물결이 퍼진다.
+ * (Livera 15초 쇼릴 7.6–9.5초)
+ */
+export function truchet(el: HTMLElement, o: TruchetOpts = {}): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const cell = o.cell ?? 80;
+  const canvas = doc.createElement("canvas");
+  canvas.width = W;
+  canvas.height = H;
+  canvas.style.cssText = `position:absolute;left:0;top:0;width:${W}px;height:${H}px`;
+  el.append(canvas);
+  const g = canvas.getContext("2d")!;
+  const cols = Math.ceil(W / cell) + 1;
+  const rows = Math.ceil(H / cell) + 1;
+  const seed = o.seed ?? "truchet";
+  const hits = o.hits ?? [];
+  const share = o.share ?? 0.3;
+  const cx = W / 2;
+  const cy = H / 2;
+  const maxD = Math.hypot(cx, cy);
+  const waveSpeed = o.wave ?? 700;
+  return (t: number) => {
+    t = safeTime(t);
+    g.fillStyle = o.bg ?? "#0b0b0f";
+    g.fillRect(0, 0, W, H);
+    g.lineWidth = o.lineWidth ?? cell * 0.18;
+    g.lineCap = "butt";
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const i = r * cols + c;
+        const x = c * cell;
+        const y = r * cell;
+        const d = Math.hypot(x + cell / 2 - cx, y + cell / 2 - cy);
+        // 박마다 고른 칸이 가운데에서 먼 차례로 돈다 — 도는 중간 각은 t 로
+        let turns = rand(seed, i) < 0.5 ? 0 : 1;
+        hits.forEach((h, j) => {
+          if (rand(seed, (j + 1) * 100003 + i) < share) turns += ease.inOutCubic(clamp((t - h - (d / maxD) * 0.25) / 0.22));
+        });
+        // 강조색은 가운데에서 퍼지는 고리 — 늘 흐른다
+        const ring = Math.abs(((d - t * waveSpeed) % 360 + 360) % 360 - 180) / 180;
+        const hot = ring < 0.22 ? 1 - ring / 0.22 : 0;
+        g.strokeStyle = hot > 0.02 ? (o.accent ?? "#ff3b3b") : (o.line ?? "#f4f1ea");
+        g.globalAlpha = hot > 0.02 ? 0.55 + 0.45 * hot : 1;
+        g.save();
+        g.translate(x + cell / 2, y + cell / 2);
+        g.rotate((turns * Math.PI) / 2);
+        g.beginPath();
+        g.arc(-cell / 2, -cell / 2, cell / 2, 0, Math.PI / 2);
+        g.stroke();
+        g.beginPath();
+        g.arc(cell / 2, cell / 2, cell / 2, Math.PI, Math.PI * 1.5);
+        g.stroke();
+        g.restore();
+      }
+    }
+    g.globalAlpha = 1;
+    mark("truchet", o.scene, hits.some((h) => t >= h && t < h + 0.5));
+  };
+}

package/packages/motion/src/moves/wordWall.ts

@@ -0,0 +1,76 @@
+import { clamp, ease, lerp, safeTime } from "@kasaframe/core";
+import { div, lastIndex, mark, textEm } from "./fit.ts";
+
+export interface WordWallOpts {
+  word: string;
+  /** 줄 수가 늘어나는 시각(장면 초) */
+  hits: number[];
+  /** hits 마다 줄 수 — 기본 3·5·9·15 */
+  rows?: number[];
+  /** 가운데 한 줄에만 쓸 낱말(없으면 word) */
+  hot?: string;
+  /** 초당 흐르는 px(화면 높이 1080 기준) */
+  speed?: number;
+  w?: number;
+  h?: number;
+  /** 장면 길이 — 띠가 끝까지 모자라지 않게 */
+  dur?: number;
+  scene?: string;
+}
+
+/**
+ * 낱말 벽 — 한 낱말이 줄마다 반대 방향으로 흐르며 화면을 메우고, 박마다 줄 수가 늘어 빽빽해진다. 가운데 한 줄만 강조색.
+ * (mexicat p(doom) 116.5초 「SUPER-DENSE」 · Livera 쇼릴 12.4초 「NEVER」)
+ */
+export function wordWall(el: HTMLElement, o: WordWallOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const counts = o.rows?.length ? o.rows : [3, 5, 9, 15];
+  const maxRows = Math.max(...counts);
+  const base = H / counts[0];
+  const F0 = base * 0.84;
+  const speed = (o.speed ?? 90) * (H / 1080);
+  const dur = o.dur ?? 30;
+  const unit = `${o.word}\u00a0\u00a0`;
+  const minScale = counts[0] / maxRows;
+  const reps = Math.ceil((W / minScale + speed * dur * 2) / (textEm(unit) * F0)) + 2;
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden;color:var(--kf-ink)");
+  el.append(layer);
+  const strips = Array.from({ length: maxRows }, (_, i) => {
+    const s = div(
+      doc,
+      `position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--kf-font-display);font-weight:900;font-size:${F0}px;line-height:1;letter-spacing:-.03em;transform-origin:0 50%`,
+      unit.repeat(reps),
+    );
+    layer.append(s);
+    return s;
+  });
+  const hotStrip = div(doc, `position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--kf-font-display);font-weight:900;font-size:${F0}px;line-height:1;letter-spacing:-.03em;transform-origin:0 50%;color:var(--kf-accent)`, `${o.hot ?? o.word}\u00a0\u00a0`.repeat(reps));
+  layer.append(hotStrip);
+  const yOf = (i: number, n: number) => (i + 0.5) * (H / n);
+
+  return (t: number) => {
+    t = safeTime(t);
+    const k = Math.max(0, lastIndex(o.hits, t));
+    const n1 = counts[Math.min(k, counts.length - 1)];
+    const n0 = k > 0 ? counts[Math.min(k - 1, counts.length - 1)] : n1;
+    const p = k > 0 || t >= (o.hits[0] ?? 0) ? ease.outCubic(clamp((t - (o.hits[k] ?? 0)) / 0.28)) : 1;
+    const scale = lerp(n0 > 0 ? counts[0] / n0 : 1, counts[0] / n1, p);
+    const hotRow = Math.floor(n1 / 2);
+    strips.forEach((s, i) => {
+      const y = i < n0 ? lerp(yOf(i, n0), yOf(i, n1), p) : yOf(i, n1);
+      const show = i < n1 ? (i < n0 ? 1 : p) : 0;
+      const dir = i % 2 ? 1 : -1;
+      // 시작 자리를 줄마다 어긋나게 — 흐름이 띠 끝에 닿지 않도록 가운데쯤에서 시작
+      const x = -(reps * textEm(unit) * F0 * scale) / 2 + dir * speed * t + i * 137;
+      s.style.transform = `translate(${x.toFixed(1)}px,${(y - (F0 * scale) / 2).toFixed(1)}px) scale(${scale.toFixed(4)})`;
+      s.style.opacity = (i === hotRow ? 0 : show * 0.32).toFixed(3);
+      if (i === hotRow) {
+        hotStrip.style.transform = s.style.transform;
+        hotStrip.style.opacity = "1";
+      }
+    });
+    mark("wordWall", o.scene, p < 1);
+  };
+}

package/packages/motion/src/moves/worldRoll.ts

@@ -0,0 +1,31 @@
+import { clamp, emit, safeTime, spring, type Style } from "@kasaframe/core";
+
+export interface WorldRollOpts {
+  /** 구르는 시각(장면 초) — 여러 번이면 배열, 한 번마다 반 바퀴씩 쌓인다 */
+  at: number | number[];
+  /** 한 번에 도는 각(도) */
+  turn?: number;
+  scene?: string;
+}
+
+/**
+ * 화면이 굴러 뒤집힌다 — 낱말 하나에 맞춰 무대 전체가 반 바퀴 돌며 살짝 물러났다 돌아오고, 끝에서 조금 넘쳤다 앉는다. 무대 상자에 건다.
+ * 카메라 움직임으로 기록된다(프레이즈당 한 번 규칙). (mexicat p(doom) 15.5–16.5초 위계가 뒤바뀌는 굴림)
+ */
+export function worldRoll(t: number, o: WorldRollOpts): Style {
+  t = safeTime(t);
+  const ats = Array.isArray(o.at) ? o.at : [o.at];
+  const turn = o.turn ?? 180;
+  let rotate = 0;
+  let dip = 0;
+  let moving = false;
+  for (const at of ats) {
+    const local = t - at;
+    if (local <= 0) continue;
+    rotate += turn * spring(local, { from: 0, to: 1, stiffness: 120, damping: 13 });
+    dip = Math.max(dip, Math.sin(Math.PI * clamp(local / 0.45)));
+    if (local < 0.6) moving = true;
+  }
+  if (moving) emit({ kind: "camera", source: "worldRoll", scene: o.scene, value: 1 });
+  return { rotate, scale: 1 - 0.16 * dip };
+}

package/packages/motion/src/particles.ts

@@ -0,0 +1,102 @@
+import { clamp, rand, randRange, safeTime } from "@kasaframe/core";
+
+export interface Particle {
+  i: number;
+  x: number;
+  y: number;
+  scale: number;
+  opacity: number;
+  rotate: number;
+  /** 0..1 — 색 고르기 등에 쓰는 시드 값 */
+  hue: number;
+}
+
+export interface SparkleOpts {
+  count?: number;
+  seed?: number | string;
+  width: number;
+  height: number;
+  /** 한 번 반짝이는 주기(초) */
+  period?: number;
+  size?: number;
+}
+
+/** 제자리 반짝이 — 자리·주기·위상이 모두 시드에서 나온다 */
+export function sparkles(t: number, opts: SparkleOpts): Particle[] {
+  t = safeTime(t);
+  const n = opts.count ?? 24;
+  const seed = opts.seed ?? "sparkle";
+  const period = opts.period ?? 1.6;
+  const out: Particle[] = [];
+  for (let i = 0; i < n; i++) {
+    const per = period * randRange(seed, i * 7 + 3, 0.7, 1.4);
+    const phase = rand(seed, i * 7 + 4);
+    const k = (((t / per + phase) % 1) + 1) % 1;
+    const tw = Math.sin(Math.PI * k) ** 3;
+    out.push({
+      i,
+      x: rand(seed, i * 7) * opts.width,
+      y: rand(seed, i * 7 + 1) * opts.height,
+      scale: (opts.size ?? 1) * (0.4 + 0.8 * rand(seed, i * 7 + 2)) * (0.5 + 0.5 * tw),
+      opacity: tw,
+      rotate: 45 * tw + 90 * rand(seed, i * 7 + 5),
+      hue: rand(seed, i * 7 + 6),
+    });
+  }
+  return out;
+}
+
+export interface BurstOpts {
+  at: number;
+  x: number;
+  y: number;
+  count?: number;
+  seed?: number | string;
+  /** 처음 속력(px/초) */
+  speed?: number;
+  /** 아래로 당기는 힘(px/초²) */
+  gravity?: number;
+  /** 수명(초) */
+  life?: number;
+  /** 퍼지는 각(도). 360 이면 사방 */
+  spread?: number;
+  /** 가운데 방향(도). 0 = 오른쪽, -90 = 위 */
+  angle?: number;
+  drag?: number;
+}
+
+/**
+ * 한 점에서 터져 나가는 조각. 위치를 닫힌 식(공기 저항 있는 포물선)으로 바로 계산해
+ * 앞 프레임 없이도 같은 자리가 나온다.
+ */
+export function burst(t: number, opts: BurstOpts): Particle[] {
+  t = safeTime(t);
+  const local = t - opts.at;
+  const life = opts.life ?? 1.2;
+  if (local < 0 || local > life * 1.4) return [];
+  const n = opts.count ?? 36;
+  const seed = opts.seed ?? "burst";
+  const spread = ((opts.spread ?? 360) * Math.PI) / 180;
+  const center = ((opts.angle ?? -90) * Math.PI) / 180;
+  const k = opts.drag ?? 2.2;
+  const g = opts.gravity ?? 900;
+  const out: Particle[] = [];
+  for (let i = 0; i < n; i++) {
+    const a = center + (rand(seed, i * 5) - 0.5) * spread;
+    const v = (opts.speed ?? 1100) * (0.35 + 0.65 * rand(seed, i * 5 + 1));
+    const myLife = life * (0.6 + 0.6 * rand(seed, i * 5 + 2));
+    if (local > myLife) continue;
+    // dx/dt = v e^{-kt} → x = v(1 - e^{-kt})/k ; 중력은 저항 없이 더한다
+    const s = (1 - Math.exp(-k * local)) / k;
+    out.push({
+      i,
+      x: opts.x + Math.cos(a) * v * s,
+      y: opts.y + Math.sin(a) * v * s + 0.5 * g * local * local,
+      scale: (0.5 + 0.8 * rand(seed, i * 5 + 3)) * (1 - 0.5 * (local / myLife)),
+      opacity: clamp(1 - local / myLife) ** 1.5,
+      rotate: local * 360 * (rand(seed, i * 5 + 4) - 0.5) * 2,
+      hue: rand(seed, i * 5 + 4),
+    });
+  }
+  return out;
+}

package/packages/motion/src/react/index.tsx

@@ -0,0 +1,21 @@
+export { KfScene, Sequence, Series, SeriesItem, Fill, useTime, useT, useCtx, useBeats, useSceneId } from "./time.tsx";
+export {
+  Enter,
+  Typewriter,
+  Caret,
+  Counter,
+  Words,
+  Highlight,
+  Transition,
+  Camera,
+  Breathe,
+  BeatPulse,
+  DropBurst,
+  Sparkles,
+  Burst,
+  Cursor,
+  Terminal,
+  CodeBlock,
+  BarChart,
+  DeviceFrame,
+} from "./parts.tsx";