@windrun-huaiin/third-ui 30.0.0 → 30.1.0

package/dist/main/snake-loading-frame.js

@@ -7,6 +7,7 @@ var react = require('motion/react');
 var utils = require('@windrun-huaiin/lib/utils');
 var animeBeamFrame = require('./anime/anime-beam-frame.js');
 require('animejs');
+require('./anime/anime-404-page.js');
 
 const DEFAULT_THEME_COLOR = '#3b82f6';
 const EXIT_DURATION_MS = 260;

package/dist/main/snake-loading-frame.mjs

@@ -5,6 +5,7 @@ import { motion } from 'motion/react';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { AnimeBeamFrame } from './anime/anime-beam-frame.mjs';
 import 'animejs';
+import './anime/anime-404-page.mjs';
 
 const DEFAULT_THEME_COLOR = '#3b82f6';
 const EXIT_DURATION_MS = 260;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "30.0.0",
+  "version": "30.1.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -243,9 +243,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/contracts": "^30.0.0",
-    "@windrun-huaiin/base-ui": "^30.0.0",
-    "@windrun-huaiin/lib": "^30.0.0"
+    "@windrun-huaiin/base-ui": "^30.1.0",
+    "@windrun-huaiin/lib": "^30.0.0",
+    "@windrun-huaiin/contracts": "^30.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/fuma/fuma-page-genarator.tsx

@@ -3,6 +3,7 @@ import { ReactNode, ReactElement, cloneElement, type CSSProperties } from 'react
 import { TocFooterWrapper } from './mdx/toc-footer-wrapper';
 import type { LLMCopyButtonProps, LLMCopyButton } from './mdx/toc-base';
 import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib/utils';
+import { notFound } from 'next/navigation';
 import { PortableClerkTOC, PortableClerkTOCTitle } from './mdx/toc-clerk-portable';
 import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
@@ -36,14 +37,6 @@ interface FumaPageParams {
    * The copy button component, must be LLMCopyButton
    */
   copyButtonComponent?: ReactElement<LLMCopyButtonProps, typeof LLMCopyButton>;
-  /* 
-   * The site icon component to use in NotFoundPage
-   */
-  siteIcon: ReactNode;
-  /* 
-   * The fallback page component to use when the page is not found
-   */
-  FallbackPage: React.ComponentType<{ siteIcon: ReactNode }>;
   /*
    * Supported locales for generating alternates metadata, defaults to ['en']
    */
@@ -89,8 +82,6 @@ export function createFumaPage({
   mdxSourceDir,
   githubBaseUrl,
   copyButtonComponent,
-  siteIcon,
-  FallbackPage,
   supportedLocales = ['en'],
   showBreadcrumb = true,
   showTableOfContent = true,
@@ -138,18 +129,7 @@ export function createFumaPage({
       totalElapsedMs: durationMs(pageStartedAt),
     });
     if (!page) {
-      return (
-        <DocsPage
-          full
-          breadcrumb={{ enabled: false }}
-          footer={{ enabled: false }}
-          tableOfContent={{ enabled: false }}
-          tableOfContentPopover={{ enabled: false }}
-          className="max-w-none px-0 py-0"
-        >
-          <FallbackPage siteIcon={siteIcon} />
-        </DocsPage>
-      );
+      notFound();
     }
 
     const path = githubBaseUrl ? `${mdxSourceDir}/${page.path}` : undefined;

package/src/main/404-page.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { NotFoundIcon } from '@windrun-huaiin/base-ui/components/shared';
+import {
+  THEME_BUTTON_GRADIENT_CLASS_MAP,
+  themeBgColor,
+  themeButtonGradientClass,
+  themeIconColor,
+  themeViaColor,
+  type SupportedThemeColor,
+} from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useEffect, useState, type ReactNode } from 'react';
+
+interface NotFoundPageProps {
+  siteIcon: ReactNode;
+  errorIcon?: ReactNode;
+  className?: string;
+  compact?: boolean;
+  themeClass?: SupportedThemeColor;
+  animated?: boolean;
+}
+
+const THEME_BG_CLASS_MAP: Record<SupportedThemeColor, string> = {
+  'text-purple-500': 'bg-purple-500/20',
+  'text-orange-500': 'bg-orange-500/20',
+  'text-indigo-500': 'bg-indigo-500/20',
+  'text-emerald-500': 'bg-emerald-500/20',
+  'text-rose-500': 'bg-rose-500/20',
+};
+
+const THEME_VIA_CLASS_MAP: Record<SupportedThemeColor, string> = {
+  'text-purple-500': 'via-purple-500/20',
+  'text-orange-500': 'via-orange-500/20',
+  'text-indigo-500': 'via-indigo-500/20',
+  'text-emerald-500': 'via-emerald-500/20',
+  'text-rose-500': 'via-rose-500/20',
+};
+
+export function NotFoundPage({
+  siteIcon,
+  errorIcon,
+  className,
+  compact = false,
+  themeClass,
+  animated = true,
+}: NotFoundPageProps) {
+  const [glitchText, setGlitchText] = useState('404');
+  const homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/';
+  const activeThemeClass = themeClass ?? themeIconColor;
+  const activeGradientClass = themeClass ? THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : themeButtonGradientClass;
+  const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : themeBgColor;
+  const activeViaClass = themeClass ? THEME_VIA_CLASS_MAP[themeClass] : themeViaColor;
+
+  useEffect(() => {
+    if (!animated) {
+      setGlitchText('404');
+      return undefined;
+    }
+
+    const glitchChars = ['4', '0', '4', '?', '#', '!', '*', '&', '%', '$'];
+
+    const interval = setInterval(() => {
+      if (Math.random() < 0.5) {
+        setGlitchText('404');
+      } else {
+        const randomChars = Array.from(
+          { length: 3 },
+          () => glitchChars[Math.floor(Math.random() * glitchChars.length)]
+        ).join('');
+        setGlitchText(randomChars);
+      }
+    }, 600);
+
+    return () => clearInterval(interval);
+  }, [animated]);
+
+  return (
+    <div className={cn('relative flex w-full flex-col items-center justify-center px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className)}>
+      <div className="text-center space-y-8 max-w-2xl">
+        <div className="relative flex justify-center">
+          <h1
+            className={cn(
+              'text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none',
+              activeGradientClass
+            )}
+            style={{
+              fontFamily: 'Montserrat, monospace',
+              textShadow: '0 0 30px rgba(172, 98, 253, 0.3)',
+              letterSpacing: '0.1em',
+            }}
+          >
+            {glitchText}
+          </h1>
+          <div className="absolute inset-0 pointer-events-none">
+            <div className={cn('h-full w-full bg-linear-to-b from-transparent to-transparent', animated && 'animate-pulse', activeViaClass)} />
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl md:text-3xl font-semibold text-foreground">
+            Page Not Found
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-md mx-auto leading-relaxed">
+            The page you&#39;re looking for doesn&#39;t exist
+          </p>
+          <a
+            href={homeUrl}
+            className={cn(
+              'inline-flex text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80',
+              activeThemeClass,
+              'decoration-current'
+            )}
+          >
+            Back to Homepage
+          </a>
+        </div>
+
+        <div className="flex justify-center items-center gap-8 pt-8 opacity-60">
+          <a
+            href={homeUrl}
+            className="flex items-center gap-2 text-sm text-muted-foreground transition-opacity hover:opacity-80"
+          >
+            {siteIcon}
+            <span>Woops!</span>
+          </a>
+          <div className={cn('w-2 h-2 rounded-full', animated && 'animate-ping', activeBgClass)} />
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            {errorIcon ?? <NotFoundIcon />}
+            <span>Error Code: 404</span>
+          </div>
+        </div>
+      </div>
+
+      <div className={cn('pointer-events-none inset-0 overflow-hidden -z-10', compact ? 'absolute' : 'fixed')}>
+        <div
+          className="absolute inset-0 opacity-[0.02] dark:opacity-[0.05]"
+          style={{
+            backgroundImage: `
+                linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
+              `,
+            backgroundSize: '50px 50px',
+          }}
+        />
+
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div
+            key={i}
+            className={cn('absolute w-2 h-2 rounded-full', animated && 'animate-bounce', activeBgClass)}
+            style={{
+              left: `${20 + i * 15}%`,
+              top: `${30 + (i % 3) * 20}%`,
+              animationDelay: `${i * 0.5}s`,
+              animationDuration: `${2 + i * 0.3}s`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/main/anime/anime-404-page.tsx

@@ -0,0 +1,344 @@
+'use client';
+
+import {
+  THEME_BUTTON_GRADIENT_CLASS_MAP,
+  themeBgColor,
+  themeButtonGradientClass,
+  themeIconColor,
+  themeSvgIconColor,
+  type SupportedThemeColor,
+} from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { animate, createTimeline, stagger, type JSAnimation, type Timeline } from 'animejs';
+import { useReducedMotion } from 'motion/react';
+import { useCallback, useEffect, useMemo, useRef, type ReactNode } from 'react';
+
+export interface AnimeNotFoundPageProps {
+  siteIcon: ReactNode;
+  homeUrl?: string;
+  className?: string;
+  compact?: boolean;
+  themeClass?: SupportedThemeColor;
+  themeColor?: string;
+  ambientAnimated?: boolean;
+  doorOpen?: boolean;
+  onDoorOpenChange?: (open: boolean) => void;
+}
+
+const THEME_BG_CLASS_MAP: Record<SupportedThemeColor, string> = {
+  'text-purple-500': 'bg-purple-500/20',
+  'text-orange-500': 'bg-orange-500/20',
+  'text-indigo-500': 'bg-indigo-500/20',
+  'text-emerald-500': 'bg-emerald-500/20',
+  'text-rose-500': 'bg-rose-500/20',
+};
+
+const dust = Array.from({ length: 10 }, (_, index) => ({
+  id: index,
+  left: `${12 + index * 8}%`,
+  top: `${18 + (index % 5) * 13}%`,
+  size: 3 + (index % 3),
+}));
+
+export function AnimeNotFoundPage({
+  siteIcon,
+  homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/',
+  className,
+  compact = false,
+  themeClass,
+  themeColor,
+  ambientAnimated = true,
+  doorOpen,
+  onDoorOpenChange,
+}: AnimeNotFoundPageProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const timelineRef = useRef<Timeline | null>(null);
+  const shimmerRef = useRef<JSAnimation | null>(null);
+  const doorAnimationRef = useRef<JSAnimation | null>(null);
+  const lightAnimationRef = useRef<JSAnimation | null>(null);
+  const handleAnimationRef = useRef<JSAnimation | null>(null);
+  const messageAnimationRef = useRef<JSAnimation | null>(null);
+  const isDoorOpenRef = useRef(doorOpen ?? false);
+  const prefersReducedMotion = useReducedMotion();
+  const activeThemeClass = themeClass ?? themeIconColor;
+  const activeGradientClass = themeClass ? THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : themeButtonGradientClass;
+  const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : themeBgColor;
+  const doorStyle = useMemo(
+    () => ({
+      '--not-found-theme': themeColor ?? themeSvgIconColor,
+    }) as React.CSSProperties,
+    [themeColor]
+  );
+
+  useEffect(() => {
+    const root = rootRef.current;
+
+    if (!root || prefersReducedMotion) {
+      return undefined;
+    }
+
+    const door = root.querySelector<HTMLElement>('[data-not-found-door]');
+    const light = root.querySelector<HTMLElement>('[data-not-found-light]');
+    const message = root.querySelector<HTMLElement>('[data-not-found-message]');
+    const plate = root.querySelector<HTMLElement>('[data-not-found-plate]');
+    const handle = root.querySelector<HTMLElement>('[data-not-found-handle]');
+    const dustNodes = Array.from(root.querySelectorAll<HTMLElement>('[data-not-found-dust]'));
+
+    if (!door || !light || !plate || !handle) {
+      return undefined;
+    }
+
+    door.style.transform = 'rotateY(-2deg) translateX(0)';
+    light.style.opacity = '0.2';
+    light.style.transform = 'scaleX(0.78)';
+    if (message) {
+      message.style.opacity = '0';
+      message.style.transform = 'translateY(8px)';
+    }
+
+    timelineRef.current?.revert();
+    shimmerRef.current?.revert();
+    timelineRef.current = null;
+    shimmerRef.current = null;
+
+    if (ambientAnimated) {
+      timelineRef.current = createTimeline({ loop: true })
+        .add(plate, {
+          translateY: [0, -3, 0],
+          scale: [1, 1.025, 1],
+          duration: 1400,
+          ease: 'inOutSine',
+        })
+        .add(plate, {
+          translateY: [0, -3, 0],
+          scale: [1, 1.025, 1],
+          duration: 1400,
+          ease: 'inOutSine',
+        }, '+=900')
+        .add(dustNodes, {
+          opacity: [0, 0.72, 0],
+          translateY: [14, -18],
+          translateX: (_target: unknown, index: number) => (index % 2 === 0 ? 10 : -10),
+          scale: [0.4, 1, 0.6],
+          duration: 1800,
+          delay: stagger(80),
+          ease: 'outSine',
+        }, '<+=200');
+
+      shimmerRef.current = animate(root.querySelectorAll<HTMLElement>('[data-not-found-shimmer]'), {
+        translateX: ['-120%', '120%'],
+        opacity: [0, 0.8, 0],
+        duration: 2400,
+        delay: stagger(160),
+        ease: 'inOutSine',
+        loop: true,
+      });
+    }
+
+    return () => {
+      timelineRef.current?.revert();
+      timelineRef.current = null;
+      shimmerRef.current?.revert();
+      shimmerRef.current = null;
+      doorAnimationRef.current?.revert();
+      doorAnimationRef.current = null;
+      lightAnimationRef.current?.revert();
+      lightAnimationRef.current = null;
+      handleAnimationRef.current?.revert();
+      handleAnimationRef.current = null;
+      messageAnimationRef.current?.revert();
+      messageAnimationRef.current = null;
+    };
+  }, [ambientAnimated, prefersReducedMotion]);
+
+  const setDoorOpen = useCallback((nextOpen: boolean) => {
+    const root = rootRef.current;
+
+    if (!root) {
+      return;
+    }
+
+    const door = root.querySelector<HTMLElement>('[data-not-found-door]');
+    const light = root.querySelector<HTMLElement>('[data-not-found-light]');
+    const handle = root.querySelector<HTMLElement>('[data-not-found-handle]');
+    const message = root.querySelector<HTMLElement>('[data-not-found-message]');
+
+    if (!door || !light || !handle) {
+      return;
+    }
+
+    isDoorOpenRef.current = nextOpen;
+
+    doorAnimationRef.current?.pause();
+    lightAnimationRef.current?.pause();
+    handleAnimationRef.current?.pause();
+    messageAnimationRef.current?.pause();
+    doorAnimationRef.current = null;
+    lightAnimationRef.current = null;
+    handleAnimationRef.current = null;
+    messageAnimationRef.current = null;
+
+    if (prefersReducedMotion) {
+      door.style.transform = nextOpen ? 'rotateY(-72deg) translateX(-12px)' : 'rotateY(-2deg) translateX(0)';
+      light.style.opacity = nextOpen ? '0.8' : '0.2';
+      light.style.transform = nextOpen ? 'scaleX(1.28)' : 'scaleX(0.78)';
+      if (message) {
+        message.style.opacity = nextOpen ? '1' : '0';
+        message.style.transform = nextOpen ? 'translateY(0)' : 'translateY(8px)';
+      }
+      return;
+    }
+
+    doorAnimationRef.current = animate(door, {
+      rotateY: nextOpen ? -72 : -2,
+      translateX: nextOpen ? -12 : 0,
+      duration: 1050,
+      ease: 'inOutCubic',
+    });
+    lightAnimationRef.current = animate(light, {
+      opacity: nextOpen ? 0.8 : 0.2,
+      scaleX: nextOpen ? 1.28 : 0.78,
+      duration: 1050,
+      ease: 'inOutSine',
+    });
+    handleAnimationRef.current = animate(handle, {
+      scale: [1, 1.05, 1],
+      duration: 520,
+      ease: 'inOutSine',
+    });
+    if (message) {
+      messageAnimationRef.current = animate(message, {
+        opacity: nextOpen ? [0, 1] : [1, 0],
+        translateY: nextOpen ? [10, 0] : [0, 4, 10],
+        scale: nextOpen ? [0.96, 1] : [1, 0.98],
+        duration: nextOpen ? 620 : 520,
+        delay: nextOpen ? 320 : 280,
+        ease: nextOpen ? 'outCubic' : 'inOutSine',
+      });
+    }
+  }, [prefersReducedMotion]);
+
+  useEffect(() => {
+    if (doorOpen === undefined || doorOpen === isDoorOpenRef.current) {
+      return;
+    }
+
+    setDoorOpen(doorOpen);
+  }, [doorOpen, setDoorOpen]);
+
+  const toggleDoor = () => {
+    const nextOpen = !isDoorOpenRef.current;
+
+    if (doorOpen !== undefined) {
+      onDoorOpenChange?.(nextOpen);
+      return;
+    }
+
+    setDoorOpen(nextOpen);
+    onDoorOpenChange?.(nextOpen);
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn('relative flex w-full items-center justify-center overflow-hidden px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className)}
+      style={doorStyle}
+    >
+      <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.75),transparent_34%),linear-gradient(180deg,rgba(250,250,250,0.96),rgba(244,244,245,0.72))] dark:bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.08),transparent_34%),linear-gradient(180deg,rgba(24,24,27,0.96),rgba(9,9,11,0.92))]" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-1/2 bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.05))] dark:bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.34))]" />
+
+      <div className="flex w-full max-w-3xl flex-col items-center gap-5">
+        <section className="text-center">
+          <h3 className={cn('whitespace-nowrap text-[clamp(2.15rem,8vw,3.4rem)] font-black leading-none tracking-normal bg-linear-to-r bg-clip-text text-transparent', activeGradientClass)}>
+            Page Not Found
+          </h3>
+        </section>
+
+        <section className="flex w-full justify-center">
+          <div className="relative aspect-[0.78] w-full max-w-[270px] sm:max-w-[315px] md:max-w-[330px] perspective-distant">
+            <div
+              data-not-found-light=""
+              className="absolute left-[14%] top-[7%] h-[86%] w-[72%] rounded-[28px] bg-[radial-gradient(circle_at_50%_45%,rgba(255,255,255,0.96),color-mix(in_srgb,var(--not-found-theme)_42%,transparent)_42%,transparent_72%)] opacity-25 blur-xl"
+            />
+            <div className="absolute inset-[4%] rounded-[32px] border border-black/10 bg-neutral-950/5 shadow-2xl shadow-black/10 dark:border-white/10 dark:bg-white/5" />
+            <div className="absolute inset-[8%] rounded-[26px] bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(228,228,231,0.86))] shadow-[inset_0_1px_0_rgba(255,255,255,0.85)] dark:bg-[linear-gradient(180deg,rgba(39,39,42,0.92),rgba(24,24,27,0.96))]" />
+            <p
+              data-not-found-message=""
+              className="pointer-events-none absolute right-[16%] top-[29%] z-2 max-w-[46%] text-right text-sm font-medium leading-6 text-muted-foreground opacity-100"
+            >
+              <span className="block">The page</span>
+              <span className="block">you&#39;re looking for</span>
+              <span className="block">doesn&#39;t exist</span>
+            </p>
+            <button
+              type="button"
+              className="absolute inset-[8%] z-1 rounded-[26px] outline-none focus-visible:ring-2 focus-visible:ring-(--not-found-theme)"
+              aria-label="Toggle the 404 door"
+              onClick={toggleDoor}
+            />
+
+            <div
+              data-not-found-door=""
+              className="absolute inset-[8%] z-10 origin-left rounded-[26px] border border-black/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.92),rgba(212,212,216,0.9))] shadow-2xl shadow-black/20 will-change-transform dark:border-white/10 dark:bg-[linear-gradient(145deg,rgba(63,63,70,0.96),rgba(24,24,27,0.98))]"
+            >
+              <div className="absolute inset-4 overflow-hidden rounded-[20px]">
+                <div data-not-found-shimmer="" className="absolute inset-y-0 w-1/3 -skew-x-12 bg-white/35 blur-md dark:bg-white/12" />
+                <a
+                  href={homeUrl}
+                  className="absolute inset-x-5 bottom-5 flex h-[39%] flex-col items-center justify-center gap-2 rounded-2xl border border-black/10 bg-white/25 text-sm text-muted-foreground transition-opacity hover:opacity-80 dark:border-white/10 dark:bg-white/5"
+                >
+                  <span className="inline-flex items-center gap-2">
+                    {siteIcon}
+                    <span>Woops!</span>
+                  </span>
+                  <span className={cn('text-xs font-semibold underline underline-offset-4', activeThemeClass, 'decoration-current')}>
+                    Back to Homepage
+                  </span>
+                </a>
+              </div>
+
+              <div
+                data-not-found-plate=""
+                className="absolute left-1/2 top-[18%] flex h-[88px] w-[156px] -translate-x-1/2 items-center justify-center overflow-hidden rounded-2xl border border-black/10 bg-white/86 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-black/30"
+              >
+                <div data-not-found-shimmer="" className="absolute inset-y-0 w-1/2 -skew-x-12 bg-white/60 blur-md dark:bg-white/15" />
+                <span className={cn('relative text-5xl font-black tabular-nums bg-linear-to-r bg-clip-text text-transparent', activeGradientClass)}>
+                  404
+                </span>
+              </div>
+
+              <button
+                type="button"
+                data-not-found-handle=""
+                className="group absolute right-[1%] top-[39%] z-10 flex size-12 items-center justify-center rounded-full outline-none ring-offset-2 transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-(--not-found-theme)"
+                aria-label="Toggle the 404 door"
+                onClick={toggleDoor}
+              >
+                <span className="relative grid h-8 w-6 place-items-center rounded-full border border-black/10 bg-white/50 shadow-inner shadow-black/10 backdrop-blur-sm transform-[rotateY(18deg)] dark:border-white/15 dark:bg-black/25">
+                  <span className="absolute size-10 rounded-full bg-(--not-found-theme) opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-25" />
+                  <span className="relative grid size-4 place-items-center rounded-full border border-black/10 bg-(--not-found-theme) shadow-lg shadow-black/25 dark:border-white/15">
+                    <span className="absolute right-1 top-1 size-1 rounded-full bg-white/75" />
+                  </span>
+                </span>
+              </button>
+            </div>
+
+            {dust.map(dot => (
+              <span
+                key={dot.id}
+                data-not-found-dust=""
+                className={cn('absolute rounded-full opacity-0', activeBgClass)}
+                style={{
+                  left: dot.left,
+                  top: dot.top,
+                  width: dot.size,
+                  height: dot.size,
+                }}
+              />
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/src/main/anime/index.ts

@@ -7,3 +7,4 @@ export {
 } from './anime-beam-frame';
 
 export { AnimeSpiralLoading, type AnimeSpiralLoadingProps } from './anime-spiral-loading';
+export { AnimeNotFoundPage, type AnimeNotFoundPageProps } from './anime-404-page';

package/src/main/index.ts

@@ -2,6 +2,7 @@
 
 // Lightweight common client components.
 export * from './go-to-top';
+export * from './404-page';
 export * from './loading';
 export * from './nprogress-bar';
 export * from './rich-text-expert'