diff --git a/renderer/src/gacha/page/page.css b/renderer/src/gacha/page/page.css index 2078064..f2fe53e 100644 --- a/renderer/src/gacha/page/page.css +++ b/renderer/src/gacha/page/page.css @@ -161,63 +161,30 @@ body { background: linear-gradient( 135deg, - 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% + transparent 41%, + color-mix(in srgb, var(--glint, #fff) 10%, transparent) 43.5%, + color-mix(in srgb, var(--glint, #fff) 30%, transparent) 46%, + color-mix(in srgb, var(--glint-core) 55%, transparent) 48%, + color-mix(in srgb, var(--glint-core) 70%, transparent) 49.5% 50.5%, + color-mix(in srgb, var(--glint-core) 55%, transparent) 52%, + color-mix(in srgb, var(--glint, #fff) 30%, transparent) 54%, + color-mix(in srgb, var(--glint, #fff) 10%, transparent) 56.5%, + transparent 59% ), linear-gradient( 135deg, - transparent 37%, - color-mix(in srgb, var(--glint-core) 45%, transparent) 38.5%, - transparent 40% + transparent 39%, + color-mix(in srgb, var(--glint-core) 50%, transparent) 41.5%, + transparent 44% ); height: 300%; left: -100%; position: absolute; top: -100%; - transform: translate(-26.7%, -26.7%); + transform: translate(-28.3%, -28.3%); width: 300%; } -/* - * A four-ray flare riding the band's centre, which travels corner to corner. - * Sized against the band's 3x box, so it spans 46% of the card. - */ -.wish-glint-flare { - background: radial-gradient( - circle, - var(--glint-core) 0 14%, - color-mix(in srgb, var(--glint) 53%, transparent) 30%, - transparent 64% - ); - aspect-ratio: 1; - left: 50%; - position: absolute; - top: 50%; - width: 15.3%; -} - -.wish-glint-flare::before, -.wish-glint-flare::after { - background: linear-gradient(90deg, transparent, var(--glint-core) 46% 54%, transparent); - content: ''; - height: 5%; - left: -40%; - position: absolute; - top: 47.5%; - width: 180%; -} - -.wish-glint-flare::after { - transform: rotate(90deg); -} - /* * The moon in the card back's diamond seal, in the card's accent and sized to * the diamond as on the pack (a 120px glyph in a 184px diamond). diff --git a/renderer/src/gacha/page/page.js b/renderer/src/gacha/page/page.js index e4017b1..5503698 100644 --- a/renderer/src/gacha/page/page.js +++ b/renderer/src/gacha/page/page.js @@ -43,9 +43,7 @@ const createFace = () => { clip.setAttribute('aria-hidden', 'true'); // Set on the clip itself: the card flies in an overlay outside #stage. clip.style.setProperty('--glint', wish.artwork.accent); - const band = el('span', 'wish-glint'); - band.append(el('span', 'wish-glint-flare')); - clip.append(band); + clip.append(el('span', 'wish-glint')); face.append(content, clip); return face; }; @@ -158,8 +156,8 @@ const burstSparkles = (deck, delay, duration) => { setTimeout(() => layer.remove(), delay + duration + 1200); }; -/** The glint moves on easeInOutSine. */ -const glint = Object.freeze({duration: 800, easing: 'cubic-bezier(.37, 0, .63, 1)'}); +/** The glint moves on ease-in-out. */ +const glint = Object.freeze({duration: 1200, easing: 'ease-in-out'}); /** * Keeps the card's text hidden while it spins and switches it on as the card @@ -169,9 +167,9 @@ const glint = Object.freeze({duration: 800, easing: 'cubic-bezier(.37, 0, .63, 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. 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. + * outside it as it slid diagonally. The box moves 0.85 card-widths and heights + * each way, 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. @@ -182,21 +180,12 @@ const revealFace = (turn, delay, duration) => { [{opacity: 0}, {opacity: 0, offset: lastFaceUpAt}, {opacity: 1, offset: lastFaceUpAt}, {opacity: 1}], {delay, duration, easing: 'linear', fill: 'both'}, ); - const band = turn.querySelector('.wish-glint'); - band?.animate([{transform: 'translate(-26.7%, -26.7%)'}, {transform: 'translate(31.7%, 31.7%)'}], { + turn.querySelector('.wish-glint')?.animate([{transform: 'translate(-28.3%, -28.3%)'}, {transform: 'translate(28.3%, 28.3%)'}], { delay: delay + duration, duration: glint.duration, easing: glint.easing, fill: 'both', }); - band?.querySelector('.wish-glint-flare')?.animate( - [ - {transform: 'translate(-50%, -50%) scale(0) rotate(0deg)', opacity: 0}, - {transform: 'translate(-50%, -50%) scale(1) rotate(45deg)', opacity: 1, offset: 0.5}, - {transform: 'translate(-50%, -50%) scale(0) rotate(90deg)', opacity: 0}, - ], - {delay: delay + duration, duration: glint.duration, easing: glint.easing, fill: 'both'}, - ); }; /**