名刺ホルダー型リング

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

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

ゴール：52枚のページが傾いた輪の上で回る「名刺ホルダー型リング」を、1つのHTMLファイル（index.html）で作ってほしいです。
条件：HTML・CSS・JavaScriptだけで作ってください。Next.jsなどの仕組みは使わないでください。スマホでも崩れないようにしてください。
デザイン：暗い背景に細かいノイズのざらっとした質感を重ねてください。ページは白っぽくし、光の当たり方で明るさを変え、上の辺の外側寄りに見出しタブを付け、タブの色を1枚ずつ少しずつ変えて、輪を1周すると虹色になるようにしてください。
動き：Canvasを使って、ページを輪に外向きに差し込んだ回転名刺入れのように描いてください。輪は上から見下ろすように傾け、画面の中でも少し斜めにしてください。ページの前後の重なりはブラウザに任せず、毎フレーム奥のページから順に描いてください。ゆっくり回り、ドラッグで投げると勢いよく回るようにしてください。カーソルを当てたページ（スマホではタップしたページ）は手前にせり出し、そのページの名前を画面の下に出してください。
ページに付ける名前：「ここに付けたい名前を書く（例：1年52週の週番号）」
見た目と動きの見本はこちらです。ページのHTMLのソースを取得して読み、数値や作り方も参考にしてください。
https://carousel-samples-cre.pages.dev/ring.html