src/app/globals.css

@@ -11,7 +11,7 @@
   0%, 100% {
     transform: translate(0px, 0px) scale(1, 1);
   }
-  15% {
+  10% {
     transform: translate(0px, 14px) scale(1.2, 0.9);
   }
 }

src/app/not-found.tsx

@@ -20,8 +20,9 @@ export default function NotFound() {
         </noscript>
         <WobblingImage
           images={{
-            idle: "/images/coralz_0.png",
-            poked: "/images/coralz_1.png"
+            idle: "/images/coralz_idle.png",
+            aware: "/images/coralz_scared.png",
+            poked: "/images/coralz_poked.png"
           }}
         />
         <div className="-mt-2">

src/components/landing-image.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 import { FloatingLabel } from "./floating-label"
 
 export const LandingImage = () => (
-  <FloatingLabel placeholder="Coral Glasses ❤️. Alert: NOT MY WORK! character by JoelG, See terms and conditions">
+  <FloatingLabel placeholder="Coral Glasses ❤️. Alert: NOT MY WORK! See the end of the page">
     <Image
       className="mb-8 mx-auto"
       alt="Coral <3"

src/components/wobbling-image.tsx

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef, useState } from "react"
 interface WobblingImageInterface {
   images: {
     idle: string;
+    aware?: string;
     poked?: string;
     weird?: string;
   }
@@ -17,6 +18,7 @@ function WobblingImage ({
 }: WobblingImageInterface) {
   const size = 400;
   const [isPoked, setPoked] = useState(false);
+  const [isAware, setAware] = useState(false);
   const pokeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const [isAnimating, setIsAnimating] = useState(false);
@@ -70,8 +72,8 @@ function WobblingImage ({
     if (!audioBuffer || !audioContextRef.current) return;
 
     const context = audioContextRef.current;
-    const changeToLowPitch = Math.floor(Math.random() * 10);
-    const randomPitch = Math.random() * 0.2 + (changeToLowPitch == 1 ? 0.25 : 0.85);
+    const changeToLowPitch = Math.floor(Math.random() * 66);
+    const randomPitch = Math.random() * 0.38 + (changeToLowPitch == 1 ? 0.25 : 0.75);
 
     const source = context.createBufferSource();
     source.buffer = audioBuffer;
@@ -86,6 +88,9 @@ function WobblingImage ({
 
 
   function handleClick() {
+    const pokedDuration = 700 + Math.floor(Math.random() * 100)
+    if (!isAware) setAware(true);
+
     setIsAnimating(false);
     requestAnimationFrame(() => setIsAnimating(true));
     
@@ -101,7 +106,7 @@ function WobblingImage ({
     setPoked(true);
     pokeTimeoutRef.current = setTimeout(() => {
       setPoked(false);
-    }, 600);
+    }, pokedDuration);
   }
 
   function handleAnimationEnd() {
@@ -112,8 +117,8 @@ function WobblingImage ({
     <div className="">
       <div
         className={clsx(
-          "relative mx-auto cursor-grab h-[400px] select-none",
-          isAnimating && "animate-[click-bounce_250ms_ease-out]"
+          "relative mx-auto cursor-grab active:cursor-grabbing h-[400px] select-none",
+          isAnimating && "animate-[click-bounce_230ms_ease-out]"
         )}
         onClick={handleClick}
         onAnimationEnd={handleAnimationEnd}
@@ -126,7 +131,7 @@ function WobblingImage ({
         <Image
           className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", isPoked ? "opacity-0" : "opacity-100")}
           alt="clip1"
-          src={images.idle}
+          src={isAware ? (images.aware || images.idle) : images.idle}
           width={size}
           height={size}
           draggable={false}