ルネサンスと編集デザインを融合した10シーンのGSAPフィルムサイト

Claude Fable 5.1がHTML・CSS・JSでブラウザ映像作品を構築。コード描画をパブリックドメインの版画に差し替え、82秒の自動再生に仕上げました。

Claude Code + Three.js(コードのみ)Wandy 2
実際のモデル · 360°どちらも同じ写真から作成:左は Claude Code(Opus 5.5)が Three.js のコードでモデリングした、手を加えていない1回分の実行結果。右は Wandy 2。

精細な3Dモデルを作ろう

コードだけでは単純な形しか作れません。Wandy 2なら写真1枚から、同じシーンで使えるテクスチャ付き3Dモデルを作れます。

Wandy3Dによる制作ブリーフ

作者がプロンプトを公開していないため、この作品を再現する方法を私たちがまとめました。

Build a ten-scene cinematic website that runs in the browser with plain HTML, CSS and JavaScript, GSAP for motion and a WebGL grain overlay. The theme is the invention of a world, blending Renaissance painting with editorial layout: warm cream paper pages, serif display titles with italic accents, thin grid lines, small captions and a fixed frame with scene counter. Use no baked video. Start with scenes drawn in code, then replace procedural art with public-domain engravings and paintings from museum archives. Include scene titles such as an archive, an eye, a sky tower and a hand, a dark blue sphere motif and falling blue ribbons. Add a play button that autoplays the whole film as a camera-like director, about eighty seconds long. Keep per-frame work light, moving heavy image filters off the frame loop. Done when pressing play walks through all ten scenes smoothly.

このプロンプトの使い方

  1. localhostを開いてスクリーンショットを撮れるエージェントで、Claude Fable 5.1にビルドブリーフを渡します。

  2. テーマ、シーン数、画像の出典、配色を変更し、自動再生の長さもブリーフに入れておきます。

  3. スクリーンショットを一緒に確認し、弱いシーンを指摘してカクつきやタイミングの修正を依頼します。

元の投稿作者の方ですか? このページの修正・削除をご依頼ください