Пятнадцатисекундная видеовизитка Claude в одном HTML-файле: крупное «Hello», красная линия и печатающаяся строка

Промпт

# Ваша роль
Вы — первоклассный режиссёр визуальных эффектов (моушн-дизайнер).
Создайте презентационное видео, после просмотра которого рекрутер в течение 15 секунд подумает: «Я хочу поручить этому человеку работу».
Главный герой — вы сами (Claude).

# Что создать
- Один HTML-файл, полностью работающий только на HTML, CSS и JavaScript
- Не использовать внешние изображения и видео. Все фигуры, текст и частицы рисовать с помощью кода (шрифты — только Google Fonts)
- Формат экрана — 16:9, базовое разрешение — 1920×1080, с масштабированием под размер окна
- Продолжительность — ровно 15 секунд. В конце показать кнопку «もう一度再生»
- Управлять всем движением с помощью одной переменной «прошедшее время» и запускать его в 60fps через requestAnimationFrame
- При нажатии кнопки воспроизведения ритм и звуковые эффекты, синтезированные через Web Audio API, должны идеально совпадать с движением

# Порядок работы (обязательно выполнять именно в этом порядке)
1. Определить концепцию одним предложением (например: «1本の線が、あらゆる形に生まれ変わる»)
2. Ограничиться 3–4 цветами и не более чем двумя гарнитурами; причину указать одной строкой
3. Представить раскадровку с шагом 0,5 секунды в виде таблицы (время／что происходит на экране／используемая техника／цель)
4. Реализовать
5. Провести самопроверку по приведённым ниже «критериям качества», исправить недочёты и только после этого выдать результат

# Ориентировочная структура
- 0–2 секунды: захват внимания. Потрясти зрителя уже в первые 0,5 секунды
- 2–10 секунд: демонстрация мастерства. Переключаться на другую технику каждые 1,5–2 секунды
- 10–13 секунд: кульминация с максимальной плотностью
- 13–15 секунд: красиво завершить появлением имени «Claude»

# Обязательные техники (минимум 6)
- Анимация текста (появление по одной букве, разборка и сборка заново)
- Трансформация фигур (например, круг превращается в квадрат, линия — в текст)
- Переходы между сценами с помощью вырезания (маски)
- Глубина (параллакс, объёмное вращение)
- Сборка и рассеивание частиц
- Отсчёт чисел или прорисовка линии

# Критерии качества
- Ноль движений с постоянной скоростью. Каждому движению придать динамику (быстрое начало, мягкая остановка, использовать также пружинные колебания)
- Перекрывать движения между сценами. Следующее движение должно начинаться до завершения предыдущего, чтобы не ощущался разрыв
- Синхронизировать основные движения с тактом каждые 0,5 секунды (эквивалент 120 BPM)
- Непосредственно перед ключевыми моментами оставлять «заминку» длительностью 0,3–0,5 секунды, создавая контраст
- В любой момент постановки на паузу кадр должен выглядеть как красивая самостоятельная композиция
- Избегать банальных приёмов (полностью использовать fade-in, радужную палитру, бессмысленное вращение)

# В конце
Выведите готовый файл и таблицу раскадровки.
Достаточно не более 3 строк пояснений.

# あなたの役割
あなたは一流の映像演出家（モーションデザイナー）です。
採用担当者が15秒見ただけで「この人に仕事を頼みたい」と思う、自己紹介用の映像を作ってください。
主役はあなた自身（Claude）です。

# 作るもの
- HTML・CSS・JavaScriptだけで完結する、1つのHTMLファイル
- 外部の画像や動画は使わない。図形・文字・粒子はすべてコードで描く（フォントはGoogle Fontsのみ可）
- 画面は16:9、1920×1080を基準にし、ウィンドウの大きさに合わせて縮小表示
- 長さはちょうど15秒。最後に「もう一度再生」ボタンを出す
- すべての動きを「経過時間」1本で管理し、requestAnimationFrameで60fpsで動かす
- 再生ボタンを押すと、Web Audio APIで合成した拍と効果音が動きにぴったり合って鳴る

# 進め方（この順で必ず行う）
1. 考え方を一文で決める（例：「1本の線が、あらゆる形に生まれ変わる」）
2. 色は3〜4色、書体は2種類までに絞り、理由を一行で書く
3. 0.5秒刻みの絵コンテを表で示す（時間／画面で起きること／使う技法／狙い）
4. 実装する
5. 下の「合格ライン」で自己点検し、足りない点を直してから出す

# 構成の目安
- 0〜2秒：つかみ。最初の0.5秒で目を奪う
- 2〜10秒：技の見せ場。1.5〜2秒ごとに違う技法へ切り替える
- 10〜13秒：最も密度の高い盛り上がり
- 13〜15秒：名前「Claude」がきれいに決まって終わる

# 必ず使う技法（最低6つ）
- 文字の動き（1文字ずつ登場、分解して組み直す）
- 図形の変形（丸が四角に、線が文字に、など）
- 切り抜き（マスク）を使った場面転換
- 奥行き（視差、立体的な回転）
- 粒子の集合と拡散
- 数字の数え上げや、線が描かれていく表現

# 合格ライン
- 等速の動きはゼロ。すべての動きに緩急をつける（入りは速く、止まりは柔らかく、ばねの揺れも使う）
- 場面をまたぐ動きは重ねる。前の動きが終わる前に次が始まり、切れ目を感じさせない
- 主要な動きは0.5秒ごとの拍（120BPM相当）にそろえる
- 見せ場の直前に0.3〜0.5秒の「溜め」を置き、強弱を作る
- どの瞬間で一時停止しても、1枚の絵として美しく成立する
- ありがちな表現は避ける（全部フェードイン、虹色の色使い、意味のない回転）

# 最後に
完成したファイルと、絵コンテの表を出してください。
説明は3行以内で十分です。