@zmzai/theme 0.1.0

package/src/components/card-hover-effect/CardHoverEffect.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+import { cn } from "../../utils/cn";
+
+export interface CardHoverItem {
+  title: string;
+  description: string;
+  icon?: ReactNode;
+}
+
+export interface CardHoverEffectProps {
+  items: CardHoverItem[];
+  className?: string;
+}
+
+/**
+ * CardHoverEffect — a grid of cards where hovering one slides a shared
+ * highlight background between cards using framer-motion `layoutId`.
+ *
+ * The highlight is a single shared element animated via layoutId, so it
+ * smoothly translates from card to card as the cursor moves across the grid.
+ *
+ * @example
+ * <CardHoverEffect
+ *   items={[
+ *     { title: "生成", description: "一键生成内容" },
+ *     { title: "分析", description: "智能数据分析" },
+ *   ]}
+ * />
+ */
+export function CardHoverEffect({ items, className }: CardHoverEffectProps) {
+  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, idx) => (
+        <div
+          key={item.title + idx}
+          className="group relative"
+          onMouseEnter={() => setHovered(idx)}
+          onMouseLeave={() => setHovered(null)}
+        >
+          {/* Shared highlight background animated across cards */}
+          <AnimatePresence mode="popLayout">
+            {hovered === idx && (
+              <motion.span
+                layoutId="card-hover-highlight"
+                className="absolute inset-0 block rounded-xl bg-surface-2"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1, transition: { duration: 0.15 } }}
+                exit={{ opacity: 0, transition: { duration: 0.15 } }}
+              />
+            )}
+          </AnimatePresence>
+
+          <div className="relative z-10 h-full rounded-xl border border-line p-6 transition-colors duration-200 group-hover:border-line-strong">
+            {item.icon && (
+              <div className="mb-4 text-ink [&>svg]:h-6 [&>svg]:w-6">
+                {item.icon}
+              </div>
+            )}
+            <div className="flex flex-col gap-2">
+              <h3 className="text-base font-semibold text-ink">
+                {item.title}
+              </h3>
+              <p className="text-sm leading-relaxed text-ink-2">
+                {item.description}
+              </p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/card-hover-effect/index.ts

@@ -0,0 +1,2 @@
+export { CardHoverEffect } from "./CardHoverEffect";
+export type { CardHoverEffectProps, CardHoverItem } from "./CardHoverEffect";

package/src/components/card-spotlight/CardSpotlight.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useRef, type ReactNode, type MouseEvent } from "react";
+import { motion, useMotionValue, useMotionTemplate } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface CardSpotlightProps {
+  children: ReactNode;
+  className?: string;
+  /** Spotlight radius in px (default 300) */
+  radius?: number;
+  /** Spotlight color (default uses accent token via rgba) */
+  color?: string;
+}
+
+/**
+ * CardSpotlight — card with mouse-following radial spotlight.
+ *
+ * A subtle radial gradient follows the cursor inside the card,
+ * revealing a faint highlight. Based on Aceternity's Card Spotlight
+ * pattern, adapted to zmzai's monochrome palette.
+ *
+ * @example
+ * <CardSpotlight radius={250}>
+ *   <h3>生成 PPT</h3>
+ *   <p>自动生成演示文稿</p>
+ * </CardSpotlight>
+ */
+export function CardSpotlight({
+  children,
+  className,
+  radius = 300,
+  color = "rgba(0, 0, 0, 0.08)",
+}: CardSpotlightProps) {
+  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 spotlight = useMotionTemplate`radial-gradient(${radius}px circle at ${mouseX}px ${mouseY}px, ${color}, transparent 80%)`;
+
+  return (
+    <div
+      onMouseMove={handleMouseMove}
+      className={cn(
+        "group relative overflow-hidden rounded-xl border border-line bg-bg transition-colors hover:border-line-strong",
+        className
+      )}
+    >
+      {/* Spotlight overlay */}
+      <motion.div
+        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        style={{ background: spotlight }}
+      />
+      {/* Content */}
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}

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

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

package/src/components/carousel/Carousel.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface CarouselProps {
+  items: ReactNode[];
+  className?: string;
+}
+
+/**
+ * Carousel — minimal slide carousel with arrow nav + dot indicators.
+ *
+ * Clean monochrome design: chevron buttons appear on sides,
+ * dots at bottom. Slides animate with horizontal slide+fade.
+ *
+ * @example
+ * <Carousel items={[<div>A</div>, <div>B</div>, <div>C</div>]} />
+ */
+export function Carousel({ items, className }: CarouselProps) {
+  const [index, setIndex] = useState(0);
+  const [direction, setDirection] = useState(0);
+
+  const go = (next: number) => {
+    setDirection(next > index ? 1 : -1);
+    setIndex((next + items.length) % items.length);
+  };
+
+  return (
+    <div className={cn("relative", className)}>
+      {/* Slide area */}
+      <div className="relative overflow-hidden rounded-xl">
+        <AnimatePresence mode="wait" custom={direction}>
+          <motion.div
+            key={index}
+            custom={direction}
+            initial={{ opacity: 0, x: direction * 60 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: direction * -60 }}
+            transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+          >
+            {items[index]}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Prev */}
+        <button
+          onClick={() => go(index - 1)}
+          className="absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-line bg-bg/80 text-ink-2 backdrop-blur transition-colors hover:border-ink hover:text-ink"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
+        </button>
+
+        {/* Next */}
+        <button
+          onClick={() => go(index + 1)}
+          className="absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-line bg-bg/80 text-ink-2 backdrop-blur transition-colors hover:border-ink hover:text-ink"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
+        </button>
+      </div>
+
+      {/* Dots */}
+      <div className="mt-4 flex justify-center gap-1.5">
+        {items.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => go(i)}
+            className={cn(
+              "h-1.5 cursor-pointer rounded-full transition-all",
+              i === index ? "w-6 bg-ink" : "w-1.5 bg-line hover:bg-ink-3"
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/carousel/index.ts

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

package/src/components/code-block/CodeBlock.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export interface CodeBlockProps {
+  /** Code content */
+  code: string;
+  /** Language label shown in header (e.g. "typescript", "bash") */
+  language?: string;
+  /** File name shown in header (e.g. "useUsers.ts") */
+  filename?: string;
+  /** Show copy button (default true) */
+  copyable?: boolean;
+  /** Max height before scroll (default none) */
+  maxHeight?: string;
+  className?: string;
+}
+
+/**
+ * CodeBlock — dark surface code display with syntax highlighting + copy.
+ *
+ * Uses a monochrome syntax highlight scheme (灰阶 + 粗细 + 斜体),
+ * matching zmzai's black-white design language. No rainbow colors.
+ *
+ * @example
+ * <CodeBlock code={`const x = 1;`} language="typescript" filename="index.ts" />
+ */
+export function CodeBlock({
+  code,
+  language = "text",
+  filename,
+  copyable = true,
+  maxHeight,
+  className,
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard not available
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-xl border border-dark-line bg-dark-bg shadow-md",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-dark-line bg-dark-surface px-3.5 py-2">
+        <div className="flex items-center gap-2">
+          {/* Traffic lights */}
+          <div className="flex gap-1.5">
+            <span className="h-2.5 w-2.5 rounded-full bg-[#ff5f56]" />
+            <span className="h-2.5 w-2.5 rounded-full bg-[#ffbd2e]" />
+            <span className="h-2.5 w-2.5 rounded-full bg-[#27c93f]" />
+          </div>
+          <span className="ml-1 font-mono text-xs font-medium text-dark-ink/70">
+            {filename || language}
+          </span>
+        </div>
+        {copyable && (
+          <button
+            onClick={handleCopy}
+            className="font-mono text-[11px] text-ink-3 transition-colors hover:text-dark-ink"
+          >
+            {copied ? "已复制 ✓" : "复制"}
+          </button>
+        )}
+      </div>
+
+      {/* Body */}
+      <div
+        className="overflow-x-auto p-3.5"
+        style={maxHeight ? { maxHeight, overflowY: "auto" } : undefined}
+      >
+        <pre className="font-mono text-[13px] leading-relaxed text-dark-ink">
+          <code>{highlightCode(code, language)}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Lightweight monochrome syntax highlighter.
+ * Uses spans with Tailwind classes: keyword=bold white, string=light gray,
+ * comment=medium gray italic, function=light gray italic.
+ * Falls back to plain text for unrecognized languages.
+ */
+function highlightCode(code: string, _language: string): ReactNode {
+  // Simple regex-based highlighting for common patterns
+  // keyword detection
+  const keywordRe =
+    /\b(import|export|from|const|let|var|function|return|if|else|for|while|class|interface|type|extends|implements|new|async|await|try|catch|throw|typeof|instanceof|void|null|undefined|true|false|this|super|default|switch|case|break|continue|do|in|of|as|enum|public|private|protected|readonly|static|get|set|namespace|declare|abstract|yield|delete|with)\b/g;
+  const stringRe = /(["'`])((?:\\.|(?!\1).)*)\1/g;
+  const commentRe = /(\/\/.*$|\/\*[\s\S]*?\*\/)/gm;
+
+  // Escape HTML first
+  const escaped = code
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+
+  // Apply highlights with placeholder tokens to avoid overlap
+  const tokens: { type: string; text: string }[] = [];
+  let working = escaped;
+
+  // Comments first (highest priority)
+  working = working.replace(commentRe, (match) => {
+    tokens.push({ type: "comment", text: match });
+    return `\x00${tokens.length - 1}\x00`;
+  });
+
+  // Strings
+  working = working.replace(stringRe, (match) => {
+    tokens.push({ type: "string", text: match });
+    return `\x00${tokens.length - 1}\x00`;
+  });
+
+  // Keywords
+  working = working.replace(keywordRe, (match) => {
+    tokens.push({ type: "keyword", text: match });
+    return `\x00${tokens.length - 1}\x00`;
+  });
+
+  // Rebuild with spans
+  const parts = working.split(/\x00(\d+)\x00/);
+  return parts.map((part, i) => {
+    if (i % 2 === 1) {
+      const token = tokens[parseInt(part, 10)];
+      const cls =
+        token.type === "keyword"
+          ? "font-semibold text-dark-ink"
+          : token.type === "string"
+            ? "text-dark-ink/50"
+            : "text-dark-ink/40 italic";
+      return (
+        <span key={i} className={cls}>
+          {token.text}
+        </span>
+      );
+    }
+    return <span key={i}>{part}</span>;
+  });
+}

package/src/components/code-block/index.ts

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

package/src/components/comet-card/CometCard.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useRef, useState, type ReactNode, type MouseEvent } from "react";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+} from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface CometCardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const MAX_TILT = 8; // deg
+
+/**
+ * CometCard — a 3D-perspective tilt card with a "comet" light streak that
+ * shoots across the card on hover.
+ *
+ * The card tilts toward the cursor (CSS `perspective` + rotateX/rotateY).
+ * On each mouse enter a small gradient dot animates diagonally across the
+ * surface via framer-motion keyframes, leaving a light trail. A `key`
+ * counter remounts the comet so the streak replays on every entry.
+ *
+ * @example
+ * <CometCard className="p-8">
+ *   <h3 className="text-white">悬停触发流星</h3>
+ * </CometCard>
+ */
+export function CometCard({ children, className }: CometCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [streakKey, setStreakKey] = useState(0);
+
+  const mx = useMotionValue(0);
+  const my = useMotionValue(0);
+
+  const rotateX = useSpring(
+    useTransform(my, [-0.5, 0.5], [MAX_TILT, -MAX_TILT]),
+    { stiffness: 150, damping: 20 }
+  );
+  const rotateY = useSpring(
+    useTransform(mx, [-0.5, 0.5], [-MAX_TILT, MAX_TILT]),
+    { stiffness: 150, damping: 20 }
+  );
+
+  function handleMouseMove(e: MouseEvent<HTMLDivElement>) {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    mx.set((e.clientX - rect.left) / rect.width - 0.5);
+    my.set((e.clientY - rect.top) / rect.height - 0.5);
+  }
+
+  function handleMouseEnter() {
+    // Remount the comet so the streak replays on each entry.
+    setStreakKey((k) => k + 1);
+  }
+
+  function handleMouseLeave() {
+    mx.set(0);
+    my.set(0);
+  }
+
+  return (
+    <div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={{ perspective: 1000 }}
+      className={cn("group relative", className)}
+    >
+      <motion.div
+        style={{ rotateX, rotateY, transformStyle: "preserve-3d" }}
+        className="relative overflow-hidden rounded-xl border border-dark-line bg-dark-bg"
+      >
+        {/* Comet streak — replays on every mouse-enter via streakKey */}
+        <motion.span
+          key={streakKey}
+          className="pointer-events-none absolute z-20 h-24 w-24 rounded-full blur-2xl"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.25) 45%, transparent 70%)",
+          }}
+          initial={{ x: "-25%", y: "-25%", opacity: 0 }}
+          animate={{
+            x: ["-25%", "125%"],
+            y: ["-25%", "125%"],
+            opacity: [0, 1, 1, 0],
+          }}
+          transition={{ duration: 1.1, ease: "easeInOut", times: [0, 0.2, 0.8, 1] }}
+        />
+
+        <div
+          className="relative z-10 p-5"
+          style={{ transform: "translateZ(40px)" }}
+        >
+          {children}
+        </div>
+      </motion.div>
+    </div>
+  );
+}

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

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

package/src/components/compare/Compare.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from "react";
+import { cn } from "../../utils/cn";
+
+export interface CompareProps extends HTMLAttributes<HTMLDivElement> {
+  /** Shown on the left (the "before") */
+  before: ReactNode;
+  /** Shown on the right (the "after") */
+  after: ReactNode;
+  /** Initial position of the handle as a percentage (0–100) */
+  initial?: number;
+}
+
+/**
+ * Compare — a draggable before/after slider.
+ *
+ * Renders `before` and `after` layered in the same box. A vertical drag
+ * handle clips the `before` layer to the left of the handle; the `after`
+ * layer shows through on the right. The `before` content is sized to the
+ * full container width so it does not squish as the handle moves.
+ *
+ * @example
+ * <Compare before={<img src="/old.png" />} after={<img src="/new.png" />} />
+ */
+export function Compare({
+  before,
+  after,
+  initial = 50,
+  className,
+  ...props
+}: CompareProps) {
+  const [pos, setPos] = useState(initial);
+  const [width, setWidth] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const measure = () => setWidth(el.getBoundingClientRect().width);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const updateFromClientX = useCallback((clientX: number) => {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const pct = ((clientX - rect.left) / rect.width) * 100;
+    setPos(Math.min(100, Math.max(0, pct)));
+  }, []);
+
+  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    dragging.current = true;
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+    updateFromClientX(e.clientX);
+  };
+
+  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (!dragging.current) return;
+    updateFromClientX(e.clientX);
+  };
+
+  const onPointerUp = () => {
+    dragging.current = false;
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerLeave={onPointerUp}
+      className={cn(
+        "relative select-none overflow-hidden rounded-xl border border-line",
+        className
+      )}
+      style={{ touchAction: "none" }}
+      {...props}
+    >
+      {/* After (base layer, full width) */}
+      <div className="absolute inset-0">{after}</div>
+
+      {/* Before (clipped to the left of handle) */}
+      <div
+        className="absolute inset-y-0 left-0 overflow-hidden"
+        style={{ width: `${pos}%` }}
+      >
+        <div className="h-full" style={{ width: width ? `${width}px` : "100%" }}>
+          {before}
+        </div>
+      </div>
+
+      {/* Drag handle */}
+      <div
+        className="absolute inset-y-0 z-10 flex w-0.5 cursor-ew-resize items-center justify-center bg-ink"
+        style={{ left: `${pos}%`, transform: "translateX(-50%)" }}
+      >
+        <div className="flex h-9 w-9 items-center justify-center rounded-full border border-line bg-white text-ink shadow-md">
+          <svg
+            className="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="15 18 9 12 15 6" />
+            <polyline points="9 18 15 12 9 6" transform="translate(6 0)" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/compare/index.ts

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