Claude CodeやCodexのチャット欄に貼って使えます。「」の中は自分の載せたいものに書きかえてください。
見本はClaude CodeのOpus 5.5（考える量：中）で作りました。AIが作るものなので、毎回まったく同じにはなりません。見本のページを読み込ませつつ、気になるところは自分の言葉で直してもらいましょう。
ゴール：縦長のカードが見る人を囲むように並ぶ「パノラマ型ギャラリー」を、1つのHTMLファイル（index.html）で作ってほしいです。 条件：HTML・CSS・JavaScriptだけで作ってください。Next.jsなどの仕組みは使わないでください。スマホでも崩れないようにしてください。 デザイン：暗い背景に細かいノイズのざらっとした質感を重ね、中央のカードの色で奥がほのかに光るようにしてください。カードの下には、床に映り込んだような反射をうっすら付けてください。 動き：CSSの3D表示で、カードを円筒の内側に並べ、見る人を円筒の中心から少し手前にずらして置いてください。カードは円筒を1周できる枚数（12枚なら2周分の24枚）並べてください。中央のカードがいちばん小さく、両端ほど大きく内側へ傾いて見えるようにし、カード同士の間隔はどこでも同じにしてください。ゆっくり自動で回り、ドラッグで投げると勢いよく回って、だんだん元の速さに戻るようにしてください。中央のカードの名前を画面の下に出してください。 カードに載せるもの：「ここに載せたいものを書く（例：旅行の写真12枚と、その場所の名前）」 画像がまだない場合は、写真の代わりにSVGで描いた風景画を仮に入れ、後から画像を差し替えやすくしてください。 見た目と動きの見本はこちらです。ページのHTMLのソースを取得して読み、数値や作り方も参考にしてください。 https://carousel-samples-cre.pages.dev/gallery.html