From b73347bb4fc6650cd5b687ac7bc9e97261be34a5 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Thu, 1 Oct 2026 18:45:06 +0700
Subject: [PATCH] feat(gacha): spin the beta card one and a half turns as it is
 revealed

pack-cards reveals the card with a half turn from rotateY(180deg) to 0deg. The page starts that one animation at 540deg, so the card spins further before landing face up, without changing the library.
---
 renderer/src/gacha-beta/page/page.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/renderer/src/gacha-beta/page/page.js b/renderer/src/gacha-beta/page/page.js
index e776eba..20e2c97 100644
--- a/renderer/src/gacha-beta/page/page.js
+++ b/renderer/src/gacha-beta/page/page.js
@@ -47,6 +47,31 @@ const createFace = () => {
   return face;
 };
 
+/**
+ * pack-cards reveals the card with a half turn, animating rotateY from 180deg
+ * to 0deg. Starting that one animation further round spins the card more
+ * before it lands face up, without changing the library.
+ */
+const flipStartDegrees = 540;
+const animate = Element.prototype.animate;
+/**
+ * @this {Element}
+ * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes
+ * @param {number | KeyframeAnimationOptions} [options]
+ */
+Element.prototype.animate = function (keyframes, options) {
+  const isFlip =
+    Array.isArray(keyframes) &&
+    keyframes.length === 2 &&
+    keyframes[0]?.transform === 'rotateY(180deg)' &&
+    keyframes[1]?.transform === 'rotateY(0deg)';
+  return animate.call(
+    this,
+    isFlip ? [{transform: `rotateY(${flipStartDegrees}deg)`}, keyframes[1] ?? {}] : keyframes,
+    options,
+  );
+};
+
 const view = createPackView(stage, {
   label: 'Gacha',
   artwork: wish.artwork,