motion-ui-skill 2.0.0

package/components/previews/motion/cylinder-carousel.preview.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { type ComponentType, useState } from "react";
+import { CylinderCarousel } from "@/components/motion/cylinder-carousel";
+import {
+  ShaderBackground,
+  type ShaderBackgroundVariant,
+} from "@/components/motion/shader-background";
+import { Tabs, TabsList, TabsTrigger } from "@/components/motion/tabs";
+
+// Each variant has its own prop shape; the slides only spread their own preset.
+const Background = ShaderBackground as ComponentType<
+  { variant: ShaderBackgroundVariant; className?: string } & Record<
+    string,
+    unknown
+  >
+>;
+
+const SLIDES: { variant: ShaderBackgroundVariant; props: Record<string, unknown> }[] = [
+  {
+    variant: "dithering",
+    props: { colorBack: "#1a1030", colorFront: "#b98cff", speed: 0.3 },
+  },
+  {
+    variant: "metaballs",
+    props: { colors: ["#e8e8ef", "#8a8a9a", "#1a1a22"], colorBack: "#c9b9a8", speed: 0.4 },
+  },
+  {
+    variant: "warp",
+    props: { colors: ["#c8ff00", "#3a5a00", "#c8ff00", "#88bb00"], speed: 0.4 },
+  },
+  {
+    variant: "god-rays",
+    props: { colors: ["#6a7bff", "#00114d"], colorBack: "#000000", speed: 0.5 },
+  },
+  {
+    variant: "swirl",
+    props: { colorBack: "#1a0000", colors: ["#ffd1a8", "#ff6a3d", "#b31a57"], speed: 0.3 },
+  },
+  {
+    variant: "mesh-gradient",
+    props: { colors: ["#e0eaff", "#241d9a", "#f75092", "#9f50d3"], speed: 0.3 },
+  },
+  {
+    variant: "voronoi",
+    props: { colors: ["#ff8247", "#ffe53d"], speed: 0.3 },
+  },
+  {
+    variant: "neuro-noise",
+    props: { colorFront: "#ffffff", colorMid: "#47a6ff", colorBack: "#000000", speed: 0.4 },
+  },
+];
+
+export function CylinderCarouselPreview() {
+  const [variant, setVariant] = useState<"concave" | "convex">("concave");
+
+  return (
+    <div className="flex w-full flex-col items-center gap-4 p-6">
+      <Tabs
+        value={variant}
+        onValueChange={(v) => setVariant(v as "concave" | "convex")}
+        variant="segment"
+      >
+        <TabsList>
+          <TabsTrigger value="concave">Concave</TabsTrigger>
+          <TabsTrigger value="convex">Convex</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      {/* clip-path (not overflow) so the rounded corner also clips the GPU-composited balls */}
+      <div className="w-full rounded-3xl border border-border/60 bg-muted/20 py-6 [clip-path:inset(0_round_1.5rem)]">
+        <CylinderCarousel
+          variant={variant}
+          itemSize={230}
+          height={310}
+          className="w-full"
+        >
+          {SLIDES.map((slide) => (
+            <div
+              key={slide.variant}
+              className="h-full w-full overflow-hidden rounded-full border border-border/40"
+            >
+              <Background
+                variant={slide.variant}
+                className="h-full w-full"
+                {...slide.props}
+              />
+            </div>
+          ))}
+        </CylinderCarousel>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Drag, scroll or use arrow keys to roll
+      </p>
+    </div>
+  );
+}

package/components/previews/motion/dock.preview.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Calendar, Home, Mail, Music, Settings, Sparkles } from "lucide-react";
+import { useState } from "react";
+import { GithubIcon } from "@/components/app/icons";
+import { Dock, DockItem, DockSeparator } from "@/components/motion/dock";
+
+const ITEMS = [
+  { id: "home", icon: Home, label: "Home" },
+  { id: "mail", icon: Mail, label: "Mail" },
+  { id: "calendar", icon: Calendar, label: "Calendar" },
+  { id: "music", icon: Music, label: "Music" },
+  { id: "discover", icon: Sparkles, label: "Discover" },
+];
+
+export function DockPreview() {
+  const [active, setActive] = useState("home");
+
+  return (
+    <div className="flex w-full justify-center">
+      <Dock>
+        {ITEMS.map(({ id, icon: Icon, label }) => (
+          <DockItem
+            key={id}
+            aria-label={label}
+            active={active === id}
+            onClick={() => setActive(id)}
+          >
+            <Icon className="h-5 w-5" />
+          </DockItem>
+        ))}
+        <DockSeparator />
+        <DockItem
+          aria-label="Settings"
+          active={active === "settings"}
+          onClick={() => setActive("settings")}
+        >
+          <Settings className="h-5 w-5" />
+        </DockItem>
+        <DockItem aria-label="GitHub">
+          <GithubIcon className="h-5 w-5" />
+        </DockItem>
+      </Dock>
+    </div>
+  );
+}

package/components/previews/motion/drawer.preview.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import { Drawer } from "@/components/motion/drawer";
+
+export function DrawerPreview() {
+  const [open, setOpen] = useState(false);
+  const [side, setSide] = useState<"left" | "right">("right");
+
+  const openWith = (s: "left" | "right") => {
+    setSide(s);
+    setOpen(true);
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <button
+        type="button"
+        onClick={() => openWith("left")}
+        className="inline-flex h-10 items-center rounded-full border border-border bg-card px-5 text-sm font-medium text-foreground transition-colors hover:bg-card/70"
+      >
+        Open left
+      </button>
+      <button
+        type="button"
+        onClick={() => openWith("right")}
+        className="inline-flex h-10 items-center rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+      >
+        Open right
+      </button>
+
+      <Drawer
+        open={open}
+        onOpenChange={setOpen}
+        side={side}
+        ariaLabel="Demo drawer"
+        className="gap-4 p-6"
+      >
+        <h2 className="text-sm font-semibold text-foreground">Drawer</h2>
+        <p className="text-sm text-muted-foreground">
+          Slides in from the {side}. Press Esc or click outside to close.
+        </p>
+      </Drawer>
+    </div>
+  );
+}

package/components/previews/motion/expandable-control.preview.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Bell, X } from "lucide-react";
+import {
+  ExpandableButton,
+  ExpandableChip,
+} from "@/components/motion/expandable-control";
+
+export function ExpandableControlPreview() {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <div className="flex items-center gap-2">
+        <ExpandableButton
+          icon={<Bell className="size-4" />}
+          label="Notifications"
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <ExpandableChip
+          label="React"
+          actionIcon={<X className="size-3.5" />}
+          actionLabel="Remove React"
+        />
+      </div>
+    </div>
+  );
+}

package/components/previews/motion/expanding-arrow-button.preview.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ExpandingArrowButton } from "@/components/motion/expanding-arrow-button";
+
+export function ExpandingArrowButtonPreview() {
+  return (
+    <div className="flex items-center justify-center">
+      <ExpandingArrowButton>Book a demo</ExpandingArrowButton>
+    </div>
+  );
+}

package/components/previews/motion/file-tree.preview.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {
+  Braces,
+  FileCode2,
+  FileJson2,
+  FileText,
+  Palette,
+} from "lucide-react";
+import {
+  FileTree,
+  FileTreeFile,
+  FileTreeFolder,
+} from "@/components/motion/file-tree";
+
+export function FileTreePreview() {
+  return (
+    <div className="flex min-h-[420px] w-full items-start justify-center px-4 pt-10">
+      <div className="w-full max-w-xs p-2">
+        <FileTree
+          defaultValue="file-tree"
+          defaultExpandedIds={["app", "components"]}
+          ariaLabel="Project files"
+        >
+          <FileTreeFolder value="app" name="app">
+            <FileTreeFolder value="components" name="components">
+              <FileTreeFile
+                value="file-tree"
+                name="file-tree.tsx"
+                icon={<Braces className="size-4 text-sky-500" />}
+              />
+              <FileTreeFile
+                value="button"
+                name="button.tsx"
+                icon={<Braces className="size-4 text-sky-500" />}
+              />
+            </FileTreeFolder>
+            <FileTreeFile
+              value="page"
+              name="page.tsx"
+              icon={<FileCode2 className="size-4 text-sky-500" />}
+            />
+            <FileTreeFile
+              value="styles"
+              name="globals.css"
+              icon={<Palette className="size-4 text-violet-500" />}
+            />
+          </FileTreeFolder>
+          <FileTreeFolder value="public" name="public">
+            <FileTreeFile value="logo" name="logo.svg" />
+            <FileTreeFile value="grid" name="grid.svg" />
+          </FileTreeFolder>
+          <FileTreeFile
+            value="package"
+            name="package.json"
+            icon={<FileJson2 className="size-4 text-amber-500" />}
+          />
+          <FileTreeFile
+            value="readme"
+            name="README.md"
+            icon={<FileText className="size-4 text-muted-foreground" />}
+          />
+        </FileTree>
+      </div>
+    </div>
+  );
+}

package/components/previews/motion/input.preview.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Eye, EyeOff, Mail, Search } from "lucide-react";
+import { useState } from "react";
+import { Input } from "@/components/motion/input";
+
+export function InputPreview() {
+  const [email, setEmail] = useState("");
+  const [pass, setPass] = useState("hunter2");
+  const [query, setQuery] = useState("Ada");
+  const [show, setShow] = useState(false);
+
+  const emailError =
+    email.length > 0 && !email.includes("@") ? "Enter a valid email address." : undefined;
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-1">
+      <Input
+        label="Email"
+        type="email"
+        placeholder="you@example.com"
+        leftIcon={<Mail />}
+        value={email}
+        onChange={setEmail}
+        error={emailError}
+        reserveErrorLine
+      />
+      <Input
+        label="Password"
+        type={show ? "text" : "password"}
+        value={pass}
+        onChange={setPass}
+        rightIcon={
+          <button
+            type="button"
+            onClick={() => setShow((s) => !s)}
+            aria-label={show ? "Hide password" : "Show password"}
+            className="pointer-events-auto"
+          >
+            {show ? <EyeOff /> : <Eye />}
+          </button>
+        }
+        reserveErrorLine
+      />
+      <Input
+        label="Search"
+        leftIcon={<Search />}
+        value={query}
+        onChange={setQuery}
+        success={query.length > 1}
+        reserveErrorLine
+      />
+    </div>
+  );
+}

package/components/previews/motion/loader.preview.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Loader, type LoaderVariant } from "@/components/motion/loader";
+
+const VARIANTS: { variant: LoaderVariant; label: string }[] = [
+  { variant: "spinner", label: "Spinner" },
+  { variant: "dots", label: "Dots" },
+  { variant: "bars", label: "Bars" },
+  { variant: "dot-matrix", label: "Dot Matrix" },
+  { variant: "dither", label: "Dither" },
+  { variant: "morph", label: "Morph" },
+  { variant: "comet", label: "Comet" },
+  { variant: "metaballs", label: "Metaballs" },
+  { variant: "newton", label: "Newton" },
+  { variant: "helix", label: "Helix" },
+  { variant: "scramble", label: "Scramble" },
+  { variant: "percent", label: "Percent" },
+  { variant: "ascii", label: "ASCII" },
+  { variant: "ascii-line", label: "ASCII Line" },
+  { variant: "ascii-braille", label: "ASCII Braille" },
+  { variant: "ascii-blocks", label: "ASCII Blocks" },
+  { variant: "ascii-bounce", label: "ASCII Bounce" },
+];
+
+export function LoaderPreview() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-8 p-8">
+      {VARIANTS.map(({ variant, label }) => (
+        <div key={variant} className="flex flex-col items-center gap-4">
+          <Loader variant={variant} size={36} />
+          <span className="text-xs text-muted-foreground">{label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/previews/motion/marquee.preview.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Marquee } from "@/components/motion/marquee";
+
+const logos = ["Vercel", "Linear", "Stripe", "Figma", "GitHub", "Notion", "Loom", "Raycast"];
+
+export function MarqueePreview() {
+  return (
+    <div className="w-full">
+      <Marquee speed={25}>
+        {logos.map((l) => (
+          <div
+            key={l}
+            className="mx-4 flex h-12 items-center justify-center rounded-lg border border-border bg-card px-6 text-sm font-medium text-foreground"
+          >
+            {l}
+          </div>
+        ))}
+      </Marquee>
+    </div>
+  );
+}

package/components/previews/motion/morphing-modal.preview.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { Ban, Lock, ScanFace, ScrollText, ShieldCheck, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { MorphingModal } from "@/components/motion/morphing-modal";
+
+type View = "options" | "private-key" | "recovery" | null;
+
+export function MorphingModalPreview() {
+  const [view, setView] = useState<View>(null);
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <button
+        type="button"
+        onClick={() => setView("options")}
+        className="inline-flex h-10 items-center rounded-full border border-border bg-card px-5 text-sm font-medium text-foreground press hover:border-(--color-border-strong)"
+      >
+        Open wallet options
+      </button>
+      <p className="text-xs text-muted-foreground">Click a row. The modal morphs height to match new content.</p>
+
+      <MorphingModal viewId={view} onClose={() => setView(null)}>
+        {view === "options" ? (
+          <Options
+            onPrivateKey={() => setView("private-key")}
+            onRecovery={() => setView("recovery")}
+            onClose={() => setView(null)}
+          />
+        ) : view === "private-key" ? (
+          <PrivateKey onBack={() => setView("options")} />
+        ) : view === "recovery" ? (
+          <Recovery onBack={() => setView("options")} />
+        ) : null}
+      </MorphingModal>
+    </div>
+  );
+}
+
+function Header({ title, onClose }: { title: string; onClose: () => void }) {
+  return (
+    <div className="mb-4 flex items-center justify-between">
+      <h2 className="text-base font-semibold text-foreground">{title}</h2>
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="Close"
+        className="inline-flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground hover:bg-foreground/[0.06]"
+      >
+        ✕
+      </button>
+    </div>
+  );
+}
+
+function Row({
+  icon: Icon,
+  label,
+  destructive,
+  onClick,
+}: {
+  icon: typeof Lock;
+  label: string;
+  destructive?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium transition-colors press ${
+        destructive
+          ? "bg-destructive/10 text-destructive hover:bg-destructive/15"
+          : "bg-foreground/[0.04] text-foreground hover:bg-foreground/[0.08]"
+      }`}
+    >
+      <Icon className="h-4 w-4" />
+      {label}
+    </button>
+  );
+}
+
+function Options({
+  onPrivateKey,
+  onRecovery,
+  onClose,
+}: {
+  onPrivateKey: () => void;
+  onRecovery: () => void;
+  onClose: () => void;
+}) {
+  return (
+    <div>
+      <Header title="Options" onClose={onClose} />
+      <div className="flex flex-col gap-2">
+        <Row icon={Lock} label="View Private Key" onClick={onPrivateKey} />
+        <Row icon={ScrollText} label="View Recovery Phrase" onClick={onRecovery} />
+        <Row icon={Trash2} label="Remove Wallet" destructive onClick={onClose} />
+      </div>
+    </div>
+  );
+}
+
+function PrivateKey({ onBack }: { onBack: () => void }) {
+  return (
+    <div>
+      <div className="mb-3 flex items-start justify-between">
+        <Lock className="h-5 w-5 text-foreground" />
+        <button
+          type="button"
+          onClick={onBack}
+          aria-label="Back"
+          className="inline-flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground hover:bg-foreground/[0.06]"
+        >
+          ✕
+        </button>
+      </div>
+      <h2 className="text-xl font-semibold tracking-tight text-foreground">Private Key</h2>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Your Private Key is the key used to back up your wallet. Keep it secret and secure at all times.
+      </p>
+      <hr className="my-4 border-border" />
+      <ul className="flex flex-col gap-2.5 text-sm text-muted-foreground">
+        <li className="flex items-center gap-2.5"><ShieldCheck className="h-4 w-4" /> Keep your private key safe</li>
+        <li className="flex items-center gap-2.5"><ScrollText className="h-4 w-4" /> Don&apos;t share it with anyone else</li>
+        <li className="flex items-center gap-2.5"><Ban className="h-4 w-4" /> If you lose it, we can&apos;t recover it</li>
+      </ul>
+      <div className="mt-5 flex gap-2">
+        <button
+          type="button"
+          onClick={onBack}
+          className="inline-flex h-10 flex-1 items-center justify-center rounded-full bg-foreground/[0.06] text-sm font-medium text-foreground press"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={onBack}
+          className="inline-flex h-10 flex-1 items-center justify-center gap-2 rounded-full bg-foreground text-sm font-medium text-background press"
+        >
+          <ScanFace className="h-4 w-4" />
+          Reveal
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function Recovery({ onBack }: { onBack: () => void }) {
+  return (
+    <div>
+      <div className="mb-3 flex items-start justify-between">
+        <ScrollText className="h-5 w-5 text-foreground" />
+        <button
+          type="button"
+          onClick={onBack}
+          aria-label="Back"
+          className="inline-flex h-7 w-7 items-center justify-center rounded-full text-muted-foreground hover:bg-foreground/[0.06]"
+        >
+          ✕
+        </button>
+      </div>
+      <h2 className="text-xl font-semibold tracking-tight text-foreground">Recovery Phrase</h2>
+      <p className="mt-2 text-sm text-muted-foreground">
+        12 words you can use to restore your wallet on any device. Write them down somewhere safe.
+      </p>
+      <div className="mt-4 grid grid-cols-3 gap-2">
+        {["mountain", "river", "candle", "harbor", "amber", "violet", "spring", "ocean", "marble", "thunder", "willow", "crystal"].map((w, i) => (
+          <div key={w} className="rounded-lg border border-border bg-background/40 px-2 py-1.5 text-xs text-foreground">
+            <span className="mr-1 text-muted-foreground">{i + 1}.</span>
+            {w}
+          </div>
+        ))}
+      </div>
+      <button
+        type="button"
+        onClick={onBack}
+        className="mt-5 inline-flex h-10 w-full items-center justify-center rounded-full bg-foreground text-sm font-medium text-background press"
+      >
+        Done
+      </button>
+    </div>
+  );
+}

package/components/previews/motion/multi-select.preview.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Circle } from "lucide-react";
+import {
+  MultiSelect,
+  MultiSelectContent,
+  MultiSelectEmpty,
+  MultiSelectGroup,
+  MultiSelectInput,
+  MultiSelectItem,
+  MultiSelectLabel,
+  MultiSelectList,
+  MultiSelectTrigger,
+  MultiSelectValue,
+} from "@/components/motion/multi-select";
+
+const colors = {
+  design: "fill-rose-500 text-rose-500",
+  engineering: "fill-sky-500 text-sky-500",
+  product: "fill-amber-500 text-amber-500",
+  research: "fill-violet-500 text-violet-500",
+  marketing: "fill-emerald-500 text-emerald-500",
+  operations: "fill-slate-500 text-slate-500",
+};
+
+function Option({
+  value,
+  children,
+}: {
+  value: keyof typeof colors;
+  children: string;
+}) {
+  return (
+    <MultiSelectItem value={value} textValue={children}>
+      <span className="flex items-center gap-2.5">
+        <Circle aria-hidden="true" className={`size-2.5 ${colors[value]}`} />
+        {children}
+      </span>
+    </MultiSelectItem>
+  );
+}
+
+export function MultiSelectPreview() {
+  return (
+    <div className="flex min-h-[420px] w-full items-start justify-center px-4 pt-24">
+      <div className="w-full max-w-sm">
+        <MultiSelect defaultValue={["design", "engineering"]}>
+          <MultiSelectTrigger>
+            <MultiSelectValue placeholder="Choose teams" />
+            <MultiSelectInput aria-label="Search teams" />
+          </MultiSelectTrigger>
+          <MultiSelectContent>
+            <MultiSelectList ariaLabel="Teams">
+              <MultiSelectGroup>
+                <MultiSelectLabel>Product teams</MultiSelectLabel>
+                <Option value="design">Design</Option>
+                <Option value="engineering">Engineering</Option>
+                <Option value="product">Product</Option>
+                <Option value="research">Research</Option>
+              </MultiSelectGroup>
+              <MultiSelectGroup>
+                <MultiSelectLabel>Business teams</MultiSelectLabel>
+                <Option value="marketing">Marketing</Option>
+                <Option value="operations">Operations</Option>
+              </MultiSelectGroup>
+              <MultiSelectEmpty>No teams found.</MultiSelectEmpty>
+            </MultiSelectList>
+          </MultiSelectContent>
+        </MultiSelect>
+      </div>
+    </div>
+  );
+}