円筒型スライダー

このカルーセルの再現プロンプト

Claude CodeやCodexのチャット欄に貼って使えます。「」の中は自分の載せたいものに書きかえてください。
見本はClaude CodeのOpus 5.5（考える量：中）で作りました。AIが作るものなので、毎回まったく同じにはなりません。見本のページを読み込ませつつ、気になるところは自分の言葉で直してもらいましょう。

ゴール：カードを筒のまわりに並べてドラッグで回す「円筒型スライダー」を、1つのHTMLファイル（index.html）で作ってほしいです。
条件：HTML・CSS・JavaScriptだけで作ってください。Next.jsなどの仕組みは使わないでください。スマホでも崩れないようにしてください。
デザイン：暗い背景に細かいノイズのざらっとした質感を重ねてください。カードは暗いグラデーションにして、16枚中3枚ほど明るいカードを混ぜてください。
動き：CSSの3D表示でカードを円筒のまわりに並べ、少し上から見下ろす角度にしてください。奥のカードも裏返しのまま隙間から見えるようにし、正面に近いカードほど明るく、奥ほど暗くしてください。ゆっくり自動で回り、ドラッグで回せて、離すと勢いが少し残るようにしてください。
カードに載せるもの：「ここに載せたいものを書く（例：お客様の声8件と、サービスの特長8つ）」
見た目と動きの見本はこちらです。ページのHTMLのソースを取得して読み、数値や作り方も参考にしてください。
https://carousel-samples-cre.pages.dev/slider.html