Motion Text Kit

让文字自然流动

Motion Text Kit 是一组轻量、开箱即用的 React 文本动效组件，为界面注入恰到好处的动态表达。

GitHub

逐字显隐

数字计时

隐形墨水

字重扫光

文本解码

Stay hungry, stay foolish.

文本高光

模糊聚焦

AI 流式显现

柔和扰动

流动字幕

打字光标

Almost there...

呼吸文本

词语呼吸

数字涨跌

弹性字母

Matter of care

虹彩文字

Build 

词语变形

Still alive

心跳文本

逐字显隐

数字计时

隐形墨水

字重扫光

文本解码

Stay hungry, stay foolish.

文本高光

模糊聚焦

AI 流式显现

柔和扰动

流动字幕

打字光标

Almost there...

呼吸文本

词语呼吸

数字涨跌

弹性字母

Matter of care

虹彩文字

Build 

词语变形

Still alive

心跳文本

Installation

npm install motion-text-kit
pnpm add motion-text-kit
yarn add motion-text-kit

Import the stylesheet once near your app root. The components are React-only and do not depend on Next.js or a runtime animation library.

import "motion-text-kit/styles.css";

Usage

import {
  AiStreamText,
  BreathingText,
  BreathingWordsText,
  GradientSweepText,
  NumberDeltaText,
  SoftScrambleText,
  TextReveal,
} from "motion-text-kit";
import "motion-text-kit/styles.css";

export function Example() {
  return (
    <section>
      <TextReveal text="Letters enter and leave." mode="in-out" repeat />

      <AiStreamText text="Generating thoughtful motion" />

      <SoftScrambleText text="Status updated softly" />

      <GradientSweepText>Stay hungry, stay foolish.</GradientSweepText>

      <NumberDeltaText value={24} />
      <NumberDeltaText value={-18} />

      <BreathingText text="Almost there..." />
      <BreathingWordsText text="Quiet signals keep moving" />
    </section>
  );
}

Component API

All components accept `className`, `style`, and native span props. Most components also support `as` to render a different element.

TextReveal

逐字或逐词进入、消失，也可以循环播放。

<TextReveal text="Letters enter and leave." mode="in-out" repeat />
textsplitBymodedurationholdstaggerdistanceblurrepeat

GradientSweepText

柔和高光从文字表面滑过，适合强调短句。

<GradientSweepText>Stay hungry, stay foolish.</GradientSweepText>
childrendurationdelayanglebaseColorhighlightColoraccentColorpauseOnHover

RollingNumber

数字字符弹入，适合时间、倒计时和统计数字。

<RollingNumber value={128000} prefix="$" locale="en-US" />
valuelocaleformatOptionsprefixsuffixdurationstaggerdistanceblur

NumberDeltaText

数字涨跌按轮盘路径滚动，支持正负方向感。

<NumberDeltaText value={24} />
valuelocaleformatOptionsprefixsuffixshowSigndurationblurstagger

SpoilerText

隐形墨水式文本揭示，用于敏感内容或谜底。

<SpoilerText text="Tap to reveal this." />
textrevealeddefaultRevealedonRevealedChangeparticleColordurationrevealDurationinteractiveworkletUrl

DecryptText

随机字符逐步解析为最终文本。

<DecryptText text="ACCESS GRANTED" />
textalphabetdurationticklooploopDelay

WeightSweepText

字重从细到粗扫过文字，形成轻量强调。

<WeightSweepText text="Weight wave passes." />
textminWeightmaxWeightdurationstagger

FocusBlurText

整体文字从模糊聚焦到清晰，再柔和消失。

<FocusBlurText text="Focus sharpens softly." />
textdurationdelayblurscalerepeatiterationCount

AiStreamText

字符上浮显现，经过彩色渐变闪过后落成正文色。

<AiStreamText text="Generating thoughtful motion" />
textdurationdelayholdstaggerdistanceblurmutedColorcolorAcolorBcolorCrepeatitemClassName

SoftScrambleText

少量字符轻微随机替换后归位，形成柔和内容刷新感。

<SoftScrambleText text="Status updated softly" />
textalphabetdurationdelaytickintensitylooploopDelayitemClassName

TickerText

横向滚动公告，两端字符渐隐、缩小并模糊。

<TickerText text="Motion text kit is now available." />
textdurationdelayblurstaggerrepeatitemClassName

TypewriterText

逐字输入和删除，带跟随文本的光标。

<TypewriterText text="Typing with a cursor" />
textspeedstartDelaylooploopDelaydeleteSpeedcursor

BreathingText

整体文字做轻微 opacity、blur、scale 呼吸。

<BreathingText text="Almost there..." />
textdurationdelayblurscaleminOpacityrepeat

BreathingWordsText

每个词以不同节奏做轻微明暗和模糊呼吸。

<BreathingWordsText text="Quiet signals keep moving" />
textdurationdelaystaggervarianceminOpacitymaxOpacityblurrepeatitemClassName

ElasticLettersText

字符水平轻微拉伸后回弹，形成 SwiftUI 式弹性。

<ElasticLettersText text="Swift-like motion" />
textdurationdelaystaggerstretchblurrepeat

IridescentText

文字表面呈现轻微虹彩变化，偏材质感而不是明确扫光。

<IridescentText text="Matter of care" />
textdurationdelaycolorAcolorBcolorCglowColorintensityrepeat

MorphWordsText

几个短词之间以模糊和缩放柔和切换。

Build <MorphWordsText words={["better", "faster", "softer"]} />
wordsdurationdelayblurscalerepeatitemClassName

HeartbeatText

文字以真实双峰心跳节奏轻微起伏。

<HeartbeatText text="Still alive" />
textdurationdelayscalesettleScaleblurglowColorrepeat

LiquidText

实验性的液体融合/分离文字动效。

<LiquidText text="Liquid motion" />
textdurationdelaystaggerdistanceblurrepeat

PixelResolveText

实验性的像素块还原文字动效。

<PixelResolveText text="Pixels resolve." />
textdurationdelaystaggerpixelSizerepeat

Crafted by