From d940405775339b983ad0d021eac30f644dd79ed3 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 18 Nov 2024 14:55:45 -0500
Subject: [PATCH 1/3] feat: add badge shine and rays animations

---
 .storybook/stories/BadgeContainer.stories.js  |  10 +-
 src/assets/images/my-kiva/badge-shine.svg     |   5 +
 .../images/my-kiva/badge-shine/first.svg      |   4 +
 .../images/my-kiva/badge-shine/second.svg     |   3 +
 src/assets/images/my-kiva/rays/first.svg      |  64 +++++++
 src/assets/images/my-kiva/rays/second.svg     |  64 +++++++
 src/assets/images/my-kiva/rays/third.svg      |  64 +++++++
 src/components/MyKiva/BadgeContainer.vue      | 156 ++++++++++++++----
 8 files changed, 337 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/images/my-kiva/badge-shine.svg
 create mode 100644 src/assets/images/my-kiva/badge-shine/first.svg
 create mode 100644 src/assets/images/my-kiva/badge-shine/second.svg
 create mode 100644 src/assets/images/my-kiva/rays/first.svg
 create mode 100644 src/assets/images/my-kiva/rays/second.svg
 create mode 100644 src/assets/images/my-kiva/rays/third.svg

diff --git a/.storybook/stories/BadgeContainer.stories.js b/.storybook/stories/BadgeContainer.stories.js
index de18a4fd4c..edcefe9ef2 100644
--- a/.storybook/stories/BadgeContainer.stories.js
+++ b/.storybook/stories/BadgeContainer.stories.js
@@ -28,8 +28,8 @@ const story = (args = {}, badgeUrl) => {
 		components: { BadgeContainer },
 		setup() { return { args }; },
 		template: `
-			<badge-container v-bind="args" style="width: 150px; height: 150px;">
-				<img src="${badgeUrl}" />
+			<badge-container v-bind="args" style="width: 500px; height: 500px;">
+				<img src="${badgeUrl}" style="width: 300px; height: 300px; margin: 0 auto; margin-top: 80px" />
 			</badge-container>
 		`,
 	});
@@ -66,3 +66,9 @@ export const RectangleCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_
 export const RectangleInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_RECTANGLE }, badgeUsEconomicEquality.contentfulData[0].imageUrl);
 
 export const RectangleLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_RECTANGLE }, badgeUsEconomicEquality.contentfulData[0].imageUrl);
+
+export const BadgeWithRays = story({showRays: true, status: BADGE_COMPLETED, shape: BADGE_SHAPE_ARCH}, badgeClimateAction.contentfulData[0].imageUrl);
+
+export const BadgeWithShine = story({showShine: true, status: BADGE_COMPLETED, shape: BADGE_SHAPE_ARCH}, badgeClimateAction.contentfulData[0].imageUrl);
+
+export const BadgeWithShineAndRays = story({showRays: true, showShine: true, status: BADGE_COMPLETED, shape: BADGE_SHAPE_ARCH}, badgeClimateAction.contentfulData[0].imageUrl);
diff --git a/src/assets/images/my-kiva/badge-shine.svg b/src/assets/images/my-kiva/badge-shine.svg
new file mode 100644
index 0000000000..8bebf23d58
--- /dev/null
+++ b/src/assets/images/my-kiva/badge-shine.svg
@@ -0,0 +1,5 @@
+<svg width="257" height="439" viewBox="0 0 257 439" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-142.98 421.22L203.227 -9.99931L256.411 34.5006L-123.59 438.501L-142.98 421.22Z" fill="white" fill-opacity="0.15"/>
+<path d="M-153.977 411.832L192.909 -20.2324L200.057 -14.4939L-150.09 415L-153.977 411.832Z" fill="white" fill-opacity="0.15"/>
+<path d="M-244.719 323.207L102.167 -108.857L130.799 -85.8699L-229.079 335.811L-244.719 323.207Z" fill="white" fill-opacity="0.15"/>
+</svg>
diff --git a/src/assets/images/my-kiva/badge-shine/first.svg b/src/assets/images/my-kiva/badge-shine/first.svg
new file mode 100644
index 0000000000..a0600c580d
--- /dev/null
+++ b/src/assets/images/my-kiva/badge-shine/first.svg
@@ -0,0 +1,4 @@
+<svg width="257" height="439" viewBox="0 0 257 439" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-142.98 421.22L203.227 -9.99931L256.411 34.5006L-123.59 438.501L-142.98 421.22Z" fill="white" fill-opacity="0.15"/>
+<path d="M-153.977 411.832L192.909 -20.2324L200.057 -14.4939L-150.09 415L-153.977 411.832Z" fill="white" fill-opacity="0.15"/>
+</svg>
diff --git a/src/assets/images/my-kiva/badge-shine/second.svg b/src/assets/images/my-kiva/badge-shine/second.svg
new file mode 100644
index 0000000000..cb66238e1f
--- /dev/null
+++ b/src/assets/images/my-kiva/badge-shine/second.svg
@@ -0,0 +1,3 @@
+<svg width="131" height="336" viewBox="0 0 131 336" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-244.719 323.207L102.167 -108.857L130.799 -85.8699L-229.079 335.811L-244.719 323.207Z" fill="white" fill-opacity="0.15"/>
+</svg>
diff --git a/src/assets/images/my-kiva/rays/first.svg b/src/assets/images/my-kiva/rays/first.svg
new file mode 100644
index 0000000000..e254de8c45
--- /dev/null
+++ b/src/assets/images/my-kiva/rays/first.svg
@@ -0,0 +1,64 @@
+<svg width="432" height="469" viewBox="0 0 432 469" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M178.125 -78.5111L150.623 -73.4883L249.706 546.965L277.208 541.942L178.125 -78.5111Z" fill="url(#paint0_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M374.23 -29.737L358.502 -40.29L45.6911 492.892L61.4193 503.445L374.23 -29.737Z" fill="url(#paint1_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M491.634 127.193L476.338 91.0059L-59.9954 350.266L-44.6998 386.453L491.634 127.193Z" fill="url(#paint2_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M478.676 371.721L486.523 353.726L-46.9031 87.6955L-54.7507 105.691L478.676 371.721Z" fill="url(#paint3_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M388.467 488.824L416.598 462.899L32.3745 -13.9193L4.24342 12.005L388.467 488.824Z" fill="url(#paint4_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M64.2215 109.481L48.3262 132.479L360.516 358.69L376.411 335.691L64.2215 109.481Z" fill="url(#paint5_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M192.517 139.224L173.934 142.884L222.882 330.794L241.466 327.135L192.517 139.224Z" fill="url(#paint6_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M341.558 -62.3727L305.154 -77.1455L92.2387 534.224L128.643 548.997L341.558 -62.3727Z" fill="url(#paint7_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M514.77 138.089L507.594 119.815L-93.6281 320.908L-86.4523 339.182L514.77 138.089Z" fill="url(#paint8_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M579.506 297.536L581.066 259.313L-155.149 180.142L-156.709 218.365L579.506 297.536Z" fill="url(#paint9_linear_595_12301)" fill-opacity="0.25"/>
+<defs>
+<linearGradient id="paint0_linear_595_12301" x1="164.374" y1="-75.9997" x2="277.23" y2="541.938" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_595_12301" x1="366.366" y1="-35.0135" x2="22.5701" y2="477.379" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_595_12301" x1="483.986" y1="109.1" x2="-64.0254" y2="340.731" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint3_linear_595_12301" x1="482.6" y1="362.723" x2="-63.07" y2="124.769" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint4_linear_595_12301" x1="402.532" y1="475.862" x2="-11.5367" y2="26.5473" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint5_linear_595_12301" x1="56.2738" y1="120.98" x2="373.348" y2="340.123" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint6_linear_595_12301" x1="183.225" y1="141.054" x2="220.674" y2="331.229" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint7_linear_595_12301" x1="323.356" y1="-69.7591" x2="80.2362" y2="529.354" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint8_linear_595_12301" x1="511.182" y1="128.952" x2="-78.1336" y2="360.366" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint9_linear_595_12301" x1="580.286" y1="278.425" x2="-157.931" y2="248.289" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/images/my-kiva/rays/second.svg b/src/assets/images/my-kiva/rays/second.svg
new file mode 100644
index 0000000000..d0e3d7bd3b
--- /dev/null
+++ b/src/assets/images/my-kiva/rays/second.svg
@@ -0,0 +1,64 @@
+<svg width="432" height="469" viewBox="0 0 432 469" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M188.502 -13.6937L161 -8.6709L239.489 482.824L266.991 477.801L188.502 -13.6937Z" fill="url(#paint0_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M423.783 -113.725L408.055 -124.278L-3.70259 577.557L12.0256 588.11L423.783 -113.725Z" fill="url(#paint1_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M412.057 166.037L396.762 129.85L19.7413 312.099L35.0369 348.286L412.057 166.037Z" fill="url(#paint2_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M478.756 372.059L486.604 354.063L-46.823 88.0334L-54.6706 106.029L478.756 372.059Z" fill="url(#paint3_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M476.138 597.867L504.27 571.942L-55.1434 -122.286L-83.2745 -96.3615L476.138 597.867Z" fill="url(#paint4_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M-79.3762 4.94865L-95.2715 27.9473L503.707 461.963L519.603 438.965L-79.3762 4.94865Z" fill="url(#paint5_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M143.763 -47.7844L125.18 -44.125L271.228 516.545L289.811 512.885L143.763 -47.7844Z" fill="url(#paint6_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M338.349 -54.3668L301.945 -69.1396L95.0437 524.961L131.448 539.734L338.349 -54.3668Z" fill="url(#paint7_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M574.537 117.397L567.361 99.123L-153.815 340.337L-146.639 358.611L574.537 117.397Z" fill="url(#paint8_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M710.903 311.059L712.463 272.836L-286.955 165.36L-288.516 203.582L710.903 311.059Z" fill="url(#paint9_linear_595_12301)" fill-opacity="0.25"/>
+<defs>
+<linearGradient id="paint0_linear_595_12301" x1="174.751" y1="-11.1823" x2="264.151" y2="478.32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_595_12301" x1="415.919" y1="-119.002" x2="-36.6246" y2="555.467" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_595_12301" x1="404.41" y1="147.943" x2="19.1801" y2="310.771" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint3_linear_595_12301" x1="482.68" y1="363.061" x2="-62.9899" y2="125.107" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint4_linear_595_12301" x1="490.204" y1="584.905" x2="-112.663" y2="-69.2784" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint5_linear_595_12301" x1="-87.3238" y1="16.448" x2="521.027" y2="436.904" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint6_linear_595_12301" x1="134.471" y1="-45.9547" x2="246.206" y2="521.472" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint7_linear_595_12301" x1="320.147" y1="-61.7532" x2="83.8944" y2="520.437" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint8_linear_595_12301" x1="570.949" y1="108.26" x2="-135.945" y2="385.845" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint9_linear_595_12301" x1="711.683" y1="291.947" x2="-290.453" y2="251.038" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/images/my-kiva/rays/third.svg b/src/assets/images/my-kiva/rays/third.svg
new file mode 100644
index 0000000000..c5a453e221
--- /dev/null
+++ b/src/assets/images/my-kiva/rays/third.svg
@@ -0,0 +1,64 @@
+<svg width="432" height="469" viewBox="0 0 432 469" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M178.354 -78.2943L150.852 -73.2715L249.934 547.182L277.436 542.159L178.354 -78.2943Z" fill="url(#paint0_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M305.488 88.0384L289.76 77.4854L114.889 375.551L130.617 386.104L305.488 88.0384Z" fill="url(#paint1_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M642.028 54.8204L626.732 18.6328L-209.937 423.073L-194.641 459.261L642.028 54.8204Z" fill="url(#paint2_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M552.447 408.615L560.295 390.619L-120.217 51.2345L-128.065 69.2303L552.447 408.615Z" fill="url(#paint3_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M388.695 489.041L416.826 463.116L32.603 -13.7025L4.47198 12.2219L388.695 489.041Z" fill="url(#paint4_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M-32.2571 40.101L-48.1523 63.0996L460.636 431.764L476.532 408.766L-32.2571 40.101Z" fill="url(#paint5_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M175.254 67.8181L156.67 71.4775L243.781 405.894L262.365 402.235L175.254 67.8181Z" fill="url(#paint6_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M389.736 -193.639L353.332 -208.412L47.7002 669.185L84.1043 683.958L389.736 -193.639Z" fill="url(#paint7_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M576.563 119.874L569.387 101.6L-151.789 342.813L-144.613 361.087L576.563 119.874Z" fill="url(#paint8_linear_595_12301)" fill-opacity="0.25"/>
+<path d="M517.641 292.534L519.201 254.312L-89.6473 188.837L-91.2077 227.06L517.641 292.534Z" fill="url(#paint9_linear_595_12301)" fill-opacity="0.25"/>
+<defs>
+<linearGradient id="paint0_linear_595_12301" x1="164.603" y1="-75.7829" x2="277.459" y2="542.155" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_595_12301" x1="297.624" y1="82.7619" x2="105.431" y2="369.205" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_595_12301" x1="634.38" y1="36.7266" x2="-220.506" y2="398.068" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint3_linear_595_12301" x1="556.371" y1="399.617" x2="-139.76" y2="96.0495" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint4_linear_595_12301" x1="402.761" y1="476.078" x2="-11.3081" y2="26.7641" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint5_linear_595_12301" x1="-40.2047" y1="51.6003" x2="476.545" y2="408.747" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint6_linear_595_12301" x1="165.962" y1="69.6478" x2="232.607" y2="408.094" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint7_linear_595_12301" x1="371.534" y1="-201.026" x2="22.5449" y2="658.977" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint8_linear_595_12301" x1="572.975" y1="110.737" x2="-133.919" y2="388.321" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+<linearGradient id="paint9_linear_595_12301" x1="518.421" y1="273.423" x2="-92.083" y2="248.501" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1B343" stop-opacity="0.1"/>
+<stop offset="0.5" stop-color="#F1B343"/>
+<stop offset="1" stop-color="#F1B343" stop-opacity="0.1"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/MyKiva/BadgeContainer.vue b/src/components/MyKiva/BadgeContainer.vue
index 100d74747b..173a596e67 100644
--- a/src/components/MyKiva/BadgeContainer.vue
+++ b/src/components/MyKiva/BadgeContainer.vue
@@ -1,9 +1,15 @@
 <template>
 	<div
 		class="tw-relative tw-inline-block tw-cursor-pointer"
-		:class="{ 'tw-grayscale': isInProgress, 'invisible-badge': isLocked }"
+		:class="{
+			'tw-grayscale': isInProgress,
+			'invisible-badge': isLocked,
+			'rays-bg': showRays,
+		}"
 		@click="handleBadgeClick"
 	>
+		<FirstBadgeShine v-if="showShine" ref="firstShine" class="shine tw-w-full" />
+		<SecondBadgeShine v-if="showShine" ref="secondShine" class="second-shine tw-w-full" />
 		<slot></slot>
 		<component
 			v-if="isInProgress"
@@ -57,6 +63,8 @@ import SolidCircle from '#src/assets/images/my-kiva/badge-solid-circle.svg';
 import SolidOblong from '#src/assets/images/my-kiva/badge-solid-oblong.svg';
 import SolidOval from '#src/assets/images/my-kiva/badge-solid-oval.svg';
 import SolidRectangle from '#src/assets/images/my-kiva/badge-solid-rectangle.svg';
+import FirstBadgeShine from '#src/assets/images/my-kiva/badge-shine/first.svg';
+import SecondBadgeShine from '#src/assets/images/my-kiva/badge-shine/second.svg';
 
 const props = defineProps({
 	status: {
@@ -69,6 +77,14 @@ const props = defineProps({
 		default: BADGE_SHAPE_CIRCLE,
 		validator: value => BADGE_SHAPE.includes(value),
 	},
+	showRays: {
+		type: Boolean,
+		default: false,
+	},
+	showShine: {
+		type: Boolean,
+		default: false,
+	}
 });
 
 const isInProgress = computed(() => props.status === BADGE_IN_PROGRESS);
@@ -76,6 +92,8 @@ const isInProgress = computed(() => props.status === BADGE_IN_PROGRESS);
 const isLocked = computed(() => props.status === BADGE_LOCKED);
 
 const animateLock = ref(false);
+const firstShine = ref(null);
+const secondShine = ref(null);
 
 const outlineComponent = computed(() => {
 	switch (props.shape) {
@@ -123,6 +141,16 @@ const outlineStyles = computed(() => {
 });
 
 const handleBadgeClick = () => {
+	if (firstShine.value && secondShine.value) {
+		firstShine.value.$el.classList.remove('animate');
+		secondShine.value.$el.classList.remove('animate');
+
+		setTimeout(() => {
+			firstShine.value.$el.classList.add('animate');
+			secondShine.value.$el.classList.add('animate');
+		}, 10);
+	}
+
 	if (isLocked.value) {
 		animateLock.value = true;
 		setTimeout(() => { animateLock.value = false; }, 1600);
@@ -140,48 +168,114 @@ const handleBadgeClick = () => {
 }
 
 @keyframes wiggle {
-  0%, 7% {
-    transform: rotateZ(0);
-  }
+	0%, 7% {
+		transform: rotateZ(0);
+	}
 
-  15% {
-    transform: rotateZ(-15deg);
-  }
+	15% {
+		transform: rotateZ(-15deg);
+	}
 
-  20% {
-    transform: rotateZ(10deg);
-  }
+	20% {
+		transform: rotateZ(10deg);
+	}
 
-  25% {
-    transform: rotateZ(-10deg);
-  }
+	25% {
+		transform: rotateZ(-10deg);
+	}
 
-  30% {
-    transform: rotateZ(5deg);
-  }
+	30% {
+		transform: rotateZ(5deg);
+	}
 
-  35% {
-    transform: rotateZ(-5deg);
-  }
+	35% {
+		transform: rotateZ(-5deg);
+	}
 
-  40% {
-    transform: rotateZ(3deg);
-  }
+	40% {
+		transform: rotateZ(3deg);
+	}
 
-  45% {
-    transform: rotateZ(-3deg);
-  }
+	45% {
+		transform: rotateZ(-3deg);
+	}
 
-  50% {
-    transform: rotateZ(1deg);
-  }
+	50% {
+		transform: rotateZ(1deg);
+	}
 
-  55%, 100% {
-    transform: rotateZ(0);
-  }
+	55%, 100% {
+		transform: rotateZ(0);
+	}
 }
 
 .animate-wiggle {
 	animation: wiggle 2s linear;
 }
+
+/** Rays */
+.rays-bg {
+	animation: transitionRays 2s infinite;
+
+	@apply tw-w-full tw-h-full tw-bg-cover tw-bg-center;
+}
+
+.rays-bg::before {
+	animation: fadeRays 2s infinite;
+
+	@apply tw-opacity-0;
+}
+
+@keyframes transitionRays {
+	0% {
+		background-image: url('/src/assets/images/my-kiva/rays/first.svg');
+	}
+	50% {
+		background-image: url('/src/assets/images/my-kiva/rays/second.svg');
+	}
+	99% {
+		background-image: url('/src/assets/images/my-kiva/rays/third.svg');
+	}
+	100% {
+		background-image: url('/src/assets/images/my-kiva/rays/first.svg');
+	}
+}
+
+@keyframes fadeRays {
+	0%, 99% {
+		@apply tw-opacity-full;
+	}
+	100%  {
+		@apply tw-opacity-0;
+	}
+}
+
+/** Shine */
+.shine, .second-shine {
+	width: 500px;
+	transition: opacity 0.3s ease;
+
+	@apply tw-absolute tw-w-full tw-h-full tw-opacity-0 tw-pointer-events-none tw--top-full tw--left-full;
+}
+
+.shine.animate {
+	animation: shineMove 1.2s ease forwards;
+
+	@apply tw-opacity-full;
+}
+
+.second-shine.animate {
+	animation: shineMove 1.2s ease forwards 0.05s;
+
+	@apply tw-opacity-full;
+}
+
+@keyframes shineMove {
+	0% {
+		@apply tw--top-full tw--left-full;
+	}
+	100% {
+		@apply tw-top-full tw-left-full;
+	}
+}
 </style>

From fa2dd0779bc171896cae300d67bf53bec26c768d Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 18 Nov 2024 14:58:51 -0500
Subject: [PATCH 2/3] fix: story badge size

---
 .storybook/stories/BadgeContainer.stories.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.storybook/stories/BadgeContainer.stories.js b/.storybook/stories/BadgeContainer.stories.js
index edcefe9ef2..ecda71c40b 100644
--- a/.storybook/stories/BadgeContainer.stories.js
+++ b/.storybook/stories/BadgeContainer.stories.js
@@ -28,8 +28,8 @@ const story = (args = {}, badgeUrl) => {
 		components: { BadgeContainer },
 		setup() { return { args }; },
 		template: `
-			<badge-container v-bind="args" style="width: 500px; height: 500px;">
-				<img src="${badgeUrl}" style="width: 300px; height: 300px; margin: 0 auto; margin-top: 80px" />
+			<badge-container v-bind="args" style="width: 150px; height: 150px;">
+				<img src="${badgeUrl}" />
 			</badge-container>
 		`,
 	});

From 04de4f8fabbac74eeecd76100d93cd701473565a Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 18 Nov 2024 15:03:24 -0500
Subject: [PATCH 3/3] fix: lint

---
 src/components/MyKiva/BadgeContainer.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/MyKiva/BadgeContainer.vue b/src/components/MyKiva/BadgeContainer.vue
index 173a596e67..bdbcb1a510 100644
--- a/src/components/MyKiva/BadgeContainer.vue
+++ b/src/components/MyKiva/BadgeContainer.vue
@@ -230,12 +230,15 @@ const handleBadgeClick = () => {
 	0% {
 		background-image: url('/src/assets/images/my-kiva/rays/first.svg');
 	}
+
 	50% {
 		background-image: url('/src/assets/images/my-kiva/rays/second.svg');
 	}
+
 	99% {
 		background-image: url('/src/assets/images/my-kiva/rays/third.svg');
 	}
+
 	100% {
 		background-image: url('/src/assets/images/my-kiva/rays/first.svg');
 	}
@@ -245,6 +248,7 @@ const handleBadgeClick = () => {
 	0%, 99% {
 		@apply tw-opacity-full;
 	}
+
 	100%  {
 		@apply tw-opacity-0;
 	}
@@ -274,6 +278,7 @@ const handleBadgeClick = () => {
 	0% {
 		@apply tw--top-full tw--left-full;
 	}
+
 	100% {
 		@apply tw-top-full tw-left-full;
 	}