Vermilion Well

15秒の完全な自由を与えられたら、何をつくるか。最初と最後のフレームを同じ絵にして、途中で予想外の変化を3回以上起こせるか。

Claude Code（Opus 5.5）にプロンプトを1回送り、追加の指示はしていません。コンセプトから実装までClaudeが決め、指定時刻のコマ一覧を撮影して確認と修正を繰り返しています。

HTML 1ファイルで動作し、外部の画像・動画・ライブラリは使っていません。描画はWebGL2のシェーダで毎フレーム計算しています。

Claudeが行った修正

• 床のぼやけたテカリを、球の後ろから日食のように現れる鋭い太陽の映り込みに変更。
• 海と渦の見え方を調整するため、漏斗の深さと幅、波、カメラの軌道を再設計。
• 12.4秒以降が真っ白になる原因だった、カメラ計算の差分がNaNになるバグを修正。
• 穴の中心が赤く抜ける問題に対し、もやと暗くする処理の順番を変更。
• 海のパートに、遅れて落ちる雨粒を28個追加。

時間と使用量は、作品を作ったClaude Codeセッションのログから集計した値です。集計の範囲は最初のプロンプトから作品の公開までで、MP4の書き出しやREADME作成など公開後の作業は含みません。生のログはこのリポジトリには含まれていません。

モデルID

claude-opus-5-5（全呼び出し）

Effort

記録なし

Human edits

0

生成時間

36m25s

モデル呼び出し回数

39

Input tokens

7,541,527

Cached input / cache read

7,282,290

キャッシュ書込

259,159

通常入力（キャッシュ書込を除く）

78

Output tokens

178,711

Total processed tokens

7,720,238

API換算コスト

未算出

HTMLの実測行数

434行

HTMLの実測サイズ

26,993 bytes

数え方はMagical Botanical Laboratoryと同じです。入力は呼び出しごとに再送された履歴を含む累計で、Cached inputとキャッシュ書込はInputの内数です。Output tokensはthinkingを含みます。Total = Input + Output。

時間・コストの注記

09:12:58Z → 09:49:23Z、最初のプロンプトから作品の公開まで36分25秒。最終返信完了までは36分43秒。途中でコンテキスト上限による自動要約が1回入っています。API換算コストは、単価の前提を確認していないため出していません。

フレーム時間（制作時の報告）

制作に使ったMacで、1080p・内部解像度0.6倍の条件で計測。いちばん重いコマで14.4ms、大半は1〜11msと報告されています。

出典は作品のREADMEです。行数とバイト数は収録HTMLを実測しています。

元ネタ

kirill sh（@shneural）のX投稿 ↗。Opus 5.5とGPT 6 Astraに、履歴書に載せるショーリールを想定した15秒のモーショングラフィックスを依頼し、比較した投稿を起点にしています。

アレンジした点

ショーリールや技術デモ、定型的なテックCMにせず、前の状態から生まれる大きな変化を3回以上入れるよう指定。15秒全体をひと続きの生き物のように見せ、最初と最後のフレームを同じ絵にすること、外部画像・動画に頼らずブラウザで動かすことを求めました。

Create a 15-second motion graphics piece.
This is not just a showreel.
Imagine you are one of the best motion designers in the world, and you are given exactly 15 seconds of complete creative freedom.
What do you make?
That is the piece I want to see.
The theme, visual language, narrative, and medium are entirely up to you.
Do not make a generic tech commercial, SaaS promo, neon AI visual, or template-like geometric animation.
Make something that immediately demands attention.
The first second should make the viewer want to keep watching.
The piece should continuously evolve.
By the end, it should leave a strong visual afterimage.
Do not optimize for still-frame beauty alone.
The motion itself must be the design.
Use timing, acceleration, deceleration, pauses, reversals, transformation, fragmentation, merging, depth, scale, camera movement, and spatial composition intentionally.
Typography is allowed, but do not rely on text as the main visual idea.
Use any combination of techniques you think will create the strongest result, including:

* WebGL / Three.js
* Canvas
* CSS
* SVG
* shaders
* particles
* procedural animation
* generative art
* kinetic typography
* pseudo-3D
* 3D geometry
* post-processing
* distortion
* fluid motion
* morphing
* recursive structures
* optical illusions
* unconventional transitions

Do not turn this into a technical showcase.
Every technique should contribute to one coherent visual experience.
The most important requirement is unpredictability.
From the first frame, the viewer should not be able to predict what the piece will look like at 5 seconds, 10 seconds, or 15 seconds.
Include at least three major visual transformations that make the viewer think:
“I did not expect that.”
Do not simply cut between unrelated scenes.
Each transformation should emerge from the previous state through deformation, collapse, expansion, mutation, disassembly, or reconstruction.
Make the entire 15 seconds feel like one continuous visual organism.
Push the piece far enough that the viewer cannot immediately understand how it was made.
Do not imitate an existing artist or reference.
Use your own aesthetic judgment.
Do not play it safe.
Do not make it tasteful in a predictable way.
Do not converge toward familiar design trends.
This is a test of your visual taste, motion design ability, composition, rhythm, technical execution, and creative judgment.
Take risks.
Make something that feels authored.
Implementation requirements:

* It must run directly in a browser
* Use HTML / CSS / JavaScript
* You may use libraries such as Three.js if useful
* Do not depend on external image or video assets
* Generate as much of the visual material as possible through code
* The piece should autoplay
* It must function as a complete 15-second experience
* The loop should feel intentional rather than abrupt
* It should hold up at fullscreen size
* It should remain visually coherent across screen sizes

Do not explain the concept first.
Do not propose multiple ideas.
Do not give me a storyboard.
Make the creative decisions yourself and directly implement the finished piece.
One final constraint:
The first frame and the final frame should be visually identical.
Everything in between can become completely unrecognizable.
Make those 15 seconds feel much larger than 15 seconds.
Go all out.

予想外の変化3つ

1. 平らな円が立体の球だったと分かり、分裂する。
2. 球の群れが雨になり、背景だった朱が海になる。
3. 海が渦を経て穴になり、その穴が最初の円に戻る。

しくみ

各ピクセルから視線を飛ばし、球や海面との交点をGPUで計算します。球の分裂、最大150個の雨粒、波紋、渦、漏斗、穴を数式で描いています。

動きはすべて時刻tの関数です。物理シミュレーションを積み上げず、その時刻の位置や形を直接計算し、カメラの位置はエルミート補間でつなぎます。

描画は2パス。1パス目の3D描画を濃さとして受け取り、2パス目で黒・朱・紙の3色へ刷り分け、網点、版ズレ、紙の質感を加えています。

冒頭と終わりでは光を切って平らな円を描き、最後の穴の半径をカメラ位置から逆算して、最初と同じ絵へ戻します。フレーム時間に合わせて内部解像度を調整し、最後のパスは画面解像度のまま描画します。

Zenn記事：なし

MP4はリポジトリに含めず、書き出しツールから作り直せます。PythonとSwiftを使い、macOS標準のAVFoundationでエンコードします。

X投稿：なし