feat(app): better logo

unionlabs · Jul 3, 2024 · 932b838 · 932b838
1 parent a2e1ebb
commit 932b838
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/app/src/lib/components/spinning-outline-logo.svelte b/app/src/lib/components/spinning-outline-logo.svelte
@@ -1,8 +1,9 @@
 <script lang="ts"> 
   import Square from './spinning-logo/square.svelte';
 	let cubeWidth = 64;
-	let gap = 32;
-	let logoWidth= cubeWidth * 4 + gap * 3;
+	let cubeCount = 12;
+	let gap = 64;
+	let logoWidth= cubeWidth * cubeCount + gap * (cubeCount - 1);
 	let cubesY = cubeWidth * 2 + gap;
 	$: cubeDelta = (20 - cubeWidth) / 2;
 	let strokeWidth = 4;
@@ -13,10 +14,9 @@
   <div class="logo-scene max-size-full overflow-hidden size-full">
   <!--<div class="logo-scene max-size-full overflow-hidden size-full" style={`width: ${logoWidth}px; height: ${cubeWidth}px`};}>!-->
     <div class="logo" style={`left: calc(50% - (${logoWidth}px / 2)); top: calc(50% - (${cubeWidth}px / 2)); width: ${logoWidth}px; height: ${cubeWidth}px`};}>
-      <Square {strokeWidth} size={cubeWidth} x={0} y={0}/>
-      <Square {strokeWidth} size={cubeWidth} x={cubeWidth + gap} y={0}/>
-      <Square {strokeWidth} size={cubeWidth} x={(cubeWidth + gap) * 2} y={0}/>
-      <Square {strokeWidth} size={cubeWidth} x={(cubeWidth + gap) * 3} y={0}/>
+      {#each {length: cubeCount} as _, i}
+        <Square {strokeWidth} size={cubeWidth} x={(cubeWidth + gap) * i} y={0}/>
+      {/each}
     </div>
   </div>
 </div>
@@ -25,16 +25,16 @@
 
 @keyframes spinning-logo {
   0% {transform: rotateY(0deg) translateX(0);}
-  10% {transform: rotateY(90deg) translateX(0);}
-  20% {transform: rotateY(90deg) translateX(-1000px);}
-  30% {transform: rotateY(90deg) translateX(0);}
+  10% {transform: rotateY(90deg) translateX(200px);}
+  30% {transform: rotateY(90deg) translateX(-1000px);}
+  60% {transform: rotateY(90deg) translateX(200);}
   80% {transform: rotateY(360deg);}
   100% {transform: rotateY(0deg);}
 }
 
 
 .logo-scene {
-  perspective: 1000px;
+  perspective: 500px;
   position: relative;
 }