手札のように扇に広げたカード。選んだ1枚は、となりのカードと同じ大きさのままではなく、扇から抜き出したように持ち上がります。
Claude CodeやCodexのチャット欄に貼って使えます。「」の中は自分の載せたいものに書きかえてください。
見本はClaude CodeのOpus 5.5（考える量：中）で作りました。AIが作るものなので、毎回まったく同じにはなりません。見本のページを読み込ませつつ、気になるところは自分の言葉で直してもらいましょう。
ゴール：カードを手札のように広げる「手札型カルーセル」を、1つのHTMLファイル（index.html）で作ってほしいです。 条件：HTML・CSS・JavaScriptだけで作ってください。Next.jsなどの仕組みは使わないでください。スマホでも崩れないようにしてください。 デザイン：暗い背景に細かいノイズのざらっとした質感を重ね、選んだカードの色で奥がほのかに光るようにしてください。カードは色ごとのグラデーションにしてください。 動き：カードのずっと下を中心に回して、扇形に広げてください。選んだ1枚は、となりと同じ大きさのままではなく、扇から抜き出したように持ち上げて大きくしてください。最初は真ん中のカードを選んだ状態にしてください。ドラッグ、スクロール、矢印キー、カードのクリックで選べるようにし、下に今の位置を示す点を並べてください。カーソルを当てた横のカードは、少しだけ顔を出すようにしてください。 カードに載せるもの：「ここに載せたいものを書く（例：料金プラン3つと、おすすめのオプション6つ。カードには名前、価格、特徴2〜3行）」 見た目と動きの見本はこちらです。ページのHTMLのソースを取得して読み、数値や作り方も参考にしてください。 https://carousel-samples-cre.pages.dev/fan.html