z

app/global.css

@@ -10,3 +10,20 @@
     text-wrap: pretty;
     text-wrap: balance;
 }
+
+.animate-creeper-out {
+    animation: creeper-out 0.5s ease-in-out forwards;
+}
+
+@keyframes creeper-out {
+    0% {
+        transform: scale(1) translateY(0);
+    }
+    99% {
+        transform: scale(0.5) translateY(100%);
+    }
+    100% {
+        transform: scale(0);
+        opacity: 0;
+    }
+}

components/POAPModal/Creeper.tsx

@@ -4,11 +4,13 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 'use client';
 
+import cslx from 'clsx';
 import { useEffect, useState } from 'react';
 
 export const Creeper = () => {
     const [blinkAnimationTriggered, setBlinkAnimationTriggered] =
         useState(false);
+    const [clickCount, setClickCount] = useState(0);
 
     // every 5 seconds, blink
     useEffect(() => {
@@ -23,11 +25,17 @@ export const Creeper = () => {
     }, [0]);
 
     return (
-        <div className="absolute top-0 left-4 h-12 sm:w-32 hidden xs:block -translate-y-[1px]">
+        <div
+            className={cslx(
+                'absolute top-0 left-4 h-12 sm:w-32 -z-10',
+                clickCount > 5 ? 'animate-creeper-out' : 'hidden xs:block' // -translate-y-[1px]
+            )}
+        >
             <div
                 className="relative w-fit h-full mx-auto"
                 onClick={() => {
                     setBlinkAnimationTriggered(true);
+                    setClickCount(clickCount + 1);
                     setTimeout(() => {
                         setBlinkAnimationTriggered(false);
                     }, 250);

components/POAPModal/POAPModal.tsx

@@ -42,10 +42,10 @@ export const POAPModal: FC<{
     return (
         <div className="fixed bottom-0 inset-x-0 px-2 pb-4">
             <div className="w-full max-w-md3 mx-auto">
-                <div className="p-4 text-center relative">
+                <div className="p-4 text-center relative flex flex-col items-center">
                     <Creeper />
                     <div className="absolute inset-x-0 bottom-0 top-12 bg-[#14032C] rounded-3xl -z-10"></div>
-                    <div className="w-24 h-24 bg-slate-100 rounded-full mx-auto">
+                    <div className="w-24 h-24 bg-slate-100 rounded-full">
                         <img
                             src={metadata.image_url}
                             alt=""

hooks/useIYKRef.ts

@@ -53,6 +53,6 @@ export const useIYKRef = async (reference?: string) => {
 
     const result: IYKRefResponse = await response.json();
 
-    // return DEBUG_VALUE as IYKRefResponse;
-    return result;
+    return DEBUG_VALUE as IYKRefResponse;
+    // return result;
 };

package.json

@@ -16,6 +16,7 @@
         "@adraffy/ens-normalize": "^1.10.0",
         "@ens-tools/format": "^0.0.2",
         "autoprefixer": "^10.4.14",
+        "clsx": "^2.0.0",
         "next": "^13.4.10",
         "postcss": "^8.4.26",
         "react": "^18.2.0",