kasaframe 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,2 @@
+export { CATALOG } from "./catalog.ts";
+export type { TransitionEntry } from "./catalog.ts";

package/packages/motion/src/transitions2d/kokonutui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 kokonutUI
+
+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/kokonutui/MatrixText.css

@@ -0,0 +1,16 @@
+.matrix-text {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.matrix-text-char {
+  display: inline-block;
+  width: 1ch;
+  overflow: hidden;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 44px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}

package/packages/motion/src/transitions2d/kokonutui/MatrixText.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+// KokonutUI Matrix Text(MIT, @dorianbaffier, vendor/transitions/kokonutui/matrix-text.json)를 Tailwind 없이 옮긴 판.
+// 원본과 다른 곳: 화면 높이(min-h-screen)를 차지하던 바깥 틀을 걷고 글자 줄만 남겼다. 0·1 색은 accent 로 받는다.
+
+import { motion } from 'motion/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import './MatrixText.css';
+
+type LetterState = { char: string; isMatrix: boolean; isSpace: boolean };
+
+type MatrixTextProps = {
+  text?: string;
+  className?: string;
+  initialDelay?: number;
+  letterAnimationDuration?: number;
+  letterInterval?: number;
+  accent?: string;
+};
+
+export function MatrixText({ text = 'HelloWorld!', className, initialDelay = 200, letterAnimationDuration = 500, letterInterval = 100, accent = '#00ff00' }: MatrixTextProps) {
+  const [letters, setLetters] = useState<LetterState[]>(() => text.split('').map((char) => ({ char, isMatrix: false, isSpace: char === ' ' })));
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const getRandomChar = useCallback(() => (Math.random() > 0.5 ? '1' : '0'), []);
+
+  const animateLetter = useCallback(
+    (index: number) => {
+      if (index >= text.length) return;
+
+      requestAnimationFrame(() => {
+        setLetters((prev) => {
+          const next = [...prev];
+          if (!next[index].isSpace) next[index] = { ...next[index], char: getRandomChar(), isMatrix: true };
+          return next;
+        });
+
+        setTimeout(() => {
+          setLetters((prev) => {
+            const next = [...prev];
+            next[index] = { ...next[index], char: text[index], isMatrix: false };
+            return next;
+          });
+        }, letterAnimationDuration);
+      });
+    },
+    [getRandomChar, text, letterAnimationDuration],
+  );
+
+  const startAnimation = useCallback(() => {
+    if (isAnimating) return;
+
+    setIsAnimating(true);
+    let currentIndex = 0;
+
+    const animate = () => {
+      if (currentIndex >= text.length) {
+        setIsAnimating(false);
+        return;
+      }
+      animateLetter(currentIndex);
+      currentIndex++;
+      setTimeout(animate, letterInterval);
+    };
+
+    animate();
+  }, [animateLetter, text, isAnimating, letterInterval]);
+
+  useEffect(() => {
+    const timer = setTimeout(startAnimation, initialDelay);
+    return () => clearTimeout(timer);
+    // 원본처럼 처음 한 번만 돈다.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const motionVariants = useMemo(() => ({ matrix: { color: accent, textShadow: `0 2px 4px ${accent}80` } }), [accent]);
+
+  return (
+    <div aria-label={text} className={className ? `matrix-text ${className}` : 'matrix-text'}>
+      {letters.map((letter, index) => (
+        <motion.div
+          animate={letter.isMatrix ? 'matrix' : 'normal'}
+          className="matrix-text-char"
+          initial="initial"
+          key={`${index}-${letter.char}`}
+          transition={{ duration: 0.1, ease: 'easeInOut' }}
+          variants={motionVariants}
+        >
+          {letter.isSpace ? ' ' : letter.char}
+        </motion.div>
+      ))}
+    </div>
+  );
+}

package/packages/motion/src/transitions2d/magicui/HyperText.css

@@ -0,0 +1,15 @@
+.hyper-text {
+  overflow: hidden;
+  padding: 8px 0;
+  font-size: 36px;
+  font-weight: 700;
+}
+
+.hyper-text-char {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.hyper-text-char.is-space {
+  display: inline-block;
+  width: 12px;
+}

package/packages/motion/src/transitions2d/magicui/HyperText.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+// Magic UI Hyper Text(MIT, vendor/transitions/magicui/hyper-text.json)를 Tailwind 없이 옮긴 판.
+// 원본과 다른 곳: 글자를 motion.span 으로 감쌌지만 움직임이 없어 그냥 span 으로, as 는 태그 이름 그대로.
+// 대문자로 바꾸기(toUpperCase)는 한글엔 뜻이 없어 그대로 두었다.
+
+import { useEffect, useRef, useState, type ElementType, type HTMLAttributes } from 'react';
+import './HyperText.css';
+
+type CharacterSet = string[] | readonly string[];
+
+type HyperTextProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+  children: string;
+  className?: string;
+  /** 섞였다 풀리는 데 걸리는 ms */
+  duration?: number;
+  delay?: number;
+  as?: ElementType;
+  startOnView?: boolean;
+  animateOnHover?: boolean;
+  characterSet?: CharacterSet;
+};
+
+const DEFAULT_CHARACTER_SET = Object.freeze('ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')) as readonly string[];
+
+const getRandomInt = (max: number): number => Math.floor(Math.random() * max);
+
+export function HyperText({
+  children,
+  className,
+  duration = 800,
+  delay = 0,
+  as: Component = 'div',
+  startOnView = false,
+  animateOnHover = true,
+  characterSet = DEFAULT_CHARACTER_SET,
+  ...props
+}: HyperTextProps) {
+  const [displayText, setDisplayText] = useState<string[]>(() => children.split(''));
+  const [isAnimating, setIsAnimating] = useState(false);
+  const iterationCount = useRef(0);
+  const elementRef = useRef<HTMLElement | null>(null);
+
+  const handleAnimationTrigger = () => {
+    if (animateOnHover && !isAnimating) {
+      iterationCount.current = 0;
+      setIsAnimating(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!startOnView) {
+      const startTimeout = setTimeout(() => setIsAnimating(true), delay);
+      return () => clearTimeout(startTimeout);
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => setIsAnimating(true), delay);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1, rootMargin: '-30% 0px -30% 0px' },
+    );
+
+    if (elementRef.current) observer.observe(elementRef.current);
+
+    return () => observer.disconnect();
+  }, [delay, startOnView]);
+
+  useEffect(() => {
+    let animationFrameId: number | null = null;
+
+    if (isAnimating) {
+      const maxIterations = children.length;
+      const startTime = performance.now();
+
+      const animate = (currentTime: number) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+
+        iterationCount.current = progress * maxIterations;
+
+        setDisplayText(() =>
+          children
+            .split('')
+            .map((letter, index) => (letter === ' ' ? letter : index <= iterationCount.current ? children[index] : characterSet[getRandomInt(characterSet.length)])),
+        );
+
+        if (progress < 1) {
+          animationFrameId = requestAnimationFrame(animate);
+        } else {
+          setIsAnimating(false);
+        }
+      };
+
+      animationFrameId = requestAnimationFrame(animate);
+    }
+
+    return () => {
+      if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+    };
+  }, [children, duration, isAnimating, characterSet]);
+
+  return (
+    <Component ref={elementRef} className={className ? `hyper-text ${className}` : 'hyper-text'} onMouseEnter={handleAnimationTrigger} {...props}>
+      {displayText.map((letter, index) => (
+        <span key={index} className={letter === ' ' ? 'hyper-text-char is-space' : 'hyper-text-char'}>
+          {letter}
+        </span>
+      ))}
+    </Component>
+  );
+}

package/packages/motion/src/transitions2d/magicui/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Magic UI
+
+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/magicui/MorphingText.css

@@ -0,0 +1,25 @@
+.morphing-text {
+  position: relative;
+  width: 100%;
+  max-width: 48rem;
+  height: 1.1em;
+  margin: 0 auto;
+  font-size: 56px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+}
+
+.morphing-text-line {
+  position: absolute;
+  inset: 0 0 auto;
+  display: inline-block;
+  width: 100%;
+  margin: auto;
+}
+
+.morphing-text-filters {
+  position: fixed;
+  width: 0;
+  height: 0;
+}

package/packages/motion/src/transitions2d/magicui/MorphingText.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+// Magic UI Morphing Text(MIT, vendor/transitions/magicui/morphing-text.json)를 Tailwind 없이 옮긴 판.
+// 두 줄을 서로 반대로 흐리게·투명하게 하고 위에 문턱 필터(feColorMatrix)를 걸어 글자가 녹아 붙는 것처럼 보이게 한다.
+// 원본과 다른 곳: 문턱 필터 id 를 컴포넌트마다 따로 둔다(한 화면에 여럿 놓아도 서로의 defs 를 밟지 않게).
+
+import { useCallback, useEffect, useId, useRef } from 'react';
+import './MorphingText.css';
+
+const morphTime = 1.5;
+const cooldownTime = 0.5;
+
+const useMorphingText = (texts: string[]) => {
+  const textIndexRef = useRef(0);
+  const morphRef = useRef(0);
+  const cooldownRef = useRef(0);
+  const timeRef = useRef(new Date());
+
+  const text1Ref = useRef<HTMLSpanElement>(null);
+  const text2Ref = useRef<HTMLSpanElement>(null);
+
+  const setStyles = useCallback(
+    (fraction: number) => {
+      const [current1, current2] = [text1Ref.current, text2Ref.current];
+      if (!current1 || !current2) return;
+
+      current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
+      current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
+
+      const invertedFraction = 1 - fraction;
+      current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`;
+      current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`;
+
+      current1.textContent = texts[textIndexRef.current % texts.length];
+      current2.textContent = texts[(textIndexRef.current + 1) % texts.length];
+    },
+    [texts],
+  );
+
+  const doMorph = useCallback(() => {
+    morphRef.current -= cooldownRef.current;
+    cooldownRef.current = 0;
+
+    let fraction = morphRef.current / morphTime;
+
+    if (fraction > 1) {
+      cooldownRef.current = cooldownTime;
+      fraction = 1;
+    }
+
+    setStyles(fraction);
+
+    if (fraction === 1) {
+      textIndexRef.current++;
+    }
+  }, [setStyles]);
+
+  const doCooldown = useCallback(() => {
+    morphRef.current = 0;
+    const [current1, current2] = [text1Ref.current, text2Ref.current];
+    if (current1 && current2) {
+      current2.style.filter = 'none';
+      current2.style.opacity = '100%';
+      current1.style.filter = 'none';
+      current1.style.opacity = '0%';
+    }
+  }, []);
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const animate = () => {
+      animationFrameId = requestAnimationFrame(animate);
+
+      const newTime = new Date();
+      const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000;
+      timeRef.current = newTime;
+
+      cooldownRef.current -= dt;
+
+      if (cooldownRef.current <= 0) doMorph();
+      else doCooldown();
+    };
+
+    animate();
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [doMorph, doCooldown]);
+
+  return { text1Ref, text2Ref };
+};
+
+type MorphingTextProps = {
+  className?: string;
+  texts: string[];
+};
+
+function Texts({ texts }: Pick<MorphingTextProps, 'texts'>) {
+  const { text1Ref, text2Ref } = useMorphingText(texts);
+  return (
+    <>
+      <span className="morphing-text-line" ref={text1Ref} />
+      <span className="morphing-text-line" ref={text2Ref} />
+    </>
+  );
+}
+
+export function MorphingText({ texts, className }: MorphingTextProps) {
+  const id = `threshold-${useId().replace(/:/g, '')}`;
+  return (
+    <div className={className ? `morphing-text ${className}` : 'morphing-text'} style={{ filter: `url(#${id}) blur(0.6px)` }}>
+      <Texts texts={texts} />
+      <svg className="morphing-text-filters" preserveAspectRatio="xMidYMid slice" aria-hidden>
+        <defs>
+          <filter id={id}>
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="1 0 0 0 0
+                      0 1 0 0 0
+                      0 0 1 0 0
+                      0 0 0 255 -140"
+            />
+          </filter>
+        </defs>
+      </svg>
+    </div>
+  );
+}

package/packages/motion/src/transitions2d/magicui/WordRotate.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+// Magic UI Word Rotate(MIT, vendor/transitions/magicui/word-rotate.json)를 Tailwind 없이 옮긴 판. 원본과 같은 동작.
+
+import { useEffect, useState } from 'react';
+import { AnimatePresence, motion, type MotionProps } from 'motion/react';
+
+type WordRotateProps = {
+  words: string[];
+  duration?: number;
+  motionProps?: MotionProps;
+  className?: string;
+};
+
+export function WordRotate({
+  words,
+  duration = 2500,
+  motionProps = {
+    initial: { opacity: 0, y: -50 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 50 },
+    transition: { duration: 0.25, ease: 'easeOut' },
+  },
+  className,
+}: WordRotateProps) {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setIndex((prevIndex) => (prevIndex + 1) % words.length), duration);
+    return () => clearInterval(interval);
+  }, [words, duration]);
+
+  return (
+    <div style={{ overflow: 'hidden', padding: '8px 0' }}>
+      <AnimatePresence mode="wait">
+        <motion.h1 key={words[index]} className={className} {...motionProps}>
+          {words[index]}
+        </motion.h1>
+      </AnimatePresence>
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+// 허브 판 React 부품(geono-hub src/transitions 에서 LICENSE 째 옮김). 시계가 step 인 것은 kf.json 의 mode 를 "step" 으로
+export { RollingNumber } from "./cult-ui/RollingNumber.tsx";
+export { MatrixText } from "./kokonutui/MatrixText.tsx";
+export { HyperText } from "./magicui/HyperText.tsx";
+export { MorphingText as MagicMorphingText } from "./magicui/MorphingText.tsx";
+export { WordRotate } from "./magicui/WordRotate.tsx";
+export { ClipDiv } from "./skiper-ui/ClipDiv.tsx";
+export { SharedAxisY } from "./smoothui/SharedAxisY.tsx";
+export { TextMorph } from "./smoothui/TextMorph.tsx";
+export type { TextMorphAlign, TextMorphMode } from "./smoothui/TextMorph.tsx";
+export { ScrambleText } from "./unlumen/ScrambleText.tsx";
+export type { ScrambleTextHandle } from "./unlumen/ScrambleText.tsx";
+export { MorphText } from "./vengeance-ui/MorphText.tsx";

package/packages/motion/src/transitions2d/skiper-ui/ClipDiv.css

@@ -0,0 +1,39 @@
+.clip-div-defs {
+  position: absolute;
+  inset: 0;
+  width: 0;
+  height: 0;
+}
+
+.clip-div {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  overflow: hidden;
+}
+
+.clip-div-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 400ms ease-in-out;
+}
+
+.clip-div:hover .clip-div-img {
+  transform: scale(1.1);
+}
+
+.clip-div-shade {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.15);
+}
+
+.clip-div-body {
+  position: absolute;
+}

package/packages/motion/src/transitions2d/skiper-ui/ClipDiv.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+/**
+ * Clip div — Skiper UI skiper66(https://skiper-ui.com/v1/skiper66)을 Tailwind 없이 옮긴 판.
+ * Skiper UI 무료판은 출처 표기가 조건이다(이 머리와 레포 루트 NOTICE). 원본은 vendor/transitions/skiper-ui/skiper66.json.
+ * 손으로 그린 듯한 테두리 SVG clipPath 안에 그림을 넣고, 올리면 그림이 커진다.
+ * 원본과 다른 곳: clipPath id 를 컴포넌트마다 따로 둔다(원본은 customMask001 하나라 여럿 놓으면 겹친다), 예시 화면(Skiper66)은 뺐다.
+ */
+
+import { useId, type ReactNode } from 'react';
+import './ClipDiv.css';
+
+const PATH =
+  'M457.525 1.148c-20.789-3.198-193.979 1.16-283.854 2.496 11.104-.178 1.297-2.868-81.146-2.496-103.5.468-86 102.499-86 109.999s-7 524.5-6.5 547.5 10 59 6.5 99c-2.8 32-1.167 234.667 0 332.003.5 75 62.5 66.5 67 68.5s38.5 0 81.5 0 436 6 526 10.5 438.995-.5 505.495 0 330.01-12.5 417.51-12.5 230.99 2 270.99 0 40.5-16 51-31.5 12.5-61 12.5-105.5c0-44.503 7.01-274.504 7.01-348.004s-3.51-159.998-7.01-230.998 0-256.002 0-318.002 7.01-92.998-22.5-110.999c-18.79-11.471-81.99-9.999-133.49-9.999H853.525c-29 0-370 4-396 0Z';
+
+export function ClipDiv({ children, imgSrc, className }: { children?: ReactNode; imgSrc: string; className?: string }) {
+  const id = `clip-${useId().replace(/:/g, '')}`;
+  return (
+    <>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1836 1053" className="clip-div-defs" aria-hidden>
+        <clipPath id={id} clipPathUnits="objectBoundingBox">
+          <path fill="currentColor" d={PATH} transform="scale(0.0005139987561, 0.0008543065594)" />
+        </clipPath>
+      </svg>
+      <div style={{ clipPath: `url(#${id})` }} className={className ? `clip-div ${className}` : 'clip-div'}>
+        <img src={imgSrc} alt="" className="clip-div-img" />
+        <div className="clip-div-shade" />
+        {children && <div className="clip-div-body">{children}</div>}
+      </div>
+    </>
+  );
+}

package/packages/motion/src/transitions2d/smoothui/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Eduardo Calvo
+
+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/smoothui/SharedAxisY.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+// SmoothUI Shared Axis Y(MIT, vendor/transitions/smoothui/shared-axis-y.tsx)를 Tailwind 없이 옮긴 판. 원본과 같은 동작.
+// 낱말마다 계단처럼 끊어서 나가고 들어온다(움직임 없이 0초 전환 + 낱말 지연).
+
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { useEffect, useState } from 'react';
+
+type SharedAxisYProps = {
+  className?: string;
+  /** 문구가 바뀌는 간격(ms) */
+  interval?: number;
+  phrases: string[];
+};
+
+const STAGGER_S = 0.078;
+const ROW = { display: 'inline-flex', flexWrap: 'wrap', columnGap: '0.25em' } as const;
+
+export function SharedAxisY({ phrases, className, interval = 2500 }: SharedAxisYProps) {
+  const [index, setIndex] = useState(0);
+  const shouldReduceMotion = useReducedMotion();
+
+  useEffect(() => {
+    const id = setInterval(() => setIndex((prev) => (prev + 1) % phrases.length), interval);
+    return () => clearInterval(id);
+  }, [interval, phrases.length]);
+
+  const words = (phrases[index] ?? '').split(' ');
+
+  return (
+    <span aria-live="polite" className={className} style={ROW}>
+      <AnimatePresence mode="wait">
+        <motion.span style={ROW} key={index}>
+          {words.map((word, i) => (
+            <motion.span
+              animate={{ opacity: 1 }}
+              exit={shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, transition: { delay: i * STAGGER_S, duration: 0 } }}
+              initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
+              key={i}
+              style={{ display: 'inline-block' }}
+              transition={shouldReduceMotion ? { duration: 0 } : { delay: i * STAGGER_S, duration: 0 }}
+            >
+              {word}
+            </motion.span>
+          ))}
+        </motion.span>
+      </AnimatePresence>
+    </span>
+  );
+}