Shaky Picks

Meta Shaky という個人制作のキャラクター世界の中の1コンテンツ。誕生日を入れると自分のキャラクターが決まるという設定のサイト群があり、Picks はそのうち、引いたカードで助言が返ってくる占いパートにあたります。作者は Allen Tseng で、企画・デザイン・実装をひとりでやっています。 作者本人の説明によれば、カードの環は三角関数で座標を出して並べたもので、視差と GSAP による状態遷移で立体感を作っています。Awwwards の技術タグも CSS / GSAP / Vanilla JS で、Three.js や WebGL は挙がっていません。3Dライブラリに乗らずに3Dらしい見た目を出している事例として見る価値があります。 【参考になるポイント】 ・カードの円環はモデルではなく、角度から位置を計算して並べただけ。WebGLコンテキストを持たない構成 ・Awwwards の技術タグが CSS・GSAP・Vanilla JS のみ＝描画がDOM側で完結している ・発光の重なり（アンビエントなブレンドグロー）で奥行きを補強している、と作者は説明している ・※実サイトのHTMLは WebFetch でバイナリとして返り、meta タグまで確認できなかった。サムネイルは Awwwards の投稿画像を使用 ・※CSS の preserve-3d を使っているかどうかは未確認 ・※受賞表記は一覧では Honorable Mention、エントリーページでは Nominee 表示で確定していない（2026年7月22日、スコア8.30）