OmniMotion
返回组件库

逐字浮现

复刻来源cuberto.com
React · Vue3文字动效ReactVue3CSS 原生

字符按节奏错峰上浮，常用于标题首屏的分层入场。

业务项目无源码 → 我们复刻实现，自动适配 React，复制代码拿去即可使用。

下载 React 代码下载 Vue3 代码
下载 ZIP（含 React + Vue3）
演示预览实时时长 1x
逐字贝塞尔弹跳揭示
OmniMotion 动效库
播放速度已适配 prefers-reduced-motion
TypeIn.jsx
/**
 * 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); }
}
*/
属性 · Props
属性类型默认值说明
textstring"动效组件库"需要逐字展示的文本
staggernumber120字符之间的延迟（ms）
<TypeIn text="动效组件库" stagger={120} />