kasaframe 0.1.1 → 0.1.4

package/themes/glass-light/effects.ts

@@ -0,0 +1,433 @@
+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 settle = (t: number, at: number, dur = 0.42) => (t < at ? 0 : 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];
+}
+
+/** 유리 스튜디오 — 밝은 무대, 방 빛 환경 맵(유리가 비칠 것), 부드러운 그림자 바닥, 파랑·분홍 테두리 빛이 천천히 돈다. 카메라는 박에 맞춘 키로만 움직인다 */
+export function glassStudio(el: HTMLElement, o: { ctx: SceneCtx; shots: Shot[]; fov?: number }): ((t: number) => void) & Stage3D {
+  const { ctx } = o;
+  const shots = [...o.shots].sort((a, b) => a.from - b.from);
+  const stage = stage3d(el, {
+    ctx,
+    fov: o.fov ?? 38,
+    env: true,
+    exposure: 1.05,
+    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);
+  const floor = new THREE.Mesh(new THREE.PlaneGeometry(400, 400), new THREE.MeshStandardMaterial({ color: color(ctx, "surface"), roughness: 0.9 }));
+  floor.rotation.x = -Math.PI / 2;
+  floor.receiveShadow = true;
+  stage.scene.add(floor);
+  const key = new THREE.DirectionalLight(0xffffff, 1.6);
+  key.position.set(6, 14, 10);
+  key.castShadow = true;
+  key.shadow.mapSize.set(1024, 1024);
+  Object.assign(key.shadow.camera, { left: -20, right: 20, top: 20, bottom: -20, near: 1, far: 60 });
+  stage.scene.add(key);
+  const rimA = new THREE.PointLight(color(ctx, "rim"), 60, 40);
+  const rimB = new THREE.PointLight(color(ctx, "warm"), 40, 40);
+  stage.scene.add(rimA, rimB);
+  // 뒤 벽의 색 빛 — 유리는 뒤에 굽힐 색이 있어야 유리로 읽힌다(흰 벽 앞의 투과 유리는 회색 판으로 보인다)
+  const wall = new THREE.Mesh(new THREE.PlaneGeometry(96, 36), new THREE.MeshBasicMaterial({ map: wallTexture(ctx), toneMapped: false, fog: false }));
+  stage.scene.add(wall);
+  return Object.assign((t: number) => {
+    // 빛과 그림자 상자가 지금 컷의 세트를 따라간다
+    const s = shots.find((x) => t >= x.from && t < x.to) ?? shots[shots.length - 1];
+    const [lx, , lz] = s.keys[0].look;
+    floor.position.set(lx, 0, lz);
+    key.position.set(lx + 6, 14, lz + 10);
+    key.target.position.set(lx, 0, lz);
+    key.target.updateMatrixWorld();
+    wall.position.set(lx, 16, lz - 18);
+    rimA.position.set(lx - 7, 4, lz + 3);
+    rimB.position.set(lx + 7, 3.5, lz - 2);
+    stage.paint(t);
+  }, stage);
+}
+
+function wallTexture(ctx: SceneCtx): THREE.CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = 1536;
+  c.height = 576;
+  const g = c.getContext("2d")!;
+  const W = c.width;
+  const H = c.height;
+  g.fillStyle = ctx.style.colors.bg;
+  g.fillRect(0, 0, W, H);
+  const blob = (x: number, y: number, r: number, col: string, a: number) => {
+    const grad = g.createRadialGradient(x * W, y * H, 0, x * W, y * H, r * W);
+    grad.addColorStop(0, col + Math.round(a * 255).toString(16).padStart(2, "0"));
+    grad.addColorStop(1, col + "00");
+    g.fillStyle = grad;
+    g.fillRect(0, 0, W, H);
+  };
+  blob(0.24, 0.62, 0.34, ctx.style.colors.rim, 0.85);
+  blob(0.5, 0.75, 0.22, ctx.style.colors.accent, 0.35);
+  blob(0.79, 0.55, 0.3, ctx.style.colors.warm, 0.7);
+  // 소프트박스 — 가로 한 줄과 세로 둘. 판 너머로 휘어 보여야 유리가 유리로 읽힌다
+  g.filter = "blur(14px)";
+  g.fillStyle = "rgba(255,255,255,0.95)";
+  g.fillRect(W * 0.1, H * 0.48, W * 0.8, H * 0.05);
+  g.fillStyle = "rgba(255,255,255,0.8)";
+  for (const x of [0.34, 0.66]) g.fillRect(W * x - W * 0.012, H * 0.3, W * 0.024, H * 0.5);
+  g.filter = "none";
+  const floor = g.createLinearGradient(0, H * 0.78, 0, H);
+  floor.addColorStop(0, ctx.style.colors.bg + "00");
+  floor.addColorStop(1, ctx.style.colors.surface);
+  g.fillStyle = floor;
+  g.fillRect(0, H * 0.78, W, H * 0.22);
+  // 옆으로 비낀 카메라에 벽 끝이 잘린 판으로 보이지 않게 양 끝을 바탕색으로 녹인다
+  for (const [x0, x1] of [[0, 0.14], [1, 0.86]]) {
+    const side = g.createLinearGradient(x0 * W, 0, x1 * W, 0);
+    side.addColorStop(0, ctx.style.colors.bg);
+    side.addColorStop(1, ctx.style.colors.bg + "00");
+    g.fillStyle = side;
+    g.fillRect(Math.min(x0, x1) * W, 0, 0.14 * W, H);
+  }
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  return tex;
+}
+
+/** 바닥 커스틱 — 유리가 모은 빛이 바닥에 그리는 무늬. 유리가 앉을 때마다(moves) 빛이 다시 모여 무늬가 옮겨 가고, 그 사이엔 선다 */
+export function causticFloor(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; size?: number; strength?: number; moves?: number[] }): (t: number) => void {
+  const uni = { uTime: { value: 0 }, uColor: { value: color(o.ctx, "rim") }, uWarm: { value: color(o.ctx, "warm") }, uStrength: { value: o.strength ?? 0.55 } };
+  const mat = new THREE.ShaderMaterial({
+    uniforms: uni,
+    transparent: true,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+    vertexShader: "varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+    fragmentShader: `uniform float uTime; uniform vec3 uColor; uniform vec3 uWarm; uniform float uStrength; varying vec2 vUv;
+      float c(vec2 p, float t){ float v = 0.0; for (int i = 0; i < 4; i++){ float fi = float(i); p += vec2(sin(p.y*1.7 + t*0.9 + fi), cos(p.x*1.3 - t*0.7 + fi*1.7)) * 0.6; v += sin(p.x + p.y); } return v; }
+      void main(){ vec2 p = (vUv - 0.5) * 9.0; float v = c(p, uTime); float l = pow(clamp(1.0 - abs(v) * 0.42, 0.0, 1.0), 6.0);
+        float fade = smoothstep(0.5, 0.15, length(vUv - 0.5)); vec3 col = mix(uColor, uWarm, 0.5 + 0.5*sin(p.x*0.4 + uTime*0.3));
+        gl_FragColor = vec4(col * l * uStrength * fade, 1.0); }`,
+  });
+  const s = o.size ?? 16;
+  const m = new THREE.Mesh(new THREE.PlaneGeometry(s, s), mat);
+  m.rotation.x = -Math.PI / 2;
+  m.position.set(o.pos[0], o.pos[1] + 0.01, o.pos[2]);
+  stage.scene.add(m);
+  return (t) => {
+    let shift = 0;
+    for (const m of o.moves ?? []) shift += 1.1 * ease.outCubic(clamp((t - m) / 0.7));
+    uni.uTime.value = shift;
+  };
+}
+
+function glassMaterial(ctx: SceneCtx, o: { rough?: number; tint?: string; dispersion?: number; thickness?: number } = {}) {
+  return new THREE.MeshPhysicalMaterial({
+    color: color(ctx, o.tint ?? "glass"),
+    metalness: 0,
+    roughness: o.rough ?? 0.07,
+    transmission: 1,
+    thickness: o.thickness ?? 0.8,
+    ior: 1.5,
+    dispersion: o.dispersion ?? 0.6,
+    // 박막 무지개 — 비스듬한 면에만 돈다. 무지개를 잉크로 쓰지 않고 빛이 갈라지는 자리에만 두는 방법
+    iridescence: 0.55,
+    iridescenceIOR: 1.3,
+    iridescenceThicknessRange: [180, 520],
+    clearcoat: 1,
+    clearcoatRoughness: 0.08,
+    attenuationColor: color(ctx, "rim"),
+    attenuationDistance: 3.5,
+  });
+}
+
+/** 유리 앞면에 박는 글 판. 투명 재질이라 유리 투과 계산(불투명 물체만 담는다)에 안 끼어 굴절된 그림자가 안 생긴다. text 가 함수면 바뀔 때만 다시 그린다 */
+function printPlate(ctx: SceneCtx, o: { text: string | ((t: number) => string); w: number; h: number; font?: "sans" | "display" | "mono"; color?: string }) {
+  const px = 200;
+  const sample = typeof o.text === "function" ? o.text(1e9) : o.text;
+  const family = ctx.style.fonts[o.font ?? "display"];
+  const weight = o.font === "mono" ? 700 : ctx.style.type.weightDisplay;
+  const c = document.createElement("canvas");
+  c.width = Math.round((o.w / o.h) * px * 1.6);
+  c.height = Math.round(px * 1.6);
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  let last = "";
+  // 바뀌는 글(함수)은 매번 그린다 — 같은 t 를 두 번 그릴 때 둘째에 fillText 가 빠지면 검사가 다른 화면으로 본다
+  const draw = (s: string, again = false) => {
+    if (s === last && !again) return;
+    last = s;
+    const g = c.getContext("2d")!;
+    g.clearRect(0, 0, c.width, c.height);
+    let size = px;
+    g.font = `${weight} ${size}px ${family}`;
+    const wMax = c.width * 0.86;
+    const mw = g.measureText(sample.length > s.length ? sample : s).width;
+    if (mw > wMax) size *= wMax / mw;
+    g.font = `${weight} ${size}px ${family}`;
+    g.fillStyle = ctx.style.colors[o.color ?? "ink"] ?? o.color ?? "#000";
+    g.textAlign = "center";
+    g.textBaseline = "middle";
+    g.fillText(s, c.width / 2, c.height / 2);
+    tex.needsUpdate = true;
+  };
+  const mesh = new THREE.Mesh(new THREE.PlaneGeometry(o.w, o.h), new THREE.MeshBasicMaterial({ map: tex, transparent: true, depthWrite: false, toneMapped: false }));
+  mesh.renderOrder = 2;
+  return { mesh, draw };
+}
+
+/** 유리 타일 — 둥근 서리 유리판이 공중에서 미끄러져 와 기울며 서고, 앞면에 글이 맺힌다. focus 구간엔 앞으로 나와 커진다 */
+export function glassTile(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; text?: string | ((t: number) => string); pos: V3; size?: [number, number]; depth?: number; at?: number; until?: number; from?: V3; font?: "sans" | "display" | "mono"; color?: string; rough?: number; seed?: string; grow?: boolean; focus?: [number, number][] },
+): (t: number) => void {
+  const { ctx } = o;
+  const [w, h] = o.size ?? [2.4, 2.4];
+  const d = o.depth ?? 0.5;
+  // 모서리를 크게 굴린다 — 굴절은 곡면에서 일어난다
+  const bev = Math.min(0.16, Math.min(w, h) * 0.12, d * 0.45);
+  const geo = new THREE.ExtrudeGeometry(roundRectShape(w - bev * 2, h - bev * 2, Math.max(0.02, Math.min(w, h) * 0.18 - bev)), { depth: d, bevelEnabled: true, bevelThickness: bev, bevelSize: bev, bevelSegments: 4, curveSegments: 8 });
+  geo.translate(0, 0, -d / 2);
+  const slab = new THREE.Mesh(geo, glassMaterial(ctx, { rough: o.rough }));
+  slab.castShadow = true;
+  const group = new THREE.Group();
+  group.add(slab);
+  const print = o.text !== undefined ? printPlate(ctx, { text: o.text, w: w * 0.9, h: Math.min(h * 0.6, w * 0.32), font: o.font, color: o.color }) : null;
+  if (print) {
+    print.mesh.position.z = d / 2 + bev + 0.03;
+    group.add(print.mesh);
+  }
+  stage.scene.add(group);
+  const seed = o.seed ?? `${o.pos.join(",")}`;
+  const from = o.from ?? [o.pos[0] + (rand(seed, 1) - 0.5) * 6, o.pos[1] + 5, o.pos[2] - 4];
+  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 = settle(t, at);
+    if (o.grow) {
+      group.position.set(o.pos[0], o.pos[1], o.pos[2]);
+      group.scale.set(1, Math.max(0.001, a), 1);
+    } else {
+      group.position.set(from[0] + (o.pos[0] - from[0]) * a, from[1] + (o.pos[1] - from[1]) * a, from[2] + (o.pos[2] - from[2]) * a);
+      group.scale.setScalar(1);
+    }
+    group.rotation.set((1 - a) * 0.9, (1 - a) * -0.7, (1 - a) * 0.3);
+    // focus 동안 판이 앞으로 나와 커진다 — 렌즈가 머무는 글
+    let f = 0;
+    for (const [f0, f1] of o.focus ?? []) f = Math.max(f, Math.min(ease.outCubic(clamp((t - f0) / 0.25)), 1 - ease.inCubic(clamp((t - f1) / 0.25))));
+    if (f > 0) {
+      group.position.z += 1.2 * f;
+      group.scale.multiplyScalar(1 + 0.14 * f);
+    }
+    if (print) print.draw(typeof o.text === "function" ? o.text(t) : (o.text ?? ""), typeof o.text === "function");
+  };
+}
+
+/** 프리즘 빛 — 흰 빛 한 줄기가 삼각 유리를 지나 여러 색으로 갈라진다(reverse 면 여러 색이 모여 한 줄기). 빛은 늘 일렁인다 */
+export function prismBeam(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; at?: number; fan?: number; reverse?: boolean; length?: number }): (t: number) => void {
+  const { ctx } = o;
+  const prismGeo = new THREE.CylinderGeometry(1.4, 1.4, 2.6, 3, 1);
+  const prism = new THREE.Mesh(prismGeo, glassMaterial(ctx, { rough: 0.05, dispersion: 1.2, thickness: 1.6 }));
+  prism.rotation.x = Math.PI / 2;
+  prism.position.set(...o.pos);
+  prism.castShadow = true;
+  stage.scene.add(prism);
+  const L = o.length ?? 9;
+  const beam = (col: THREE.Color, width: number) => {
+    const m = new THREE.Mesh(new THREE.PlaneGeometry(L, width), new THREE.MeshBasicMaterial({ color: col, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, toneMapped: false }));
+    stage.scene.add(m);
+    return m;
+  };
+  const white = beam(new THREE.Color(0xffffff), 0.22);
+  const hues = [0, 0.08, 0.16, 0.33, 0.55, 0.66, 0.78];
+  const rays = hues.map((hu) => beam(new THREE.Color().setHSL(hu, 0.9, 0.55), 0.16));
+  const side = o.reverse ? 1 : -1;
+  return (t) => {
+    const a = settle(t, o.at ?? -1, 0.5);
+    prism.visible = a > 0;
+    prism.rotation.y = (1 - a) * 1.6;
+    white.position.set(o.pos[0] + side * (L / 2 + 0.6), o.pos[1], o.pos[2]);
+    (white.material as THREE.MeshBasicMaterial).opacity = 0.9 * a;
+    rays.forEach((r, i) => {
+      const spread = ((i - (rays.length - 1) / 2) / rays.length) * (o.fan ?? 0.5) * a;
+      r.position.set(o.pos[0] - side * (L / 2 + 0.6) * Math.cos(spread), o.pos[1] + (L / 2) * Math.sin(spread) * a, o.pos[2]);
+      r.rotation.z = spread;
+      (r.material as THREE.MeshBasicMaterial).opacity = 0.75 * a;
+    });
+  };
+}
+
+/** 렌즈 — 둥근 유리 테가 박마다 다음 글 판으로 옮겨 그 판을 감싼다. 글 판은 투과 계산에서 빠져 있어 속이 찬 유리면 글을 가린다 — 판보다 큰 빈 테와 옅은 빛 판만 두고, 키우는 일은 그 글 판의 focus 가 맡는다 */
+export function lensSweep(stage: Stage3D, o: { ctx: SceneCtx; stops: { t: number; pos: V3 }[]; size: [number, number]; at?: number }): (t: number) => void {
+  const [w, h] = o.size;
+  const r = Math.min(w, h) * 0.32;
+  const geo = new THREE.ExtrudeGeometry(roundRectShape(w, h, r, 0.14), { depth: 0.12, bevelEnabled: true, bevelThickness: 0.05, bevelSize: 0.05, bevelSegments: 3, curveSegments: 10 });
+  geo.translate(0, 0, -0.06);
+  const rim = new THREE.Mesh(geo, glassMaterial(o.ctx, { rough: 0.03, dispersion: 1.2, thickness: 0.5, tint: "accentSoft" }));
+  rim.castShadow = true;
+  const glow = new THREE.Mesh(new THREE.PlaneGeometry(w, h), new THREE.MeshBasicMaterial({ color: color(o.ctx, "rim"), transparent: true, opacity: 0.12, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false }));
+  glow.position.z = -0.2;
+  const lens = new THREE.Group();
+  lens.add(rim, glow);
+  stage.scene.add(lens);
+  const stops = [...o.stops].sort((a, b) => a.t - b.t);
+  return (t) => {
+    const on = t >= (o.at ?? stops[0]?.t ?? 0);
+    lens.visible = on && stops.length > 0;
+    if (!lens.visible) return;
+    let i = 0;
+    while (i + 1 < stops.length && stops[i + 1].t <= t) i++;
+    const a = stops[Math.max(0, i - 1)];
+    const b = stops[i];
+    const u = i === 0 ? ease.outCubic(clamp((t - b.t) / 0.28)) : ease.outCubic(clamp((t - b.t) / 0.25));
+    const from = i === 0 ? [b.pos[0], b.pos[1] + 1.5, b.pos[2] + 2] : a.pos;
+    lens.position.set(from[0] + (b.pos[0] - from[0]) * u, from[1] + (b.pos[1] - from[1]) * u, from[2] + (b.pos[2] - from[2]) * u);
+    lens.scale.setScalar(0.9 + 0.1 * u);
+  };
+}
+
+/** 빛 고리 — 유리 큐브 24 개가 하루를 두른다. 밤 창(00–10시) 큐브는 파랗게 빛나다가 정한 시각에 빛이 -90% 로 잦아든다 */
+export function lightRing(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; radius?: number; at?: number; drop: number; window?: [number, 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 pool = (() => {
+    const c = document.createElement("canvas");
+    c.width = c.height = 512;
+    const g = c.getContext("2d")!;
+    const grad = g.createRadialGradient(256, 256, 256 * 0.55, 256, 256, 256);
+    grad.addColorStop(0, "rgba(255,255,255,0)");
+    grad.addColorStop(0.45, "rgba(255,255,255,1)");
+    grad.addColorStop(1, "rgba(255,255,255,0)");
+    g.fillStyle = grad;
+    g.beginPath();
+    g.moveTo(256, 256);
+    // 00시가 -z(고리 맨 위) — 캔버스 위쪽에서 시계 방향으로 밤 창만큼
+    g.arc(256, 256, 256, -Math.PI / 2 + ((h0 - 0.5) / 24) * Math.PI * 2, -Math.PI / 2 + ((h1 - 0.5) / 24) * Math.PI * 2);
+    g.closePath();
+    g.fill();
+    const tex = new THREE.CanvasTexture(c);
+    const m = new THREE.Mesh(new THREE.PlaneGeometry(r * 2.6, r * 2.6), new THREE.MeshBasicMaterial({ map: tex, color: color(ctx, "accent"), transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false }));
+    m.rotation.x = -Math.PI / 2;
+    m.position.y = 0.03;
+    group.add(m);
+    return m;
+  })();
+  const cubes = Array.from({ length: 24 }, (_, h) => {
+    const night = h >= h0 && h < h1;
+    const mat = night ? new THREE.MeshStandardMaterial({ color: color(ctx, "accent"), emissive: color(ctx, "accent"), emissiveIntensity: 1.6, roughness: 0.2 }) : glassMaterial(ctx, { rough: 0.12, dispersion: 0.4 });
+    const m = new THREE.Mesh(new THREE.BoxGeometry(0.7, 0.7, 0.7), mat);
+    const a = (h / 24) * Math.PI * 2;
+    m.position.set(Math.sin(a) * r, 0.6, -Math.cos(a) * r);
+    m.rotation.y = -a;
+    m.castShadow = true;
+    group.add(m);
+    return { m, night, h, mat };
+  });
+  return (t) => {
+    group.rotation.y = t * 0.3;
+    pool.material.opacity = settle(t, o.at ?? -1, 0.5) * (1 - 0.75 * ease.outCubic(clamp((t - o.drop) / 0.3)));
+    for (const c of cubes) {
+      const a = settle(t, (o.at ?? -1) + c.h * 0.012, 0.3);
+      c.m.visible = a > 0;
+      c.m.position.y = 0.6 + (1 - a) * 3;
+      if (c.night) {
+        const dim = 1 - 0.9 * ease.outCubic(clamp((t - o.drop) / 0.3));
+        (c.mat as THREE.MeshStandardMaterial).emissiveIntensity = 1.6 * dim;
+        c.m.scale.y = 0.3 + 0.7 * dim;
+      }
+    }
+  };
+}
+
+/** 유리 로고 — 모양(Shape) 들을 두께 있는 유리로 밀어내 무지개 분산으로 빛나게, 천천히 돈다 */
+export function glassLogo(stage: Stage3D, o: { ctx: SceneCtx; shapes: THREE.Shape[]; pos: V3; width?: number; at?: number; depth?: number }): (t: number) => void {
+  const geo = new THREE.ExtrudeGeometry(o.shapes, { depth: o.depth ?? 0.12, bevelEnabled: true, bevelThickness: 0.03, bevelSize: 0.02, bevelSegments: 3, curveSegments: 10 });
+  geo.center();
+  const mesh = new THREE.Mesh(geo, glassMaterial(o.ctx, { rough: 0.06, dispersion: 1.4, thickness: 1.4, tint: "accentSoft" }));
+  mesh.castShadow = true;
+  const k = o.width ?? 6;
+  mesh.scale.setScalar(k);
+  mesh.position.set(...o.pos);
+  stage.scene.add(mesh);
+  return (t) => {
+    const a = settle(t, o.at ?? -1, 0.6);
+    mesh.visible = a > 0;
+    mesh.scale.setScalar(k * (0.7 + 0.3 * a));
+    mesh.rotation.set((1 - a) * 1.2, (1 - a) * 1.6, 0);
+  };
+}
+
+/** 드롭 — 하얀 섬광과 함께 유리 조각이 사방으로 튄다(닫힌 식). 흔들림은 dropBurst 로 */
+export function shatterFlash(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; drop?: number; count?: number; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const seed = o.seed ?? "shard";
+  const n = o.count ?? 40;
+  const shardGeo = new THREE.TetrahedronGeometry(0.28);
+  const mat = glassMaterial(ctx, { rough: 0.05, dispersion: 1, thickness: 0.4 });
+  const shards = Array.from({ length: n }, (_, i) => {
+    const m = new THREE.Mesh(shardGeo, mat);
+    stage.scene.add(m);
+    const th = rand(seed, i) * Math.PI * 2;
+    const ph = (rand(seed, i + 77) - 0.3) * Math.PI * 0.8;
+    const sp = 4 + rand(seed, i + 155) * 6;
+    return { m, v: [Math.cos(th) * Math.cos(ph) * sp, Math.sin(ph) * sp + 3, Math.sin(th) * Math.cos(ph) * sp] as V3, spin: 4 + rand(seed, i + 233) * 10 };
+  });
+  const flash = document.createElement("div");
+  flash.style.cssText = "position:absolute;inset:0;background:#FFFFFF;opacity:0;pointer-events:none;";
+  stage.el.append(flash);
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "shatterFlash" });
+    flash.style.opacity = String(Math.round(s.flash * 85) / 100);
+    const local = t - ctx.beats.drop(o.drop ?? 0);
+    for (const sh of shards) {
+      const on = local >= 0 && local < 1.4;
+      sh.m.visible = on;
+      if (!on) continue;
+      sh.m.position.set(o.pos[0] + sh.v[0] * local, Math.max(0.2, o.pos[1] + sh.v[1] * local - 4.9 * local * local), o.pos[2] + sh.v[2] * local);
+      sh.m.rotation.set(sh.spin * local, sh.spin * local * 0.6, 0);
+    }
+    stage.camera.position.x += (s.shake.x ?? 0) * 0.012;
+    stage.camera.position.y += (s.shake.y ?? 0) * 0.012;
+  };
+}

package/themes/glass-light/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>