@zmzai/theme 0.1.0

package/src/components/tooltip-card/TooltipCard.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import {
+  useRef,
+  useState,
+  type ReactNode,
+  type MouseEvent,
+} from "react";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  AnimatePresence,
+} from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface TooltipCardProps {
+  /** The trigger element */
+  children: ReactNode;
+  /** Avatar image URL */
+  avatarSrc?: string;
+  /** Person / entity name */
+  name: string;
+  /** Role / subtitle (e.g. job title) */
+  role: string;
+  /** Body description */
+  description: string;
+  className?: string;
+}
+
+/**
+ * TooltipCard — a richer hover card with avatar + title + description.
+ *
+ * On hover, a card appears below the trigger and follows the mouse X
+ * position with spring physics. Aceternity-style, adapted to the zmzai
+ * monochrome palette.
+ *
+ * @example
+ * <TooltipCard
+ *   name="张三"
+ *   role="前端工程师"
+ *   description="负责组件库与设计系统。"
+ *   avatarSrc="/avatar.png"
+ * >
+ *   <span className="underline">@zhangsan</span>
+ * </TooltipCard>
+ */
+export function TooltipCard({
+  children,
+  avatarSrc,
+  name,
+  role,
+  description,
+  className,
+}: TooltipCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [hovered, setHovered] = useState(false);
+
+  const mouseX = useMotionValue(0);
+  const springConfig = { stiffness: 150, damping: 20 };
+  const translateX = useSpring(mouseX, springConfig);
+
+  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    mouseX.set(e.clientX - rect.left);
+  };
+
+  return (
+    <div
+      ref={ref}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onMouseMove={handleMouseMove}
+      className={cn("relative inline-flex", className)}
+    >
+      {children}
+
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9, y: -8 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.9, y: -8 }}
+            transition={{ type: "spring", stiffness: 280, damping: 24 }}
+            style={{
+              position: "absolute",
+              top: "100%",
+              left: 0,
+              x: translateX,
+              translateX: "-50%",
+              marginTop: "12px",
+            }}
+            className="pointer-events-none z-50 w-64 origin-top overflow-hidden rounded-xl border border-line bg-bg shadow-lg"
+          >
+            {/* accent top border */}
+            <div className="h-0.5 w-full bg-ink" />
+            <div className="flex gap-3 p-4">
+              {/* Avatar */}
+              <div className="h-11 w-11 shrink-0 overflow-hidden rounded-full border border-line bg-surface">
+                {avatarSrc ? (
+                  <img
+                    src={avatarSrc}
+                    alt={name}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center text-sm font-semibold text-ink-2">
+                    {name.charAt(0)}
+                  </div>
+                )}
+              </div>
+              {/* Text */}
+              <div className="min-w-0 space-y-1">
+                <div className="flex items-baseline justify-between gap-2">
+                  <p className="truncate text-sm font-semibold text-ink">
+                    {name}
+                  </p>
+                  <p className="shrink-0 text-[11px] text-ink-3">{role}</p>
+                </div>
+                <p className="text-xs leading-relaxed text-ink-2">
+                  {description}
+                </p>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

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

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

package/src/components/tracing-beam/TracingBeam.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useRef, useState, type ReactNode } from "react";
+import {
+  motion,
+  useScroll,
+  useSpring,
+  useMotionValueEvent,
+} from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface TracingBeamProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * TracingBeam — vertical SVG beam that traces scroll progress.
+ *
+ * A thin vertical line sits on the left of the content. As the user
+ * scrolls through the section, the beam fills (gray -> ink) to indicate
+ * reading progress. Based on Aceternity's Tracing Beam, adapted to the
+ * zmzai monochrome palette.
+ *
+ * @example
+ * <TracingBeam>
+ *   <article>…long-form content…</article>
+ * </TracingBeam>
+ */
+export function TracingBeam({ children, className }: TracingBeamProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [svgHeight, setSvgHeight] = useState(0);
+  const [progress, setProgress] = useState(0);
+
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start 10%", "end 70%"],
+  });
+
+  const scaleY = useSpring(scrollYProgress, {
+    stiffness: 120,
+    damping: 30,
+    restDelta: 0.001,
+  });
+
+  useMotionValueEvent(scrollYProgress, "change", (v) => {
+    setProgress(v);
+  });
+
+  useMotionValueEvent(scrollYProgress, "change", () => {
+    if (ref.current) {
+      setSvgHeight(ref.current.offsetHeight);
+    }
+  });
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative mx-auto h-full w-full max-w-2xl",
+        className
+      )}
+    >
+      {/* SVG beam */}
+      <div className="absolute -left-8 top-3 hidden h-full w-[2px] md:block">
+        <svg
+          viewBox={`0 0 20 ${svgHeight}`}
+          width="20"
+          height={svgHeight}
+          className="block"
+          aria-hidden="true"
+        >
+          {/* Track */}
+          <path
+            d={`M 1 0 L 1 ${svgHeight}`}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            className="text-line"
+            strokeOpacity={1}
+          />
+          {/* Progress */}
+          <motion.path
+            d={`M 1 0 L 1 ${svgHeight}`}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            className="text-ink"
+            style={{ scaleY, transformOrigin: "top" }}
+          />
+        </svg>
+        {/* Dot at the top of the beam */}
+        <motion.div
+          className="absolute -left-[7px] top-0 h-4 w-4 rounded-full border border-line bg-surface"
+          animate={{
+            boxShadow:
+              progress > 0
+                ? "0 0 0 2px rgba(0,0,0,0.05)"
+                : "none",
+          }}
+        >
+          <div className="h-full w-full rounded-full bg-ink" />
+        </motion.div>
+      </div>
+
+      {/* Content */}
+      <div>{children}</div>
+    </div>
+  );
+}

package/src/components/tracing-beam/index.ts

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

package/src/components/typewriter/Typewriter.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect, useState, type HTMLAttributes } from "react";
+import { cn } from "../../utils/cn";
+
+export interface TypewriterProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Text to type out */
+  text: string;
+  /** Milliseconds per character */
+  speed?: number;
+  /** Show a blinking caret while typing */
+  cursor?: boolean;
+}
+
+/**
+ * Typewriter — classic character-by-character typing effect.
+ *
+ * Types out `text` one character at a time at `speed` ms per char.
+ * An optional blinking block cursor is shown while typing.
+ *
+ * @example
+ * <Typewriter text="$ npm install @zmzai/theme" speed={50} />
+ * <Typewriter text="No cursor" cursor={false} />
+ */
+export function Typewriter({
+  text,
+  speed = 50,
+  cursor = true,
+  className,
+  ...props
+}: TypewriterProps) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    setCount(0);
+    if (!text) return;
+
+    const id = setInterval(() => {
+      setCount((c) => {
+        if (c >= text.length) {
+          clearInterval(id);
+          return c;
+        }
+        return c + 1;
+      });
+    }, speed);
+
+    return () => clearInterval(id);
+  }, [text, speed]);
+
+  const done = count >= text.length;
+
+  return (
+    <span className={cn("font-mono", className)} {...props}>
+      {text.slice(0, count)}
+      {cursor && (
+        <span
+          className={cn(
+            "ml-0.5 inline-block w-[2px] self-stretch bg-ink align-middle",
+            !done && "animate-pulse"
+          )}
+          style={{ height: "1em" }}
+        >
+          &nbsp;
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/typewriter/index.ts

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

package/src/components/vanish-input/VanishInput.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  type FormEvent,
+} from "react";
+import { motion, AnimatePresence, useAnimate } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface VanishInputProps {
+  /** Rotating placeholder strings */
+  placeholders: string[];
+  /** Called on submit (Enter) */
+  onSubmit: (value: string) => void;
+  className?: string;
+}
+
+/**
+ * VanishInput — search input with a rotating placeholder that "vanishes".
+ *
+ * While idle, placeholders cycle. Each character of the current placeholder
+ * animates upward and fades out (the vanish effect) before the next
+ * placeholder appears. Typing hides the placeholder. Based on Aceternity's
+ * Vanish Input, adapted to the zmzai palette.
+ *
+ * @example
+ * <VanishInput
+ *   placeholders={["搜索文档…", "输入关键词…"]}
+ *   onSubmit={(v) => search(v)}
+ * />
+ */
+export function VanishInput({
+  placeholders,
+  onSubmit,
+  className,
+}: VanishInputProps) {
+  const [value, setValue] = useState("");
+  const [currentPlaceholder, setCurrentPlaceholder] = useState(0);
+  const [scope, animate] = useAnimate<HTMLDivElement>();
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const cyclingRef = useRef(true);
+
+  const nextPlaceholder = useCallback(() => {
+    setCurrentPlaceholder((prev) =>
+      prev === placeholders.length - 1 ? 0 : prev + 1
+    );
+  }, [placeholders.length]);
+
+  const startVanishing = useCallback(async () => {
+    if (!cyclingRef.current || placeholders.length === 0) return;
+    cyclingRef.current = false;
+    try {
+      // vanish: each char moves up & fades out
+      await animate(
+        "span",
+        { y: -20, opacity: 0 },
+        { duration: 0.3, delay: staggerDelay() }
+      );
+      // swap to next placeholder
+      nextPlaceholder();
+      // reset chars below + hidden, then animate in
+      await animate(
+        "span",
+        { y: 20, opacity: 0 },
+        { duration: 0 }
+      );
+      await animate(
+        "span",
+        { y: 0, opacity: 1 },
+        { duration: 0.3, delay: staggerDelay() }
+      );
+    } finally {
+      cyclingRef.current = true;
+    }
+  }, [animate, nextPlaceholder, placeholders.length]);
+
+  // cycle placeholders while idle
+  useEffect(() => {
+    if (!placeholders.length) return;
+    intervalRef.current = setInterval(() => {
+      if (value.length === 0) {
+        startVanishing();
+      }
+    }, 3000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [placeholders.length, value.length, startVanishing]);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (value.trim().length === 0) return;
+    onSubmit(value);
+    setValue("");
+  };
+
+  const showPlaceholder = value.length === 0 && placeholders.length > 0;
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn(
+        "relative flex w-full max-w-xl items-center overflow-hidden rounded-full border border-line bg-surface px-5 py-2.5 transition-colors focus-within:border-ink/50",
+        className
+      )}
+    >
+      {/* Placeholder */}
+      {showPlaceholder && (
+        <div className="pointer-events-none absolute inset-0 flex items-center overflow-hidden px-5">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentPlaceholder}
+              ref={scope}
+              className="truncate text-sm text-ink-3"
+            >
+              {placeholders[currentPlaceholder]
+                .split("")
+                .map((ch, i) => (
+                  <motion.span
+                    key={`ch-${i}`}
+                    initial={{ opacity: 1, y: 0 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="inline-block whitespace-pre"
+                  >
+                    {ch}
+                  </motion.span>
+                ))}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      )}
+
+      {/* Input */}
+      <input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        type="text"
+        className="relative z-10 w-full bg-transparent text-sm text-ink outline-none placeholder:text-transparent"
+      />
+
+      {/* Submit button */}
+      <button
+        type="submit"
+        aria-label="提交"
+        className="ml-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ink text-white transition-transform hover:scale-105 active:scale-95"
+      >
+        <svg
+          className="h-3.5 w-3.5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M5 12h14" />
+          <path d="m12 5 7 7-7 7" />
+        </svg>
+      </button>
+    </form>
+  );
+}
+
+/** Stagger helper: returns a stagger function usable as the `delay` option. */
+function staggerDelay() {
+  return (i: number) => i * 0.03;
+}

package/src/components/vanish-input/index.ts

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

package/src/components/wobble-card/WobbleCard.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useRef, type ReactNode, type MouseEvent } from "react";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useMotionTemplate,
+  useTransform,
+} from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface WobbleCardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const MAX_ROTATE = 6; // deg
+const MAX_TRANSLATE = 10; // px
+const SPRING = { stiffness: 150, damping: 15, mass: 0.1 };
+
+/**
+ * WobbleCard — a card that wobbles (translates + rotates + skews slightly)
+ * based on the cursor position.
+ *
+ * Two `useMotionValue`s track the normalized mouse position (-1..1). They
+ * are fed through `useTransform` into rotation / translation targets, then
+ * smoothed with `useSpring` and composed via `useMotionTemplate` into the
+ * final transform string.
+ *
+ * @example
+ * <WobbleCard className="rounded-xl bg-surface p-8">
+ *   <h3>悬停我</h3>
+ * </WobbleCard>
+ */
+export function WobbleCard({ children, className }: WobbleCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const mx = useMotionValue(0);
+  const my = useMotionValue(0);
+
+  const rotateXRaw = useSpring(useTransform(my, [-0.5, 0.5], [MAX_ROTATE, -MAX_ROTATE]), SPRING);
+  const rotateYRaw = useSpring(useTransform(mx, [-0.5, 0.5], [-MAX_ROTATE, MAX_ROTATE]), SPRING);
+  const translateXRaw = useSpring(useTransform(mx, [-0.5, 0.5], [-MAX_TRANSLATE, MAX_TRANSLATE]), SPRING);
+  const translateYRaw = useSpring(useTransform(my, [-0.5, 0.5], [-MAX_TRANSLATE, MAX_TRANSLATE]), SPRING);
+
+  const transform = useMotionTemplate`perspective(1000px) rotateX(${rotateXRaw}deg) rotateY(${rotateYRaw}deg) translateX(${translateXRaw}px) translateY(${translateYRaw}px)`;
+
+  function handleMouseMove(e: MouseEvent<HTMLDivElement>) {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const relX = (e.clientX - rect.left) / rect.width - 0.5;
+    const relY = (e.clientY - rect.top) / rect.height - 0.5;
+    mx.set(relX);
+    my.set(relY);
+  }
+
+  function handleMouseLeave() {
+    mx.set(0);
+    my.set(0);
+  }
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{ transform }}
+      className={cn(
+        "relative rounded-xl border border-line bg-surface p-8 transition-colors duration-200 hover:border-line-strong",
+        className
+      )}
+    >
+      {children}
+    </motion.div>
+  );
+}

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

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

package/src/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @zmzai/theme — zmzai 全品牌设计系统
+ *
+ * Usage in your app's globals.css:
+ *   @import "tailwindcss";
+ *   @import "@zmzai/theme/tokens";
+ *   @import "@zmzai/theme/fonts";
+ *
+ * Usage in components:
+ *   import { Button, Card, Logo, Wordmark } from "@zmzai/theme";
+ */
+
+// Components
+export * from "./components";
+
+// Brand assets
+export * from "./brand";
+
+// Utils
+export { cn } from "./utils/cn";
+export * as motionPresets from "./utils/motion";

package/src/tokens/fonts.css

@@ -0,0 +1,42 @@
+/*
+ * @zmzai/theme — MiSans Font Faces
+ *
+ * 小米开源字体，免费商用（OFL 协议）。
+ * 简体中文全子集，通过 jsDelivr CDN 加载 woff2。
+ * font-display: swap 保证加载期间用 fallback，加载完无缝切换。
+ *
+ * Import in your app's globals.css:
+ *   @import "@zmzai/theme/fonts";
+ */
+
+@font-face {
+  font-family: 'MiSans';
+  src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'MiSans';
+  src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'MiSans';
+  src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Semibold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'MiSans';
+  src: url('https://cdn.jsdelivr.net/gh/dsrkafuu/misans@main/raw/Normal/woff2/MiSans-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}