feat(ui): add glitch effect on header title

mateusfg7 · Jun 12, 2023 · c206c40 · c206c40
1 parent f5e988c
commit c206c40
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/app/(blog)/components/header/index.tsx b/src/app/(blog)/components/header/index.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
+import { useGlitch } from 'react-powerglitch'
 
 import { ToggleTheme } from './toggle-theme'
 import { Search } from './search'
@@ -11,6 +12,11 @@ export function Header() {
   const [scrollPosition, setScrollPosition] = useState(0)
   const [maxScrollValue, setMaxScrollValue] = useState(0)
 
+  const glitch = useGlitch({
+    timing: { duration: 5000, easing: 'ease-in' },
+    glitchTimeSpan: { start: 0.2, end: 0.8 }
+  })
+
   function handleScroll() {
     if (window) {
       setScrollPosition(window.scrollY)
@@ -64,6 +70,7 @@ export function Header() {
       <div className="blog-content-w m-auto flex flex-col flex-wrap items-center justify-between md:flex-row">
         <Link href="/">
           <h1
+            ref={glitch.ref}
             className={`text-blue-700 dark:text-blue-500 ${
               isNotOnTop ? 'font-medium' : 'font-base'
             } font-chivo-mono hover:cursor-pointer`}