feat(ui): add shine effect on planned badge

mateusfg7 · May 29, 2023 · d69daf6 · d69daf6
1 parent e73dbbc
commit d69daf6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/src/shared/components/post-list/post-link.tsx b/src/shared/components/post-list/post-link.tsx
@@ -20,7 +20,8 @@ export function PostLink({ post, hideYear = false }: Props) {
           <h2 className="text-xl font-bold text-neutral-700 dark:text-neutral-500">
             {post.title}
           </h2>
-          <span className="group-hover:animate-wiggle group-hover:animate-infinite">
+          <span className="relative overflow-hidden rounded-lg">
+            <span className="shine group-hover:animate-shine group-hover:animate-duration-[1.5s]" />
             <PlannedBadge />
           </span>
         </div>

diff --git a/src/styles/utilities.css b/src/styles/utilities.css
@@ -12,4 +12,8 @@
     @apply border border-red-600;
     @apply bg-blue-500;
   }
+
+  .shine {
+    @apply absolute top-0 left-0 h-full w-1/3 -translate-x-full -skew-x-20 bg-white/0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 text-white/0;
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,6 +4,9 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      skew: {
+        20: '20deg'
+      },
       fontFamily: {
         'chivo-mono': ['"Chivo Mono"', 'cursive']
       },
@@ -18,7 +21,8 @@ module.exports = {
         slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
         slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
         overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)'
+        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+        shine: 'shine 4s linear 0s forwards'
       },
       keyframes: {
         typing: {
@@ -48,6 +52,11 @@ module.exports = {
         contentShow: {
           from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
           to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' }
+        },
+        shine: {
+          '20%, 100%': {
+            transform: 'translateX(300%)'
+          }
         }
       }
     }