Claude Opus 5.5 · 37 short films

コードで書く、
短い映像たち。

数式、字形、アルゴリズム、物理シミュレーション、生成した絵と声。Claude Opus 5.5 が HyperFrames・GSAP・Three.js・Blender・ElevenLabs・ChatGPT 画像生成を組み合わせて作った、8〜20秒の短編集です。カードにカーソルを載せるとプレビュー、クリックで音付き再生。

I

数理生成

数式そのものが絵になる

01 数理アニメーション

ウラムの螺旋

66,049 個の整数が螺旋に並び、素数だけが光って残る。最後に浮かぶ斜めの直線のうち 2 本は、オイラーの n² + n + 41 だった。

  • HyperFrames
  • Canvas 2D
  • GSAP
  • Python (numpy/scipy) 音響合成

02 数理アニメーション

フーリエの署名

回る円を 4 個、16 個、64 個、256 個とつなぐたびに、ぼやけた輪が筆記体の「Claude」に近づいていく。ペンの擦れる音は、先端の速さから合成した。

  • HyperFrames
  • Canvas 2D
  • GSAP
  • Python (numpy/scipy) 音響合成

03 数理アニメーション

マンデルブロ集合の奥へ

マンデルブロ集合のタツノオトシゴの谷へ 69 億倍まで潜り、最後に全体とそっくりな小さな集合(周期 192)に着く。色は薄膜干渉、音は終わりなく下がり続けるシェパード音。

  • HyperFrames
  • WebGL2 (GLSL)
  • GSAP
  • Python (mpmath/numpy/scipy) 音響合成

04 数理アニメーション

反応拡散

Gray–Scott 反応拡散の 1 本の計算の中で、F と k を動かして斑点の分裂から珊瑚、迷路、指紋へと模様を移す。色は H&E 染色の標本、音は分裂のたびに鳴る泡。

  • HyperFrames
  • GSAP
  • SVG
  • Python (numpy/scipy) シミュレーション・音響合成
  • ffmpeg

05 数理アニメーション

万華鏡の群論

左右も回転もそろっていない 1 枚の絵を、C1・C2・C3・C6・D1・D6、そして壁紙群 p3m1 の 7 つの群で折りたたんで映す。打楽器の数と左右の定位が、そのとき光る区画の数と向きに一致する。

  • HyperFrames
  • WebGL2 (GLSL)
  • GSAP
  • SVG
  • Python (numpy/scipy) 音響合成

II

タイポグラフィと言語

字形・書き順・二言語を構造として扱う

06 キネティック・タイポグラフィ

意味どおりに動く言葉

落ちる・ふるえる・ひろがる・のびる・とける・とまる。六つの動詞が日英で意味どおりに動き、前の動きが次の言葉を呼び込む

  • HyperFrames
  • GSAP
  • SVG filter
  • ElevenLabs TTS
  • ElevenLabs SFX
  • Python (numpy)

07 筆のシミュレーション

永字八法

「永」一字に含まれる八つの技法を、筆圧で太さが変わり、墨が切れるとかすれる筆で一画ずつ書く。紺紙金泥の配色で、最後に八つを白金の光で順にたどり直す

  • HyperFrames
  • GSAP
  • Canvas 2D
  • KanjiVG
  • ElevenLabs SFX
  • Python (numpy)

08 距離場モーフ(WebGL)

翻訳の中間形

「光」が「light」に、「水」が「water」に移る途中の形。意味ではなく字形そのものを、可変フォントの軸のように 0 から 1 へ補間する

  • HyperFrames
  • GSAP
  • WebGL2
  • Canvas 2D
  • ElevenLabs TTS
  • Python (numpy)

09 素材シミュレーション(Canvas)

擬音語辞典

ざらざら・ふわふわ・きらきら・どろどろ。擬音語の文字そのものが、砂・綿雲・金粉・泥という手ざわりで組み上がり、その音で鳴る辞典

  • HyperFrames
  • GSAP
  • Canvas 2D
  • ElevenLabs TTS
  • ElevenLabs Sound Effects
  • Python (numpy)

26 自己記述(コードの実行と再帰描画)

自分を書く動画

白い紙の上に打たれていくコードが、打たれるそばから実行されてこの画面そのものを描き換えていく。pv.draw(f) で画面は自分自身を入れ子に映し、最後はその中へ落ちていく

  • HyperFrames
  • GSAP
  • Canvas 2D
  • ElevenLabs Sound Effects
  • Python (numpy)

III

アルゴリズムの物語

計算過程をドラマとして演出する

11 アルゴリズム可聴化

ソート競走

同じ64個の乱数列を6つのソートが1手ずつ並走。比較と交換がそのまま音階になり、完走順に朱の一掃と着順札が付く

  • HyperFrames
  • Canvas
  • GSAP
  • Python (numpy)

12 アルゴリズム可視化

探索の波

砂に迷路が掘られ、入口から幅優先探索の水が分岐ごとに水滴を鳴らして満ち、最短経路が光の一筆で確定する

  • HyperFrames
  • Canvas
  • GSAP
  • Python (numpy)
  • ElevenLabs SFX

13 アルゴリズム可視化

ライフゲーム都市

グライダー銃が工場、グライダーが車、静物が建物。夜の俯瞰地図として設計したライフゲームが、72 BPM の心拍に合わせて世代を進め、車の通った区画から窓に灯りがともっていく

  • HyperFrames
  • Canvas
  • GSAP
  • Python (numpy / scipy)
  • ElevenLabs SFX

14 アルゴリズム可視化

決定境界が曲がるまで

二重螺旋を学ぶ小さなニューラルネットの決定境界が、直線から渦へ曲がっていく。網点の重ね刷りで確信度を、損失曲線と日本語ナレーションで学習の進み方を見せる

  • HyperFrames
  • Canvas
  • GSAP
  • Python (numpy / scipy)
  • ElevenLabs TTS

15 アルゴリズム可視化

群れが書く

夜明けの空で 1,400 羽のムクドリ(boids)がうねり、ハヤブサに割れ、一羽一席で OPUS を書き上げ、突風でまた群れに戻る

  • HyperFrames
  • Three.js
  • GSAP
  • Python (numpy / scipy)
  • ElevenLabs SFX

IV

手続き3Dと物理

ルールを書き、結果はシミュレーションに委ねる

10 手続き3Dアニメーション

活字の落下

机に降り注ぐ木活字の中から 11 個が一つずつ落ち、物理シミュレーションのまま「古池や 蛙飛び込む 水の音」と読める位置に止まる

  • Blender (bpy / Bullet 剛体 / EEVEE)
  • Python
  • Noto Serif JP
  • ffmpeg
  • ElevenLabs SFX

16 手続き3Dアニメーション

精密機械の分解図

bpy で歯形から起こした時計式の輪列が、ネジから順に螺旋を描いて分解し、一斉に噛み合って再組立てされて回り出す

  • Blender (bpy / EEVEE)
  • Python
  • ffmpeg
  • ElevenLabs SFX

17 手続き3Dアニメーション

ドミノ論理回路

黒板に描いた OUT = A·B + C·D をドミノが剛体シミュレーションで評価し、B=0 の枝は止まり、もう一方が OR を抜けて電球を灯す

  • Blender (bpy / Bullet 剛体 / EEVEE)
  • Python
  • Pillow
  • ffmpeg
  • ElevenLabs SFX

18 手続き3Dアニメーション

光の彫刻

叩かれたガラス板の波紋がコースティクスの網目になり、やがて逆設計した表面に落ち着いて、壁に投げる光が「光」の字になる

  • Blender (bpy / EEVEE)
  • Python (numpy)
  • Pillow
  • ffmpeg
  • ElevenLabs SFX

19 3DCG 手続き生成

手続き型の街

夕暮れの更地に道路が引かれ、区画が割られ、311 棟の建物が杭打ちの拍で建ち上がり、夜になると街灯と窓の灯りが波のように点いていく

  • Blender 5.2 (bpy / EEVEE)
  • HyperFrames
  • GSAP
  • ElevenLabs SFX
  • Python (numpy ミックス)

V

絵と物語

生成静止画に、動き・文字・音をコードで与える

23 架空映画トレーラー

存在しない映画の予告編

海が引いたまま戻らない世界を、2.39:1 のシネスコとアナモルフィックフレア、ブーム音のカットで見せ、タイトル『引き潮』が光の帯とともに浮かぶ

  • HyperFrames
  • GSAP
  • Canvas
  • ChatGPT 画像生成
  • Python (numpy, Pillow)
  • ElevenLabs TTS
  • ElevenLabs SFX
  • ElevenLabs Music

24 切り絵パララックス絵本

切り絵の絵本舞台

紙の幕が開くと山・森・草むらが飛び出す絵本のように立ち上がり、カメラが奥へ進むと、ランタンを提げた狐が月夜の森を歩いていく

  • HyperFrames
  • CSS 3D
  • GSAP
  • ChatGPT 画像生成
  • Python (numpy, Pillow)
  • ElevenLabs Music
  • ElevenLabs SFX

25 研究端末 HUD

架空標本の研究端末

架空の植物を走査線が構造解析へ塗り替え、カメラが茎と莢へ寄るたびに断面図と電子顕微鏡像が展開し、照合の末に「未分類」の印が押される

  • HyperFrames
  • GSAP
  • Canvas
  • SVG
  • ChatGPT 画像生成
  • Python (numpy, Pillow)
  • ElevenLabs TTS
  • ElevenLabs SFX
  • ElevenLabs Music

28 動く木版画の海図

めざめる海図

ローラーで刷り上がった木版の海図を帆船が進むと、余白の海獣が一体ずつ目を覚まし、墨版のあとに色版が見当を合わせて刷り重なる

  • HyperFrames
  • GSAP
  • Canvas
  • SVG
  • ChatGPT 画像生成
  • Python (numpy, Pillow)
  • ElevenLabs SFX
  • ElevenLabs Music

29 解像度の世代交代

解像度の進化

同じ夕景が 1 ビットの 32×18 ドットから 4 色、16 色、256 色、フルカラーへと画素を割りながら育ち、音もビープからチップチューン、FM 音源を経てオーケストラの一撃で細密画になる

  • HyperFrames
  • GSAP
  • Canvas
  • ChatGPT 画像生成
  • Python (numpy, Pillow)
  • ElevenLabs SFX
  • ElevenLabs Music

VI

音と同期・メタ

音を解析して映像に結線する、自己言及

20 3DCG 布シミュレーション

布の除幕

暗い展示台に藍の絹が落ち、吸い付いた布の凹凸が「OPUS」と読めたところで風が吹き込み、布を攫って大理石の文字が残る

  • Blender 5.2 (Cloth / EEVEE)
  • HyperFrames
  • GSAP
  • ElevenLabs SFX
  • Python (numpy ミックス)

21 音楽ビジュアライザ

音の球

緯度=周波数の球。低音の帯が鳴り続け、高音が北の冠を押し上げ、16秒のサブベースで南半球が一斉に跳ねる

  • HyperFrames
  • Three.js
  • GSAP
  • Canvas
  • ElevenLabs Music
  • Python (numpy FFT)

22 オーディオグラム

二人の会話のオーディオグラム

青焼きの校正紙の上で、早口言葉で噛んだところまで一文字ずつ光る字幕に「気を利かせてよ」と言った瞬間、字幕が自分で赤ペン校正する

  • HyperFrames
  • GSAP
  • Canvas
  • ElevenLabs v3 TTS (timestamps)
  • ElevenLabs Music
  • ElevenLabs SFX
  • Python (numpy)

27 CRT モーショングラフィックス

架空OSの起動儀式

琥珀色のブラウン管で BIOS 診断が一行ずつ OK を返し、リレーの音と同じ瞬間にマスが埋まり、最後に九芒星の紋章が鐘とともに点灯する

  • HyperFrames
  • WebGL2 (自作 CRT シェーダ)
  • Canvas
  • GSAP
  • ElevenLabs SFX
  • Python (numpy 合成)

VII

吹き替え

パブリックドメインの無声映画に、生成した声でアフレコする

32 パブリックドメイン映画の方言吹き替え

うちなーぐち白雪姫(1916年版)

1916年の無声映画『Snow White』の鏡と魔女の場面を、言い渋る鏡・あきさみよーの王妃・なんくるないさーの魔女のうちなーぐちで吹き替え、二段字幕で見せる

  • HyperFrames
  • GSAP
  • ElevenLabs v3 TTS
  • ElevenLabs Music
  • ElevenLabs SFX
  • Codex (方言レビュー)
  • whisper.cpp
  • ffmpeg
  • Python

VIII

自然と成長

規則と微分方程式から、育つもの・崩れるもの

34 数理アニメーション

千の二重振り子

初期角の差が合わせて 100 万分の 1 ラジアンしかない 1000 本の二重振り子が、6 秒ほど 1 本のように揃って振れたあと、カオスで扇状にほどける。音は振り子ごとの音高で、揃った単音が濁った和音へ崩れていく。

  • HyperFrames
  • Canvas 2D
  • GSAP
  • SVG
  • Python (numpy/scipy) RK4・音響合成

IX

言葉の構造

文と組版の規則を、目に見える形にする

35 構文解析の図解(SVG アニメーション)

文が木になるまで

「猫が窓辺で古い手紙を読んでいた」が形態素に割れ、係り受けの弧が架かり、構文木として立ち上がる。英訳の木と並べ、日本語の動詞句を裏返すと英語の動詞句にぴたりと重なる

  • HyperFrames
  • GSAP
  • SVG
  • ElevenLabs TTS
  • Python (numpy)

36 組版アニメーション(縦組み)

縦書きの詩

横組みの短い詩が一字ずつ縦の列へ流れ込み、割注・句読点・括弧と長音の回転・小書きのかな・ルビ・圏点と、縦組みの規則が一つずつ適用されて組み上がる。最後は朗読に合わせて列が灯る

  • HyperFrames
  • GSAP
  • ElevenLabs TTS
  • ElevenLabs Sound Effects
  • Python (numpy)

X

計算のしくみ

圧縮と流体を、手順ごと見せる

37 アルゴリズム可視化

ハフマン符号の木

「なまむぎ、なまごめ、なまたまご」の字を数え、軽い 2 つを束ねる手順で木を組み、根から葉への道を符号にして、一文を 312 bit から 34 bit のパンチ穴へ縮める

  • HyperFrames
  • SVG
  • GSAP
  • Python (numpy / scipy)
  • ElevenLabs TTS

XI

一枚絵の物語

生成した一枚絵を、層に分けて動かす

39 動く浮世絵

萌黄浦の夕立

静かな浮世絵に夕立が来る。松が揺れ、旅人が橋を急ぎ、大波が崩れ、最後は雨線ごと止まって一枚の版画に戻る

  • ChatGPT 画像生成
  • HyperFrames
  • Canvas
  • Python (Pillow/numpy)
  • ElevenLabs Music
  • ElevenLabs SFX

XII

音から作る

生成した音を、映像の設計図にする

41 リリックビデオ

レモンソーダ

自作の日本語詞で生成した 19 秒の歌に合わせ、歌われた一文字ずつが拍の上に落ち、はじけ、裏返り、泡になって飛んでいく

  • ElevenLabs Music
  • mlx-whisper (large-v3-turbo)
  • HyperFrames
  • GSAP
  • Python (numpy 拍推定)

総集編

総集編

全作品を一枚に

30 総集編モンタージュ

索引エンドロール

全作品を 6x5 に敷き詰めて同時に鳴らし、左上の一枚へ潜ってから、一本 0.4 秒ずつ番号と題で駆け抜ける。

  • ffmpeg (xstack / zoompan / amix)
  • Python
  • Pillow