プロンプト
帮我做一个原创的手游「高光时刻」动效：[主体，例如：开宝箱 / 段位晋升 / 成就解锁 / Boss 掉落 / 角色升级]。
做成一个可以直接打开的单文件网页（HTML + CSS + JS），点一下就能完整播放，效果对标商业手游的结算 / 奖励演出。
【世界观与风格】
- 原创美术，不要模仿任何现有游戏的 IP、角色或 Logo。
- 卡通手游风：高饱和配色，统一的深色描边（例如 #1A1033），圆润厚重的造型。
- 配色随等级升级：[等级阶梯，例如：普通绿 → 稀有蓝 → 史诗紫 → 传说金]。每升一级都要切换主色、光效颜色和背景色调。
- 标题用圆胖的游戏字体（如 Titan One / Lilita One），描黑边，加投影；文字逐字「砸」进画面，带回弹。
【主体物：做成真 3D】
- 用 Three.js 建模，不要用平面 SVG 贴图。要有厚度、倒角，以及符合主体的结构细节（木板缝、铆钉、包边、宝石切面、锁扣等）；木板缝这类细节用真实几何体拼出来，不要贴黑线条。
- 着色用卡通分阶（MeshToonMaterial 加 3～4 阶的渐变贴图），配三种灯光：主光、天光、等级色的轮廓光。
- 描边用后期边缘检测：渲染法线图 + 深度图，再用着色器画线。外轮廓粗、零件交界细，粗细全程一致；另外做 1.5 倍超采样和多重采样抗锯齿。
不要用「放大一圈的黑色背面」那种描边，那样粗细不均、转角会断。
深度判断的阈值要放宽，接缝主要靠法线判断，否则斜着看的表面会冒出细碎斜纹。
- 活动部件要真实运动，比如箱盖绕铰链翻开、奖章绕竖轴旋转。
- 待机时主体缓慢左右转动，让人看到侧面和厚度，同时轻微上下浮动；脚下要有随高度变化的柔和投影。
【如果画面里有 2D 插画（卡面、奖励图标、角色）】
- 三层卡通着色：底色、成块的阴影色、高光色，不要只用一层渐变。
- 线条分粗细：外轮廓粗，内部结构线细。
- 每个角色或物件要有自己的表情和姿态，不要所有东西共用同一张脸。
- 脚下画投影，让主体「站」在画面里；背景按属性区分图案，不要全用同一套放射线。
【演出节奏：五个阶段，缺一不可】
1. 预备：主体待机浮动，每隔几秒抖一下提示可以点击，底部显示「点击」提示。
2. 升级：每点一次，主体跳起、在空中转一圈、落地时压扁再回弹；同时切换到下一等级的颜色，闪一下光，冒一圈粒子，标题更新。
3. 蓄力（约 1 秒）：主体越抖越剧烈，缝隙透出光，四周粒子往中心吸，音效音调持续上升；最后一刻猛地压扁。
4. 爆发：从爆点向外扩散的泛光闪白、屏幕震动、镜头往前一推、多层冲击波、细长流光迸射、闪光星点、金币和宝石（带旋转）。高等级的爆发要明显更强。彩带只在最高潮用一次，不要满屏彩带。
5. 揭晓与结算：
- 奖励卡片从主体里沿弧线飞出，落位时带超调和晃动收尾，数字滚动计数。
- 稀有物品带彩虹流光边框和「NEW!」角标。
- 点击领取后，金币和宝石沿贝塞尔曲线飞进右上角的余额，每到一个余额就跳一下。
【揭晓舞台：让主角独占画面】
- 最高稀有度揭晓时，其他元素收起或淡出，背后换成一层干净的渐变幕布加缓慢旋转的柔光，不要让主角压在杂乱的背景上。
- 幕布出现时，把场景里的其他 3D 物件隐藏掉，否则后期描边会把它们的轮廓线画在幕布上。
- 主角的外发光要放在主体背后，只从边缘溢出，不能盖在主体前面把它糊成一片白。
- 可以加一圈围绕主角盘旋的星尘拖尾，但轨道必须完整在主角轮廓外侧，不能从主体正面扫过。
【光效：必须柔和，不能有硬边】
- 背景光芒：用带渐变过渡的 conic-gradient，不要一刀切的色块边缘；叠 2～3 层不同密度、不同转速的光。
- 光柱：由 5～7 道带模糊的光束呈扇形散开，亮度各自轻微闪动；根部加一团柔光核心，光里有光尘缓慢上飘。
- 闪白：从爆点向外的径向泛光（mix-blend-mode: screen），强度不超过 0.8，不要整屏纯白过曝。
- 粒子：每个火花都带一圈低透明度的外晕；冲击波用三层描边（宽而淡、中等、细而亮）。
【材质与界面】
- 边框、名牌、按钮要有材质感：金属拉丝渐变、左上亮右下暗的倒角光、内阴影；按稀有度换镶嵌件（钢铆钉 → 银框宝石 → 金框钻石加小王冠）。
- 小卡片上不要塞小字数值；详细数值放到揭晓时的信息面板里，面板里的数字滚动上涨，并弹出「▲+数值」。
- 画在 Canvas 上的贴图，分辨率至少是屏幕上最大显示尺寸的 1.5 倍，否则放大时会发虚。
【动画原则】
- 用 GSAP 时间线编排。所有动作都要有挤压拉伸、超调和弹性回弹，不要匀速。
- 粒子系统用 Canvas 2D 自己写：重力、阻力、生命周期、叠加混合，以及「吸入」「曲线飞行」「环绕」三种运动。
- 不要用 CSS 3D 透视去翻转大尺寸元素，放大加侧翻时会被投影成铺满屏幕的平面，3D 翻转一律放在 WebGL 里做。
- 所有「抖动」「呼吸」类的循环补间，在状态切换时要先取消再归零，避免它比停止指令晚一帧结束，又把值设回去。
【音效】
- 全部用 Web Audio 实时合成，不用音频文件：跳起、落地、升级和弦、蓄力上升音、爆炸低频加噪声、弹出音、计数滴答、金币叮当、胜利号角。
- 第一次点击时才初始化音频；右上角放静音开关。
【界面与工程】
- 顶部 HUD：模式切换、金币和宝石余额、静音按钮。
- 手机宽度也要能用；遵守「减少动态效果」设置（关闭震屏，减少粒子）。
- 动画状态机要严谨：动画播放中忽略点击，不能出现点击被吞或状态错乱。
- 目标 60fps。第一次打开时就是完整的待机画面，不能是空白。
【交付前自检】
在蓄力、爆发、揭晓、结算这几个时刻各截一张图，逐张检查：
- 主角有没有被光晕、粒子或文字挡住？
- 有没有过曝成一片白？
- 背景是否杂乱，有没有穿帮的描边线？
- 小字是否能看清？
- 结算后是否还有东西在不该动的时候继续抖动？
最后告诉我：每个阶段的时长，以及哪些参数可以调整演出强度。
日本語訳
オリジナルのスマホゲーム「高光时刻」のモーション演出を作ってください: [主体、例: 宝箱開封 / ランク昇格 / 実績解除 / Boss ドロップ / キャラクター強化]。
そのまま開ける単一ファイルの Web ページ（HTML + CSS + JS）にして、ワンクリックで最後まで再生できるようにしてください。演出のクオリティは商業スマホゲームのリザルト／報酬演出に並ぶものにします。
【世界観とスタイル】
- オリジナルのアートにし、既存ゲームの IP、キャラクター、ロゴを一切模倣しない。
- カートゥーン調のスマホゲーム風: 高彩度の配色、統一された濃い色のアウトライン（例: #1A1033）、丸みのある重厚な造形。
- 配色はレベルに応じて変化させる: [等級の階段、例: コモンの緑 → レアの青 → エピックの紫 → レジェンドの金]。レベルが上がるたびに、メインカラー、光エフェクトの色、背景の色調を切り替える。
- タイトルは丸くぽってりしたゲームフォント（Titan One / Lilita One など）を使い、黒いアウトラインを付け、ドロップシャドウを加える。文字は 1 文字ずつ「叩きつける」ように画面へ入り、バウンドして戻る。
【メインオブジェクト: 本物の 3D にする】
- Three.js でモデリングし、平面の SVG テクスチャは使わない。厚み、ベベル、そして主体に合った構造ディテール（板の継ぎ目、リベット、縁取り、宝石のファセット、留め具など）を持たせる。板の継ぎ目のようなディテールは実際のジオメトリで組み立て、黒い線を貼り付けない。
- シェーディングはカートゥーン調の段階表現（MeshToonMaterial に 3〜4 段のグラデーションテクスチャ）を使い、3 種類のライトを配置する: キーライト、スカイライト、レベル色のリムライト。
- アウトラインはポストプロセスのエッジ検出で行う: 法線バッファ + デプスバッファをレンダリングし、シェーダーで線を描く。外側の輪郭は太く、パーツの境界は細く、太さは全体を通して一定にする。さらに 1.5 倍のスーパーサンプリングとマルチサンプル・アンチエイリアスをかける。
「一回り大きくした黒い裏面」のようなアウトラインは使わない。太さが不均一になり、角で途切れてしまう。
デプス判定の閾値は緩めにし、継ぎ目は主に法線で判定する。そうしないと斜めから見た面に細かい斜めの縞が出てしまう。
- 可動部分は実際に動かす。たとえば箱の蓋はヒンジを軸に開き、メダルは縦軸を中心に回転する。
- 待機中はメインオブジェクトがゆっくり左右に回転し、側面と厚みが見えるようにする。同時にわずかに上下に浮遊させる。足元には高さに応じて変化する柔らかな影を落とす。
【画面に 2D イラスト（カード面、報酬アイコン、キャラクター）がある場合】
- 3 層のカートゥーンシェーディング: ベースカラー、ブロック状のシャドウ色、ハイライト色。1 層のグラデーションだけで済ませない。
- 線の太さを分ける: 外側の輪郭は太く、内部の構造線は細く。
- 各キャラクターやオブジェクトにはそれぞれ独自の表情とポーズを持たせ、すべてが同じ顔を共有しないようにする。
- 足元に影を描き、主体が画面の中に「立っている」ように見せる。背景は属性ごとに模様を変え、すべて同じ放射線のセットを使わない。
【演出のリズム: 5 つの段階、どれも欠かせない】
1. 準備: メインオブジェクトが待機中に浮遊し、数秒ごとに震えてクリックできることを示す。下部に「点击」のヒントを表示する。
2. レベルアップ: クリックするたびに、メインオブジェクトが跳ね上がり、空中で 1 回転し、着地時に潰れてから跳ね返る。同時に次のレベルの色へ切り替え、光を一瞬走らせ、粒子を 1 周分発生させ、タイトルを更新する。
3. チャージ（約 1 秒）: メインオブジェクトの震えがだんだん激しくなり、隙間から光が漏れ、周囲の粒子が中心へ吸い込まれ、効果音の音程が上がり続ける。最後の瞬間に勢いよく潰れる。
4. 爆発: 爆発点から外へ広がるブルームの白フラッシュ、画面の揺れ、カメラの前へのプッシュイン、複数層の衝撃波、細長い光の流れの飛散、閃光の星、コインと宝石（回転付き）。高レベルの爆発は明らかに強くする。紙吹雪は最高潮で一度だけ使い、画面いっぱいに紙吹雪を撒かない。
5. 公開とリザルト:
- 報酬カードがメインオブジェクトから弧を描いて飛び出し、着地時にオーバーシュートと揺れで収まり、数字がカウントアップする。
- レアアイテムには虹色の流れる光の枠と「NEW!」のコーナーバッジを付ける。
- 受け取りをクリックすると、コインと宝石がベジェ曲線に沿って右上の残高へ飛び、残高に届くたびに跳ねる。
【公開のステージ: 主役に画面を独占させる】
- 最高レアリティの公開時は、他の要素を引っ込めるかフェードアウトさせ、背景をきれいなグラデーションの幕とゆっくり回転する柔らかな光に切り替える。主役を雑然とした背景の上に重ねない。
- 幕が現れたら、シーン内の他の 3D オブジェクトは非表示にする。そうしないとポストプロセスのアウトラインがそれらの輪郭線を幕の上に描いてしまう。
- 主役の外側の発光はオブジェクトの背後に置き、縁からのみはみ出させる。前面に被せて真っ白に潰してはいけない。
- 主役の周りを周回する星屑のトレイルを加えてもよいが、軌道は完全に主役の輪郭の外側になければならず、オブジェクトの正面を横切ってはいけない。
【光のエフェクト: 必ず柔らかく、硬いエッジを出さない】
- 背景の光: グラデーションで遷移する conic-gradient を使い、一刀両断されたような色の塊のエッジを出さない。密度と回転速度の異なる光を 2〜3 層重ねる。
- 光の柱: ぼかした 5〜7 本の光線を扇形に広げ、それぞれの明るさをわずかに揺らす。根元に柔らかな光のコアを置き、光の中を光の塵がゆっくり上昇する。
- 白フラッシュ: 爆発点から外への放射状ブルーム（mix-blend-mode: screen）で、強度は 0.8 を超えない。画面全体を純白に飛ばさない。
- 粒子: すべての火花に低不透明度の外側グローを付ける。衝撃波は 3 層のアウトライン（太く淡い、中程度、細く明るい）で描く。
【マテリアルと UI】
- 枠、名札、ボタンには質感を持たせる: 金属ヘアラインのグラデーション、左上が明るく右下が暗いベベルの光、インナーシャドウ。レアリティに応じて象嵌を変える（鋼のリベット → 銀枠の宝石 → 金枠のダイヤと小さな王冠）。
- 小さなカードに小さな文字で数値を詰め込まない。詳細な数値は公開時の情報パネルに置き、パネル内の数字がカウントアップし、「▲+数值」がポップアップする。
- Canvas 上に描くテクスチャは、画面上の最大表示サイズの少なくとも 1.5 倍の解像度にする。そうしないと拡大時にぼやける。
【アニメーションの原則】
- GSAP のタイムラインで構成する。すべての動きにスクワッシュ＆ストレッチ、オーバーシュート、弾力的な反動を入れ、等速にしない。
- パーティクルシステムは Canvas 2D で自作する: 重力、抵抗、ライフサイクル、加算合成、そして「吸い込み」「曲線飛行」「周回」の 3 種類の運動。
- 大きな要素の反転に CSS 3D のパースペクティブを使わない。拡大しつつ横転させると画面いっぱいの平面として投影されてしまう。3D の反転はすべて WebGL で行う。
- 「揺れ」「呼吸」系のループトゥイーンは、状態切り替え時に必ず先にキャンセルしてからゼロに戻す。停止命令より 1 フレーム遅れて終了し、値を元に戻してしまうのを避ける。
【効果音】
- すべて Web Audio でリアルタイム合成し、音声ファイルは使わない: ジャンプ、着地、レベルアップの和音、チャージの上昇音、爆発の低周波とノイズ、ポップ音、カウントのタック音、コインのチャリン、勝利のファンファーレ。
- オーディオは最初のクリック時に初期化する。右上にミュートスイッチを置く。
【UI と実装】
- 上部 HUD: モード切り替え、コインと宝石の残高、ミュートボタン。
- スマホ幅でも使えるようにする。「視差効果を減らす」設定に従う（画面の揺れを止め、粒子を減らす）。
- アニメーションのステートマシンは厳密にする: 再生中はクリックを無視し、クリックが飲み込まれたり状態が乱れたりしないようにする。
- 目標は 60fps。初回に開いた時点で完全な待機画面になっているようにし、空白にしてはいけない。
【納品前のセルフチェック】
チャージ、爆発、公開、リザルトの各時点でスクリーンショットを 1 枚ずつ撮り、1 枚ずつ確認する:
- 主役がグロー、粒子、文字に遮られていないか？
- 白飛びして真っ白になっていないか？
- 背景が雑然としていないか、不自然に見えるアウトラインが入っていないか？
- 小さな文字が読めるか？
- リザルト後、動くべきでないときにまだ何かが震え続けていないか？
最後に、各段階の尺と、演出の強度を調整できるパラメータを教えてください。
