moduhub motion utility
움직이는 텍스트 효과 생성기
문자 단위 애니메이션을 조합해 랜딩 히어로, 배너, 모션 실험용 텍스트 효과를 빠르게 만듭니다.
텍스트와 효과 설정
문구를 입력하고 효과, 강도, 지연을 조절해 바로 확인하세요.
효과 프리셋
랜딩 페이지 분위기에 맞는 움직임을 선택합니다.
세부 조정
지속 시간, 강도, 글자 간 지연, 전개 방향을 조절할 수 있습니다.
실시간 미리보기
퍼블리싱 전에 글자 간 템포와 시선을 끄는 정도를 바로 확인합니다.
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 코드 포맷으로 현재 설정이 반영된 코드입니다.
소개
움직이는 텍스트 효과 생성기는 랜딩 페이지 헤드라인, 배너 카피, 프로모션 문구에 적용할 키네틱 타이포그래피를 빠르게 실험할 수 있는 무료 도구입니다. 텍스트를 입력하면 문자 단위 애니메이션을 실시간으로 미리보고, 현재 설정 그대로 CSS 또는 Motion 코드로 내보낼 수 있습니다. 움직이는 텍스트 효과 생성기는 텍스트 애니메이션을 실시간으로 미리보고 CSS·Motion 코드로 바로 내보내는 도구입니다를 빠르게 처리하면서도 결과를 어디까지 믿고 어떻게 해석해야 하는지까지 같은 페이지에서 판단할 수 있도록 구성한 moduhub 실무 도구입니다.
유틸리티 도구는 실제 작업 중간에 열리는 경우가 많아서, 결과를 바로 써도 되는 상황과 한 번 더 검토해야 하는 상황을 구분해 안내합니다. 특히 잘 맞는 상황은 다음과 같습니다. 텍스트 애니메이션을 실시간으로 미리보고 CSS·Motion 코드로 바로 내보내는 도구입니다 같은 작업을 빠르게 처리하면서 키네틱 텍스트 결과를 바로 확인해야 할 때 열어 쓰기 좋습니다.
애니메이션을 적용할 문구를 입력합니다. 웨이브, 바운스, 글리치 같은 효과를 선택하고 지속 시간·강도·지연을 조절합니다. 같은 흐름으로 실무나 개인 작업을 진행하면서 움직이는 텍스트 효과 값을 비교하거나 최종 확인하고 싶은 상황에도 잘 맞습니다. 실제 사용 흐름은 다음 순서로 이어집니다. 애니메이션을 적용할 문구를 입력합니다. 웨이브, 바운스, 글리치 같은 효과를 선택하고 지속 시간·강도·지연을 조절합니다. 원하는 결과가 나오면 CSS 또는 Motion 코드로 복사해 프로젝트에 붙여넣습니다. 애니메이션을 적용할 문구를 입력합니다. 웨이브, 바운스, 글리치 같은 효과를 선택하고 지속 시간·강도·지연을 조절합니다. 원하는 결과가 나오면 CSS 또는 Motion 코드로 복사해 프로젝트에 붙여넣습니다. 같은 흐름에서 입력값과 선택 옵션을 처리해 키네틱 텍스트 관련 결과를 브라우저 안에서 바로 계산하거나 생성합니다. 텍스트 애니메이션을 실시간으로 미리보고 CSS·Motion 코드로 바로 내보내는 도구입니다라는 사용 목적에 맞춰 결과 영역을 재실행, 비교, 복사 전 검토가 쉬운 형태로 정리했습니다. 움직이는 텍스트 효과 생성기 결과는 빠른 판단을 돕는 참고값으로 먼저 보고, 키네틱 텍스트를 계약·세무·법무·행정 제출에 활용하는 최종값은 반드시 공식 기준으로 다시 확인해야 합니다. 브라우저 환경, 입력 형식, 로컬 가정에 따라 결과 해석이 달라질 수 있으므로 중요한 결정 전에는 수동으로 한 번 더 점검하는 편이 안전합니다.
사용 방법
- 애니메이션을 적용할 문구를 입력합니다.
- 웨이브, 바운스, 글리치 같은 효과를 선택하고 지속 시간·강도·지연을 조절합니다.
- 원하는 결과가 나오면 CSS 또는 Motion 코드로 복사해 프로젝트에 붙여넣습니다.
이럴 때 잘 맞습니다
- 텍스트 애니메이션을 실시간으로 미리보고 CSS·Motion 코드로 바로 내보내는 도구입니다 같은 작업을 빠르게 처리하면서 키네틱 텍스트 결과를 바로 확인해야 할 때 열어 쓰기 좋습니다.
- 애니메이션을 적용할 문구를 입력합니다. 웨이브, 바운스, 글리치 같은 효과를 선택하고 지속 시간·강도·지연을 조절합니다. 같은 흐름으로 실무나 개인 작업을 진행하면서 움직이는 텍스트 효과 값을 비교하거나 최종 확인하고 싶은 상황에도 잘 맞습니다.
작동 방식과 해석 포인트
- 애니메이션을 적용할 문구를 입력합니다. 웨이브, 바운스, 글리치 같은 효과를 선택하고 지속 시간·강도·지연을 조절합니다. 원하는 결과가 나오면 CSS 또는 Motion 코드로 복사해 프로젝트에 붙여넣습니다. 같은 흐름에서 입력값과 선택 옵션을 처리해 키네틱 텍스트 관련 결과를 브라우저 안에서 바로 계산하거나 생성합니다.
- 텍스트 애니메이션을 실시간으로 미리보고 CSS·Motion 코드로 바로 내보내는 도구입니다라는 사용 목적에 맞춰 결과 영역을 재실행, 비교, 복사 전 검토가 쉬운 형태로 정리했습니다.
알아두면 좋은 점
- 움직이는 텍스트 효과 생성기 결과는 빠른 판단을 돕는 참고값으로 먼저 보고, 키네틱 텍스트를 계약·세무·법무·행정 제출에 활용하는 최종값은 반드시 공식 기준으로 다시 확인해야 합니다.
- 브라우저 환경, 입력 형식, 로컬 가정에 따라 결과 해석이 달라질 수 있으므로 중요한 결정 전에는 수동으로 한 번 더 점검하는 편이 안전합니다.
자주 묻는 질문
코드 없이도 결과를 바로 볼 수 있나요?
네, 입력한 텍스트와 설정값이 즉시 미리보기에 반영되어 별도 빌드 없이 결과를 확인할 수 있습니다.
어떤 코드 포맷을 지원하나요?
기본 CSS 애니메이션 코드와 Motion(React) 기반 템플릿 코드를 함께 제공합니다. 현재 선택한 효과와 지연값이 그대로 반영됩니다.
모바일에서도 사용할 수 있나요?
네, 모바일 세로 화면에서도 텍스트 입력, 효과 전환, 코드 복사가 가능하도록 반응형 레이아웃으로 구성되어 있습니다.
이 결과를 그대로 공식 최종값으로 써도 되나요?
먼저 빠른 확인용 참고값으로 활용하고, 법무·세무·행정 제출처럼 중요한 용도에서는 관련 공식 요건을 기준으로 최종 확인하는 것이 안전합니다.
관련 검색어
- 키네틱 텍스트
- 움직이는 텍스트 효과
- 텍스트 애니메이션 생성기
- motion 코드 생성
- CSS 텍스트 효과