Utility

Kinetic Text Effect Generator

Preview animated text in real time and export ready-to-use CSS or Motion code.

Text and motion setup

Enter a phrase, pick an effect, and tune timing before shipping it to production.

Animated text input

Effect presets

Choose a motion style that fits your landing page tone.

Fine tuning

Adjust duration, intensity, stagger, and direction.

Duration (ms)Intensity (0-100)Character stagger (ms)

Reveal direction

Live preview

Check pacing and visual impact before copying the snippet.

움직이는 텍스트

8 chars · Wave effect active

Export code

Copy the current setup as CSS or Motion-ready template code.

/* 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>

This snippet reflects your current setup in CSS Code format.

moduhub home