/**
 * OmniMotion — 逐字浮现 / TypeIn (React 18+ · 纯 CSS 版本)
 * 复刻来源: cuberto.com — 字符错峰上浮
 * 用法: <TypeIn text="动效组件库" stagger={120} />
 */
export default function TypeIn({ text = "动效组件库", stagger = 120 }) {
  return (
    <span className="mk-typing" aria-label={text}>
      {Array.from(text).map((ch, i) => (
        <span key={i} className="mk-typing__char" style={{ animationDelay: i * stagger + "ms" }}>
          {ch}
        </span>
      ))}
    </span>
  );
}

/* 样式（可直接放入全局 CSS）
.mk-typing { display: inline-flex; gap: 2px; font-family: var(--mk-font-display); font-weight: 600; }
.mk-typing__char {
  opacity: 0;
  animation: mk-typing 2s cubic-bezier(0.3, 0, 0, 1) infinite;
}
@keyframes mk-typing {
  0% { opacity: 0; transform: translateY(8px); }
  22%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
*/