カバーフロー

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

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

ゴール：手前の1枚を中心に、となりのカードが奥へ回り込む「カバーフロー」を、1つのHTMLファイル（index.html）で作ってほしいです。
条件：HTML・CSS・JavaScriptだけで作ってください。Next.jsなどの仕組みは使わないでください。スマホでも崩れないようにしてください。
デザイン：暗い背景に細かいノイズのざらっとした質感を重ね、手前のカードの色で奥がほのかに光るようにしてください。手前に来たカードだけ明るい白いカードに切り替わり、ほかは暗いグラデーションのカードにしてください。
動き：左右のカードは、奥へ押し込まれながら中央側を向くように回り込み、遠いものほどぼやけるようにしてください。左右には最大3枚ずつ見えるようにし、最後まで行ったらそこで止まるようにしてください。左右の丸ボタン、ドラッグ、矢印キー、下の点で切り替えられるようにしてください。
カードに載せるもの：「ここに載せたいものを書く（例：講座の7つのステップと、それぞれの所要時間）」
見た目と動きの見本はこちらです。ページのHTMLのソースを取得して読み、数値や作り方も参考にしてください。
https://carousel-samples-cre.pages.dev/cards3d.html