kasaframe 0.0.0-stage → 0.1.1

package/packages/motion/src/transitions2d/smoothui/TextMorph.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+// SmoothUI Text Morph(MIT, vendor/transitions/smoothui/text-morph.tsx)를 Tailwind 없이 옮긴 판. 원본과 같은 동작.
+// 글자(또는 낱말)끼리 비교해 같은 것은 자리만 미끄러지고, 빠진 것은 줄며 사라지고, 새 것은 튀어나온다.
+
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { useMemo, type ElementType } from 'react';
+
+export type TextMorphMode = 'characters' | 'words';
+export type TextMorphAlign = 'start' | 'center' | 'end';
+
+type TextMorphProps = {
+  align?: TextMorphAlign;
+  as?: 'span' | 'div' | 'p' | 'h1' | 'h2' | 'h3' | 'h4';
+  className?: string;
+  /** 낱개마다 스프링 길이(ms) */
+  duration?: number;
+  mode?: TextMorphMode;
+  /** 낱개 사이 지연(ms). 긴 글도 늘어지지 않게 위를 막는다 */
+  stagger?: number;
+  text: string;
+};
+
+type Token = { key: string; value: string };
+
+const DEFAULT_DURATION = 250;
+const DEFAULT_STAGGER = 16;
+const MS = 1000;
+const POP_SCALE = 0.72;
+const POP_OFFSET = 6;
+const MAX_STAGGER_MS = 260;
+const EXIT_DURATION_S = 0.15;
+const EASE_OUT = [0.23, 1, 0.32, 1] as const;
+
+const segmentGraphemes = (value: string): string[] => {
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+    return Array.from(segmenter.segment(value), (entry) => entry.segment);
+  }
+  return [...value];
+};
+
+const tokenizeText = (text: string, mode: TextMorphMode): string[] =>
+  mode === 'words' ? text.split(/(\s+)/).filter((token) => token.length > 0) : segmentGraphemes(text);
+
+const buildTokens = (text: string, mode: TextMorphMode): Token[] => {
+  const occurrences = new Map<string, number>();
+  return tokenizeText(text, mode).map((value) => {
+    const count = occurrences.get(value) ?? 0;
+    occurrences.set(value, count + 1);
+    return { key: `${value}-${count}`, value };
+  });
+};
+
+export function TextMorph({ text, align = 'start', as = 'span', className, duration = DEFAULT_DURATION, mode = 'characters', stagger = DEFAULT_STAGGER }: TextMorphProps) {
+  const shouldReduceMotion = useReducedMotion();
+  const tokens = useMemo(() => buildTokens(text, mode), [text, mode]);
+  const Tag = as as ElementType;
+
+  if (shouldReduceMotion) return <Tag className={className}>{text}</Tag>;
+
+  return (
+    <Tag className={className}>
+      <span className="sr-only">{text}</span>
+      {/* 빠지는 글자는 popLayout 이 absolute 로 뽑아내니 줄은 position: relative 여야 제자리에서 사라진다. */}
+      <motion.span
+        style={{ position: 'relative', display: 'inline-flex', flexWrap: 'wrap', justifyContent: align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start' }}
+        layout
+        transition={{ bounce: 0.1, duration: duration / MS, type: 'spring' }}
+      >
+        <AnimatePresence initial={false} mode="popLayout">
+          {tokens.map((token, index) => (
+            <motion.span
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              aria-hidden="true"
+              exit={{ opacity: 0, scale: POP_SCALE, transition: { duration: EXIT_DURATION_S, ease: EASE_OUT }, y: -POP_OFFSET }}
+              initial={{ opacity: 0, scale: POP_SCALE, y: POP_OFFSET }}
+              key={token.key}
+              layout
+              style={{ display: 'inline-block', whiteSpace: 'pre' }}
+              transition={{ bounce: 0.1, delay: Math.min(index * stagger, MAX_STAGGER_MS) / MS, duration: duration / MS, type: 'spring' }}
+            >
+              {token.value}
+            </motion.span>
+          ))}
+        </AnimatePresence>
+      </motion.span>
+    </Tag>
+  );
+}

package/packages/motion/src/transitions2d/smoothui/shaders.ts

@@ -0,0 +1,223 @@
+// SmoothUI(MIT, educlopez/smoothui)의 셰이더 전환 두 벌. 조각 셰이더는 원본 그대로다.
+// 원본: packages/smoothui/components/shader-reveal-transition · sdf-blob-transition (vendor/transitions/smoothui)
+
+// noise · zoom · circle · wipe · luma · planetary · stripes · push 순서가 uVariant 0..7 이다.
+export const REVEAL_VARIANTS = ['noise', 'zoom', 'circle', 'wipe', 'luma', 'planetary', 'stripes', 'push'] as const;
+export const REVEAL_FRAGMENT = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uProgress;
+uniform float uAlpha;
+uniform float uVariant;
+#define PI 3.14159265359
+
+float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }
+float noise(vec2 p){
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+float parabola(float x, float k){ return pow(4.0 * x * (1.0 - x), k); }
+mat2 rot(float a){ float s = sin(a); float c = cos(a); return mat2(c, -s, s, c); }
+
+vec4 paint(vec2 uv, float mask, vec3 color, float glow){
+  float exitFade = smoothstep(1.0, 0.76, uProgress);
+  float entryFade = smoothstep(0.0, 0.10, uProgress);
+  float alpha = clamp((mask * 0.76 + glow * 0.24) * entryFade * exitFade * uAlpha, 0.0, 0.92);
+  return vec4(color * alpha + vec3(1.0) * glow * 0.16 * uAlpha, alpha);
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  vec2 aspect = vec2(uRes.x / uRes.y, 1.0);
+  vec2 p = (uv - 0.5) * aspect;
+  float progress = smoothstep(0.0, 1.0, uProgress);
+  vec3 pink = vec3(1.0, 0.20, 0.58);
+  vec3 cyan = vec3(0.12, 0.86, 1.0);
+  vec3 gold = vec3(1.0, 0.72, 0.28);
+  vec3 mint = vec3(0.45, 1.0, 0.72);
+
+  float mask = 0.0;
+  float glow = 0.0;
+  vec3 color = mix(pink, cyan, uv.x);
+
+  if (uVariant < 0.5) {
+    // Demo 1 — turbulent noise threshold. Chunky, organic gate.
+    float n1 = noise(uv * vec2(18.0, 12.0) + uTime * 0.42);
+    float n2 = noise(uv * vec2(52.0, 44.0) - uTime * 0.18);
+    float threshold = progress * 1.35 - 0.18;
+    float gate = smoothstep(threshold - 0.18, threshold + 0.18, uv.x * 0.62 + uv.y * 0.28 + n1 * 0.34 + n2 * 0.08);
+    mask = pow(gate * (1.0 - gate) * 4.0, 0.74) + step(0.74, n2) * gate * 0.22;
+    glow = exp(-pow(uv.x + n1 * 0.26 - progress, 2.0) * 26.0);
+    color = mix(vec3(1.0, 0.10, 0.55), vec3(0.18, 1.0, 0.78), n1);
+  } else if (uVariant < 1.5) {
+    // Demo 2 — zoom mix. Large central lens, not a sweep.
+    float yGate = smoothstep(0.0, 1.0, progress * 2.15 + uv.y - 1.08);
+    vec2 z = (uv - 0.5) * mix(1.75, 0.35, yGate) + 0.5;
+    float lens = 1.0 - smoothstep(0.12, 0.78, length((z - 0.5) * aspect));
+    float seam = exp(-pow(yGate - 0.5, 2.0) * 20.0);
+    mask = (lens * 0.72 + seam * 0.42) * parabola(progress, 0.42);
+    glow = seam * 0.9 + lens * 0.25;
+    color = mix(vec3(1.0, 0.80, 0.34), vec3(0.70, 0.92, 1.0), yGate);
+  } else if (uVariant < 2.5) {
+    // Demo 3 — noisy circular reveal.
+    float n = noise(uv * 9.0 + uTime * 0.25);
+    float radius = progress * 1.08 + n * 0.045;
+    float d = length(p) - radius * 0.72;
+    mask = exp(-d * d * 42.0) + smoothstep(0.08, -0.12, d) * 0.18;
+    glow = exp(-d * d * 140.0);
+    color = mix(vec3(1.0, 0.22, 0.58), vec3(1.0, 0.75, 0.32), atan(p.y, p.x) / PI * 0.5 + 0.5);
+  } else if (uVariant < 3.5) {
+    // Demo 4 — displacement wipe. Narrow noisy blade.
+    float n = noise(uv * vec2(12.0, 26.0) + vec2(uTime * 0.26, -uTime * 0.12));
+    float blade = progress * 1.32 - 0.16 + n * 0.11;
+    float edge = blade - uv.x;
+    float front = exp(-edge * edge * 120.0);
+    float fillSide = smoothstep(-0.03, 0.16, edge) * 0.18;
+    mask = front * 0.92 + fillSide;
+    glow = front;
+    color = mix(vec3(0.12, 0.92, 1.0), vec3(1.0, 1.0, 1.0), front * 0.38);
+  } else if (uVariant < 4.5) {
+    // Demo 5 — luminance displacement. Horizontal ribbons pulled vertically.
+    float lum = noise(uv * 5.0 + vec2(0.0, uTime * 0.22));
+    float displacedY = uv.y + progress * (lum - 0.5) * 0.55;
+    float ribbons = sin(displacedY * 58.0 + uTime * 1.25) * 0.5 + 0.5;
+    float fine = sin(displacedY * 132.0 - uTime * 1.8) * 0.5 + 0.5;
+    float window = smoothstep(0.03, 0.5, progress) * smoothstep(1.0, 0.72, progress);
+    mask = (smoothstep(0.58, 0.92, ribbons) * 0.74 + smoothstep(0.76, 0.98, fine) * 0.22) * window;
+    glow = smoothstep(0.84, 1.0, ribbons) * window;
+    color = mix(vec3(1.0, 0.68, 0.22), vec3(1.0, 0.20, 0.62), lum);
+  } else if (uVariant < 5.5) {
+    // Demo 6 — planetary rotated displacement. Spiral vortex.
+    vec2 disp = vec2(noise(uv * 5.5 + uTime * 0.12), noise(uv * 5.5 + 4.2 - uTime * 0.10)) - 0.5;
+    vec2 q = rot(PI * 0.25) * (p + disp * 0.44 * parabola(progress, 0.55));
+    float ang = atan(q.y, q.x);
+    float rr = length(q);
+    float arms = sin(ang * 5.0 + rr * 18.0 - uTime * 1.8);
+    float core = 1.0 - smoothstep(0.0, 0.42, rr);
+    mask = (smoothstep(0.08, 0.92, arms) * 0.72 + core * 0.38) * parabola(progress, 0.58);
+    glow = exp(-abs(arms) * 1.5) * parabola(progress, 0.85);
+    color = mix(vec3(0.10, 0.88, 1.0), vec3(1.0, 0.66, 0.18), rr + core * 0.35);
+  } else if (uVariant < 6.5) {
+    // Demo 7 — divided UV stripe displacement. Barcode shutter.
+    vec2 divided = fract(uv * vec2(42.0, 1.0));
+    float stripeCore = step(0.18, divided.x) * step(divided.x, 0.62);
+    float diagonal = uv.x + uv.y * 0.18 + divided.x * 0.06;
+    float sweep = smoothstep(-0.10, 1.12, progress * 1.32 - diagonal + 0.18);
+    float shutter = stripeCore * sweep * smoothstep(0.04, 0.56, progress) * smoothstep(1.0, 0.78, progress);
+    mask = shutter * 0.92;
+    glow = stripeCore * exp(-pow(progress - uv.x, 2.0) * 30.0) * 0.86;
+    color = mix(vec3(1.0, 0.15, 0.55), vec3(0.12, 0.88, 1.0), divided.x);
+  } else {
+    // Demo 8 — noise push/pull. Vertical flow with directional pressure.
+    float hn = noise(uv * uRes / 115.0 + uTime * 0.12);
+    vec2 centerDir = normalize(vec2(0.5) - uv + 0.001);
+    float pull = centerDir.y * (1.0 + hn * 0.7) * parabola(progress, 0.62);
+    float bands = sin((uv.y + pull * 0.52) * 28.0 + hn * 5.0);
+    float pressure = smoothstep(-0.22, 0.96, bands) * parabola(progress, 0.62);
+    float verticalGlow = exp(-pow(uv.y - (0.5 + pull * 0.22), 2.0) * 18.0);
+    mask = pressure * 0.78 + verticalGlow * 0.22;
+    glow = verticalGlow * pressure;
+    color = mix(vec3(0.48, 1.0, 0.74), vec3(1.0, 0.22, 0.58), hn);
+  }
+
+  gl_FragColor = paint(uv, mask, color, glow);
+}
+`;
+
+// circle · warped · merge · radial · final 순서가 uVariant 0..4 다.
+export const SDF_VARIANTS = ['circle', 'warped', 'merge', 'radial', 'final'] as const;
+export const SDF_FRAGMENT = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uProgress;
+uniform float uAlpha;
+uniform float uVariant;
+#define PI 3.14159265359
+
+float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }
+float noise(vec2 p){
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+
+float circleSdf(vec2 p, vec2 c, float r){ return length(p - c) - r; }
+float smin(float a, float b, float k){
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  vec2 aspect = vec2(uRes.x / uRes.y, 1.0);
+  vec2 p = (uv - 0.5) * aspect;
+  float progress = smoothstep(0.0, 1.0, uProgress);
+  float grow = smoothstep(0.0, 0.86, progress);
+  float exitFade = smoothstep(1.0, 0.72, progress);
+
+  float wobble = noise(uv * 7.0 + uTime * 0.18) * 0.035;
+  float ringNoise = noise(vec2(atan(p.y, p.x) * 2.0, uTime * 0.18)) * 0.075;
+  float dCircle = circleSdf(p, vec2(0.0), 0.04 + grow * 0.64);
+  float dWarped = circleSdf(p, vec2(0.0), 0.04 + grow * 0.62 + ringNoise * smoothstep(0.08, 0.96, progress));
+
+  float m0 = circleSdf(p, vec2(-0.26, -0.08), 0.06 + grow * 0.42 + wobble);
+  float m1 = circleSdf(p, vec2(0.24, 0.12), 0.06 + grow * 0.40 - wobble * 0.5);
+  float dMerge = smin(m0, m1, 0.18);
+
+  float angle = atan(p.y, p.x);
+  float sector3 = 2.0 * PI / 3.0;
+  float sector5 = 2.0 * PI / 5.0;
+  float a3 = floor((angle + PI) / sector3 + 0.5) * sector3 - PI;
+  float a5 = floor((angle + PI) / sector5 + 0.5) * sector5 - PI;
+  float r0 = 0.17 + grow * 0.24;
+  float r1 = 0.30 + grow * 0.18;
+  float dR0 = circleSdf(p, vec2(cos(a3), sin(a3)) * r0, 0.04 + grow * 0.22 + wobble * 0.4);
+  float dR1 = circleSdf(p, vec2(cos(a5), sin(a5)) * r1, 0.035 + grow * 0.18);
+  float dRadial = smin(dR0, dR1, 0.14);
+
+  float f0 = circleSdf(p, vec2(-0.28, -0.10), 0.08 + grow * 0.46 + wobble);
+  float f1 = circleSdf(p, vec2(0.00, 0.16), 0.06 + grow * 0.42 - wobble * 0.5);
+  float f2 = circleSdf(p, vec2(0.30, -0.06), 0.05 + grow * 0.40 + wobble * 0.6);
+  float f3 = circleSdf(p, vec2(-0.02, -0.30), 0.04 + grow * 0.34);
+  float dFinal = smin(smin(f0, f1, 0.18), smin(f2, f3, 0.16), 0.20);
+  dFinal = smin(dFinal, dRadial, 0.16);
+
+  float d = dFinal;
+  if (uVariant < 0.5) {
+    d = dCircle;
+  } else if (uVariant < 1.5) {
+    d = dWarped;
+  } else if (uVariant < 2.5) {
+    d = dMerge;
+  } else if (uVariant < 3.5) {
+    d = dRadial;
+  }
+
+  float edge = exp(-d * d * 160.0) * exitFade;
+  float fill = smoothstep(0.08, -0.10, d) * smoothstep(0.0, 0.18, progress) * exitFade;
+  float cell = hash(floor((uv + noise(uv * 11.0) * 0.01) * uRes / 7.0) + floor(uTime * 10.0));
+  float flecks = step(0.78, cell) * edge * 0.22 * smoothstep(1.5, 4.0, uVariant);
+
+  vec3 rose = vec3(1.0, 0.23, 0.58);
+  vec3 apricot = vec3(1.0, 0.70, 0.38);
+  vec3 mint = vec3(0.42, 0.94, 0.78);
+  vec3 color = mix(rose, apricot, smoothstep(-0.35, 0.35, p.x + noise(uv * 5.0) * 0.18));
+  color = mix(color, mint, smoothstep(0.12, 0.7, p.y + grow * 0.16));
+
+  float alpha = (fill * 0.24 + edge * 0.72 + flecks) * uAlpha;
+  gl_FragColor = vec4(color * alpha + vec3(1.0) * edge * 0.18 * uAlpha, clamp(alpha, 0.0, 0.9));
+}
+`;

package/packages/motion/src/transitions2d/unlumen/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Léo Wicki
+
+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/unlumen/ScrambleText.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+// unlumen UI Scramble Text(MIT, vendor/transitions/unlumen/scramble-text.json)를 Tailwind 없이 옮긴 판. 원본과 같은 동작.
+// 앞에서부터 한 글자씩 드러나고, 드러난 글자 바로 뒤에 섞인 글자 몇 개가 앞서 달린다.
+
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
+
+type ScrambleTextProps = {
+  text: string;
+  scrambleSpeed?: number;
+  /** 드러난 글자 앞에서 달리는 섞인 글자 수 */
+  scrambledLetterCount?: number;
+  characters?: string;
+  className?: string;
+  /** 아직 안 드러난(섞인) 쪽 */
+  scrambledClassName?: string;
+  autoStart?: boolean;
+  delay?: number;
+  onStart?: () => void;
+  onComplete?: () => void;
+};
+
+export type ScrambleTextHandle = { start: () => void; reset: () => void };
+
+export const ScrambleText = forwardRef<ScrambleTextHandle, ScrambleTextProps>(
+  (
+    {
+      text,
+      scrambleSpeed = 50,
+      scrambledLetterCount = 2,
+      characters = 'abcdefghijklmnopqrstuvwxyz!@#$%^&*()_+',
+      className = '',
+      scrambledClassName = '',
+      autoStart = true,
+      delay = 0,
+      onStart,
+      onComplete,
+    },
+    ref,
+  ) => {
+    const [displayText, setDisplayText] = useState('');
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [visibleLetterCount, setVisibleLetterCount] = useState(0);
+    const [scrambleOffset, setScrambleOffset] = useState(0);
+
+    const startAnimation = useCallback(() => {
+      setIsAnimating(true);
+      setVisibleLetterCount(0);
+      setScrambleOffset(0);
+      onStart?.();
+    }, [onStart]);
+
+    const reset = useCallback(() => {
+      setIsAnimating(false);
+      setVisibleLetterCount(0);
+      setScrambleOffset(0);
+      setDisplayText('');
+    }, []);
+
+    useImperativeHandle(ref, () => ({ start: startAnimation, reset }));
+
+    useEffect(() => {
+      if (!autoStart) return;
+      if (delay > 0) {
+        const t = setTimeout(startAnimation, delay);
+        return () => clearTimeout(t);
+      }
+      startAnimation();
+    }, [autoStart, delay, startAnimation]);
+
+    useEffect(() => {
+      let interval: ReturnType<typeof setInterval> | undefined;
+
+      if (isAnimating) {
+        interval = setInterval(() => {
+          if (visibleLetterCount < text.length) {
+            setVisibleLetterCount((prev) => prev + 1);
+          } else if (scrambleOffset < scrambledLetterCount) {
+            setScrambleOffset((prev) => prev + 1);
+          } else {
+            clearInterval(interval);
+            setIsAnimating(false);
+            onComplete?.();
+          }
+
+          const remainingSpace = Math.max(0, text.length - visibleLetterCount);
+          const currentScrambleCount = Math.min(remainingSpace, scrambledLetterCount);
+          const scrambledPart = Array(currentScrambleCount)
+            .fill(0)
+            .map(() => characters[Math.floor(Math.random() * characters.length)])
+            .join('');
+
+          setDisplayText(text.slice(0, visibleLetterCount) + scrambledPart);
+        }, scrambleSpeed);
+      }
+
+      return () => {
+        if (interval) clearInterval(interval);
+      };
+    }, [isAnimating, text, visibleLetterCount, scrambleOffset, scrambledLetterCount, characters, scrambleSpeed, onComplete]);
+
+    return (
+      <>
+        <span className="sr-only">{text}</span>
+        <span style={{ display: 'inline-block', whiteSpace: 'pre-wrap' }} aria-hidden="true">
+          <span className={className}>{displayText.slice(0, visibleLetterCount)}</span>
+          <span className={scrambledClassName}>{displayText.slice(visibleLetterCount)}</span>
+        </span>
+      </>
+    );
+  },
+);
+
+ScrambleText.displayName = 'ScrambleText';

package/packages/motion/src/transitions2d/vengeance-ui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-2026 Ashutoshx7
+
+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/vengeance-ui/MorphText.css

@@ -0,0 +1,69 @@
+.morph-text-root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.morph-text-defs {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.morph-text-container {
+  position: relative;
+  font-weight: 700;
+  user-select: none;
+}
+
+.morph-word-rotator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.2em;
+  min-width: 14ch;
+}
+
+.morph-word {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  white-space: nowrap;
+  animation-name: morph-word-rotate;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}
+
+@keyframes morph-word-rotate {
+  0% {
+    opacity: 0;
+    filter: blur(20px);
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  5% {
+    opacity: 0.5;
+    filter: blur(10px);
+  }
+  15%,
+  35% {
+    opacity: 1;
+    filter: blur(0px);
+    transform: translate(-50%, -50%) scale(1);
+  }
+  45% {
+    opacity: 0.5;
+    filter: blur(10px);
+  }
+  50%,
+  100% {
+    opacity: 0;
+    filter: blur(20px);
+    transform: translate(-50%, -50%) scale(1.2);
+  }
+}

package/packages/motion/src/transitions2d/vengeance-ui/MorphText.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+// Vengeance UI Morph Text(MIT, vendor/transitions/vengeance-ui/morph-text.json)를 Tailwind 없이 옮긴 판.
+// 낱말마다 같은 CSS 애니메이션을 시차만 두고 무한히 돌리고, 위에 끈적한 문턱 필터를 걸어 녹아 바뀌는 것처럼 보인다.
+// 움직임이 전부 CSS animation 이라 영상 시계(getAnimations)로 바로 맞출 수 있다.
+// 원본과 다른 곳: Google Fonts(Space Grotesk) @import 와 아래 작은 글(subtext)을 뺐다 — 글꼴은 허브 글꼴을 따른다. 키프레임은 MorphText.css 로.
+
+import { useId } from 'react';
+import './MorphText.css';
+
+type MorphTextProps = {
+  words?: string[];
+  /** 낱말 하나가 머무는 ms */
+  interval?: number;
+  fontSize?: string;
+  className?: string;
+};
+
+export function MorphText({ words = ['CREATE', 'DESIGN', 'DEVELOP'], interval = 3000, fontSize = 'clamp(3rem, 15vw, 10rem)', className }: MorphTextProps) {
+  const filterId = `morph-threshold-${useId().replace(/:/g, '')}`;
+  const totalDuration = (interval / 1000) * words.length;
+  const wordDuration = interval / 1000;
+
+  return (
+    <div className={className ? `morph-text-root ${className}` : 'morph-text-root'}>
+      <svg aria-hidden="true" focusable="false" className="morph-text-defs">
+        <defs>
+          <filter id={filterId}>
+            <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 25 -9" result="goo" />
+            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+          </filter>
+        </defs>
+      </svg>
+      <div className="morph-text-container" style={{ fontSize, filter: `url(#${filterId})` }}>
+        <div className="morph-word-rotator">
+          {words.map((word, i) => (
+            <span key={`${word}-${i}`} className="morph-word" style={{ animationDelay: `${i * wordDuration}s`, animationDuration: `${totalDuration}s` }}>
+              {word}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}