유틸리티

움직이는 텍스트 효과 생성기

텍스트 애니메이션을 실시간으로 미리보고 CSS·Motion 코드로 바로 내보내는 도구입니다.

텍스트와 효과 설정

문구를 입력하고 효과, 강도, 지연을 조절해 바로 확인하세요.

애니메이션 텍스트 입력

효과 프리셋

랜딩 페이지 분위기에 맞는 움직임을 선택합니다.

세부 조정

지속 시간, 강도, 글자 간 지연, 전개 방향을 조절할 수 있습니다.

지속 시간 (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 코드 포맷으로 현재 설정이 반영된 코드입니다.

모두허브 홈