@windrun-huaiin/third-ui 29.2.1 → 30.1.0

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/anime-beam-frame.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useEffect, useId, useRef } from 'react';
+import { type WAAPIAnimation, waapi } from 'animejs';
+import { useReducedMotion } from 'motion/react';
+import {
+  BASE_DURATION_SECONDS,
+  BeamFrameShell,
+  BeamSvgLayer,
+  normalizeDuration,
+  useInteractiveRunning,
+  useMeasuredFrameSize,
+  type BeamFrameProps,
+  type FrameSize,
+} from '../beam-frame-config';
+
+export type { BeamFrameProps, BeamFrameTone } from '../beam-frame-config';
+
+function AnimeBeamLayer({
+  isRunning,
+  duration,
+  radius,
+  size,
+}: {
+  isRunning: boolean;
+  duration: number;
+  radius?: number;
+  size: FrameSize;
+}) {
+  const aroundBeamRef = useRef<SVGGElement | null>(null);
+  const animationRef = useRef<WAAPIAnimation | null>(null);
+  const hasStartedRef = useRef(false);
+  const auraGradientId = useId().replace(/:/g, '');
+  const softGlowFilterId = useId().replace(/:/g, '');
+
+  useEffect(() => {
+    const node = aroundBeamRef.current;
+
+    if (!node) {
+      return undefined;
+    }
+
+    if (isRunning) {
+      hasStartedRef.current = true;
+    }
+
+    node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+
+    if (!isRunning) {
+      animationRef.current?.pause();
+      return undefined;
+    }
+
+    if (animationRef.current) {
+      animationRef.current.speed = BASE_DURATION_SECONDS / duration;
+      animationRef.current.play();
+      return undefined;
+    }
+
+    animationRef.current = waapi.animate(node, {
+      strokeDashoffset: [0, -1],
+      loop: true,
+      duration: BASE_DURATION_SECONDS * 1000,
+      ease: 'linear',
+    });
+    animationRef.current.speed = BASE_DURATION_SECONDS / duration;
+
+    return undefined;
+  }, [duration, isRunning]);
+
+  useEffect(() => {
+    return () => {
+      animationRef.current?.revert();
+      animationRef.current = null;
+    };
+  }, []);
+
+  return (
+    <BeamSvgLayer
+      beamRef={aroundBeamRef}
+      auraGradientId={auraGradientId}
+      softGlowFilterId={softGlowFilterId}
+      radius={radius}
+      size={size}
+    />
+  );
+}
+
+export function AnimeBeamFrame(props: BeamFrameProps) {
+  const {
+    children,
+    active = false,
+    interactive = true,
+    tone = 'theme',
+    duration = BASE_DURATION_SECONDS,
+    radius,
+    className,
+  } = props;
+  const prefersReducedMotion = useReducedMotion();
+  const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+  const shouldRun = isRunning && !prefersReducedMotion;
+  const normalizedDuration = normalizeDuration(duration);
+  const { ref, size } = useMeasuredFrameSize<HTMLDivElement>();
+
+  return (
+    <BeamFrameShell
+      active={active}
+      interactive={interactive}
+      tone={tone}
+      duration={normalizedDuration}
+      radius={radius}
+      className={className}
+      isRunning={shouldRun}
+      interactionProps={interactionProps}
+      rootRef={ref}
+      renderBeam={() => (
+        <AnimeBeamLayer
+          isRunning={shouldRun}
+          duration={normalizedDuration}
+          radius={radius}
+          size={size}
+        />
+      )}
+    >
+      {children}
+    </BeamFrameShell>
+  );
+}

package/src/main/anime/anime-spiral-loading.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useEffect, useMemo, useRef } from 'react';
+import { createTimeline, stagger, type Timeline, utils } from 'animejs';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+const DEFAULT_DOT_COUNT = 2024;
+const DEFAULT_DURATION = 10000;
+const DEFAULT_DISTANCE_REM = 20;
+const DEFAULT_DOT_SIZE_EM = 1;
+const DEFAULT_FONT_SIZE = 20;
+
+export interface AnimeSpiralLoadingProps {
+  className?: string;
+  dotCount?: number;
+  duration?: number;
+  distanceRem?: number;
+  dotSizeEm?: number;
+  fontSize?: number;
+  paused?: boolean;
+}
+
+export function AnimeSpiralLoading({
+  className,
+  dotCount = DEFAULT_DOT_COUNT,
+  duration = DEFAULT_DURATION,
+  distanceRem = DEFAULT_DISTANCE_REM,
+  dotSizeEm = DEFAULT_DOT_SIZE_EM,
+  fontSize = DEFAULT_FONT_SIZE,
+  paused = false,
+}: AnimeSpiralLoadingProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const timelineRef = useRef<Timeline | null>(null);
+  const pausedRef = useRef(paused);
+  const safeDotCount = Math.max(1, Math.floor(dotCount));
+  const safeDuration = Math.max(1, duration);
+  const angle = useMemo(
+    () => (index: number) => utils.mapRange(index, 0, safeDotCount, 0, Math.PI * 100),
+    [safeDotCount]
+  );
+  const dots = useMemo(
+    () => Array.from({ length: safeDotCount }, (_, index) => {
+      const hue = utils.round((360 / safeDotCount) * index, 0);
+
+      return {
+        id: index,
+        background: `hsl(${hue}, 60%, 60%)`,
+      };
+    }),
+    [safeDotCount]
+  );
+
+  pausedRef.current = paused;
+
+  useEffect(() => {
+    const root = rootRef.current;
+
+    if (!root) {
+      return undefined;
+    }
+
+    const dotNodes = Array.from(root.querySelectorAll<HTMLElement>('[data-anime-spiral-dot]'));
+
+    timelineRef.current?.revert();
+    timelineRef.current = createTimeline()
+      .add(dotNodes, {
+        x: (_target: unknown, i: number) => `${Math.sin(angle(i)) * distanceRem}rem`,
+        y: (_target: unknown, i: number) => `${Math.cos(angle(i)) * distanceRem}rem`,
+        scale: [0, 0.4, 0.2, 0.9, 0],
+        playbackEase: 'inOutSine',
+        loop: true,
+        duration: safeDuration,
+      }, stagger([0, safeDuration]))
+      .init()
+      .seek(safeDuration);
+
+    if (pausedRef.current) {
+      timelineRef.current.pause();
+    }
+
+    return () => {
+      timelineRef.current?.revert();
+      timelineRef.current = null;
+    };
+  }, [angle, distanceRem, safeDuration, dots]);
+
+  useEffect(() => {
+    const timeline = timelineRef.current;
+
+    if (!timeline) {
+      return;
+    }
+
+    if (paused) {
+      timeline.pause();
+    } else {
+      timeline.play();
+    }
+  }, [paused]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn('relative h-dvh w-full overflow-hidden', className)}
+      style={{ fontSize }}
+      aria-hidden="true"
+    >
+      {dots.map(dot => (
+        <div
+          key={dot.id}
+          data-anime-spiral-dot=""
+          className="absolute left-1/2 top-1/2 rounded-full"
+          style={{
+            width: `${dotSizeEm}em`,
+            height: `${dotSizeEm}em`,
+            margin: `${dotSizeEm / -2}em 0 0 ${dotSizeEm / -2}em`,
+            backgroundColor: dot.background,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/main/anime/index.ts

@@ -0,0 +1,10 @@
+'use client';
+
+export {
+  AnimeBeamFrame,
+  type BeamFrameProps,
+  type BeamFrameTone,
+} from './anime-beam-frame';
+
+export { AnimeSpiralLoading, type AnimeSpiralLoadingProps } from './anime-spiral-loading';
+export { AnimeNotFoundPage, type AnimeNotFoundPageProps } from './anime-404-page';