cistack 6.1.0 → 6.2.0

package/product-site/components/InstallToggle.tsx

@@ -1,29 +1,36 @@
 "use client";
 
+import { AnimatePresence, m, useReducedMotion } from "framer-motion";
 import { useState } from "react";
 
+import CopyButton from "@/components/CopyButton";
+import { Separator } from "@/components/ui/separator";
 import type { Dictionary } from "@/lib/dictionary-types";
 
+import { SITE_EASE } from "@/components/site-motion";
+
 type InstallMode = "npx" | "npm";
 
+const installCopy: Record<InstallMode, string> = {
+  npx: "npx cistack",
+  npm: "npm install -g cistack",
+};
+
 const installModes: Record<
   InstallMode,
   {
-    command: string;
     badgeClassName: string;
     badgeLabel: keyof Dictionary["install_toggle"];
     description: keyof Dictionary["install_toggle"];
   }
 > = {
   npx: {
-    command: "$ npx cistack",
-    badgeClassName: "border-emerald-500/20 bg-emerald-500/10 text-emerald-500",
+    badgeClassName: "border-emerald-200 bg-emerald-50 text-emerald-800",
     badgeLabel: "recommended_badge",
     description: "npx_desc",
   },
   npm: {
-    command: "$ npm install -g cistack",
-    badgeClassName: "border-zinc-700 bg-zinc-500/10 text-zinc-400",
+    badgeClassName: "border-zinc-200 bg-zinc-50 text-zinc-700",
     badgeLabel: "global_badge",
     description: "npm_desc",
   },
@@ -32,55 +39,84 @@ const installModes: Record<
 export default function InstallToggle({ dict }: { dict: Dictionary }) {
   const [mode, setMode] = useState<InstallMode>("npx");
   const selectedMode = installModes[mode];
+  const command = installCopy[mode];
+  const reduce = useReducedMotion();
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center">
-        <button
+    <div className="flex flex-col gap-0">
+      <div className="flex flex-wrap items-center gap-3 pb-3">
+        <m.button
           type="button"
           onClick={() => setMode("npx")}
-          className={`py-1 pr-4 text-[12px] font-semibold transition-colors ${
+          whileTap={reduce ? {} : { scale: 0.98 }}
+          className={`text-sm font-semibold transition-colors ${
             mode === "npx" ? "text-zinc-900" : "text-zinc-400 hover:text-zinc-600"
           }`}
         >
           npx
           {mode === "npx" && (
-            <span className="ml-1.5 text-[11px] font-normal text-zinc-400">
-              {" "}
-              - {dict.install_toggle.recommended}
+            <span className="ml-1.5 text-xs font-normal text-zinc-500">
+              — {dict.install_toggle.recommended}
             </span>
           )}
-        </button>
-        <div className="h-3.5 w-px bg-zinc-200" />
-        <button
+        </m.button>
+        <Separator orientation="vertical" className="h-4 bg-zinc-200" />
+        <m.button
           type="button"
           onClick={() => setMode("npm")}
-          className={`py-1 pl-4 text-[12px] font-semibold transition-colors ${
+          whileTap={reduce ? {} : { scale: 0.98 }}
+          className={`text-sm font-semibold transition-colors ${
             mode === "npm" ? "text-zinc-900" : "text-zinc-400 hover:text-zinc-600"
           }`}
         >
           {dict.install_toggle.npm_global}
-        </button>
+        </m.button>
+        <m.span
+          layout
+          className={`ms-auto rounded-sm border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide ${selectedMode.badgeClassName}`}
+          transition={{ type: "spring", stiffness: 420, damping: 28 }}
+        >
+          {dict.install_toggle[selectedMode.badgeLabel]}
+        </m.span>
       </div>
 
-      <div className="relative overflow-hidden rounded-sm bg-zinc-950 px-6 pt-5 pb-6 font-mono text-sm text-zinc-300">
-        <div className="mb-5 flex items-center justify-between">
-          <span
-            className={`px-2 py-0.5 text-[12px] font-black uppercase tracking-widest ${selectedMode.badgeClassName}`}
-          >
-            {dict.install_toggle[selectedMode.badgeLabel]}
-          </span>
-          <span className="text-[12px] font-black uppercase tracking-[0.2em] text-zinc-700">
-            {mode}
-          </span>
+      <Separator className="bg-zinc-200" />
+
+      <m.div
+        key={command}
+        initial={reduce ? false : { opacity: 0, y: 6 }}
+        animate={reduce ? undefined : { opacity: 1, y: 0 }}
+        transition={{ duration: 0.35, ease: SITE_EASE }}
+        className="flex min-h-[3.25rem] items-stretch border bg-white"
+      >
+        <pre className="flex flex-1 items-center overflow-x-auto p-3 font-mono text-[13px] leading-snug text-zinc-900">
+          <code>{command}</code>
+        </pre>
+        <Separator orientation="vertical" className="bg-zinc-200" />
+        <div className="flex shrink-0 items-center px-3">
+          <CopyButton
+            text={command}
+            idleLabel={dict.copy_button.idle}
+            successLabel={dict.copy_button.success}
+          />
         </div>
-        <code className="text-[15px] tracking-tight text-emerald-400">
-          {selectedMode.command}
-        </code>
-        <div className="my-4 h-px w-full bg-zinc-800" />
-        <p className="font-sans text-[12px] leading-relaxed text-zinc-500">
-          {dict.install_toggle[selectedMode.description]}
-        </p>
+      </m.div>
+
+      <Separator className="bg-zinc-200" />
+
+      <div className="relative min-h-[4.5rem] overflow-hidden pt-4">
+        <AnimatePresence mode="wait" initial={false}>
+          <m.p
+            key={mode}
+            initial={reduce ? false : { opacity: 0, y: 8 }}
+            animate={reduce ? undefined : { opacity: 1, y: 0 }}
+            exit={reduce ? undefined : { opacity: 0, y: -6 }}
+            transition={{ duration: 0.3, ease: SITE_EASE }}
+            className="text-sm leading-relaxed text-zinc-600"
+          >
+            {dict.install_toggle[selectedMode.description]}
+          </m.p>
+        </AnimatePresence>
       </div>
     </div>
   );

package/product-site/components/TerminalCard.tsx

@@ -6,7 +6,7 @@ import type { Dictionary } from "@/lib/dictionary-types";
 
 function TerminalCardFallback({ version, dict }: { version: string; dict: Dictionary["terminal"] }) {
   return (
-    <div className="flex h-[300px] w-full flex-col rounded-sm border border-zinc-200 bg-white sm:h-[350px] lg:h-[380px]">
+    <div className="flex h-[300px] w-full flex-col border border-zinc-200 bg-white sm:h-[350px] lg:h-[380px]">
       <div className="flex shrink-0 items-center justify-between border-b border-zinc-200 bg-white px-4 py-3">
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2">
@@ -32,9 +32,11 @@ function TerminalCardFallback({ version, dict }: { version: string; dict: Dictio
         </div>
         <div className="space-y-1">
           <div className="font-bold text-zinc-900">cistack v{version}</div>
-          <div>Project scanned</div>
-          <div>Stack detected</div>
-          <div>Detected Stack: Next.js, React, TypeScript</div>
+          <div>{dict.project_scanned}</div>
+          <div>{dict.stack_detected}</div>
+          <div>
+            {dict.detected_stack}: Next.js, React, TypeScript
+          </div>
         </div>
       </div>
     </div>
@@ -44,9 +46,11 @@ function TerminalCardFallback({ version, dict }: { version: string; dict: Dictio
 export default function TerminalCard({
   dict,
   version = "3.0.0",
+  copyLabels,
 }: {
   dict: Dictionary["terminal"];
   version?: string;
+  copyLabels: { idle: string; success: string };
 }) {
   const TerminalCardMotion = useMemo(
     () =>
@@ -57,5 +61,5 @@ export default function TerminalCard({
     [version, dict]
   );
 
-  return <TerminalCardMotion dict={dict} version={version} />;
+  return <TerminalCardMotion dict={dict} version={version} copyLabels={copyLabels} />;
 }

package/product-site/components/TerminalCardMotion.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { LazyMotion, domAnimation, m } from "framer-motion";
+import { m } from "framer-motion";
 import { RefreshCcw } from "lucide-react";
 
 import CopyButton from "@/components/CopyButton";
+import { Separator } from "@/components/ui/separator";
 import type { Dictionary } from "@/lib/dictionary-types";
 
 const COMMAND = "npx cistack";
@@ -41,9 +42,11 @@ const lineColor: Record<OutputLine["type"], string> = {
 export default function TerminalCardMotion({
   dict,
   version,
+  copyLabels,
 }: {
   dict: Dictionary["terminal"];
   version: string;
+  copyLabels: { idle: string; success: string };
 }) {
   const [typedCommand, setTypedCommand] = useState("");
   const [visibleLines, setVisibleLines] = useState(0);
@@ -231,34 +234,39 @@ export default function TerminalCardMotion({
   };
 
   return (
-    <LazyMotion features={domAnimation}>
-      <div
-        key={animationKey}
-        className="flex h-[300px] w-full flex-col rounded-sm border border-zinc-100 bg-white sm:h-[350px] lg:h-[380px]"
-      >
-        <div className="flex shrink-0 items-center justify-between border-b border-zinc-100 bg-white px-4 py-3">
+    <div
+      key={animationKey}
+      className="flex h-[300px] w-full flex-col border border-zinc-200 bg-white sm:h-[350px] lg:h-[380px]"
+    >
+        <div className="flex shrink-0 items-center justify-between border-b border-zinc-200 bg-white px-4 py-3">
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-2">
               <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
               <span className="font-mono text-[12px] font-black tracking-[0.18em] text-zinc-600 uppercase">
-                TERMINAL
+                {dict.label}
               </span>
             </div>
           </div>
 
           <div className="flex items-center gap-2">
-            <div className="flex items-center gap-3 rounded-sm border border-zinc-200 bg-zinc-50 px-2.5 py-1">
-              <span className="font-mono text-[13px] font-bold tracking-tight text-zinc-800">
+            <div className="flex items-center gap-0 border border-zinc-200 bg-white">
+              <span className="px-2.5 py-1 font-mono text-[13px] font-bold tracking-tight text-zinc-800">
                 {COMMAND}
               </span>
-              <div className="h-3 w-px bg-zinc-300" />
-              <CopyButton text={COMMAND} variant="terminal" />
+              <Separator orientation="vertical" className="h-6 bg-zinc-200" />
+              <div className="px-2">
+                <CopyButton
+                  text={COMMAND}
+                  idleLabel={copyLabels.idle}
+                  successLabel={copyLabels.success}
+                />
+              </div>
             </div>
             <m.button
               type="button"
               whileTap={{ scale: 0.9 }}
               onClick={handleReplay}
-              className="rounded-sm border border-transparent p-1.5 text-zinc-500 transition-colors hover:border-zinc-200 hover:text-zinc-900"
+              className="border border-transparent p-1.5 text-zinc-500 transition-colors hover:border-zinc-200 hover:text-zinc-900"
               aria-label="Replay terminal animation"
             >
               <RefreshCcw size={14} />
@@ -312,6 +320,5 @@ export default function TerminalCardMotion({
           </div>
         </div>
       </div>
-    </LazyMotion>
   );
 }

package/product-site/components/site-motion.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import {
+  LazyMotion,
+  domAnimation,
+  m,
+  useReducedMotion,
+  type Variants,
+} from "framer-motion";
+import type { ReactNode } from "react";
+
+export const SITE_EASE = [0.22, 1, 0.36, 1] as const;
+
+export const scrollViewport = {
+  once: true,
+  margin: "-10% 0px -6% 0px",
+  amount: 0.15,
+} as const;
+
+export function SiteMotionRoot({ children }: { children: ReactNode }) {
+  return (
+    <LazyMotion features={domAnimation} strict>
+      {children}
+    </LazyMotion>
+  );
+}
+
+export function Reveal({
+  children,
+  className,
+  delay = 0,
+  y = 28,
+}: {
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+  y?: number;
+}) {
+  const reduce = useReducedMotion();
+  if (reduce) {
+    return <div className={className}>{children}</div>;
+  }
+  return (
+    <m.div
+      className={className}
+      initial={{ opacity: 0, y, filter: "blur(8px)" }}
+      whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+      viewport={scrollViewport}
+      transition={{ duration: 0.62, ease: SITE_EASE, delay }}
+    >
+      {children}
+    </m.div>
+  );
+}
+
+export function MotionHeader({ children, className }: { children: ReactNode; className?: string }) {
+  const reduce = useReducedMotion();
+  if (reduce) {
+    return <header className={className}>{children}</header>;
+  }
+  return (
+    <m.header
+      className={className}
+      initial={{ opacity: 0, y: -18, filter: "blur(6px)" }}
+      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+      transition={{ duration: 0.52, ease: SITE_EASE }}
+    >
+      {children}
+    </m.header>
+  );
+}
+
+const heroStagger: Variants = {
+  hidden: {},
+  show: {
+    transition: { staggerChildren: 0.09, delayChildren: 0.06 },
+  },
+};
+
+const heroItem: Variants = {
+  hidden: { opacity: 0, y: 26 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.55, ease: SITE_EASE },
+  },
+};
+
+export function HeroStagger({ children, className }: { children: ReactNode; className?: string }) {
+  const reduce = useReducedMotion();
+  if (reduce) {
+    return <div className={className}>{children}</div>;
+  }
+  return (
+    <m.div
+      className={className}
+      variants={heroStagger}
+      initial="hidden"
+      animate="show"
+    >
+      {children}
+    </m.div>
+  );
+}
+
+export function HeroStaggerItem({ children, className }: { children: ReactNode; className?: string }) {
+  const reduce = useReducedMotion();
+  if (reduce) {
+    return <div className={className}>{children}</div>;
+  }
+  return (
+    <m.div className={className} variants={heroItem}>
+      {children}
+    </m.div>
+  );
+}
+
+const listStagger: Variants = {
+  hidden: {},
+  show: {
+    transition: { staggerChildren: 0.05, delayChildren: 0.04 },
+  },
+};
+
+const listItem: Variants = {
+  hidden: { opacity: 0, y: 10 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.42, ease: SITE_EASE },
+  },
+};
+
+export function StaggerList({
+  children,
+  className,
+  as: Component = "ul",
+}: {
+  children: ReactNode;
+  className?: string;
+  as?: "ul" | "ol" | "div";
+}) {
+  const reduce = useReducedMotion();
+  if (reduce) {
+    const Tag = Component;
+    return <Tag className={className}>{children}</Tag>;
+  }
+  const MotionTag = Component === "ul" ? m.ul : Component === "ol" ? m.ol : m.div;
+  return (
+    <MotionTag
+      className={className}
+      variants={listStagger}
+      initial="hidden"
+      whileInView="show"
+      viewport={scrollViewport}
+    >
+      {children}
+    </MotionTag>
+  );
+}
+
+export function StaggerItem({ children, className }: { children: ReactNode; className?: string }) {
+  const reduce = useReducedMotion();
+  if (reduce) {
+    return <li className={className}>{children}</li>;
+  }
+  return (
+    <m.li className={className} variants={listItem}>
+      {children}
+    </m.li>
+  );
+}
+
+const tagContainer: Variants = {
+  hidden: {},
+  show: {
+    transition: { staggerChildren: 0.035, delayChildren: 0.02 },
+  },
+};
+
+const tagItem: Variants = {
+  hidden: { opacity: 0, scale: 0.85, y: 6 },
+  show: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: { type: "spring", stiffness: 380, damping: 22 },
+  },
+};
+
+export function MotionTagList({ tags }: { tags: readonly string[] }) {
+  const reduce = useReducedMotion();
+  if (reduce) {
+    return (
+      <div className="flex flex-wrap gap-1.5">
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="inline-flex border border-zinc-200 bg-white px-2.5 py-1 text-xs font-medium text-zinc-700"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <m.div
+      className="flex flex-wrap gap-1.5"
+      variants={tagContainer}
+      initial="hidden"
+      whileInView="show"
+      viewport={scrollViewport}
+    >
+      {tags.map((tag) => (
+        <m.span
+          key={tag}
+          variants={tagItem}
+          className="inline-flex border border-zinc-200 bg-white px-2.5 py-1 text-xs font-medium text-zinc-700"
+          whileHover={{ y: -2, borderColor: "rgb(24 24 27)", transition: { duration: 0.2 } }}
+        >
+          {tag}
+        </m.span>
+      ))}
+    </m.div>
+  );
+}
+
+export { m };