@zmzai/theme 0.1.0

package/src/components/file-upload/FileUpload.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import {
+  useRef,
+  useState,
+  useCallback,
+  type ReactNode,
+  type DragEvent,
+  type ChangeEvent,
+} from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface FileUploadProps {
+  /** Called with each file selected/dropped */
+  onChange: (file: File) => void;
+  /** Accepted file types, e.g. ".pdf,image/*" */
+  accept?: string;
+  /** Allow multiple file selection (onChange still fires per file) */
+  multiple?: boolean;
+  className?: string;
+  /** Custom inner content; defaults to the upload prompt */
+  children?: ReactNode;
+}
+
+/**
+ * FileUpload — drag-and-drop upload zone with a dotted grid backdrop.
+ *
+ * Renders a clickable drop area. Supports drag-over highlight and
+ * click-to-browse via a hidden `<input type="file">`. Based on Aceternity's
+ * File Upload, adapted to the zmzai monochrome palette.
+ *
+ * @example
+ * <FileUpload accept="image/*" onChange={(f) => upload(f)}>
+ *   <span>拖拽或点击上传</span>
+ * </FileUpload>
+ */
+export function FileUpload({
+  onChange,
+  accept,
+  multiple,
+  className,
+  children,
+}: FileUploadProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false);
+
+  const handleFiles = useCallback(
+    (files: FileList | null) => {
+      if (!files || files.length === 0) return;
+      if (multiple) {
+        Array.from(files).forEach((f) => onChange(f));
+      } else {
+        onChange(files[0]);
+      }
+    },
+    [onChange, multiple]
+  );
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragging(false);
+      handleFiles(e.dataTransfer.files);
+    },
+    [handleFiles]
+  );
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      handleFiles(e.target.files);
+      // reset so selecting the same file again still fires onChange
+      e.target.value = "";
+    },
+    [handleFiles]
+  );
+
+  return (
+    <motion.div
+      role="button"
+      tabIndex={0}
+      onClick={() => inputRef.current?.click()}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          inputRef.current?.click();
+        }
+      }}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      whileHover={{ scale: 1.005 }}
+      whileTap={{ scale: 0.995 }}
+      className={cn(
+        "relative flex min-h-48 w-full cursor-pointer flex-col items-center justify-center gap-4 overflow-hidden rounded-xl border-2 border-dashed p-8 text-center transition-colors duration-200",
+        "border-line bg-surface hover:border-ink/40 hover:bg-surface-2",
+        dragging && "border-ink bg-surface-2",
+        className
+      )}
+    >
+      {/* Dotted grid background */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-60"
+        style={{
+          backgroundImage:
+            "radial-gradient(currentColor 1px, transparent 1px)",
+          backgroundSize: "16px 16px",
+          color: "rgba(0,0,0,0.05)",
+        }}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col items-center gap-3">
+        {children ?? (
+          <>
+            <UploadIcon />
+            <div className="space-y-1">
+              <p className="text-sm font-medium text-ink">
+                拖拽文件到此处，或点击浏览
+              </p>
+              <p className="text-xs text-ink-3">
+                {accept ? `支持 ${accept}` : "支持任意类型文件"}
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleChange}
+        className="hidden"
+      />
+    </motion.div>
+  );
+}
+
+function UploadIcon() {
+  return (
+    <svg
+      className="h-8 w-8 text-ink-2"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 3v12" />
+      <path d="m7 8 5-5 5 5" />
+      <path d="M5 21h14" />
+    </svg>
+  );
+}

package/src/components/file-upload/index.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from "./FileUpload";
+export type { FileUploadProps } from "./FileUpload";

package/src/components/flip-words/FlipWords.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState, type HTMLAttributes } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface FlipWordsProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Words to cycle through */
+  words: string[];
+  /** Milliseconds each word stays before flipping */
+  duration?: number;
+}
+
+/**
+ * FlipWords — cycles through words with a 3D flip animation.
+ *
+ * The current word rotates up and out on the X axis while the next word
+ * rotates in from the bottom. Keep this container inline for natural flow.
+ *
+ * @example
+ * <FlipWords words={["faster", "smoother", "minimal"]} duration={3000} />
+ */
+export function FlipWords({
+  words,
+  duration = 3000,
+  className,
+  ...props
+}: FlipWordsProps) {
+  const [index, setIndex] = useState(0);
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    if (words.length <= 1) return;
+    const id = setInterval(() => {
+      setCurrent((prev) => (prev + 1) % words.length);
+    }, duration);
+    return () => clearInterval(id);
+  }, [words.length, duration]);
+
+  // keep `index` in sync with `current` for exit animations
+  useEffect(() => {
+    setIndex(current);
+  }, [current]);
+
+  return (
+    <span
+      className={cn("relative inline-block", className)}
+      style={{ perspective: "1000px" }}
+      {...props}
+    >
+      <span className="invisible whitespace-pre">
+        {words.reduce((a, b) => (a.length >= b.length ? a : b), "")}
+      </span>
+      <span className="absolute inset-0 inline-flex items-center justify-start">
+        <AnimatePresence mode="wait">
+          <motion.span
+            key={current}
+            className="inline-block will-change-transform"
+            initial={{ rotateX: -90, opacity: 0, transformOrigin: "bottom" }}
+            animate={{ rotateX: 0, opacity: 1 }}
+            exit={{ rotateX: 90, opacity: 0, transformOrigin: "top" }}
+            transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+          >
+            {words[index]}
+          </motion.span>
+        </AnimatePresence>
+      </span>
+    </span>
+  );
+}

package/src/components/flip-words/index.ts

@@ -0,0 +1,2 @@
+export { FlipWords } from "./FlipWords";
+export type { FlipWordsProps } from "./FlipWords";

package/src/components/floating-navbar/FloatingNavbar.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import {
+  motion,
+  useMotionValueEvent,
+  useScroll,
+  type Variants,
+} from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface FloatingNavbarProps {
+  /** Nav items rendered inside the pill container */
+  children?: ReactNode;
+  className?: string;
+  /** Position from top in pixels when visible (default 16) */
+  topOffset?: number;
+}
+
+const visible: Variants = {
+  hidden: {
+    y: -100,
+    opacity: 0,
+    transition: {
+      duration: 0.3,
+      ease: [0.16, 1, 0.3, 1],
+    },
+  },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+      ease: [0.16, 1, 0.3, 1],
+    },
+  },
+};
+
+/**
+ * FloatingNavbar — sticky top navbar that hides on scroll down, shows on scroll up.
+ *
+ * Fixed position, centered, pill-shaped container with backdrop-blur and shadow.
+ * Uses framer-motion `useScroll` + `useMotionValueEvent` to detect scroll direction.
+ *
+ * @example
+ * <FloatingNavbar>
+ *   <a href="#home">Home</a>
+ *   <a href="#about">About</a>
+ * </FloatingNavbar>
+ */
+export function FloatingNavbar({
+  children,
+  className,
+  topOffset = 16,
+}: FloatingNavbarProps) {
+  const { scrollY } = useScroll();
+  const [hidden, setHidden] = useState(false);
+
+  useMotionValueEvent(scrollY, "change", (latest) => {
+    const previous = scrollY.getPrevious() ?? 0;
+    // Hide when scrolling down (past a small threshold), show when scrolling up
+    if (latest > previous && latest > 80) {
+      setHidden(true);
+    } else {
+      setHidden(false);
+    }
+  });
+
+  return (
+    <motion.div
+      variants={visible}
+      animate={hidden ? "hidden" : "visible"}
+      style={{ top: topOffset }}
+      className={cn(
+        "fixed inset-x-0 z-50 mx-auto flex w-fit max-w-[95%] items-center justify-center gap-1 rounded-full border border-line bg-bg/80 px-2 py-2 shadow-lg backdrop-blur-md",
+        className
+      )}
+    >
+      {children}
+    </motion.div>
+  );
+}

package/src/components/floating-navbar/index.ts

@@ -0,0 +1,2 @@
+export { FloatingNavbar } from "./FloatingNavbar";
+export type { FloatingNavbarProps } from "./FloatingNavbar";

package/src/components/focus-cards/FocusCards.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface FocusCardItem {
+  title: string;
+  description: string;
+  icon?: ReactNode;
+}
+
+export interface FocusCardsProps {
+  items: FocusCardItem[];
+  className?: string;
+}
+
+/**
+ * FocusCards — grid of cards where hovering one focuses it (full opacity)
+ * and blurs the others (opacity 30%).
+ *
+ * The hover state is tracked at the container level so siblings react to the
+ * hovered card. Uses framer-motion for the opacity transition.
+ *
+ * @example
+ * <FocusCards items={[
+ *   { title: "速度", description: "毫秒级响应" },
+ *   { title: "稳定", description: "99.9% 可用" },
+ * ]} />
+ */
+export function FocusCards({ items, className }: FocusCardsProps) {
+  const [hovered, setHovered] = useState<number | null>(null);
+
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+        className
+      )}
+    >
+      {items.map((item, index) => (
+        <FocusCard
+          key={index}
+          item={item}
+          isHovered={hovered === index}
+          isAnyHovered={hovered !== null}
+          onHover={() => setHovered(index)}
+          onLeave={() => setHovered(null)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function FocusCard({
+  item,
+  isHovered,
+  isAnyHovered,
+  onHover,
+  onLeave,
+}: {
+  item: FocusCardItem;
+  isHovered: boolean;
+  isAnyHovered: boolean;
+  onHover: () => void;
+  onLeave: () => void;
+}) {
+  // Blurred when another card is hovered and this one is not
+  const dimmed = isAnyHovered && !isHovered;
+
+  return (
+    <motion.div
+      onMouseEnter={onHover}
+      onMouseLeave={onLeave}
+      animate={{ opacity: dimmed ? 0.3 : 1, scale: isHovered ? 1.02 : 1 }}
+      transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+      className={cn(
+        "group flex flex-col rounded-xl border border-line bg-bg p-5 shadow-sm transition-colors",
+        isHovered && "border-line-strong shadow-md"
+      )}
+    >
+      {item.icon && (
+        <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-surface-2 text-ink">
+          {item.icon}
+        </div>
+      )}
+      <h3 className="text-base font-semibold text-ink">{item.title}</h3>
+      <p className="mt-2 text-sm leading-relaxed text-ink-2">
+        {item.description}
+      </p>
+    </motion.div>
+  );
+}

package/src/components/focus-cards/index.ts

@@ -0,0 +1,2 @@
+export { FocusCards } from "./FocusCards";
+export type { FocusCardsProps, FocusCardItem } from "./FocusCards";

package/src/components/glare-card/GlareCard.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { type ReactNode, type MouseEvent } from "react";
+import { motion, useMotionValue, useMotionTemplate } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface GlareCardProps {
+  children: ReactNode;
+  className?: string;
+  /** Color of the glare highlight (default rgba(255,255,255,0.8)) */
+  glareColor?: string;
+}
+
+/**
+ * GlareCard — a dark card with a light "glare" reflection that follows the
+ * cursor across its surface.
+ *
+ * A radial gradient is positioned at the mouse coordinates via
+ * `useMotionValue` + `useMotionTemplate`, producing a moving specular
+ * highlight. Defaults to the dark palette so the glare reads clearly.
+ *
+ * @example
+ * <GlareCard className="p-8">
+ *   <h3 className="text-white">悬停查看反光</h3>
+ * </GlareCard>
+ */
+export function GlareCard({
+  children,
+  className,
+  glareColor = "rgba(255, 255, 255, 0.8)",
+}: GlareCardProps) {
+  const mouseX = useMotionValue(-200);
+  const mouseY = useMotionValue(-200);
+
+  const glare = useMotionTemplate`radial-gradient(circle at ${mouseX}px ${mouseY}px, ${glareColor}, transparent 60%)`;
+
+  function handleMouseMove(e: MouseEvent<HTMLDivElement>) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    mouseX.set(e.clientX - rect.left);
+    mouseY.set(e.clientY - rect.top);
+  }
+
+  function handleMouseLeave() {
+    mouseX.set(-200);
+    mouseY.set(-200);
+  }
+
+  return (
+    <div
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      className={cn(
+        "group relative overflow-hidden rounded-xl border border-dark-line bg-dark-bg",
+        className
+      )}
+    >
+      {/* Glare overlay */}
+      <motion.div
+        className="pointer-events-none absolute inset-0 z-20 opacity-0 mix-blend-overlay transition-opacity duration-300 group-hover:opacity-100"
+        style={{ background: glare }}
+      />
+      {/* Content sits above the glare */}
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}

package/src/components/glare-card/index.ts

@@ -0,0 +1,2 @@
+export { GlareCard } from "./GlareCard";
+export type { GlareCardProps } from "./GlareCard";

package/src/components/glowing-effect/GlowingEffect.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { type ReactNode, type MouseEvent } from "react";
+import { motion, useMotionValue, useMotionTemplate } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface GlowingEffectProps {
+  children: ReactNode;
+  className?: string;
+  /** Glow color (default "rgba(0,0,0,0.05)") */
+  color?: string;
+  /** Glow radius in px (default 300) */
+  radius?: number;
+}
+
+/**
+ * GlowingEffect — container with a mouse-following glowing border on hover.
+ *
+ * A radial gradient glow follows the cursor, lighting up the border region
+ * of the container. Unlike CardSpotlight (which tints the surface), this
+ * effect emphasizes the border edge with a soft glow. Based on Aceternity's
+ * Glowing Effect pattern, adapted to zmzai's monochrome palette.
+ *
+ * @example
+ * <GlowingEffect radius={300}>
+ *   <div className="p-6">
+ *     <h3>智能生成</h3>
+ *     <p>一键创建内容</p>
+ *   </div>
+ * </GlowingEffect>
+ */
+export function GlowingEffect({
+  children,
+  className,
+  color = "rgba(0, 0, 0, 0.05)",
+  radius = 300,
+}: GlowingEffectProps) {
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  function handleMouseMove(e: MouseEvent<HTMLDivElement>) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    mouseX.set(e.clientX - rect.left);
+    mouseY.set(e.clientY - rect.top);
+  }
+
+  const glow = useMotionTemplate`radial-gradient(${radius}px circle at ${mouseX}px ${mouseY}px, ${color}, transparent 70%)`;
+
+  return (
+    <div
+      onMouseMove={handleMouseMove}
+      className={cn(
+        "group relative overflow-hidden rounded-xl border border-line bg-bg transition-colors hover:border-line-strong",
+        className
+      )}
+    >
+      {/* Glow overlay — follows cursor, reveals on hover */}
+      <motion.div
+        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        style={{ background: glow }}
+      />
+      {/* Inner border highlight for the "glowing border" feel */}
+      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-ink/0 transition-shadow duration-300 group-hover:ring-ink/5" />
+      {/* Content */}
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}

package/src/components/glowing-effect/index.ts

@@ -0,0 +1,2 @@
+export { GlowingEffect } from "./GlowingEffect";
+export type { GlowingEffectProps } from "./GlowingEffect";

package/src/components/hover-border-gradient/HoverBorderGradient.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import {
+  createElement,
+  type ElementType,
+  type ReactNode,
+  type HTMLAttributes,
+} from "react";
+import { cn } from "../../utils/cn";
+
+export interface HoverBorderGradientProps<T extends ElementType = "div">
+  extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  children: ReactNode;
+  className?: string;
+  /** Element type to render (default "div") */
+  as?: T;
+  /** Outer container className (the element that receives hover) */
+  containerClassName?: string;
+}
+
+/**
+ * HoverBorderGradient — container/badge whose border sweeps a gradient on hover.
+ *
+ * Pure CSS (no JS animation). The border is a conic-gradient mask that sits
+ * transparent until hover, then sweeps from transparent to ink. Based on
+ * Aceternity's Hover Border Gradient, adapted to zmzai's monochrome palette —
+ * the sweep uses the ink token rather than a rainbow gradient.
+ *
+ * @example
+ * <HoverBorderGradient as="button" className="rounded-full">
+ *   <span className="px-6 py-2">开始体验</span>
+ * </HoverBorderGradient>
+ */
+export function HoverBorderGradient<T extends ElementType = "div">({
+  children,
+  className,
+  containerClassName,
+  as,
+  ...props
+}: HoverBorderGradientProps<T>) {
+  const Component = (as ?? "div") as ElementType;
+
+  return (
+    <>
+      {/* Scoped keyframes + mask rules (no global @property needed) */}
+      <style>{`
+        @keyframes hbg-spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+
+      <Component
+        className={cn(
+          "group relative cursor-pointer overflow-hidden rounded-full border border-line bg-bg transition-colors duration-300 hover:border-transparent",
+          containerClassName
+        )}
+        {...props}
+      >
+        {/* Gradient sweep layer — sits behind content, masked to the border ring.
+            Transparent at rest, fades in + spins on hover. */}
+        <span
+          aria-hidden
+          className={cn(
+            "pointer-events-none absolute -inset-[100%] opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+            className
+          )}
+          style={{
+            background:
+              "conic-gradient(from 0deg, transparent 0deg, transparent 270deg, var(--color-ink) 320deg, transparent 360deg)",
+            animation: "hbg-spin 2s linear infinite",
+          }}
+        />
+        {/* Inner content with solid background so only the 1px ring shows the sweep */}
+        <span className="relative z-10 block rounded-full bg-bg px-6 py-2.5">
+          {children}
+        </span>
+      </Component>
+    </>
+  );
+}

package/src/components/hover-border-gradient/index.ts

@@ -0,0 +1,2 @@
+export { HoverBorderGradient } from "./HoverBorderGradient";
+export type { HoverBorderGradientProps } from "./HoverBorderGradient";