tiennm99/tiennm99bot
1
0 Fork 0
mirror of https://github.com/tiennm99/tiennm99bot.git synced 2026-10-11 03:13:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(gacha): widen and soften the mirror glint, add a trailing streak

Browse Source 
The glint band now fades out over a wider span at a lower peak, a thin
streak trails it, and the sweep runs 800ms on easeInOutSine.
This commit is contained in:
tiennm99 committed 2026-10-02 15:52:09 +07:00
1 parent c08839d59e
commit 4f80538d51
2 files changed
+28 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

renderer/src/gacha/page/page.css
+22 -8
View File
@@ -153,15 +153,29 @@ body {
}
.wish-glint {
background: linear-gradient(
/*
* Two streaks: a wide band whose light fades out slowly on both sides, and a
* thin one trailing it. Stops are fractions of the 3x box's diagonal, so 1%
* here is 3% of the card's.
*/
background:
linear-gradient(
135deg,
transparent 45.3%,
color-mix(in srgb, var(--glint, #fff) 19%, transparent) 47.7%,
color-mix(in srgb, var(--glint-core) 80%, transparent) 49.7%,
var(--glint-core) 50%,
color-mix(in srgb, var(--glint-core) 80%, transparent) 50.3%,
color-mix(in srgb, var(--glint, #fff) 19%, transparent) 52.3%,
transparent 54.7%
transparent 42%,
color-mix(in srgb, var(--glint, #fff) 10%, transparent) 44.5%,
color-mix(in srgb, var(--glint, #fff) 30%, transparent) 47%,
color-mix(in srgb, var(--glint-core) 55%, transparent) 49%,
color-mix(in srgb, var(--glint-core) 70%, transparent) 50%,
color-mix(in srgb, var(--glint-core) 55%, transparent) 51%,
color-mix(in srgb, var(--glint, #fff) 30%, transparent) 53%,
color-mix(in srgb, var(--glint, #fff) 10%, transparent) 55.5%,
transparent 58%
),
linear-gradient(
135deg,
transparent 37%,
color-mix(in srgb, var(--glint-core) 45%, transparent) 38.5%,
transparent 40%
);
height: 300%;
left: -100%;
renderer/src/gacha/page/page.js
+6 -4
View File
@@ -158,7 +158,8 @@ const burstSparkles = (deck, delay, duration) => {
setTimeout(() => layer.remove(), delay + duration + 1200);
};
const glint = Object.freeze({duration: 650, easing: 'cubic-bezier(.45, 0, .55, 1)'});
/** The glint moves on easeInOutSine. */
const glint = Object.freeze({duration: 800, easing: 'cubic-bezier(.37, 0, .63, 1)'});
/**
* Keeps the card's text hidden while it spins and switches it on as the card
@@ -168,8 +169,9 @@ const glint = Object.freeze({duration: 650, easing: 'cubic-bezier(.45, 0, .55, 1
* band is a gradient across a box three times the card's size and centred on
* it, so the card stays inside that box for the whole sweep and every corner is
* lit; a card-sized box would leave the top-right and bottom-left corners
* outside it as it slid diagonally. Moving the box 0.8 card-widths and heights
* each way starts and ends the band clear of the card.
* outside it as it slid diagonally. The box moves from 0.8 card-widths and
* heights up-left to 0.95 down-right, so both streaks (the thin one trails the
* wide one) start and end clear of the card.
*
* @param {Element} turn
* @param {number} delay Milliseconds until the spin starts.
@@ -181,7 +183,7 @@ const revealFace = (turn, delay, duration) => {
{delay, duration, easing: 'linear', fill: 'both'},
);
const band = turn.querySelector('.wish-glint');
band?.animate([{transform: 'translate(-26.7%, -26.7%)'}, {transform: 'translate(26.7%, 26.7%)'}], {
band?.animate([{transform: 'translate(-26.7%, -26.7%)'}, {transform: 'translate(31.7%, 31.7%)'}], {
delay: delay + duration,
duration: glint.duration,
easing: glint.easing,