kasaframe 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,114 @@
+import * as THREE from "three";
+import { RoundedBoxGeometry } from "three/addons/geometries/RoundedBoxGeometry.js";
+import { zoomOutRig, type WindowRect } from "./rig.ts";
+import { aim, disposeTree, imageMaterial, raw, sky, type Kit } from "./world.ts";
+
+// 창 — 앞 장면 그림이 끝에 뒤 장면의 그 자리 그림으로 녹아든다. blend 0 이면 앞 장면 텍셀 그대로
+const WINDOW_FRAG = /* glsl */ `
+uniform sampler2D mapA;
+uniform sampler2D mapB;
+uniform vec4 rect;
+uniform float blend;
+varying vec2 vUv;
+void main() {
+  vec3 a = texture2D(mapA, vUv).rgb;
+  vec3 b = texture2D(mapB, rect.xy + vUv * rect.zw).rgb;
+  gl_FragColor = vec4(mix(a, b, blend), 1.0);
+}`;
+
+const VERT = /* glsl */ `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
+
+export const DEFAULT_WINDOW: WindowRect = { x: 0.5, y: 0.5, h: 0.36 };
+
+function shadowTexture(): THREE.CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = c.height = 128;
+  const g = c.getContext("2d")!;
+  const grad = g.createRadialGradient(64, 64, 10, 64, 64, 64);
+  grad.addColorStop(0, "rgba(0,0,0,0.9)");
+  grad.addColorStop(1, "rgba(0,0,0,0)");
+  g.fillStyle = grad;
+  g.fillRect(0, 0, 128, 128);
+  return new THREE.CanvasTexture(c);
+}
+
+export function zoomOut(k: Kit, o: { window?: WindowRect }) {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const win = { ...DEFAULT_WINDOW, ...o.window };
+  const scene = new THREE.Scene();
+  scene.add(sky({ top: pal.deep, bottom: "#020308", glow: pal.accent, dir: [0, 0.3, -1], amt: 0.4, pow: 4 }));
+
+  const bMat = imageMaterial(k.to.texture);
+  const bPlane = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), bMat);
+  bPlane.renderOrder = 0;
+  scene.add(bPlane);
+  // 뒤 장면 판 뒷면·두께 — 비스듬히 볼 때 종이가 아니라 화면으로 보이게
+  const slab = new THREE.Mesh(new RoundedBoxGeometry(aspect + 0.04, 1.04, 0.05, 3, 0.02), new THREE.MeshBasicMaterial({ color: raw(pal.deep) }));
+  slab.position.z = -0.03;
+  scene.add(slab);
+
+  const h = win.h;
+  const w = aspect * h;
+  const shadowTex = shadowTexture();
+  const shadow = new THREE.Mesh(new THREE.PlaneGeometry(w * 1.25, h * 1.35), new THREE.MeshBasicMaterial({ map: shadowTex, transparent: true, depthTest: false, depthWrite: false }));
+  shadow.renderOrder = 1;
+  scene.add(shadow);
+  const chromeMat = new THREE.MeshBasicMaterial({ color: raw(pal.ink), transparent: true, depthTest: false, depthWrite: false });
+  const chrome = new THREE.Mesh(new RoundedBoxGeometry(w + 0.024, h + 0.07, 0.001, 2, 0.0005), chromeMat);
+  chrome.renderOrder = 2;
+  scene.add(chrome);
+  const dots = [pal.accent, pal.glow, pal.bg].map((col, i) => {
+    const d = new THREE.Mesh(new THREE.CircleGeometry(0.009, 24), new THREE.MeshBasicMaterial({ color: raw(col), transparent: true, depthTest: false, depthWrite: false }));
+    d.renderOrder = 3;
+    d.userData.dx = -w / 2 + 0.024 + i * 0.026;
+    scene.add(d);
+    return d;
+  });
+  const winMat = new THREE.ShaderMaterial({
+    vertexShader: VERT,
+    fragmentShader: WINDOW_FRAG,
+    uniforms: {
+      mapA: { value: k.from.texture },
+      mapB: { value: k.to.texture },
+      // 창 비율이 화면과 같으므로 가로 uv 폭도 h(뒤 장면 폭 대비)다
+      rect: { value: new THREE.Vector4(win.x - h / 2, 1 - win.y - h / 2, h, h) },
+      blend: { value: 0 },
+    },
+    transparent: true,
+    depthTest: false,
+    depthWrite: false,
+  });
+  const winPlane = new THREE.Mesh(new THREE.PlaneGeometry(w, h), winMat);
+  winPlane.renderOrder = 4;
+  scene.add(winPlane);
+
+  return {
+    frame(u: number) {
+      const s = zoomOutRig(u, env, win);
+      aim(k.cam, s.cam);
+      const [cx, cy, cz] = s.win.c;
+      winPlane.position.set(cx, cy, cz);
+      winMat.uniforms.blend.value = s.blend;
+      winPlane.visible = s.blend < 1;
+      bMat.uniforms.dim.value = s.dim;
+      chrome.position.set(cx, cy + 0.023, cz);
+      chromeMat.opacity = s.chrome;
+      chrome.visible = s.chrome > 0;
+      for (const d of dots) {
+        d.position.set(cx + d.userData.dx, cy + h / 2 + 0.023, cz);
+        (d.material as THREE.MeshBasicMaterial).opacity = s.chrome;
+        d.visible = s.chrome > 0;
+      }
+      shadow.position.set(cx + 0.04 * s.lift, cy - 0.06 * s.lift, 0.001);
+      (shadow.material as THREE.MeshBasicMaterial).opacity = s.chrome * Math.min(1, s.lift * 2.5) * 0.7;
+      shadow.visible = s.chrome > 0 && s.lift > 0;
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+      shadowTex.dispose();
+    },
+  };
+}

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

@@ -0,0 +1,127 @@
+import { GL_TRANSITIONS } from "./gl-transitions/shaders.ts";
+import { REVEAL_VARIANTS, SDF_VARIANTS } from "./smoothui/shaders.ts";
+
+/**
+ * 전환 목록 — 이름·출처·라이선스·시계. geono-hub 가 모은 전환(docs/transitions.md) 중 kasaframe 에 들일 수 있는 것과 kasaframe 의 3D 전환.
+ * React Bits·Animate UI(Commons Clause)·Aceternity(재배포 금지)는 들이지 않는다 — 여기에도 없다.
+ */
+export interface TransitionEntry {
+  /** transition3d 의 kind 로 부르는 이름, 아니면 부품·원본 이름 */
+  name: string;
+  source: string;
+  license: string;
+  /** seek — 시각 t 의 순수 함수(셰이더 진행도·CSS·GSAP) · step — 자기 시계(rAF·타이머)라 0 초부터 차례로 찍어야 한다 */
+  clock: "seek" | "step";
+  /**
+   * transition3d — `transition3d(root, ctx, { kind: name })` 로 부른다(앞·뒤 화면 = 정지 그림·영상·살아 있는 장면)
+   * react — `@kasaframe/motion/transitions2d/react` 의 부품(허브 판을 옮김)
+   * vendor — 원본만 geono-hub `vendor/transitions/` 에 있다(아직 옮기지 않음)
+   */
+  use: "transition3d" | "react" | "vendor";
+  author?: string;
+  /** 영상에 쓸 때 걸리는 점 */
+  note?: string;
+  /** react 부품 이름 */
+  component?: string;
+}
+
+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", "rise", "land"].map((name) => ({
+  name,
+  source: "kasaframe",
+  license: "kasaframe",
+  clock: "seek",
+  use: "transition3d",
+}));
+
+const GL: TransitionEntry[] = GL_TRANSITIONS.map((s) => ({
+  name: `gl:${s.name}`,
+  source: "gl-transitions",
+  license: SPDX[s.license] ?? s.license,
+  clock: "seek",
+  use: "transition3d",
+  author: s.author,
+}));
+
+const SDF_TITLE: Record<string, string> = { circle: "SDF Circle", warped: "Warped Circle", merge: "Organic Merge", radial: "Radial Circles", final: "SDF Blob" };
+const SMOOTH_SHADERS: TransitionEntry[] = [
+  ...REVEAL_VARIANTS.map((v) => ({ name: `smooth:reveal-${v}`, note: `Shader Reveal ${v}` })),
+  ...SDF_VARIANTS.map((v) => ({ name: `smooth:sdf-${v}`, note: SDF_TITLE[v] })),
+].map((e) => ({ ...e, source: "SmoothUI", license: "MIT", clock: "seek" as const, use: "transition3d" as const }));
+
+// [이름, 시계, 쓰는 법, 부품 이름?, 걸리는 점?] — 시계·트리거는 docs/transitions.md 표 그대로
+type Row = [string, "seek" | "step", "react" | "vendor", string?, string?];
+const web = (source: string, license: string, rows: Row[]): TransitionEntry[] =>
+  rows.map(([name, clock, use, component, note]) => ({ name, source, license, clock, use, ...(component ? { component } : {}), ...(note ? { note } : {}) }));
+
+const WEB: TransitionEntry[] = [
+  ...web("Magic UI", "MIT", [
+    ["Morphing Text", "step", "react", "MagicMorphingText"],
+    ["Hyper Text", "step", "react", "HyperText"],
+    ["Word Rotate", "step", "react", "WordRotate"],
+    ["Typing Animation", "step", "vendor"],
+    ["Text Animate", "step", "vendor"],
+    ["Blur Fade", "step", "vendor"],
+    ["Text 3D Flip", "step", "vendor", undefined, "호버로 켜진다 — 시각으로 바꿔야"],
+    ["Animated Theme Toggler", "seek", "vendor", undefined, "누름 + View Transition"],
+    ["Dia Text Reveal", "step", "vendor"],
+    ["Pixel Image", "seek", "vendor"],
+  ]),
+  ...web("Cult UI", "MIT", [
+    ["Text Animate", "step", "vendor"],
+    ["Typewriter", "step", "vendor"],
+    ["Direction Aware Tabs", "step", "vendor"],
+    ["3D Carousel", "step", "vendor", undefined, "끌기 대신 각도를 t 로"],
+    ["Rolling Number", "step", "react", "RollingNumber"],
+    ["Morph Surface", "step", "vendor", undefined, "누름으로 켜진다"],
+    ["Expandable Screen", "step", "vendor", undefined, "누름으로 켜진다"],
+  ]),
+  ...web("KokonutUI", "MIT", [
+    ["Type Writer", "step", "vendor"],
+    ["Matrix Text", "step", "react", "MatrixText"],
+    ["Dynamic Text", "step", "vendor"],
+    ["Sliced Text", "step", "vendor", undefined, "호버로 켜진다"],
+    ["Card Flip", "seek", "vendor", undefined, "호버로 켜진다"],
+  ]),
+  ...web("SmoothUI", "MIT", [
+    ["Aperture Blur", "seek", "vendor", undefined, "셰이더 진행도 함수 — 옮기면 smooth: 로"],
+    ["Chroma Blur", "seek", "vendor", undefined, "셰이더 진행도 함수 — 옮기면 smooth: 로"],
+    ["Prism Sweep", "seek", "vendor", undefined, "셰이더 진행도 함수 — 옮기면 smooth: 로"],
+    ["Page Preloader", "step", "vendor"],
+    ["Text Morph", "step", "react", "TextMorph"],
+    ["Per Word Crossfade", "step", "vendor"],
+    ["Rolling Text", "step", "vendor"],
+    ["Mask Reveal Up", "step", "vendor"],
+    ["Shared Axis X", "step", "vendor"],
+    ["Shared Axis Y", "step", "react", "SharedAxisY"],
+    ["Shared Axis Z", "step", "vendor"],
+    ["Soft Blur In", "step", "vendor"],
+    ["Stagger From Center", "step", "vendor"],
+    ["Top Down Letters", "step", "vendor"],
+    ["Reveal Text", "step", "vendor"],
+    ["Typewriter Text", "step", "vendor"],
+    ["SVG Clip Mask", "step", "vendor"],
+  ]),
+  ...web("unlumen UI", "MIT", [
+    ["Page Transition", "seek", "vendor", undefined, "GSAP — gsap 어댑터로 맞춘다"],
+    ["Scramble Text", "step", "react", "ScrambleText"],
+    ["Motion Subtitle", "step", "vendor"],
+    ["Animate Digits", "step", "vendor"],
+  ]),
+  ...web("Vengeance UI", "MIT", [
+    ["Flip Text", "step", "vendor"],
+    ["Flip Fade Text", "step", "vendor"],
+    ["Morph Text", "seek", "react", "MorphText", "CSS 애니메이션뿐 — 가상 시계가 맞춘다"],
+    ["Stagger Text", "step", "vendor"],
+    ["Gooey Text Reveal", "step", "vendor"],
+    ["Reveal Loader", "step", "vendor"],
+  ]),
+  ...web("Skiper UI", "무료·출처 표기(Skiper UI)", [
+    ["Clip-path Carousel (skiper54)", "step", "vendor"],
+    ["Clip Div (skiper66)", "seek", "react", "ClipDiv", "호버로 커진다 — CSS"],
+    ["Text Roll Menu (skiper58)", "step", "vendor", undefined, "호버로 켜진다"],
+  ]),
+];
+
+export const CATALOG: readonly TransitionEntry[] = [...KASAFRAME_3D, ...GL, ...SMOOTH_SHADERS, ...WEB];

package/packages/motion/src/transitions2d/css.d.ts

@@ -0,0 +1,2 @@
+// 허브 판 부품이 제 CSS 를 부수 효과로 불러온다 — 묶는 쪽(Vite)이 처리한다
+declare module "*.css";

package/packages/motion/src/transitions2d/cult-ui/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 Jordan-Gilliam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/packages/motion/src/transitions2d/cult-ui/RollingNumber.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+// Cult UI Rolling Number(MIT, vendor/transitions/cult-ui/rolling-number.json). 스타일이 없어 원본 그대로다.
+// 값이 바뀌면 스프링이 옛 값에서 새 값까지 굴러가며 중간 숫자를 그린다.
+
+import { useEffect } from 'react';
+import { motion, type MotionValue, useSpring, useTransform } from 'motion/react';
+
+type RollingNumberProps = {
+  value: number;
+  mass?: number;
+  stiffness?: number;
+  damping?: number;
+  precision?: number;
+  format?: (value: number) => string;
+  onAnimationStart?: () => void;
+  onAnimationComplete?: () => void;
+};
+
+export function RollingNumber({
+  value,
+  mass = 0.8,
+  stiffness = 75,
+  damping = 15,
+  precision = 0,
+  format = (num) => num.toLocaleString(),
+  onAnimationStart,
+  onAnimationComplete,
+}: RollingNumberProps) {
+  const spring = useSpring(value, { mass, stiffness, damping });
+  const display: MotionValue<string> = useTransform(spring, (current) => format(parseFloat(current.toFixed(precision))));
+
+  useEffect(() => {
+    spring.set(value);
+    if (onAnimationStart) onAnimationStart();
+    const unsubscribe = spring.on('change', () => {
+      if (spring.get() === value && onAnimationComplete) onAnimationComplete();
+    });
+    return () => unsubscribe();
+  }, [spring, value, onAnimationStart, onAnimationComplete]);
+
+  return <motion.span>{display}</motion.span>;
+}

package/packages/motion/src/transitions2d/gl-transitions/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2017-present gl-transitions contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Note: Individual transitions in the transitions/ directory may have their own
+license specified in their file header comments. When no license is specified,
+the transition is covered by this MIT license.