kasaframe 0.1.1 → 0.1.4

package/themes/swiss-poster/effects.ts

@@ -0,0 +1,339 @@
+import { clamp, ease, type SceneCtx } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+import { grid } from "./grid.ts";
+
+// 포스터는 서 있다 — 움직임은 조판의 동작뿐: 글자가 격자 칸 마스크 안으로 끼워져 착 앉고, 괘선이 그어지고, 면이 칸만큼 찬다.
+// 멈춤은 한 손(outExpo)으로. 튕김·흔들림·회전·투명도 없음
+
+const ink = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+const snap = (t: number, at: number, dur: number): number => ease.outExpo(clamp((t - at) / Math.max(1e-3, dur)));
+
+function div(parent: HTMLElement, css: string, text?: string): HTMLDivElement {
+  const d = parent.ownerDocument.createElement("div");
+  d.style.cssText = `position:absolute;pointer-events:none;${css}`;
+  if (text !== undefined) d.textContent = text;
+  parent.append(d);
+  return d;
+}
+
+type Dir = "up" | "down" | "left" | "right";
+const offset = (dir: Dir, k: number): string =>
+  dir === "up" ? `translateY(${(k * 105).toFixed(2)}%)` : dir === "down" ? `translateY(${(-k * 105).toFixed(2)}%)` : dir === "left" ? `translateX(${(k * 105).toFixed(2)}%)` : `translateX(${(-k * 105).toFixed(2)}%)`;
+const away = (dir: Dir, k: number): string =>
+  dir === "up" ? `translateY(${(-k * 105).toFixed(2)}%)` : dir === "down" ? `translateY(${(k * 105).toFixed(2)}%)` : dir === "left" ? `translateX(${(-k * 105).toFixed(2)}%)` : `translateX(${(k * 105).toFixed(2)}%)`;
+
+// 굵은 그로테스크 숫자의 기준선이 줄 상자 위에서 몇 em 아래인가(줄 높이 L 일 때) — 오름 0.97·내림 0.24 꼴
+const baseline = (L: number): number => 0.365 + L / 2;
+
+/** 종이 — 인쇄되지 않는 12단 격자 안내선이 아주 옅게 서 있다. 한 번 그리고 선다 */
+export function paperGrid(el: HTMLElement, o: { ctx: SceneCtx; cols?: number; rows?: number; guides?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const g = grid(W, H, { cols: o.cols, rows: o.rows, mx: ctx.safe.left, my: ctx.safe.top });
+  div(el, `inset:0;background:${ink(ctx, "paper")}`);
+  if (o.guides !== false) {
+    const line = ink(ctx, "guide");
+    for (let i = 0; i < g.cols; i++) {
+      div(el, `left:${g.x(i)}px;top:0;bottom:0;width:1px;background:${line}`);
+      div(el, `left:${g.x(i) + g.w(1)}px;top:0;bottom:0;width:1px;background:${line}`);
+    }
+    div(el, `left:0;right:0;top:${ctx.safe.top}px;height:1px;background:${line}`);
+    div(el, `left:0;right:0;top:${H - ctx.safe.bottom}px;height:1px;background:${line}`);
+  }
+  return () => {};
+}
+
+/**
+ * 격자 칸에 글을 끼운다 — 글이 제 칸 마스크 안으로 미끄러져 착 앉는다(from 쪽에서). text 를 t 의 함수로 주고 prints 에 시각을 주면
+ * 그때마다 앞 글이 밀려 나가고 새 글이 들어온다. typeset 을 주면 미끄러지는 대신 글자를 그 초마다 한 자씩 조판한다
+ */
+export function gridType(
+  el: HTMLElement,
+  o: {
+    ctx: SceneCtx;
+    text: string | ((t: number) => string);
+    x: number;
+    y: number;
+    size: number;
+    at?: number;
+    dur?: number;
+    from?: Dir;
+    prints?: readonly number[];
+    typeset?: number;
+    weight?: number;
+    font?: "display" | "sans" | "mono";
+    color?: string | ((t: number) => string);
+    tracking?: string;
+    rotate?: number;
+    align?: "left" | "right";
+  },
+): (t: number) => void {
+  const { ctx } = o;
+  const pick = o.color;
+  const color = (t: number): string => ink(ctx, typeof pick === "function" ? pick(t) : pick ?? "ink");
+  const font = ctx.style.fonts[o.font ?? "display"];
+  const pos = o.align === "right" ? `right:${ctx.meta.width - o.x}px` : `left:${o.x}px`;
+  const rot = o.rotate ? `transform:rotate(${o.rotate}deg);transform-origin:${o.align === "right" ? "top right" : "top left"};` : "";
+  const box = div(el, `${pos};top:${o.y}px;overflow:hidden;padding:0.06em 0.04em 0.14em 0;font:${o.weight ?? 700} ${o.size}px/1 ${font};letter-spacing:${o.tracking ?? "-0.03em"};white-space:pre;${rot}`);
+  const cur = el.ownerDocument.createElement("div");
+  cur.style.cssText = "position:relative";
+  box.append(cur);
+  const prev = div(box, "left:0;top:0.06em");
+  const text = typeof o.text === "function" ? o.text : () => o.text as string;
+  const prints = [o.at ?? 0, ...(o.prints ?? [])].sort((a, b) => a - b);
+  const dur = o.dur ?? 0.32;
+  const from = o.from ?? "up";
+  return (t) => {
+    if (t < prints[0]) {
+      box.style.visibility = "hidden";
+      return;
+    }
+    box.style.visibility = "visible";
+    const c = color(t);
+    cur.style.color = c;
+    prev.style.color = c;
+    const k = prints.filter((p) => p <= t).length - 1;
+    const p0 = prints[k];
+    const s = text(t);
+    if (o.typeset) {
+      const n = Math.min(s.length, Math.floor((t - p0) / o.typeset) + 1);
+      const shown = Array.from(s).slice(0, n).join("");
+      if (cur.textContent !== shown) cur.textContent = shown;
+      prev.textContent = "";
+      return;
+    }
+    if (cur.textContent !== s) cur.textContent = s;
+    const e = snap(t, p0, dur);
+    cur.style.transform = offset(from, 1 - e);
+    const old = k > 0 ? text(p0 - 1e-4) : "";
+    if (old && old !== s && e < 1) {
+      if (prev.textContent !== old) prev.textContent = old;
+      prev.style.transform = away(from, e);
+      prev.style.display = "block";
+    } else prev.style.display = "none";
+  };
+}
+
+/**
+ * 거대한 숫자 — 기준선(x, y)에 붙어 자리마다 제 마스크 안으로 차례로 끼워진다. size 를 t 의 함수로 주면 크기가 곧 값이 된다
+ * (기준선 왼쪽 아래를 붙든 채 커지고 작아진다). text 를 t 의 함수로 주면 굴러가는 값
+ */
+export function numeral(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; text: string | ((t: number) => string); x: number; y: number; size: number | ((t: number) => number); at?: number; dur?: number; stagger?: number; from?: Dir; color?: string | ((t: number) => string); weight?: number; align?: "left" | "right"; tracking?: string },
+): (t: number) => void {
+  const { ctx } = o;
+  const L = 0.92;
+  const size = typeof o.size === "function" ? o.size : () => o.size as number;
+  const text = typeof o.text === "function" ? o.text : () => o.text as string;
+  const pick = o.color;
+  const color = (t: number): string => ink(ctx, typeof pick === "function" ? pick(t) : pick ?? "ink");
+  const pos = o.align === "right" ? `right:${ctx.meta.width - o.x}px` : `left:${o.x}px`;
+  const row = div(el, `${pos};display:flex;font-family:${ctx.style.fonts.display};font-weight:${o.weight ?? 700};line-height:${L};letter-spacing:${o.tracking ?? "-0.045em"};white-space:pre`);
+  const cells: { mask: HTMLDivElement; glyph: HTMLDivElement }[] = [];
+  const cell = (i: number) => {
+    while (cells.length <= i) {
+      const mask = el.ownerDocument.createElement("div");
+      mask.style.cssText = "position:relative;overflow:hidden";
+      const glyph = el.ownerDocument.createElement("div");
+      glyph.style.cssText = "position:relative";
+      mask.append(glyph);
+      row.append(mask);
+      cells.push({ mask, glyph });
+    }
+    return cells[i];
+  };
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.36;
+  const stagger = o.stagger ?? 0.045;
+  return (t) => {
+    if (t < at) {
+      row.style.visibility = "hidden";
+      return;
+    }
+    row.style.visibility = "visible";
+    const px = Math.max(1, size(t));
+    row.style.fontSize = `${px.toFixed(2)}px`;
+    row.style.top = `${(o.y - baseline(L) * px).toFixed(2)}px`;
+    row.style.color = color(t);
+    const chars = Array.from(text(t));
+    chars.forEach((ch, i) => {
+      const c = cell(i);
+      c.mask.style.display = "block";
+      if (c.glyph.textContent !== ch) c.glyph.textContent = ch;
+      c.glyph.style.transform = offset(o.from ?? "up", 1 - snap(t, at + i * stagger, dur));
+    });
+    for (let i = chars.length; i < cells.length; i++) cells[i].mask.style.display = "none";
+  };
+}
+
+type Rect = [x: number, y: number, w: number, h: number];
+
+/** 빨강 면 — 칸만큼의 평평한 면이 from 쪽에서 쓸려 찬다. rect 를 t 의 함수로 주면 면이 격자를 따라 커지고 줄어든다(면적 = 값) */
+export function redField(el: HTMLElement, o: { ctx: SceneCtx; rect: Rect | ((t: number) => Rect); at?: number; dur?: number; from?: "left" | "right" | "top" | "bottom"; color?: string }): (t: number) => void {
+  const { ctx } = o;
+  const rect = typeof o.rect === "function" ? o.rect : () => o.rect as Rect;
+  const face = div(el, `background:${ink(ctx, o.color ?? "red")}`);
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.3;
+  const side = o.from ?? "left";
+  return (t) => {
+    if (t < at) {
+      face.style.display = "none";
+      return;
+    }
+    face.style.display = "block";
+    const [x, y, w, h] = rect(t);
+    face.style.left = `${x}px`;
+    face.style.top = `${y}px`;
+    face.style.width = `${Math.max(0, w)}px`;
+    face.style.height = `${Math.max(0, h)}px`;
+    const rest = ((1 - snap(t, at, dur)) * 100).toFixed(2);
+    face.style.clipPath = side === "left" ? `inset(0 ${rest}% 0 0)` : side === "right" ? `inset(0 0 0 ${rest}%)` : side === "top" ? `inset(0 0 ${rest}% 0)` : `inset(${rest}% 0 0 0)`;
+  };
+}
+
+/**
+ * 괘선 — 격자 선을 따라 굵은 선이 그어진다. len 을 t 의 함수로 주면 길이가 곧 값(지연 ms·요청 수)이다.
+ * linear 면 일정한 빠르기로(실시간으로 자라는 값), 아니면 착 그어진다
+ */
+export function rule(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; len: number | ((t: number) => number); weight?: number; at?: number; dur?: number; color?: string | ((t: number) => string); dir?: "h" | "v"; linear?: boolean },
+): (t: number) => void {
+  const { ctx } = o;
+  const len = typeof o.len === "function" ? o.len : () => o.len as number;
+  const pick = o.color;
+  const color = (t: number): string => ink(ctx, typeof pick === "function" ? pick(t) : pick ?? "ink");
+  const w = o.weight ?? 10;
+  const bar = div(el, `left:${o.x}px;top:${o.y}px`);
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.3;
+  return (t) => {
+    if (t < at) {
+      bar.style.display = "none";
+      return;
+    }
+    bar.style.display = "block";
+    const k = o.linear ? clamp((t - at) / dur) : snap(t, at, dur);
+    const L = Math.max(0, len(t) * k);
+    bar.style.background = color(t);
+    if (o.dir === "v") {
+      bar.style.width = `${w}px`;
+      bar.style.height = `${L.toFixed(2)}px`;
+    } else {
+      bar.style.width = `${L.toFixed(2)}px`;
+      bar.style.height = `${w}px`;
+    }
+  };
+}
+
+/**
+ * 원 — 가운데서 착 자라 선다(Müller-Brockmann 의 원). sectors 를 주면 원을 n 조각으로 나눠 조각마다 색을 정한다(null 이면 비운다) —
+ * 하루 24시간·몫·차례
+ */
+export function disc(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; cx: number; cy: number; r: number; at?: number; dur?: number; color?: string; sectors?: { n: number; color: (i: number, t: number) => string | null; gap?: number } },
+): (t: number) => void {
+  const { ctx, cx, cy, r } = o;
+  const c = el.ownerDocument.createElement("canvas");
+  const pad = 4;
+  c.width = Math.ceil(r * 2 + pad * 2);
+  c.height = c.width;
+  c.style.cssText = `position:absolute;left:${cx - r - pad}px;top:${cy - r - pad}px;pointer-events:none`;
+  el.append(c);
+  const g = c.getContext("2d")!;
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.4;
+  const base = ink(ctx, o.color ?? "ink");
+  const paper = ink(ctx, "paper");
+  return (t) => {
+    g.clearRect(0, 0, c.width, c.height);
+    if (t < at) return;
+    const R = r * snap(t, at, dur);
+    const o0 = r + pad;
+    if (!o.sectors) {
+      g.fillStyle = base;
+      g.beginPath();
+      g.arc(o0, o0, R, 0, Math.PI * 2);
+      g.fill();
+      return;
+    }
+    const { n } = o.sectors;
+    for (let i = 0; i < n; i++) {
+      const col = o.sectors.color(i, t);
+      if (!col) continue;
+      g.fillStyle = ink(ctx, col);
+      g.beginPath();
+      g.moveTo(o0, o0);
+      g.arc(o0, o0, R, -Math.PI / 2 + (i / n) * Math.PI * 2, -Math.PI / 2 + ((i + 1) / n) * Math.PI * 2);
+      g.closePath();
+      g.fill();
+    }
+    // 조각 사이는 종이 선 — 칸을 세게
+    g.strokeStyle = paper;
+    g.lineWidth = o.sectors.gap ?? 3;
+    for (let i = 0; i < n; i++) {
+      const a = -Math.PI / 2 + (i / n) * Math.PI * 2;
+      g.beginPath();
+      g.moveTo(o0, o0);
+      g.lineTo(o0 + Math.cos(a) * R, o0 + Math.sin(a) * R);
+      g.stroke();
+    }
+  };
+}
+
+/**
+ * 드롭 = 반전 — 단마다 빨강 띠가 위에서 차례로 떨어져 바탕이 통째로 빨강으로 뒤집힌다. until 에 띠가 다시 위로 걷힌다.
+ * 흔들림은 돌려주되 포스터는 흔들지 않는다(쓸지는 장면이 정한다)
+ */
+export function invert(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; until?: number; cols?: number; color?: string }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const n = o.cols ?? 12;
+  const W = ctx.meta.width;
+  const color = ink(ctx, o.color ?? "red");
+  const strips = Array.from({ length: n }, (_, i) => div(el, `left:${Math.floor((W / n) * i)}px;width:${Math.ceil(W / n) + 1}px;top:0;bottom:0;background:${color};transform-origin:top;transform:scaleY(0)`));
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "invert" });
+    const at = ctx.beats.drop(o.drop ?? 0);
+    strips.forEach((d, i) => {
+      // 띠가 거의 한꺼번에 떨어져야 화면이 한 번에 뒤집힌다 — 어긋나게 쓸리면 밝기 오르내림이 여러 번으로 쪼개진다
+      const down = snap(t, at + i * 0.006, 0.16);
+      const up = o.until !== undefined ? snap(t, o.until + i * 0.006, 0.16) : 0;
+      d.style.transformOrigin = up > 0 ? "bottom" : "top";
+      d.style.transform = `scaleY(${(up > 0 ? 1 - up : down).toFixed(4)})`;
+    });
+    return s;
+  };
+}
+
+/**
+ * 판 갈기 — 단마다 띠가 내려와 앞 판을 덮고 다시 아래로 빠지며 다음 판을 드러낸다(at 가 덮개 한가운데). 컷 경계에 건다.
+ * 띠가 차례로 오가서 한 프레임도 판 전체가 한 색으로 덮이지 않는다
+ */
+export function stripWipe(el: HTMLElement, o: { ctx: SceneCtx; at: number; dur?: number; cols?: number; color?: string }): (t: number) => void {
+  const { ctx } = o;
+  const n = o.cols ?? 12;
+  const W = ctx.meta.width;
+  const dur = o.dur ?? 0.36;
+  const color = ink(ctx, o.color ?? "ink");
+  const strips = Array.from({ length: n }, (_, i) => div(el, `left:${Math.floor((W / n) * i)}px;width:${Math.ceil(W / n) + 1}px;top:0;bottom:0;background:${color};transform:scaleY(0)`));
+  const half = dur / 2;
+  // 띠가 거의 함께 오가야 막(커튼)으로 읽힌다 — 어긋남이 크면 계단 막대 그래프처럼 보인다
+  const lag = (dur * 0.12) / n;
+  return (t) => {
+    strips.forEach((d, i) => {
+      const s = o.at - half + i * lag;
+      const k1 = snap(t, s - half * 0.2, half);
+      const k2 = snap(t, s + half, half);
+      if (t < s - half * 0.2 || k2 >= 1) {
+        d.style.transform = "scaleY(0)";
+        return;
+      }
+      d.style.transformOrigin = k2 > 0 ? "bottom" : "top";
+      d.style.transform = `scaleY(${(k2 > 0 ? 1 - k2 : k1).toFixed(4)})`;
+    });
+  };
+}

package/themes/swiss-poster/grid.ts

@@ -0,0 +1,35 @@
+// 조판 격자 — effects.ts·slots.ts·견본이 같이 쓴다. effects.ts 내보내기는 theme.json 효과 목록과 같아야 해서 따로 둔다
+export interface Grid {
+  cols: number;
+  rows: number;
+  /** i 번째 단의 왼쪽 x */
+  x(i: number): number;
+  /** j 번째 줄의 위 y */
+  y(j: number): number;
+  /** n 단 폭(사이 여백 포함) */
+  w(n: number): number;
+  /** n 줄 높이(사이 여백 포함) */
+  h(n: number): number;
+}
+
+export function grid(W: number, H: number, o: { cols?: number; rows?: number; mx?: number; my?: number; gx?: number; gy?: number } = {}): Grid {
+  const cols = o.cols ?? 12;
+  const rows = o.rows ?? 8;
+  const mx = o.mx ?? 80;
+  const my = o.my ?? 60;
+  const gx = o.gx ?? 20;
+  const gy = o.gy ?? 20;
+  const cw = (W - mx * 2 - gx * (cols - 1)) / cols;
+  const rh = (H - my * 2 - gy * (rows - 1)) / rows;
+  return {
+    cols,
+    rows,
+    x: (i) => mx + i * (cw + gx),
+    y: (j) => my + j * (rh + gy),
+    w: (n) => n * cw + Math.max(0, n - 1) * gx,
+    h: (n) => n * rh + Math.max(0, n - 1) * gy,
+  };
+}
+
+/** 면적이 값일 때의 크기 — 값의 제곱근에 비례 */
+export const areaSize = (value: number, unit: number, px: number): number => Math.sqrt(Math.max(0, value) / unit) * px;

package/themes/swiss-poster/sample/assets/og/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>