@zmzai/theme 0.1.0

package/src/components/sticky-scroll-reveal/StickyScrollReveal.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useRef, type ReactNode } from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface StickyScrollItem {
+  title: string;
+  description: string;
+  content?: ReactNode;
+}
+
+export interface StickyScrollRevealProps {
+  items: StickyScrollItem[];
+  className?: string;
+  /** Tailwind text token applied to the active title accent underline */
+  contentClassName?: string;
+}
+
+/**
+ * StickyScrollReveal — content blocks that stick and swap on scroll.
+ *
+ * The left column holds a sticky title + description that changes as the
+ * user scrolls through each item; the right column shows optional content.
+ * Each item reveals with a fade/slide driven by scroll progress. Based on
+ * Aceternity's Sticky Scroll Reveal, adapted to the zmzai monochrome palette.
+ *
+ * @example
+ * <StickyScrollReveal items={[
+ *   { title: "步骤一", description: "上传文件", content: <Preview /> },
+ *   { title: "步骤二", description: "生成内容" },
+ * ]} />
+ */
+export function StickyScrollReveal({
+  items,
+  className,
+  contentClassName,
+}: StickyScrollRevealProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start start", "end end"],
+  });
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex flex-col",
+        className
+      )}
+    >
+      {items.map((item, idx) => (
+        <StickyItem
+          key={idx}
+          item={item}
+          index={idx}
+          total={items.length}
+          progress={scrollYProgress}
+          contentClassName={contentClassName}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface StickyItemProps {
+  item: StickyScrollItem;
+  index: number;
+  total: number;
+  progress: ReturnType<typeof useScroll>["scrollYProgress"];
+  contentClassName?: string;
+}
+
+function StickyItem({
+  item,
+  index,
+  total,
+  progress,
+  contentClassName,
+}: StickyItemProps) {
+  const segment = 1 / total;
+  // active window for this item
+  const start = index * segment;
+  const end = start + segment;
+
+  // opacity/scale for left column based on scroll position within segment
+  const opacity = useTransform(
+    progress,
+    [Math.max(0, start - segment * 0.4), start, end, end + segment * 0.4],
+    [0.3, 1, 1, 0.3]
+  );
+  const translateY = useTransform(
+    progress,
+    [start - segment * 0.4, start, end, end + segment * 0.4],
+    [20, 0, 0, -20]
+  );
+
+  return (
+    <div className="flex min-h-screen items-start gap-6 md:gap-10 lg:gap-16">
+      {/* Left: sticky text column */}
+      <div className="sticky top-0 flex h-screen w-full flex-col justify-center md:w-1/2">
+        <motion.div style={{ opacity, y: translateY }}>
+          {/* Index marker */}
+          <span className="mb-4 inline-flex h-7 w-7 items-center justify-center rounded-full border border-line text-xs text-ink-2">
+            {String(index + 1).padStart(2, "0")}
+          </span>
+          <h3 className="text-2xl font-semibold tracking-tight text-ink md:text-3xl lg:text-4xl">
+            {item.title}
+          </h3>
+          <p className="mt-4 max-w-md text-sm text-ink-2 md:text-base">
+            {item.description}
+          </p>
+        </motion.div>
+      </div>
+
+      {/* Right: content column */}
+      <div className="flex w-full items-center py-24 md:w-1/2">
+        {item.content ? (
+          <div
+            className={cn(
+              "w-full rounded-xl border border-line bg-surface p-6",
+              contentClassName
+            )}
+          >
+            {item.content}
+          </div>
+        ) : (
+          <div
+            className={cn(
+              "flex h-72 w-full items-center justify-center rounded-xl border border-line bg-surface text-sm text-ink-3",
+              contentClassName
+            )}
+          >
+            {item.title}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/sticky-scroll-reveal/index.ts

@@ -0,0 +1,2 @@
+export { StickyScrollReveal } from "./StickyScrollReveal";
+export type { StickyScrollRevealProps, StickyScrollItem } from "./StickyScrollReveal";

package/src/components/terminal/Terminal.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export interface TerminalProps extends HTMLAttributes<HTMLDivElement> {
+  /** Title shown in the title bar */
+  title?: string;
+  /** Command-line content */
+  children?: ReactNode;
+}
+
+/**
+ * Terminal — a Mac-style terminal window.
+ *
+ * Renders a dark window with a title bar (traffic lights + title) and a
+ * mono-font command area. A green prompt symbol prefixes the children.
+ *
+ * @example
+ * <Terminal title="bash">
+ *   <span>npm run dev</span>
+ * </Terminal>
+ */
+export const Terminal = forwardRef<HTMLDivElement, TerminalProps>(
+  ({ title = "bash", children, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "overflow-hidden rounded-xl border border-dark-line bg-dark-bg shadow-lg",
+          className
+        )}
+        {...props}
+      >
+        {/* Title bar */}
+        <div className="flex items-center gap-2 border-b border-dark-line bg-dark-surface px-4 py-2.5">
+          <div className="flex gap-1.5">
+            <span className="h-3 w-3 rounded-full bg-[#ff5f56]" />
+            <span className="h-3 w-3 rounded-full bg-[#ffbd2e]" />
+            <span className="h-3 w-3 rounded-full bg-[#27c93f]" />
+          </div>
+          <span className="ml-2 font-mono text-xs text-dark-ink/60">{title}</span>
+        </div>
+
+        {/* Body */}
+        <div className="p-4 font-mono text-[13px] leading-relaxed text-dark-ink">
+          <span className="mr-2 select-none text-[#27c93f]">$</span>
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+Terminal.displayName = "Terminal";

package/src/components/terminal/index.ts

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

package/src/components/text-generate/TextGenerate.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { type HTMLMotionProps } from "framer-motion";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface TextGenerateProps
+  extends Omit<HTMLMotionProps<"span">, "ref"> {
+  /** Text content to animate */
+  text: string;
+  /** Duration of each word's fade-in (seconds) */
+  duration?: number;
+}
+
+/**
+ * TextGenerate — text that fades in word by word on mount.
+ *
+ * Splits `text` by spaces and staggers each word's opacity 0→1.
+ * Preserves inline layout via a wrapping span.
+ *
+ * @example
+ * <TextGenerate text="Hello world from zmzai" duration={0.5} />
+ */
+export function TextGenerate({
+  text,
+  duration = 0.5,
+  className,
+  ...props
+}: TextGenerateProps) {
+  const words = text.split(" ");
+
+  return (
+    <motion.span
+      className={cn("inline-block", className)}
+      initial="hidden"
+      animate="visible"
+      {...props}
+    >
+      {words.map((word, i) => (
+        <motion.span
+          key={i}
+          className="inline-block will-change-transform"
+          variants={{
+            hidden: { opacity: 0, y: 4 },
+            visible: { opacity: 1, y: 0 },
+          }}
+          transition={{
+            duration,
+            delay: i * (duration * 0.4),
+            ease: [0.16, 1, 0.3, 1],
+          }}
+        >
+          {word}
+          {i < words.length - 1 ? "\u00A0" : ""}
+        </motion.span>
+      ))}
+    </motion.span>
+  );
+}

package/src/components/text-generate/index.ts

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

package/src/components/text-hover-effect/TextHoverEffect.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { type Variants } from "framer-motion";
+import { motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface TextHoverEffectProps {
+  /** The text to display and animate */
+  text: string;
+  className?: string;
+  /** Per-letter animation duration in seconds (default 0.3) */
+  duration?: number;
+}
+
+const containerVariants: Variants = {
+  rest: { transition: { staggerChildren: 0.025, staggerDirection: -1 } },
+  hover: { transition: { staggerChildren: 0.025 } },
+};
+
+function makeLetterVariants(duration: number): Variants {
+  return {
+    rest: { y: 0, opacity: 1 },
+    hover: { y: "-100%", opacity: 0 },
+    transition: { duration },
+  } as Variants;
+}
+
+/**
+ * TextHoverEffect — text whose letters slide up and are replaced on hover.
+ *
+ * Each letter animates upward and out while a duplicate slides in from
+ * below (Aceternity-style hover reveal). Uses framer-motion `staggerChildren`
+ * so letters cascade rather than moving in lockstep.
+ *
+ * @example
+ * <TextHoverEffect text="开始使用" className="text-2xl font-semibold" />
+ */
+export function TextHoverEffect({
+  text,
+  className,
+  duration = 0.3,
+}: TextHoverEffectProps) {
+  const letters = Array.from(text);
+  const letterVariants = makeLetterVariants(duration);
+
+  return (
+    <motion.span
+      className={cn(
+        "relative inline-block cursor-pointer overflow-hidden align-bottom text-ink",
+        className
+      )}
+      variants={containerVariants}
+      initial="rest"
+      animate="rest"
+      whileHover="hover"
+    >
+      {/* Top row: slides up & fades out on hover */}
+      <span className="inline-flex" aria-hidden>
+        {letters.map((char, i) => (
+          <motion.span
+            key={`top-${i}`}
+            className="inline-block whitespace-pre"
+            variants={letterVariants}
+            transition={{ duration }}
+          >
+            {char === " " ? "\u00A0" : char}
+          </motion.span>
+        ))}
+      </span>
+      {/* Bottom row: slides up into place on hover */}
+      <span className="absolute inset-0 inline-flex" aria-hidden>
+        {letters.map((char, i) => (
+          <motion.span
+            key={`bottom-${i}`}
+            className="inline-block whitespace-pre text-ink-2"
+            variants={{
+              rest: { y: "100%", opacity: 0 },
+              hover: { y: 0, opacity: 1 },
+            }}
+            transition={{ duration }}
+          >
+            {char === " " ? "\u00A0" : char}
+          </motion.span>
+        ))}
+      </span>
+      {/* Accessible label for screen readers */}
+      <span className="sr-only">{text}</span>
+    </motion.span>
+  );
+}

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

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

package/src/components/textarea/Textarea.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+import { cn } from "../../utils/cn";
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  variant?: "default" | "brutal";
+}
+
+/**
+ * Textarea — multi-line text input.
+ *
+ * - `default`: light border, focus border turns ink
+ * - `brutal`: 2px ink border + hard offset shadow
+ *
+ * @example
+ * <Textarea placeholder="描述任务…" rows={4} />
+ * <Textarea variant="brutal" placeholder="描述任务…" />
+ */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, variant = "default", ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        className={cn(
+          "w-full resize-none bg-bg font-sans text-ink placeholder:text-ink-3 outline-none transition-all",
+          variant === "default" &&
+            "border border-line rounded-lg px-4 py-2.5 text-sm focus:border-ink",
+          variant === "brutal" &&
+            "border-2 border-ink rounded-xl px-4 py-3 text-sm shadow-[4px_4px_0_var(--color-ink)] focus:shadow-[6px_6px_0_var(--color-accent)] focus:border-accent focus:-translate-x-px focus:-translate-y-px",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";

package/src/components/textarea/index.ts

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

package/src/components/timeline/Timeline.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useRef, type ReactNode } from "react";
+import { motion, useScroll, useSpring } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export interface TimelineItem {
+  title: string;
+  content: ReactNode;
+  /** Optional timestamp shown beside title */
+  time?: string;
+  /** Status: default (gray), active (filled black), done (filled black + check) */
+  status?: "default" | "active" | "done";
+}
+
+export interface TimelineProps {
+  items: TimelineItem[];
+  className?: string;
+}
+
+/**
+ * Timeline — scroll-reveal timeline with progress beam.
+ *
+ * Minimal black-gray design: thin line fills as you scroll,
+ * dots are black/gray only (no green/blue).
+ *
+ * @example
+ * <Timeline items={[
+ *   { title: "任务创建", time: "14:32", status: "done", content: <p>用户发起请求</p> },
+ *   { title: "执行中", time: "14:34", status: "active", content: <p>正在生成…</p> },
+ *   { title: "等待审批", status: "default", content: <p>写入文件</p> },
+ * ]} />
+ */
+export function Timeline({ items, className }: TimelineProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start center", "end end"],
+  });
+  const scaleY = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001,
+  });
+
+  return (
+    <div ref={ref} className={cn("relative", className)}>
+      {/* Track */}
+      <div className="absolute left-[7px] top-2 bottom-2 w-px bg-line" />
+
+      {/* Progress fill */}
+      <motion.div
+        className="absolute left-[7px] top-2 w-px origin-top bg-ink"
+        style={{ scaleY, height: "calc(100% - 1rem)" }}
+      />
+
+      {/* Items */}
+      <div className="flex flex-col">
+        {items.map((item, index) => (
+          <TimelineItemRow key={index} item={item} isLast={index === items.length - 1} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TimelineItemRow({ item, isLast }: { item: TimelineItem; isLast: boolean }) {
+  const status = item.status ?? "default";
+
+  return (
+    <div className={cn("relative flex gap-4", isLast ? "pb-0" : "pb-6")}>
+      {/* Dot — black/gray only */}
+      <div className="relative z-10 flex-shrink-0 pt-0.5">
+        {status === "done" && (
+          <div className="flex h-3.5 w-3.5 items-center justify-center rounded-full bg-ink">
+            <svg className="h-2 w-2 text-white" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <polyline points="10 3 5 8 2 5" />
+            </svg>
+          </div>
+        )}
+        {status === "active" && (
+          <div className="h-3.5 w-3.5 rounded-full border-2 border-ink bg-ink animate-pulse" />
+        )}
+        {status === "default" && (
+          <div className="h-3.5 w-3.5 rounded-full border-2 border-line bg-bg" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="min-w-0 flex-1">
+        <div className="mb-1 flex items-center gap-2">
+          <span className={cn(
+            "text-sm font-semibold",
+            status === "default" ? "text-ink-3" : "text-ink"
+          )}>
+            {item.title}
+          </span>
+          {item.time && (
+            <span className="ml-auto font-mono text-xs text-ink-3">{item.time}</span>
+          )}
+        </div>
+        <div className="text-sm leading-relaxed text-ink-2">{item.content}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/timeline/index.ts

@@ -0,0 +1,3 @@
+export { Timeline } from "./Timeline";
+export type { TimelineProps } from "./Timeline";
+export type { TimelineItem } from "./Timeline";

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { type ReactNode } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../utils/cn";
+
+/**
+ * TooltipProvider — wrap app root once.
+ * Required by Radix Tooltip for delay/positioning context.
+ */
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export interface TooltipProps {
+  children: ReactNode;
+  content: ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+  className?: string;
+}
+
+/**
+ * Tooltip — hover/focus tooltip (Radix UI).
+ *
+ * Wrap your app in `<TooltipProvider>` (once, at root), then use `<Tooltip>`.
+ *
+ * @example
+ * <Tooltip content="删除">
+ *   <button>×</button>
+ * </Tooltip>
+ */
+export function Tooltip({ children, content, side = "top", className }: TooltipProps) {
+  return (
+    <TooltipPrimitive.Root delayDuration={200}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          side={side}
+          sideOffset={6}
+          className={cn(
+            "z-50 rounded-lg bg-ink px-2.5 py-1.5 text-xs font-medium text-white shadow-md",
+            "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            className
+          )}
+        >
+          {content}
+          <TooltipPrimitive.Arrow className="fill-ink" />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  );
+}

package/src/components/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipProvider } from "./Tooltip";
+export type { TooltipProps } from "./Tooltip";