AI向け説明 AI Description

`M-010` はテキストを一文字ずつ表示するタイプライターエフェクトです。CSSのキャレット点滅アニメーションと、JavaScriptによる文字送りを組み合わせて実装します。`requestAnimationFrame` または `setTimeout` を使用して、人間味のあるランダムな遅延を加えることも可能です。

`M-010` creates a typewriter effect revealing text character by character. It combines CSS for the blinking caret and JavaScript for the typing logic. Using `setTimeout` with random variations enables a more human-like typing rhythm.

調整可能パラメータ Adjustable Parameters

• typing speed — `setTimeout` の遅延時間（ms）でタイピング速度を制御 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

HTML + CSS + JS

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

<style>
    .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) }
    }
</style>

<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>

React (JSX + CSS)

// react/M-010.jsx
import { useEffect, useState } from 'react';
import './M-010.css';

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

  useEffect(() => {
    let i = 0;
    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>;
}