M-010 Text Animation medium

How to create a typewriter animation タイプライターの作り方

Effect where text appears one character at a time like a typewriter. テキストが一文字ずつタイプされるように表示されるエフェクト。

text typewriter effect typing

ライブデモ Live Demo

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Effect where text appears one character at a time like a typewriter.

テキストが一文字ずつタイプされるように表示されるエフェクト。

どこで使うかWhere to use

web application, marketing page

ヒーローセクション、ポートフォリオサイト、ターミナル風UI、ランディングページのスローガン

特徴Key features

Simulates a typewriter effect with character-by-character text rendering. Supports multiple strings with looping. Configurable typing speed, delete speed, and pause duration. Optional blinking cursor. No external dependencies.

文字単位でテキストをレンダリングするタイプライターエフェクト。複数文字列のループをサポート。タイピング速度・削除速度・一時停止時間を設定可能。点滅カーソルオプション付き。外部依存なし。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
typing speed—control typing speed via `setTimeout` delay (ms)
--caret-color—change caret (cursor) color
text content—change the text string to display
loop behavior—add erase-and-replay loop after text completes

実装コード Implementation Code 

<span class="typewriter-text"></span>



<script>
const el = document.querySelector('.typewriter-text');
const text = "Creating beautiful UI...";
let i = 0;
function type() {
  if (i < text.length) {
    el.textContent += text.charAt(i);
    i++;
    setTimeout(type, 100);
  }
}
type();
</script>
.typewriter-text {
      overflow: hidden;
      border-right: 3px solid var(--caret-color, #5c6ac4);
      white-space: nowrap;
      margin: 0;
      animation: blink-caret 0.75s step-end infinite;
      width: 0;
    }

    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: var(--caret-color, #5c6ac4) }
    }
import { useEffect, useState } from 'react';
import './M-010.css';

export default function Typewriter({ text, speed = 100 }) {
  const [displayedText, setDisplayedText] = useState('');

  useEffect(() => {
    let i = 0;
    setDisplayedText('');
    const timer = setInterval(() => {
      if (i < text.length) {
        setDisplayedText((prev) => prev + text.charAt(i));
        i++;
      } else {
        clearInterval(timer);
      }
    }, speed);
    return () => clearInterval(timer);
  }, [text, speed]);

  return <span className="typewriter-text">{displayedText}</span>;
}
/* M-010: React styles */
.typewriter-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  border-right: 3px solid #5c6ac4;
  white-space: nowrap;
  animation: blink-caret 0.75s step-end infinite;
  display: inline-block;
  min-height: 1.2em;
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: #5c6ac4
  }
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A JavaScript setInterval (or requestAnimationFrame) loop appends one character at a time to a string, then renders it into the DOM element. When the full string is displayed, a separate delete loop removes characters one by one. An array of strings cycles through when deletion completes, creating the looping effect.

setInterval（またはrequestAnimationFrame）ループが1文字ずつ文字列に追加し、DOM要素にレンダリング。文字列が全表示されると別の削除ループが1文字ずつ削除。削除完了後に文字列配列を循環させることでループエフェクトを実現。

カスタマイズ方法Customization

Adjust typingSpeed and deletingSpeed (in ms per character) to match the desired pace. Set loop: false to type once and stop. Add a CSS ::after cursor with a blink animation for an authentic terminal look. Support multiple phrases by adding strings to the phrases array.

typingSpeedとdeletingSpeed（1文字あたりms）でペースを調整。loop:falseで1回のみタイプして停止。CSS ::afterカーソルと点滅アニメーションで本格的なターミナル風外観に。phrasesArrayに文字列を追加して複数フレーズをサポート。

注意点Caveats

Dynamically changing text can confuse screen readers. Add aria-live="polite" on the element and update it only after the full string is typed (not character-by-character) for better accessibility. Disable the animation for prefers-reduced-motion users.

動的に変化するテキストはスクリーンリーダーを混乱させることがあります。要素にaria-live="polite"を追加し、文字単位ではなく完全な文字列がタイプされた後にのみ更新してください。prefers-reduced-motionユーザーにはアニメーションを無効化してください。

よくある質問 Frequently Asked Questions

How to customize the typewriter animation? Typewriter Animationをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the typewriter animation in React? ReactでTypewriter Animationを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of typewriter animation? Typewriter Animationのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.