moduhub motion utility
動くテキスト効果生成器
ヒーロー見出し、バナーコピー、モーション実験用の動く文字表現を1つの画面で素早く作れます。
テキストと動きの設定
文言を入力し、効果とテンポを調整してすぐ確認します。
効果プリセット
ランディングページの雰囲気に合う動きを選びます。
詳細調整
持続時間、強度、文字間ディレイ、展開方向を調整できます。
リアルタイムプレビュー
公開前に文字のテンポと視線誘導の強さを確認できます。
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文字アニメーション