From 0c5c4e4bce183fd5f50997ce69e4022c5bf0809b Mon Sep 17 00:00:00 2001
From: JW-CH <17313367+JW-CH@users.noreply.github.com>
Date: Wed, 28 Jan 2026 14:09:15 +0000
Subject: [PATCH 1/2] first splash logo draft

---
 design/immichframe-splash-animated.svg        | 36 +++++++++++++++++++
 .../components/elements/LoadingElement.svelte |  7 +++-
 .../static/logo-splash-animated.svg           | 36 +++++++++++++++++++
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 design/immichframe-splash-animated.svg
 create mode 100644 immichFrame.Web/static/logo-splash-animated.svg

diff --git a/design/immichframe-splash-animated.svg b/design/immichframe-splash-animated.svg
new file mode 100644
index 00000000..8c231dd8
--- /dev/null
+++ b/design/immichframe-splash-animated.svg
@@ -0,0 +1,36 @@
+<svg width="792" height="792" viewBox="0 0 792 792" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .icon {
+      animation: floatGlow 3s ease-in-out infinite;
+      transform-origin: center center;
+    }
+    
+    @keyframes floatGlow {
+      0%, 100% {
+        transform: translateY(0) scale(1);
+        filter: drop-shadow(0 0 10px rgba(250, 41, 33, 0.3))
+                drop-shadow(0 0 20px rgba(24, 194, 73, 0.2));
+      }
+      50% {
+        transform: translateY(-12px) scale(1.02);
+        filter: drop-shadow(0 0 25px rgba(250, 41, 33, 0.5))
+                drop-shadow(0 0 50px rgba(24, 194, 73, 0.4));
+      }
+    }
+  </style>
+  
+  <g class="icon">
+    <!-- Red segment -->
+    <path d="M465.583 373C445.515 338.465 414.331 301.822 375.638 267.627C373.104 265.389 370.558 263.179 368 261H512C501.922 297.225 485.7 337.086 465.583 373Z" fill="#FA2921"/>
+    <!-- Pink segment -->
+    <path d="M396 322.195C356.795 330.567 312.129 348.861 267.472 375.047C243.188 389.294 220.503 405.047 201 421V269.002C201 264.583 204.596 261 209.032 261H328.149C351.723 278.829 375.224 299.832 396 322.195Z" fill="#ED79B5"/>
+    <!-- Yellow segment -->
+    <path d="M438 455.11C464.831 425.356 490.234 384.372 510.949 337.013C522.196 311.3 531.26 285.303 537.637 261H582.952C587.396 261 591 264.585 591 269.007V461.97C547.119 467.584 490.419 465.452 438 455.11Z" fill="#FFB400"/>
+    <!-- Blue segment -->
+    <path d="M325.404 373C321.302 412.627 324.954 460.485 336.109 510.757C337.623 517.579 339.257 524.338 341 531H209.004C204.584 531 201 527.426 201 523.019V454.117C232.911 424.795 278.507 394.596 325.404 373Z" fill="#1E83F7"/>
+    <!-- Green segment -->
+    <path d="M352 455C388.63 471.112 435.512 482.425 487.037 487.364C523.957 490.908 560.173 490.716 591 487.1V523.034C591 527.433 587.407 531 582.976 531H367.049C360.303 506.539 355.066 480.59 352 455Z" fill="#18C249"/>
+    <!-- Frame -->
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M196 226C179.431 226 166 239.431 166 256V536C166 552.569 179.431 566 196 566H221V580.857C221 584.078 222.317 587.166 224.661 589.443C227.005 591.721 230.185 593 233.5 593C236.815 593 239.995 591.721 242.339 589.443C244.683 587.166 246 584.078 246 580.857V566H546V580.857C546 584.078 547.317 587.166 549.661 589.443C552.005 591.721 555.185 593 558.5 593C561.815 593 564.995 591.721 567.339 589.443C569.683 587.166 571 584.078 571 580.857V566H596C612.569 566 626 552.569 626 536V256C626 239.431 612.569 226 596 226H196ZM196 246C190.477 246 186 250.477 186 256V536C186 541.523 190.477 546 196 546H596C601.523 546 606 541.523 606 536V256C606 250.477 601.523 246 596 246H196Z" fill="#BEBEBE"/>
+  </g>
+</svg>
diff --git a/immichFrame.Web/src/lib/components/elements/LoadingElement.svelte b/immichFrame.Web/src/lib/components/elements/LoadingElement.svelte
index a5cb5b8c..c4af6a74 100644
--- a/immichFrame.Web/src/lib/components/elements/LoadingElement.svelte
+++ b/immichFrame.Web/src/lib/components/elements/LoadingElement.svelte
@@ -1,3 +1,8 @@
 <div class="place-self-center">
-	<img id="logo" class="h-[50vh] sm:h-[50vh] md:h-[40vh] lg:h-[30vh]" src="/logo.svg" alt="logo" />
+	<img
+		id="logo"
+		class="h-[50vh] sm:h-[50vh] md:h-[40vh] lg:h-[30vh]"
+		src="/logo-splash-animated.svg"
+		alt="logo"
+	/>
 </div>
diff --git a/immichFrame.Web/static/logo-splash-animated.svg b/immichFrame.Web/static/logo-splash-animated.svg
new file mode 100644
index 00000000..8c231dd8
--- /dev/null
+++ b/immichFrame.Web/static/logo-splash-animated.svg
@@ -0,0 +1,36 @@
+<svg width="792" height="792" viewBox="0 0 792 792" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .icon {
+      animation: floatGlow 3s ease-in-out infinite;
+      transform-origin: center center;
+    }
+    
+    @keyframes floatGlow {
+      0%, 100% {
+        transform: translateY(0) scale(1);
+        filter: drop-shadow(0 0 10px rgba(250, 41, 33, 0.3))
+                drop-shadow(0 0 20px rgba(24, 194, 73, 0.2));
+      }
+      50% {
+        transform: translateY(-12px) scale(1.02);
+        filter: drop-shadow(0 0 25px rgba(250, 41, 33, 0.5))
+                drop-shadow(0 0 50px rgba(24, 194, 73, 0.4));
+      }
+    }
+  </style>
+  
+  <g class="icon">
+    <!-- Red segment -->
+    <path d="M465.583 373C445.515 338.465 414.331 301.822 375.638 267.627C373.104 265.389 370.558 263.179 368 261H512C501.922 297.225 485.7 337.086 465.583 373Z" fill="#FA2921"/>
+    <!-- Pink segment -->
+    <path d="M396 322.195C356.795 330.567 312.129 348.861 267.472 375.047C243.188 389.294 220.503 405.047 201 421V269.002C201 264.583 204.596 261 209.032 261H328.149C351.723 278.829 375.224 299.832 396 322.195Z" fill="#ED79B5"/>
+    <!-- Yellow segment -->
+    <path d="M438 455.11C464.831 425.356 490.234 384.372 510.949 337.013C522.196 311.3 531.26 285.303 537.637 261H582.952C587.396 261 591 264.585 591 269.007V461.97C547.119 467.584 490.419 465.452 438 455.11Z" fill="#FFB400"/>
+    <!-- Blue segment -->
+    <path d="M325.404 373C321.302 412.627 324.954 460.485 336.109 510.757C337.623 517.579 339.257 524.338 341 531H209.004C204.584 531 201 527.426 201 523.019V454.117C232.911 424.795 278.507 394.596 325.404 373Z" fill="#1E83F7"/>
+    <!-- Green segment -->
+    <path d="M352 455C388.63 471.112 435.512 482.425 487.037 487.364C523.957 490.908 560.173 490.716 591 487.1V523.034C591 527.433 587.407 531 582.976 531H367.049C360.303 506.539 355.066 480.59 352 455Z" fill="#18C249"/>
+    <!-- Frame -->
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M196 226C179.431 226 166 239.431 166 256V536C166 552.569 179.431 566 196 566H221V580.857C221 584.078 222.317 587.166 224.661 589.443C227.005 591.721 230.185 593 233.5 593C236.815 593 239.995 591.721 242.339 589.443C244.683 587.166 246 584.078 246 580.857V566H546V580.857C546 584.078 547.317 587.166 549.661 589.443C552.005 591.721 555.185 593 558.5 593C561.815 593 564.995 591.721 567.339 589.443C569.683 587.166 571 584.078 571 580.857V566H596C612.569 566 626 552.569 626 536V256C626 239.431 612.569 226 596 226H196ZM196 246C190.477 246 186 250.477 186 256V536C186 541.523 190.477 546 196 546H596C601.523 546 606 541.523 606 536V256C606 250.477 601.523 246 596 246H196Z" fill="#BEBEBE"/>
+  </g>
+</svg>

From 68f72b4ffa6047aca2cb28e910dea00e46f9259c Mon Sep 17 00:00:00 2001
From: JW-CH <17313367+JW-CH@users.noreply.github.com>
Date: Fri, 6 Feb 2026 14:49:14 +0000
Subject: [PATCH 2/2] change splash logo

---
 design/immichframe-splash-animated.svg        | 110 +++++++++++++-----
 .../static/logo-splash-animated.svg           | 110 +++++++++++++-----
 2 files changed, 160 insertions(+), 60 deletions(-)

diff --git a/design/immichframe-splash-animated.svg b/design/immichframe-splash-animated.svg
index 8c231dd8..718ef097 100644
--- a/design/immichframe-splash-animated.svg
+++ b/design/immichframe-splash-animated.svg
@@ -1,36 +1,86 @@
 <svg width="792" height="792" viewBox="0 0 792 792" fill="none" xmlns="http://www.w3.org/2000/svg">
   <style>
-    .icon {
-      animation: floatGlow 3s ease-in-out infinite;
-      transform-origin: center center;
-    }
-    
-    @keyframes floatGlow {
-      0%, 100% {
-        transform: translateY(0) scale(1);
-        filter: drop-shadow(0 0 10px rgba(250, 41, 33, 0.3))
-                drop-shadow(0 0 20px rgba(24, 194, 73, 0.2));
-      }
-      50% {
-        transform: translateY(-12px) scale(1.02);
-        filter: drop-shadow(0 0 25px rgba(250, 41, 33, 0.5))
-                drop-shadow(0 0 50px rgba(24, 194, 73, 0.4));
-      }
+    .segment {
+      opacity: 0;
+    }
+    
+    /* Frame fades in first */
+    .frame {
+      opacity: 0;
+      animation: fadeFrame 0.3s ease-out 0s forwards;
+    }
+    
+    /* Red - unfolds from top */
+    .segment-1 { 
+      transform-origin: 440px 261px;
+      animation: unfoldTop 0.6s ease-out 0.2s forwards; 
+    }
+    
+    /* Pink - unfolds from left */
+    .segment-2 { 
+      transform-origin: 201px 341px;
+      animation: unfoldLeft 0.6s ease-out 0.35s forwards; 
+    }
+    
+    /* Yellow - unfolds from right */
+    .segment-3 { 
+      transform-origin: 591px 361px;
+      animation: unfoldRight 0.6s ease-out 0.5s forwards; 
+    }
+    
+    /* Blue - unfolds from left */
+    .segment-4 { 
+      transform-origin: 201px 452px;
+      animation: unfoldLeft 0.6s ease-out 0.65s forwards; 
+    }
+    
+    /* Green - unfolds from bottom */
+    .segment-5 { 
+      transform-origin: 471px 531px;
+      animation: unfoldBottom 0.6s ease-out 0.8s forwards; 
+    }
+    
+    @keyframes fadeFrame {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    
+    @keyframes unfoldTop {
+      from { opacity: 0; transform: rotateX(90deg); }
+      to { opacity: 1; transform: rotateX(0); }
+    }
+    
+    @keyframes unfoldBottom {
+      from { opacity: 0; transform: rotateX(-90deg); }
+      to { opacity: 1; transform: rotateX(0); }
+    }
+    
+    @keyframes unfoldLeft {
+      from { opacity: 0; transform: rotateY(-90deg); }
+      to { opacity: 1; transform: rotateY(0); }
+    }
+    
+    @keyframes unfoldRight {
+      from { opacity: 0; transform: rotateY(90deg); }
+      to { opacity: 1; transform: rotateY(0); }
     }
   </style>
   
-  <g class="icon">
-    <!-- Red segment -->
-    <path d="M465.583 373C445.515 338.465 414.331 301.822 375.638 267.627C373.104 265.389 370.558 263.179 368 261H512C501.922 297.225 485.7 337.086 465.583 373Z" fill="#FA2921"/>
-    <!-- Pink segment -->
-    <path d="M396 322.195C356.795 330.567 312.129 348.861 267.472 375.047C243.188 389.294 220.503 405.047 201 421V269.002C201 264.583 204.596 261 209.032 261H328.149C351.723 278.829 375.224 299.832 396 322.195Z" fill="#ED79B5"/>
-    <!-- Yellow segment -->
-    <path d="M438 455.11C464.831 425.356 490.234 384.372 510.949 337.013C522.196 311.3 531.26 285.303 537.637 261H582.952C587.396 261 591 264.585 591 269.007V461.97C547.119 467.584 490.419 465.452 438 455.11Z" fill="#FFB400"/>
-    <!-- Blue segment -->
-    <path d="M325.404 373C321.302 412.627 324.954 460.485 336.109 510.757C337.623 517.579 339.257 524.338 341 531H209.004C204.584 531 201 527.426 201 523.019V454.117C232.911 424.795 278.507 394.596 325.404 373Z" fill="#1E83F7"/>
-    <!-- Green segment -->
-    <path d="M352 455C388.63 471.112 435.512 482.425 487.037 487.364C523.957 490.908 560.173 490.716 591 487.1V523.034C591 527.433 587.407 531 582.976 531H367.049C360.303 506.539 355.066 480.59 352 455Z" fill="#18C249"/>
-    <!-- Frame -->
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M196 226C179.431 226 166 239.431 166 256V536C166 552.569 179.431 566 196 566H221V580.857C221 584.078 222.317 587.166 224.661 589.443C227.005 591.721 230.185 593 233.5 593C236.815 593 239.995 591.721 242.339 589.443C244.683 587.166 246 584.078 246 580.857V566H546V580.857C546 584.078 547.317 587.166 549.661 589.443C552.005 591.721 555.185 593 558.5 593C561.815 593 564.995 591.721 567.339 589.443C569.683 587.166 571 584.078 571 580.857V566H596C612.569 566 626 552.569 626 536V256C626 239.431 612.569 226 596 226H196ZM196 246C190.477 246 186 250.477 186 256V536C186 541.523 190.477 546 196 546H596C601.523 546 606 541.523 606 536V256C606 250.477 601.523 246 596 246H196Z" fill="#BEBEBE"/>
-  </g>
+  <!-- Frame appears first -->
+  <path class="frame" fill-rule="evenodd" clip-rule="evenodd" d="M196 226C179.431 226 166 239.431 166 256V536C166 552.569 179.431 566 196 566H221V580.857C221 584.078 222.317 587.166 224.661 589.443C227.005 591.721 230.185 593 233.5 593C236.815 593 239.995 591.721 242.339 589.443C244.683 587.166 246 584.078 246 580.857V566H546V580.857C546 584.078 547.317 587.166 549.661 589.443C552.005 591.721 555.185 593 558.5 593C561.815 593 564.995 591.721 567.339 589.443C569.683 587.166 571 584.078 571 580.857V566H596C612.569 566 626 552.569 626 536V256C626 239.431 612.569 226 596 226H196ZM196 246C190.477 246 186 250.477 186 256V536C186 541.523 190.477 546 196 546H596C601.523 546 606 541.523 606 536V256C606 250.477 601.523 246 596 246H196Z" fill="#BEBEBE"/>
+  
+  <!-- Red segment - unfolds from top -->
+  <path class="segment segment-1" d="M465.583 373C445.515 338.465 414.331 301.822 375.638 267.627C373.104 265.389 370.558 263.179 368 261H512C501.922 297.225 485.7 337.086 465.583 373Z" fill="#FA2921"/>
+  
+  <!-- Pink segment - unfolds from left -->
+  <path class="segment segment-2" d="M396 322.195C356.795 330.567 312.129 348.861 267.472 375.047C243.188 389.294 220.503 405.047 201 421V269.002C201 264.583 204.596 261 209.032 261H328.149C351.723 278.829 375.224 299.832 396 322.195Z" fill="#ED79B5"/>
+  
+  <!-- Yellow segment - unfolds from right -->
+  <path class="segment segment-3" d="M438 455.11C464.831 425.356 490.234 384.372 510.949 337.013C522.196 311.3 531.26 285.303 537.637 261H582.952C587.396 261 591 264.585 591 269.007V461.97C547.119 467.584 490.419 465.452 438 455.11Z" fill="#FFB400"/>
+  
+  <!-- Blue segment - unfolds from left -->
+  <path class="segment segment-4" d="M325.404 373C321.302 412.627 324.954 460.485 336.109 510.757C337.623 517.579 339.257 524.338 341 531H209.004C204.584 531 201 527.426 201 523.019V454.117C232.911 424.795 278.507 394.596 325.404 373Z" fill="#1E83F7"/>
+  
+  <!-- Green segment - unfolds from bottom -->
+  <path class="segment segment-5" d="M352 455C388.63 471.112 435.512 482.425 487.037 487.364C523.957 490.908 560.173 490.716 591 487.1V523.034C591 527.433 587.407 531 582.976 531H367.049C360.303 506.539 355.066 480.59 352 455Z" fill="#18C249"/>
 </svg>
diff --git a/immichFrame.Web/static/logo-splash-animated.svg b/immichFrame.Web/static/logo-splash-animated.svg
index 8c231dd8..718ef097 100644
--- a/immichFrame.Web/static/logo-splash-animated.svg
+++ b/immichFrame.Web/static/logo-splash-animated.svg
@@ -1,36 +1,86 @@
 <svg width="792" height="792" viewBox="0 0 792 792" fill="none" xmlns="http://www.w3.org/2000/svg">
   <style>
-    .icon {
-      animation: floatGlow 3s ease-in-out infinite;
-      transform-origin: center center;
-    }
-    
-    @keyframes floatGlow {
-      0%, 100% {
-        transform: translateY(0) scale(1);
-        filter: drop-shadow(0 0 10px rgba(250, 41, 33, 0.3))
-                drop-shadow(0 0 20px rgba(24, 194, 73, 0.2));
-      }
-      50% {
-        transform: translateY(-12px) scale(1.02);
-        filter: drop-shadow(0 0 25px rgba(250, 41, 33, 0.5))
-                drop-shadow(0 0 50px rgba(24, 194, 73, 0.4));
-      }
+    .segment {
+      opacity: 0;
+    }
+    
+    /* Frame fades in first */
+    .frame {
+      opacity: 0;
+      animation: fadeFrame 0.3s ease-out 0s forwards;
+    }
+    
+    /* Red - unfolds from top */
+    .segment-1 { 
+      transform-origin: 440px 261px;
+      animation: unfoldTop 0.6s ease-out 0.2s forwards; 
+    }
+    
+    /* Pink - unfolds from left */
+    .segment-2 { 
+      transform-origin: 201px 341px;
+      animation: unfoldLeft 0.6s ease-out 0.35s forwards; 
+    }
+    
+    /* Yellow - unfolds from right */
+    .segment-3 { 
+      transform-origin: 591px 361px;
+      animation: unfoldRight 0.6s ease-out 0.5s forwards; 
+    }
+    
+    /* Blue - unfolds from left */
+    .segment-4 { 
+      transform-origin: 201px 452px;
+      animation: unfoldLeft 0.6s ease-out 0.65s forwards; 
+    }
+    
+    /* Green - unfolds from bottom */
+    .segment-5 { 
+      transform-origin: 471px 531px;
+      animation: unfoldBottom 0.6s ease-out 0.8s forwards; 
+    }
+    
+    @keyframes fadeFrame {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    
+    @keyframes unfoldTop {
+      from { opacity: 0; transform: rotateX(90deg); }
+      to { opacity: 1; transform: rotateX(0); }
+    }
+    
+    @keyframes unfoldBottom {
+      from { opacity: 0; transform: rotateX(-90deg); }
+      to { opacity: 1; transform: rotateX(0); }
+    }
+    
+    @keyframes unfoldLeft {
+      from { opacity: 0; transform: rotateY(-90deg); }
+      to { opacity: 1; transform: rotateY(0); }
+    }
+    
+    @keyframes unfoldRight {
+      from { opacity: 0; transform: rotateY(90deg); }
+      to { opacity: 1; transform: rotateY(0); }
     }
   </style>
   
-  <g class="icon">
-    <!-- Red segment -->
-    <path d="M465.583 373C445.515 338.465 414.331 301.822 375.638 267.627C373.104 265.389 370.558 263.179 368 261H512C501.922 297.225 485.7 337.086 465.583 373Z" fill="#FA2921"/>
-    <!-- Pink segment -->
-    <path d="M396 322.195C356.795 330.567 312.129 348.861 267.472 375.047C243.188 389.294 220.503 405.047 201 421V269.002C201 264.583 204.596 261 209.032 261H328.149C351.723 278.829 375.224 299.832 396 322.195Z" fill="#ED79B5"/>
-    <!-- Yellow segment -->
-    <path d="M438 455.11C464.831 425.356 490.234 384.372 510.949 337.013C522.196 311.3 531.26 285.303 537.637 261H582.952C587.396 261 591 264.585 591 269.007V461.97C547.119 467.584 490.419 465.452 438 455.11Z" fill="#FFB400"/>
-    <!-- Blue segment -->
-    <path d="M325.404 373C321.302 412.627 324.954 460.485 336.109 510.757C337.623 517.579 339.257 524.338 341 531H209.004C204.584 531 201 527.426 201 523.019V454.117C232.911 424.795 278.507 394.596 325.404 373Z" fill="#1E83F7"/>
-    <!-- Green segment -->
-    <path d="M352 455C388.63 471.112 435.512 482.425 487.037 487.364C523.957 490.908 560.173 490.716 591 487.1V523.034C591 527.433 587.407 531 582.976 531H367.049C360.303 506.539 355.066 480.59 352 455Z" fill="#18C249"/>
-    <!-- Frame -->
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M196 226C179.431 226 166 239.431 166 256V536C166 552.569 179.431 566 196 566H221V580.857C221 584.078 222.317 587.166 224.661 589.443C227.005 591.721 230.185 593 233.5 593C236.815 593 239.995 591.721 242.339 589.443C244.683 587.166 246 584.078 246 580.857V566H546V580.857C546 584.078 547.317 587.166 549.661 589.443C552.005 591.721 555.185 593 558.5 593C561.815 593 564.995 591.721 567.339 589.443C569.683 587.166 571 584.078 571 580.857V566H596C612.569 566 626 552.569 626 536V256C626 239.431 612.569 226 596 226H196ZM196 246C190.477 246 186 250.477 186 256V536C186 541.523 190.477 546 196 546H596C601.523 546 606 541.523 606 536V256C606 250.477 601.523 246 596 246H196Z" fill="#BEBEBE"/>
-  </g>
+  <!-- Frame appears first -->
+  <path class="frame" fill-rule="evenodd" clip-rule="evenodd" d="M196 226C179.431 226 166 239.431 166 256V536C166 552.569 179.431 566 196 566H221V580.857C221 584.078 222.317 587.166 224.661 589.443C227.005 591.721 230.185 593 233.5 593C236.815 593 239.995 591.721 242.339 589.443C244.683 587.166 246 584.078 246 580.857V566H546V580.857C546 584.078 547.317 587.166 549.661 589.443C552.005 591.721 555.185 593 558.5 593C561.815 593 564.995 591.721 567.339 589.443C569.683 587.166 571 584.078 571 580.857V566H596C612.569 566 626 552.569 626 536V256C626 239.431 612.569 226 596 226H196ZM196 246C190.477 246 186 250.477 186 256V536C186 541.523 190.477 546 196 546H596C601.523 546 606 541.523 606 536V256C606 250.477 601.523 246 596 246H196Z" fill="#BEBEBE"/>
+  
+  <!-- Red segment - unfolds from top -->
+  <path class="segment segment-1" d="M465.583 373C445.515 338.465 414.331 301.822 375.638 267.627C373.104 265.389 370.558 263.179 368 261H512C501.922 297.225 485.7 337.086 465.583 373Z" fill="#FA2921"/>
+  
+  <!-- Pink segment - unfolds from left -->
+  <path class="segment segment-2" d="M396 322.195C356.795 330.567 312.129 348.861 267.472 375.047C243.188 389.294 220.503 405.047 201 421V269.002C201 264.583 204.596 261 209.032 261H328.149C351.723 278.829 375.224 299.832 396 322.195Z" fill="#ED79B5"/>
+  
+  <!-- Yellow segment - unfolds from right -->
+  <path class="segment segment-3" d="M438 455.11C464.831 425.356 490.234 384.372 510.949 337.013C522.196 311.3 531.26 285.303 537.637 261H582.952C587.396 261 591 264.585 591 269.007V461.97C547.119 467.584 490.419 465.452 438 455.11Z" fill="#FFB400"/>
+  
+  <!-- Blue segment - unfolds from left -->
+  <path class="segment segment-4" d="M325.404 373C321.302 412.627 324.954 460.485 336.109 510.757C337.623 517.579 339.257 524.338 341 531H209.004C204.584 531 201 527.426 201 523.019V454.117C232.911 424.795 278.507 394.596 325.404 373Z" fill="#1E83F7"/>
+  
+  <!-- Green segment - unfolds from bottom -->
+  <path class="segment segment-5" d="M352 455C388.63 471.112 435.512 482.425 487.037 487.364C523.957 490.908 560.173 490.716 591 487.1V523.034C591 527.433 587.407 531 582.976 531H367.049C360.303 506.539 355.066 480.59 352 455Z" fill="#18C249"/>
 </svg>