ユーティリティ

動くテキスト効果生成器

テキストと動きの設定

文言を入力し、効果とテンポを調整してすぐ確認します。

アニメーションテキスト入力

効果プリセット

ランディングページの雰囲気に合う動きを選びます。

詳細調整

持続時間、強度、文字間ディレイ、展開方向を調整できます。

持続時間 (ms)強度 (0-100)文字間ディレイ (ms)

展開方向

リアルタイムプレビュー

公開前に文字のテンポと視線誘導の強さを確認できます。

움직이는 텍스트

8文字・ウェーブ効果を適用中

コード書き出し

現在の設定をCSSまたはMotionテンプレートとしてコピーできます。

/* Text: 움직이는 텍스트 */
<div class="kt-text" aria-label="움직이는 텍스트">
  <span class="kt-char kt-char--wave" style="--kt-delay:0ms">움</span>
  <span class="kt-char kt-char--wave" style="--kt-delay:60ms">직</span>
  <span class="kt-char kt-char--wave" style="--kt-delay:120ms">이</span>
  <span class="kt-char kt-char--wave" style="--kt-delay:180ms">는</span>
  <span class="kt-char kt-char--wave" style="--kt-delay:240ms"> </span>
  <span class="kt-char kt-char--wave" style="--kt-delay:300ms">텍</span>
  <span class="kt-char kt-char--wave" style="--kt-delay:360ms">스</span>
  <span class="kt-char kt-char--wave" style="--kt-delay:420ms">트</span>
</div>

<style>
.kt-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.04em;
  width: fit-content;
}

.kt-char {
  display: inline-block;
  white-space: pre;
  animation-delay: var(--kt-delay);
  animation-duration: 1200ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  --kt-intensity: 0.72;
}

.kt-char--wave {
  animation-name: kt-wave;
}

@keyframes kt-wave {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(calc(-0.42em * var(--kt-intensity))); }
  65% { transform: translateY(calc(0.18em * var(--kt-intensity))); }
}
</style>

CSSコード形式で現在の設定が反映されたコードです。