feat: archive box animation

components/work/listing/archive/ArchiveCheckbox.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { connectToggleRefinement } from "react-instantsearch-core";
 
 import { Checkbox } from "components/common/input/checkbox/Checkbox";
@@ -13,8 +14,23 @@ export const ArchiveCheckbox = connectToggleRefinement(
       onChange={(checked) => refine(checked)}
       className={styles.checkbox}
     >
-
-      {currentRefinement ? "📦" : "📂"}
+      <div className={styles.wrapper}>
+        <div className={clsx(styles.box, styles.active && { [styles.active]: !currentRefinement })}>
+          <div className={clsx(styles.side, styles.cover)}>
+            <div className={clsx(styles.coverSide, styles.left)}></div>
+            <div className={clsx(styles.coverSide, styles.right)}></div>
+            <div className={clsx(styles.coverSide, styles.front)}></div>
+            <div className={clsx(styles.coverSide, styles.back)}></div>
+          </div>
+
+          <div className={styles.label}>Archive</div>
+          <div className={clsx(styles.side, styles.front)}></div>
+          <div className={clsx(styles.side, styles.back)}></div>
+          <div className={clsx(styles.side, styles.left)}></div>
+          <div className={clsx(styles.side, styles.right)}></div>
+          <div className={clsx(styles.side, styles.bottom)}></div>
+        </div>
+      </div>
     </Checkbox>
   ),
 );

components/work/listing/archive/archiveCheckbox.module.scss

@@ -1,4 +1,135 @@
 .checkbox {
-  font-size: 2.5rem;
   -webkit-tap-highlight-color: transparent;
+
+  .wrapper {
+    --size: 22px;
+    width: var(--size);
+    height: var(--size);
+    perspective: 2000px;
+    transform: translateY(-3px);
+
+    .box {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transform-style: preserve-3d;
+      transform: rotate3d(1, 0, 0, -23deg) rotate3d(0, 1, 0, 50deg)
+        translate3D(calc(var(--size) / 2), calc(var(--size) / 3), calc(var(--size) / 2));
+
+      .label {
+        position: absolute;
+        transform: rotate3d(0, 1, 0, -90deg)
+          translate3d(calc(var(--size) / 4), calc(var(--size) * (6 / 10)), calc(var(--size) / 2));
+        background: var(--gray-200);
+        padding: 0.05rem 0.25rem;
+        font-size: 0.2rem;
+        border-radius: 1rem;
+        font-weight: bold;
+        color: var(--black-200);
+      }
+
+      .side {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: #f4b168;
+
+        &.front {
+          transform: translate3d(0, 0, calc(var(--size) / 2));
+          background-color: #ffce7c;
+        }
+
+        &.back {
+          background: linear-gradient(45deg, #f4b168, #ffce7c);
+          transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, calc(var(--size) / 2));
+        }
+
+        &.left {
+          transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, calc(var(--size) / 2));
+        }
+
+        &.right {
+          transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, calc(var(--size) / 2));
+          background: linear-gradient(to left, #f4b168, #ffce7c);
+        }
+
+        &.bottom {
+          transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, calc(var(--size) / 2));
+        }
+
+        &.cover {
+          transform-style: preserve-3d;
+          background: transparent;
+          transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, calc(var(--size) / 2));
+
+          .coverSide {
+            position: absolute;
+            width: 50%;
+            height: 100%;
+            background-color: #f3c07b;
+            transition: transform 0.3s ease-in-out;
+            --border-size: calc(var(--size) / 7);
+
+            &.left {
+              transform: rotate3d(0, 1, 0, 0deg);
+              transform-origin: left center;
+              border-right: var(--border-size) solid #a56953;
+            }
+
+            &.right {
+              transform: rotate3d(0, 1, 0, 0deg);
+              right: 0;
+              transform-origin: right center;
+              border-left: var(--border-size) solid #a56953;
+            }
+
+            &.front {
+              transform: rotate3d(1, 0, 0, 0deg);
+              width: 100%;
+              height: 50%;
+              transform-origin: center top;
+              transition-delay: 0.2s;
+              border-bottom: var(--border-size) solid #a56953;
+            }
+
+            &.back {
+              transform: rotate3d(1, 0, 0, 0deg);
+              bottom: 0;
+              width: 100%;
+              height: 50%;
+              transform-origin: center bottom;
+              transition-delay: 0.2s;
+              border-top: var(--border-size) solid #a56953;
+            }
+          }
+        }
+      }
+
+      &.active {
+        .cover {
+          .coverSide {
+            &.left {
+              transform: rotate3d(0, 1, 0, -190deg);
+              transition-delay: 0.2s;
+            }
+
+            &.right {
+              transform: rotate3d(0, 1, 0, 140deg);
+              transition-delay: 0.2s;
+            }
+
+            &.front {
+              transform: rotate3d(1, 0, 0, 140deg);
+              transition-delay: 0s;
+            }
+
+            &.back {
+              transform: rotate3d(1, 0, 0, -190deg);
+              transition-delay: 0s;
+            }
+          }
+        }
+      }
+    }
+  }
 }

components/work/listing/projectsListing.module.scss

@@ -12,7 +12,7 @@
 
   .search {
     @include mixins.flex;
-    gap: 1.5rem;
+    gap: 1rem;
   }
 
   .empty {

components/work/listing/thumbnail/projectThumbnail.module.scss

@@ -92,7 +92,7 @@
       }
 
       img {
-        filter: grayscale(85%);
+        filter: grayscale(65%);
       }
     }
   }