kasaframe 0.1.3 → 0.1.4

package/themes/depth-flight/effects.ts

@@ -0,0 +1,396 @@
+import { clamp, ease, rand, toEase, type EaseName, type SceneCtx } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { roundRectShape, stage3d, THREE, type Stage3D } from "@kasaframe/themes/stage3d";
+
+type V3 = [number, number, number];
+const color = (ctx: SceneCtx, k: string) => new THREE.Color(ctx.style.colors[k] ?? k);
+// 다가와 「잡히는」 한 손 — 깊이에서 빠르게 와서 제자리에 선다
+const arrive = (t: number, at: number, dur = 0.35) => ease.outCubic(clamp((t - at) / dur));
+
+export interface CamKey {
+  t: number;
+  pos: V3;
+  look: V3;
+  /** 앞 키에서 이 키로 오는 이징 — 박에 떠나 박에 내려앉는다. 기본 inOutCubic */
+  ease?: EaseName;
+}
+
+export interface Shot {
+  from: number;
+  to: number;
+  /** 카메라 키 — 키 사이는 곧게 날고 키에서 선다. 같은 자리 키를 이으면 그동안 서 있다(화면 안 움직임이 쉬지 않는 몫을 진다) */
+  keys: CamKey[];
+}
+
+const mix3 = (a: V3, b: V3, u: number): V3 => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];
+// 카메라는 이유가 있을 때만 — 키 하나가 움직임 하나(관문 지나기·다가가기·물러나기), 그 사이는 선다
+function camAt(t: number, keys: CamKey[]): { pos: V3; look: V3 } {
+  const ks = [...keys].sort((a, b) => a.t - b.t);
+  if (t <= ks[0].t) return ks[0];
+  for (let i = 1; i < ks.length; i++) {
+    if (t >= ks[i].t) continue;
+    const [a, b] = [ks[i - 1], ks[i]];
+    const u = toEase(b.ease ?? "inOutCubic")((t - a.t) / Math.max(1e-6, b.t - a.t));
+    return { pos: mix3(a.pos, b.pos, u), look: mix3(a.look, b.look, u) };
+  }
+  return ks[ks.length - 1];
+}
+
+/** 비행 무대 — 안개 낀 깊은 밤, 컷(shot)마다 카메라가 박에 맞춘 키를 따라 날아 내려앉는다. 돌려준 함수가 그리기, 속성은 무대 */
+export function flightStage(el: HTMLElement, o: { ctx: SceneCtx; shots: Shot[]; fog?: [number, number]; fov?: number }): ((t: number) => void) & Stage3D {
+  const shots = [...o.shots].sort((a, b) => a.from - b.from);
+  const stage = stage3d(el, {
+    ctx: o.ctx,
+    fov: o.fov ?? 55,
+    fog: o.fog ?? [10, 80],
+    env: true,
+    shot(t, cam) {
+      const s = shots.find((x) => t >= x.from && t < x.to) ?? shots[shots.length - 1];
+      const p = camAt(t, s.keys);
+      cam.position.set(...p.pos);
+      cam.lookAt(...p.look);
+    },
+  });
+  stage.scene.add(stage.camera);
+  stage.scene.add(new THREE.AmbientLight(0x8fa8ff, 0.35));
+  const key = new THREE.DirectionalLight(0xffffff, 1.4);
+  key.position.set(4, 6, 8);
+  stage.scene.add(key);
+  return Object.assign((t: number) => stage.paint(t), stage);
+}
+
+/** 박힌 먼지 — 공간에 박혀 있어 카메라가 날 때만 다가와 지나간다(흐름이 곧 비행 속도). 카메라가 서면 먼지도 선다. 카메라 둘레 상자 안에서 감아 돌려 어느 컷에서나 찬다 */
+export function starDust(stage: Stage3D, o: { ctx: SceneCtx; count?: number; spread?: number; depth?: number; seed?: string }): (t: number) => void {
+  const n = o.count ?? 900;
+  const spread = o.spread ?? 14;
+  const depth = o.depth ?? 60;
+  const seed = o.seed ?? "dust";
+  const base = Array.from({ length: n }, (_, i) => [(rand(seed, i * 3) - 0.5) * 2 * spread, (rand(seed, i * 3 + 1) - 0.5) * 2 * spread * 0.6, rand(seed, i * 3 + 2) * depth]);
+  const pos = new Float32Array(n * 3);
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
+  const mat = new THREE.PointsMaterial({ color: color(o.ctx, "accentSoft"), size: 0.07, transparent: true, opacity: 0.85, depthWrite: false, fog: false });
+  const pts = new THREE.Points(geo, mat);
+  pts.frustumCulled = false;
+  stage.camera.add(pts);
+  const wrap = (v: number, lo: number, hi: number) => ((((v - lo) % (hi - lo)) + (hi - lo)) % (hi - lo)) + lo;
+  return () => {
+    const c = stage.camera.position;
+    for (let i = 0; i < n; i++) {
+      const [x, y, z0] = base[i];
+      pos[i * 3] = wrap(x - c.x, -spread, spread);
+      pos[i * 3 + 1] = wrap(y - c.y, -spread * 0.6, spread * 0.6);
+      pos[i * 3 + 2] = -(wrap(z0 + c.z, 0, depth) + 0.5);
+    }
+    geo.attributes.position.needsUpdate = true;
+  };
+}
+
+function dashTexture(): THREE.CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = 512;
+  c.height = 8;
+  const g = c.getContext("2d")!;
+  for (let x = 0; x < 512; x++) {
+    const v = 0.35 + 0.65 * Math.max(0, Math.sin((x / 512) * Math.PI * 6)) ** 6;
+    g.fillStyle = `rgba(255,255,255,${v})`;
+    g.fillRect(x, 0, 1, 8);
+  }
+  const tex = new THREE.CanvasTexture(c);
+  tex.wrapS = THREE.RepeatWrapping;
+  tex.repeat.set(3, 1);
+  return tex;
+}
+
+/** 빛 리본 — 흩어진 줄기가 한 점(관문)으로 모여 한 줄기로 나간다. 리본 속 빛이 늘 흐른다 */
+export function lightRibbons(stage: Stage3D, o: { ctx: SceneCtx; from: V3; to: V3; out?: V3; count?: number; spread?: number; radius?: number; at?: number; speed?: number; seed?: string }): (t: number) => void {
+  const n = o.count ?? 7;
+  const spread = o.spread ?? 6;
+  const seed = o.seed ?? "ribbon";
+  const tex = dashTexture();
+  const mats: THREE.MeshBasicMaterial[] = [];
+  for (let i = 0; i < n; i++) {
+    const oy = (i / Math.max(1, n - 1) - 0.5) * 2 * spread * 0.6;
+    const ox = (rand(seed, i) - 0.5) * spread;
+    const pts = [
+      new THREE.Vector3(o.from[0] + ox, o.from[1] + oy, o.from[2]),
+      new THREE.Vector3((o.from[0] * 2 + o.to[0]) / 3 + ox * 0.6, (o.from[1] * 2 + o.to[1]) / 3 + oy * 0.8 + Math.sin(i) * 0.8, (o.from[2] * 2 + o.to[2]) / 3),
+      new THREE.Vector3((o.from[0] + o.to[0] * 2) / 3 + ox * 0.2, (o.from[1] + o.to[1] * 2) / 3 + oy * 0.3, (o.from[2] + o.to[2] * 2) / 3),
+      new THREE.Vector3(...o.to),
+    ];
+    if (o.out) pts.push(new THREE.Vector3(...o.out));
+    const curve = new THREE.CatmullRomCurve3(pts);
+    const mat = new THREE.MeshBasicMaterial({ color: color(o.ctx, i % 3 === 0 ? "accentSoft" : "glow"), map: tex, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false });
+    mats.push(mat);
+    stage.scene.add(new THREE.Mesh(new THREE.TubeGeometry(curve, 120, o.radius ?? 0.09, 6, false), mat));
+  }
+  return (t) => {
+    tex.offset.x = -t * (o.speed ?? 0.9);
+    const a = arrive(t, o.at ?? 0, 0.4);
+    for (const m of mats) m.opacity = 0.9 * a;
+  };
+}
+
+// 후처리 블룸은 SwiftShader 에서 한 프레임을 몇 배로 늘린다 — 번진 빛을 캔버스에 한 번 그려 가산 합성 판으로 얹는다
+function haloTexture(w: number, h: number, r: number, line: number, glow: string): THREE.CanvasTexture {
+  const k = 96;
+  const pad = 0.9;
+  const c = document.createElement("canvas");
+  c.width = Math.ceil((w + pad * 2) * k);
+  c.height = Math.ceil((h + pad * 2) * k);
+  const g = c.getContext("2d")!;
+  g.strokeStyle = glow;
+  g.shadowColor = glow;
+  for (const [blur, width, alpha] of [[pad * k * 0.9, line * k, 0.55], [pad * k * 0.35, line * k * 0.6, 0.8]] as const) {
+    g.globalAlpha = alpha;
+    g.shadowBlur = blur;
+    g.lineWidth = width;
+    g.beginPath();
+    g.roundRect(pad * k, pad * k, w * k, h * k, r * k);
+    g.stroke();
+  }
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  return tex;
+}
+const additive = (map: THREE.Texture) => new THREE.MeshBasicMaterial({ map, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false, fog: false });
+let dotTex: THREE.CanvasTexture | null = null;
+function dot(): THREE.CanvasTexture {
+  if (dotTex) return dotTex;
+  const c = document.createElement("canvas");
+  c.width = c.height = 128;
+  const g = c.getContext("2d")!;
+  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64);
+  grad.addColorStop(0, "rgba(255,255,255,1)");
+  grad.addColorStop(0.25, "rgba(255,255,255,0.45)");
+  grad.addColorStop(1, "rgba(255,255,255,0)");
+  g.fillStyle = grad;
+  g.fillRect(0, 0, 128, 128);
+  dotTex = new THREE.CanvasTexture(c);
+  return dotTex;
+}
+
+/** 관문 — OG 로고의 둥근 사각 칸. metal 은 은색 금속, glass 는 푸르게 빛나는 유리. 테두리 빛이 늘 번지고 박마다 한 번 크게 지나간다 */
+export function gate(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; size?: [number, number]; kind?: "metal" | "glass"; at?: number; pulse?: number[]; rotY?: number }): (t: number) => void {
+  const [w, h] = o.size ?? [4.2, 5.4];
+  const r = Math.min(w, h) * 0.22;
+  const geo = new THREE.ExtrudeGeometry(roundRectShape(w, h, r, Math.min(w, h) * 0.16), { depth: 0.55, bevelEnabled: true, bevelThickness: 0.08, bevelSize: 0.08, bevelSegments: 3, curveSegments: 10 });
+  geo.translate(0, 0, -0.275);
+  const glass = o.kind === "glass";
+  // 유리 관문은 짙게 — 옅은 하늘색 판이면 화면을 덮어 뒤의 글을 가린다. 빛은 테두리 후광이 낸다
+  const mat = glass
+    ? new THREE.MeshStandardMaterial({ color: color(o.ctx, "accentDeep"), emissive: color(o.ctx, "glow"), emissiveIntensity: 0.25, metalness: 0.3, roughness: 0.1, transparent: true, opacity: 0.5, depthWrite: false })
+    : new THREE.MeshStandardMaterial({ color: color(o.ctx, "metal"), metalness: 1, roughness: 0.22 });
+  const mesh = new THREE.Mesh(geo, mat);
+  const glow = o.ctx.style.colors.glow ?? "#5AA2FF";
+  const halo = new THREE.Mesh(new THREE.PlaneGeometry(w + 1.8, h + 1.8), additive(haloTexture(w, h, r, Math.min(w, h) * 0.08, glow)));
+  const group = new THREE.Group();
+  group.add(mesh, halo);
+  group.position.set(...o.pos);
+  group.rotation.y = o.rotY ?? 0;
+  stage.scene.add(group);
+  const camPos = new THREE.Vector3();
+  return (t) => {
+    const a = arrive(t, o.at ?? -1, 0.3);
+    group.visible = a > 0;
+    group.scale.setScalar(0.55 + 0.45 * a);
+    let flash = 0;
+    for (const p of o.pulse ?? []) if (t >= p) flash = Math.max(flash, Math.exp(-(t - p) / 0.18));
+    // 카메라가 관문을 지날 때 빛 테가 화면을 쓸고 지나가면 섬광이 된다 — 가까울수록 빛을 거둔다
+    const near = clamp((stage.camera.getWorldPosition(camPos).distanceTo(group.position) - 2.5) / 4);
+    flash *= near;
+    if (glass) mat.emissiveIntensity = (0.25 + 1.1 * flash) * (0.3 + 0.7 * near);
+    else mat.emissive = color(o.ctx, "glow").multiplyScalar(0.9 * flash);
+    halo.material.opacity = a * near * ((glass ? 0.45 : 0.3) + 0.9 * flash);
+  };
+}
+
+/** 깊이 카드 — 글자판이 안개 속 깊이에서 미끄러져 와 제자리에 선다. layers 를 주면 뒤로 겹쳐 두께가 생긴다. text 가 함수면 바뀔 때만 다시 그린다 */
+export function depthCard(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; text: string | ((t: number) => string); pos: V3; rot?: V3; height: number; color?: string; font?: "sans" | "display" | "mono"; weight?: number; at?: number; until?: number; emerge?: number; layers?: number; align?: "left" | "center" },
+): (t: number) => void {
+  const { ctx } = o;
+  const px = 180;
+  const family = ctx.style.fonts[o.font ?? "display"];
+  const font = `${o.weight ?? ctx.style.type.weightDisplay} ${px}px ${family}`;
+  const sample = typeof o.text === "function" ? o.text(1e9) : o.text;
+  const probe = document.createElement("canvas").getContext("2d")!;
+  probe.font = font;
+  const maxW = Math.ceil(probe.measureText(sample).width * 1.15 + px * 0.6);
+  const cw = maxW;
+  const ch = Math.ceil(px * 1.5);
+  const worldH = o.height * 1.5;
+  const worldW = (worldH * cw) / ch;
+  const make = (fill: string, glow?: string) => {
+    const c = document.createElement("canvas");
+    c.width = cw;
+    c.height = ch;
+    const tex = new THREE.CanvasTexture(c);
+    tex.colorSpace = THREE.SRGBColorSpace;
+    tex.anisotropy = 4;
+    const geo = new THREE.PlaneGeometry(worldW, worldH);
+    if (o.align === "left") geo.translate(worldW / 2, 0, 0);
+    const mat = new THREE.MeshBasicMaterial({ map: tex, transparent: true, depthWrite: false, side: THREE.DoubleSide, toneMapped: false });
+    let last = "";
+    const draw = (s: string, again = false) => {
+      if (s === last && !again) return;
+      last = s;
+      const g = c.getContext("2d")!;
+      g.clearRect(0, 0, cw, ch);
+      g.font = font;
+      g.fillStyle = fill;
+      g.textBaseline = "middle";
+      g.textAlign = o.align === "left" ? "left" : "center";
+      // 글자가 스스로 빛나 번진다 — 어두운 깊이에서 글이 떠 보이는 까닭
+      if (glow) {
+        g.shadowColor = glow;
+        g.shadowBlur = px * 0.22;
+      }
+      g.fillText(s, o.align === "left" ? px * 0.3 : cw / 2, ch / 2);
+      tex.needsUpdate = true;
+    };
+    return { mesh: new THREE.Mesh(geo, mat), mat, draw };
+  };
+  const group = new THREE.Group();
+  const front = make(ctx.style.colors[o.color ?? "ink"] ?? o.color ?? "#fff", o.color === "dim" ? undefined : ctx.style.colors.glow);
+  const back = Array.from({ length: o.layers ?? 0 }, (_, k) => {
+    const l = make(ctx.style.colors.accent);
+    l.mesh.position.z = -0.05 * (k + 1);
+    l.mat.opacity = 0.55 * (1 - k / (o.layers ?? 1));
+    group.add(l.mesh);
+    return l;
+  });
+  group.add(front.mesh);
+  group.position.set(...o.pos);
+  if (o.rot) group.rotation.set(...o.rot);
+  stage.scene.add(group);
+  const emerge = o.emerge ?? 14;
+  return (t) => {
+    const at = o.at ?? -1;
+    const on = t >= at && (o.until === undefined || t < o.until);
+    group.visible = on;
+    if (!on) return;
+    const a = arrive(t, at);
+    group.position.z = o.pos[2] - emerge * (1 - a);
+    front.mat.opacity = a;
+    const s = typeof o.text === "function" ? o.text(t) : o.text;
+    // 바뀌는 글은 매번 그린다 — 같은 t 를 두 번 그릴 때 둘째에 fillText 가 빠지면 검사가 다른 화면으로 본다
+    const again = typeof o.text === "function";
+    front.draw(s, again);
+    for (const b of back) b.draw(s, again);
+  };
+}
+
+/** 빛기둥 — 값만큼 바닥에서 솟는 발광 기둥. 꼭대기가 밝다 */
+export function pillar(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; height: number; width?: number; at?: number; color?: string }): (t: number) => void {
+  const w = o.width ?? 0.9;
+  const geo = new THREE.BoxGeometry(w, 1, w);
+  geo.translate(0, 0.5, 0);
+  const mat = new THREE.MeshStandardMaterial({ color: color(o.ctx, o.color ?? "accent"), emissive: color(o.ctx, o.color ?? "glow"), emissiveIntensity: 0.55, metalness: 0.3, roughness: 0.35 });
+  const mesh = new THREE.Mesh(geo, mat);
+  mesh.position.set(...o.pos);
+  const cap = new THREE.Mesh(new THREE.BoxGeometry(w * 1.02, 0.08, w * 1.02), new THREE.MeshBasicMaterial({ color: 0xffffff, toneMapped: false }));
+  const flare = new THREE.Sprite(new THREE.SpriteMaterial({ map: dot(), color: color(o.ctx, "glow"), transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false }));
+  stage.scene.add(mesh, cap, flare);
+  return (t) => {
+    const a = arrive(t, o.at ?? -1, 0.4);
+    const h = Math.max(0.001, o.height * a);
+    mesh.scale.y = h;
+    mesh.visible = cap.visible = flare.visible = a > 0;
+    cap.position.set(o.pos[0], o.pos[1] + h, o.pos[2]);
+    // 솟는 동안 꼭대기 빛이 크게, 서면 잦아든다
+    const rising = 1 - clamp((t - (o.at ?? -1)) / 0.6);
+    flare.position.set(o.pos[0], o.pos[1] + h, o.pos[2]);
+    flare.scale.setScalar(w * (1.3 + 2 * rising));
+    flare.material.opacity = 0.45 + 0.4 * rising;
+  };
+}
+
+/** 드롭 — 화면이 하얗게 터지고 빛 고리가 번지며 빛줄기가 사방으로 뻗는다. 카메라를 흔든다(dropBurst — 검사가 센다) */
+export function warpBurst(stage: Stage3D, o: { ctx: SceneCtx; drop?: number; streaks?: number; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const n = o.streaks ?? 140;
+  const seed = o.seed ?? "warp";
+  const pos = new Float32Array(n * 6);
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
+  const mat = new THREE.LineBasicMaterial({ color: color(ctx, "accentSoft"), transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, fog: false });
+  const lines = new THREE.LineSegments(geo, mat);
+  lines.frustumCulled = false;
+  stage.camera.add(lines);
+  // 흰 화면 대신 푸른 빛 섬광 — 어둠에서 흰 화면으로 뛰면 컷 밝기 차가 너무 크다
+  const flash = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshBasicMaterial({ color: color(ctx, "accentSoft"), transparent: true, opacity: 0, depthTest: false, depthWrite: false, fog: false, toneMapped: false }));
+  flash.position.z = -1;
+  flash.renderOrder = 999;
+  stage.camera.add(flash);
+  // 충격파 — 드롭 자리에서 빛 고리가 화면 밖까지 번져 나간다
+  const ring = new THREE.Mesh(new THREE.PlaneGeometry(4, 4), additive(haloTexture(2.2, 2.2, 1.1, 0.16, ctx.style.colors.glow ?? "#5AA2FF")));
+  ring.position.z = -6;
+  ring.renderOrder = 998;
+  stage.camera.add(ring);
+  const dirs = Array.from({ length: n }, (_, i) => {
+    const a = rand(seed, i) * Math.PI * 2;
+    return [Math.cos(a), Math.sin(a) * 0.62, 0.6 + rand(seed, i + 500) * 0.8] as const;
+  });
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "warpBurst" });
+    (flash.material as THREE.MeshBasicMaterial).opacity = s.flash * 0.55;
+    ring.scale.setScalar(Math.max(0.001, s.ring.scale * 1.9));
+    ring.material.opacity = s.ring.opacity;
+    const local = t - ctx.beats.drop(o.drop ?? 0);
+    const life = local >= 0 && local < 0.9 ? 1 - local / 0.9 : 0;
+    mat.opacity = life;
+    for (let i = 0; i < n; i++) {
+      const [dx, dy, sp] = dirs[i];
+      const r0 = 0.4 + local * 9 * sp;
+      const r1 = r0 + 2.5 * sp;
+      pos.set([dx * r0, dy * r0, -6, dx * r1, dy * r1, -6], i * 6);
+    }
+    geo.attributes.position.needsUpdate = true;
+    stage.camera.position.x += (s.shake.x ?? 0) * 0.012;
+    stage.camera.position.y += (s.shake.y ?? 0) * 0.012;
+  };
+}
+
+/** 하루 고리 — 24 칸이 둥글게 서고, 정한 시각에 밤 창(00–10시) 칸이 -90% 로 주저앉는다. 고리는 늘 천천히 돈다 */
+export function dayRing(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; radius?: number; at?: number; drop: number; window?: [number, number]; spin?: number }): (t: number) => void {
+  const { ctx } = o;
+  const r = o.radius ?? 4;
+  const [h0, h1] = o.window ?? [0, 10];
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  stage.scene.add(group);
+  // 바닥 빛 고리 — 고리가 빛 위에 서 있어야 깊은 밤에서 모양이 읽힌다
+  const floor = new THREE.Mesh(new THREE.PlaneGeometry(2 * r + 1.8, 2 * r + 1.8), additive(haloTexture(2 * r, 2 * r, r, 0.35, ctx.style.colors.glow ?? "#5AA2FF")));
+  floor.rotation.x = -Math.PI / 2;
+  floor.position.y = 0.02;
+  group.add(floor);
+  const cells = Array.from({ length: 24 }, (_, h) => {
+    const night = h >= h0 && h < h1;
+    const geo = new THREE.BoxGeometry(0.72, 1, 0.5);
+    geo.translate(0, 0.5, 0);
+    // 낮 칸은 짙은 금속, 밤 칸은 스스로 빛난다 — 싼 창이 한눈에 갈린다
+    const mat = new THREE.MeshStandardMaterial({ color: color(ctx, night ? "accent" : "raised"), emissive: color(ctx, night ? "glow" : "line"), emissiveIntensity: night ? 1.4 : 0.35, metalness: night ? 0.1 : 0.85, roughness: night ? 0.35 : 0.25 });
+    const m = new THREE.Mesh(geo, mat);
+    const a = (h / 24) * Math.PI * 2;
+    m.position.set(Math.sin(a) * r, 0, -Math.cos(a) * r);
+    m.rotation.y = -a;
+    group.add(m);
+    return { m, night, h, mat };
+  });
+  return (t) => {
+    group.rotation.y = (o.spin ?? 0.35) * t;
+    floor.visible = t >= (o.at ?? -1);
+    floor.material.opacity = 0.6 * arrive(t, o.at ?? -1, 0.4);
+    for (const c of cells) {
+      const a = arrive(t, (o.at ?? -1) + c.h * 0.012, 0.3);
+      const k = ease.outBack(clamp((t - o.drop) / 0.35));
+      const fall = c.night ? 1 - 0.9 * k : 1;
+      const hgt = Math.max(0.001, 2.6 * a * fall);
+      c.m.scale.y = hgt;
+      c.m.visible = a > 0;
+      if (c.night) c.mat.emissiveIntensity = 1.4 + 1.6 * Math.exp(-Math.max(0, t - o.drop) / 0.2) * (t >= o.drop ? 1 : 0);
+    }
+  };
+}

package/themes/depth-flight/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>