diff --git a/apps/site/app/[locale]/error.tsx b/apps/site/app/[locale]/error.tsx
index 8f642ae363cc6..a62a830d1f1ed 100644
--- a/apps/site/app/[locale]/error.tsx
+++ b/apps/site/app/[locale]/error.tsx
@@ -19,7 +19,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
 
       <main>
         500
-        <h1 className="special -mt-4">
+        <h1 className="special -mt-4 text-center">
           {t('layouts.error.internalServerError.title')}
         </h1>
         <p className="-mt-4 max-w-sm text-center text-lg">
diff --git a/apps/site/app/[locale]/not-found.tsx b/apps/site/app/[locale]/not-found.tsx
index bb7b53628c709..44d8839a42d7d 100644
--- a/apps/site/app/[locale]/not-found.tsx
+++ b/apps/site/app/[locale]/not-found.tsx
@@ -18,14 +18,18 @@ const NotFoundPage: FC = () => {
 
       <main>
         404
-        <h1 className="special -mt-4">{t('layouts.error.notFound.title')}</h1>
-        <div className="my-4 flex items-center justify-center">
-          <Image
-            src="/static/images/node-mascot.svg"
-            alt="The Node.js mascot"
-            height={114.69}
-            width={100}
-          />
+        <h1 className="special -mt-4 text-center">
+          {t('layouts.error.notFound.title')}
+        </h1>
+        <div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
+          <div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
+            <Image
+              src="/static/images/node-mascot.svg"
+              alt="The Node.js mascot"
+              height={114.69}
+              width={100}
+            />
+          </div>
         </div>
         <p className="-mt-4 max-w-sm text-center text-lg">
           {t('layouts.error.notFound.description')}
diff --git a/apps/site/app/global-error.tsx b/apps/site/app/global-error.tsx
index 20d1cb618a735..6cab08ae716f9 100644
--- a/apps/site/app/global-error.tsx
+++ b/apps/site/app/global-error.tsx
@@ -21,7 +21,9 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
 
             <main>
               500
-              <h1 className="special -mt-4">Internal Server Error</h1>
+              <h1 className="special -mt-4 text-center">
+                Internal Server Error
+              </h1>
               <p className="-mt-4 max-w-sm text-center text-lg">
                 This page has thrown a non-recoverable error.
               </p>
diff --git a/apps/site/public/static/images/smoke.gif b/apps/site/public/static/images/smoke.gif
new file mode 100644
index 0000000000000..df014e59c9d17
Binary files /dev/null and b/apps/site/public/static/images/smoke.gif differ
diff --git a/apps/site/styles/effects.css b/apps/site/styles/effects.css
index bececd16aae56..874840458209a 100644
--- a/apps/site/styles/effects.css
+++ b/apps/site/styles/effects.css
@@ -10,3 +10,34 @@ h1.special {
     md:leading-[4rem]
     md:-tracking-[0.06rem];
 }
+
+.turtle {
+  @apply animate-surf
+    absolute
+    z-10
+    translate-x-0
+    translate-y-0;
+}
+
+.turtle img {
+  @apply h-auto
+    w-24
+    md:w-48;
+}
+
+.turtle::after {
+  @apply absolute
+    -left-full
+    top-[20%]
+    -z-10
+    block
+    h-36
+    w-36
+    -rotate-90
+    select-none
+    bg-[url('/static/images/smoke.gif')]
+    opacity-[0.15]
+    content-['']
+    md:-left-1/2
+    md:top-1/2;
+}
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
index 60992522b0ca3..4ea21ba1b8050 100644
--- a/apps/site/tailwind.config.ts
+++ b/apps/site/tailwind.config.ts
@@ -139,6 +139,18 @@ export default {
       spacing: { '4.5': '1.125rem', '18': '4.5rem' },
       aria: { current: 'current="page"' },
       maxWidth: { '8xl': '95rem' },
+      animation: {
+        surf: 'surf 1s infinite ease-in-out',
+      },
+      keyframes: {
+        surf: {
+          '0%': { transform: 'translate(0, 0)' },
+          '25%': { transform: 'translate(0, 6px)' },
+          '50%': { transform: 'translate(0, -6px)' },
+          '75%': { transform: 'translate(0, 3px)' },
+          '100%': { transform: 'translate(0, 0)' },
+        },
+      },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],