{
"id": "motion:motion-typewriter",
"slug": "motion-typewriter",
"kind": "motion",
"title": {
"ja": "タイプライター",
"en": "Typewriter"
},
"aiName": "Typewriter effect",
"summary": {
"ja": "1文字ずつ打ち込まれる",
"en": "Text is typed out one character at a time"
},
"number": 7,
"group": "appear",
"techniques": [
"intersection-observer",
"css-animation"
],
"rules": [
{
"ja": "行は画面に入った順に打ち、前の行が終わるまで次を始めない",
"en": "Type lines in the order they enter the viewport; never start a line before the previous one finishes"
},
{
"ja": "全文は HTML に残し、JS が動かない場合も読める",
"en": "Keep the full text in the HTML so it reads without JavaScript"
},
{
"ja": "動きを減らす設定では全文を即表示し、カーソルは出さない",
"en": "With reduced motion, show the full text immediately with no cursor"
}
],
"reproduction": {
"prompt": {
"ja": "タイプライター — Typewriter effect\n\n画面に入った順に、3 行の文章を 1 文字ずつ打ち込む演出を作ってください。1 行目は見出し（32px、太字）、2 行目は本文（20px、薄い色）、3 行目は見出しです。各行は画面の下端から 50% 入ったところで打ち始め、1 文字ごとに 80 ミリ秒あけて文字を足します。前の行を打ち終えてから次の行を打ちます。打っている行の末尾には、幅 0.08em の点滅するカーソルを 1 秒周期（steps(1)）で表示し、打ち終えたら消します。JS で textContent を 1 文字ずつ書き換え、CSS と IntersectionObserver だけで動かし、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 行は画面に入った順に打ち、前の行が終わるまで次を始めない\n- 全文は HTML に残し、JS が動かない場合も読める\n- 動きを減らす設定では全文を即表示し、カーソルは出さない\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-typewriter/demo.html",
"en": "Typewriter — Typewriter effect\n\nBuild a typewriter effect where three lines of text are typed one character at a time, in the order they enter the viewport. Line 1 is a bold heading at 32px, line 2 is body text at 20px in a muted colour, and line 3 is a heading again. Each line starts typing when 50% of it is inside the viewport's bottom edge, and adds one character every 80 milliseconds. A line starts only after the previous line has finished. While a line is being typed, show a blinking cursor 0.08em wide at its end, on a 1-second cycle with steps(1), and remove it when the line is done. Update textContent one character at a time in JavaScript, drive it with IntersectionObserver, and do not use any library.\n\nDo not drop:\n- Type lines in the order they enter the viewport; never start a line before the previous one finishes\n- Keep the full text in the HTML so it reads without JavaScript\n- With reduced motion, show the full text immediately with no cursor\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-typewriter/demo.html"
},
"code": {
"url": "https://design-vault.pages.dev/designs/motion-typewriter/demo.html",
"html": "\n\n\n\n\n07 タイプライター — Typewriter effect\n\n\n\n\n