Claude CodeやCodexのチャット欄に貼って使えます。「」の中は自分の載せたいものに書きかえてください。
見本はClaude CodeのOpus 5.5（考える量：中）で作りました。AIが作るものなので、毎回まったく同じにはなりません。見本のページを読み込ませつつ、気になるところは自分の言葉で直してもらいましょう。
ゴール：カードが大きな円の弧に沿って並ぶ「アーチ型カルーセル」を、1つのHTMLファイル（index.html）で作ってほしいです。 条件：HTML・CSS・JavaScriptだけで作ってください。Next.jsなどの仕組みは使わないでください。スマホでも崩れないようにしてください。 デザイン：暗い背景に細かいノイズのざらっとした質感を重ね、頂点のカードの色で奥がほのかに光るようにしてください。 動き：頂点の1枚だけまっすぐ立てて少し大きくし、左右のカードは円の外側へ倒れるように傾けてください。位置と傾きは、円の中心を軸にした回転1つで決めてください。スクロール、矢印キー、左右のボタンでは1枚ずつ回り、ドラッグでは勢いがついて、離すといちばん近いカードで止まるようにしてください。最後まで行ったら最初に戻るようにしてください。頂点の下に、選んだカードのタイトル、一言（説明1行）、ボタン（リンク先は後で差し替えられる仮の状態）を出してください。 カードに載せるもの：「ここに載せたいものを書く（例：イラスト作品12点と、その作品名）」 画像がまだない場合は、作品画像の代わりにSVGで描いた風景画を仮に入れ、後から画像を差し替えやすくしてください。 見た目と動きの見本はこちらです。ページのHTMLのソースを取得して読み、数値や作り方も参考にしてください。 https://carousel-samples-cre.pages.dev/arc.html