スポットライト型ギャラリー

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

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

ゴール：重ねて並べた作品のうち、真ん中の1枚だけが開く「スポットライト型ギャラリー」を、1つのHTMLファイル（index.html）で作ってほしいです。
条件：HTML・CSS・JavaScriptだけで作ってください。Next.jsなどの仕組みは使わないでください。スマホでも崩れないようにしてください。
デザイン：暗い背景に細かいノイズのざらっとした質感を重ね、開いた作品の色で奥がほのかに光るようにしてください。閉じている作品は少し暗くしてください。
動き：縦長の作品を少しずつ重ねて一列に並べ、真ん中の1枚だけ横に広げてください。写真の大きさは変えずに見える窓だけを広げ、隠れていた部分が横に現れるようにしてください。開いた1枚には、タイトル、一言（説明1行）、ボタン（リンク先は後で差し替えられる仮の状態）を重ねてください。ドラッグ、スクロール、矢印キー、クリックで切り替わり、最後まで行ったら最初に戻るようにしてください。何もしなければ5秒ごとに次へ進み、操作するたびに5秒を数え直すようにしてください。
カードに載せるもの：「ここに載せたいものを書く（例：制作実績9件の画像と、案件名）」
画像がまだない場合は、光の線をSVGで描いた作品を仮に入れ、後から画像を差し替えやすくしてください。
見た目と動きの見本はこちらです。ページのHTMLのソースを取得して読み、数値や作り方も参考にしてください。
https://carousel-samples-cre.pages.dev/spotlight.html