모두허브
모두허브 홈

유틸리티

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

텍스트와 효과 설정

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

효과 프리셋

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

세부 조정

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

전개 방향

실시간 미리보기

퍼블리싱 전에 글자 간 템포와 시선을 끄는 정도를 바로 확인합니다.

움직이는 텍스트

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

움직이는 텍스트 효과 생성기 | 모두허브