Wavy Text

CODE

HTML

<div class="demo-stage"><div class="wv-text"><span style="animation-delay:0s">M</span><span style="animation-delay:.09s">O</span><span style="animation-delay:.18s">T</span><span style="animation-delay:.27s">I</span><span style="animation-delay:.36s">O</span><span style="animation-delay:.45s">N</span></div></div>

CSS

.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.wv-text { display:flex; font-family:'Oswald',sans-serif; font-size:clamp(2.6rem,10vw,5.5rem); font-weight:600; color:#1A1A1A; }
.wv-text span { display:inline-block; animation:wv-bounce 1.5s ease-in-out infinite; }
@keyframes wv-bounce { 0%,100% { transform:translateY(0); color:#1A1A1A; } 50% { transform:translateY(-26px); color:#E91B89; } }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .wv-text span {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

文字が1文字ずつ波打つ効果を作って。各文字を<span>に分け display:inline-block、translateY(0)→-26pxを1.5s ease-in-out infiniteでバウンス。spanごとにanimation-delayを0.09sずつずらして波を作る。頂点で色を#E91B89に変える。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

ウェーブテキスト（Wavy Text）とは

文字が1文字ずつ波打って上下するアニメーション。ポップで楽しい見出し・ロゴに。CSSのみで実装。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

ウェーブテキスト（Wavy Text）はどんな効果ですか？

文字が1文字ずつ波打って上下するアニメーション。ポップで楽しい見出し・ロゴに。CSSのみで実装。ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く演出です。

Wavy TextはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

学びを止めない

RELATED EFFECTS

ウェーブテキスト（Wavy Text）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ