motion-ui-skill 2.0.0

package/components/previews/motion/shader-background.preview.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { useReducedMotion } from "motion/react";
+import type { ComponentType } from "react";
+import { useEffect, useState } from "react";
+import {
+  ShaderBackground,
+  type ShaderBackgroundProps,
+  type ShaderBackgroundVariant,
+} from "@/components/motion/shader-background";
+import { Tabs, TabsList, TabsTrigger } from "@/components/motion/tabs";
+
+const AUTOPLAY_MS = 2400;
+
+const VARIANTS: {
+  id: string;
+  value: ShaderBackgroundVariant;
+  label: string;
+  props: Record<string, unknown>;
+}[] = [
+  {
+    id: "mesh-gradient",
+    value: "mesh-gradient",
+    label: "Mesh",
+    props: {
+      colors: ["#e0eaff", "#241d9a", "#f75092", "#9f50d3"],
+      distortion: 0.8,
+      swirl: 0.3,
+      speed: 0.4,
+    },
+  },
+  {
+    id: "grain-gradient",
+    value: "grain-gradient",
+    label: "Grain",
+    props: {
+      colors: ["#7300ff", "#eba8ff", "#00bfff", "#2a00ff"],
+      colorBack: "#000000",
+      softness: 0.6,
+      speed: 0.5,
+    },
+  },
+  {
+    id: "grain-sunset",
+    value: "grain-gradient",
+    label: "Grain — Sunset",
+    props: {
+      colors: ["#ff7a00", "#ff2e93", "#ffce54", "#8a2be2"],
+      colorBack: "#1a0500",
+      softness: 0.7,
+      speed: 0.4,
+    },
+  },
+  {
+    id: "grain-pastel",
+    value: "grain-gradient",
+    label: "Grain — Pastel",
+    props: {
+      colors: ["#ffd6e8", "#c9e4ff", "#fff3c4", "#d9c9ff"],
+      colorBack: "#ffffff",
+      softness: 0.85,
+      speed: 0.3,
+    },
+  },
+  {
+    id: "mesh-aurora",
+    value: "mesh-gradient",
+    label: "Mesh — Aurora",
+    props: {
+      colors: ["#00ffb2", "#0072ff", "#a200ff", "#001a2c"],
+      distortion: 0.6,
+      swirl: 0.5,
+      speed: 0.3,
+    },
+  },
+  {
+    id: "mesh-citrus",
+    value: "mesh-gradient",
+    label: "Mesh — Citrus",
+    props: {
+      colors: ["#fff200", "#ff8a00", "#ff3d00", "#ffe08a"],
+      distortion: 0.7,
+      swirl: 0.4,
+      speed: 0.5,
+    },
+  },
+  {
+    id: "warp",
+    value: "warp",
+    label: "Warp",
+    props: {
+      colors: ["#121212", "#9470ff", "#121212", "#8838ff"],
+      speed: 0.4,
+    },
+  },
+  {
+    id: "waves",
+    value: "waves",
+    label: "Waves",
+    props: { colorFront: "#ffbb00", colorBack: "#000000" },
+  },
+  {
+    id: "voronoi",
+    value: "voronoi",
+    label: "Voronoi",
+    props: { colors: ["#ff8247", "#ffe53d"], speed: 0.3 },
+  },
+  {
+    id: "swirl",
+    value: "swirl",
+    label: "Swirl",
+    props: {
+      colorBack: "#180018",
+      colors: ["#ffd1d1", "#ff8a8a", "#660000"],
+      speed: 0.2,
+    },
+  },
+  {
+    id: "dot-orbit",
+    value: "dot-orbit",
+    label: "Orbit",
+    props: {
+      colors: ["#ffc96b", "#ff6200", "#ff2f00"],
+      colorBack: "#000000",
+      speed: 0.6,
+    },
+  },
+  {
+    id: "dot-grid",
+    value: "dot-grid",
+    label: "Grid",
+    props: {
+      colorBack: "#000000",
+      colorFill: "#ffffff",
+      colorStroke: "#ffaa00",
+    },
+  },
+  {
+    id: "smoke-ring",
+    value: "smoke-ring",
+    label: "Smoke",
+    props: { colorBack: "#000000", colors: ["#ffffff"], speed: 0.3 },
+  },
+  {
+    id: "static-radial-gradient",
+    value: "static-radial-gradient",
+    label: "Radial",
+    props: { colorBack: "#000000", colors: ["#00bbff", "#00ffe1", "#ffffff"] },
+  },
+  {
+    id: "neuro-noise",
+    value: "neuro-noise",
+    label: "Neuro",
+    props: {
+      colorFront: "#ffffff",
+      colorMid: "#47a6ff",
+      colorBack: "#000000",
+      speed: 0.4,
+    },
+  },
+  {
+    id: "water",
+    value: "water",
+    label: "Water",
+    props: { colorBack: "#909090", colorHighlight: "#ffffff", speed: 0.4 },
+  },
+  {
+    id: "metaballs",
+    value: "metaballs",
+    label: "Metaballs",
+    props: {
+      colors: ["#ff5cf4", "#4d9eff", "#000000"],
+      colorBack: "#000000",
+      speed: 0.5,
+    },
+  },
+  {
+    id: "god-rays",
+    value: "god-rays",
+    label: "Rays",
+    props: {
+      colors: ["#ffcc66", "#ff6a00"],
+      colorBack: "#000000",
+      speed: 0.4,
+    },
+  },
+  {
+    id: "spiral",
+    value: "spiral",
+    label: "Spiral",
+    props: { colors: ["#7a5cff", "#ff5ca6", "#000000"], speed: 0.4 },
+  },
+  {
+    id: "dithering",
+    value: "dithering",
+    label: "Dither",
+    props: {
+      colorBack: "#000000",
+      colorFront: "#00ff9d",
+      speed: 0.4,
+    },
+  },
+  {
+    id: "pulsing-border",
+    value: "pulsing-border",
+    label: "Pulse",
+    props: {
+      colors: ["#00e5ff", "#7000ff", "#ff00c8"],
+      colorBack: "#000000",
+      speed: 0.5,
+    },
+  },
+  {
+    id: "color-panels",
+    value: "color-panels",
+    label: "Panels",
+    props: { colors: ["#ff3d68", "#ffb800", "#3d7aff", "#00ffb2"], speed: 0.3 },
+  },
+  {
+    id: "static-mesh-gradient",
+    value: "static-mesh-gradient",
+    label: "Static Mesh",
+    props: { colors: ["#ff8a3d", "#ff3d9a", "#3d5aff", "#0a0a0a"] },
+  },
+  {
+    id: "static-mesh-dusk",
+    value: "static-mesh-gradient",
+    label: "Static Mesh — Dusk",
+    props: { colors: ["#2b1055", "#7597de", "#f6a1c8", "#0d0221"] },
+  },
+  {
+    id: "radial-ember",
+    value: "static-radial-gradient",
+    label: "Radial — Ember",
+    props: { colorBack: "#0a0000", colors: ["#ff5100", "#ffce00", "#4a0000"] },
+  },
+  {
+    id: "simplex-noise",
+    value: "simplex-noise",
+    label: "Simplex",
+    props: { colors: ["#ff6ec7", "#6ec7ff", "#000000"], speed: 0.4 },
+  },
+  {
+    id: "perlin-noise",
+    value: "perlin-noise",
+    label: "Perlin",
+    props: { colorFront: "#00ffd5", colorBack: "#000000", speed: 0.3 },
+  },
+];
+
+// Every variant carries a different prop shape; the switcher only ever spreads
+// each entry's own preset, so the loose cast here is safe.
+const Background = ShaderBackground as ComponentType<
+  ShaderBackgroundProps & Record<string, unknown>
+>;
+
+export function ShaderBackgroundPreview() {
+  const [active, setActive] = useState<string>(VARIANTS[0].id);
+  const current = VARIANTS.find((v) => v.id === active) ?? VARIANTS[0];
+  const reduce = useReducedMotion();
+  const [paused, setPaused] = useState(false);
+
+  // Cycles through variants on its own so the preview reads as alive at a
+  // glance; pauses on hover/focus so picking a variant manually sticks.
+  useEffect(() => {
+    if (reduce || paused) return;
+    const id = setInterval(() => {
+      setActive((currentActive) => {
+        const i = VARIANTS.findIndex((v) => v.id === currentActive);
+        return VARIANTS[(i + 1) % VARIANTS.length].id;
+      });
+    }, AUTOPLAY_MS);
+    return () => clearInterval(id);
+  }, [reduce, paused]);
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: pause-on-hover for the autoplay timer, not a real control
+    <div
+      className="flex w-full max-w-2xl flex-col gap-5 p-6"
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      onFocus={() => setPaused(true)}
+      onBlur={() => setPaused(false)}
+    >
+      <div className="relative h-80 w-full overflow-hidden rounded-2xl border border-border">
+        <Background
+          key={current.id}
+          variant={current.value}
+          className="absolute inset-0"
+          {...current.props}
+        />
+      </div>
+      <Tabs value={active} onValueChange={setActive}>
+        <TabsList className="flex-wrap justify-center gap-2 rounded-2xl">
+          {VARIANTS.map((v) => (
+            <TabsTrigger
+              key={v.id}
+              value={v.id}
+              className="px-4 py-2 text-sm"
+            >
+              {v.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+    </div>
+  );
+}

package/components/previews/motion/shared-layout-bg.preview.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ArrowUpRight } from "lucide-react";
+import { SharedLayoutBg } from "@/components/motion/shared-layout-bg";
+
+const items = [
+  { title: "Inbox", body: "12 unread threads, 3 mentions today." },
+  { title: "Drafts", body: "4 posts waiting for a final pass." },
+  { title: "Releases", body: "Last shipped 2 days ago, v0.4.1." },
+  { title: "Billing", body: "Plan renews on the 1st of next month." },
+];
+
+export function SharedLayoutBgPreview() {
+  return (
+    <div className="w-full max-w-lg px-2">
+      <SharedLayoutBg>
+        {items.map((it) => (
+          <button
+            type="button"
+            key={it.title}
+            className="group flex flex-col gap-1 px-2 py-3 text-left"
+          >
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-sm font-medium text-foreground">{it.title}</span>
+              <ArrowUpRight className="h-3.5 w-3.5 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+            </div>
+            <p className="text-sm text-muted-foreground">{it.body}</p>
+          </button>
+        ))}
+      </SharedLayoutBg>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+"use client";
+
+import { useState } from "react";
+import { Switch } from "@/components/motion/switch";
+
+export function SwitchPreview() {
+  const [on, setOn] = useState(true);
+  return (
+    <div className="flex flex-col gap-3">
+      <Switch checked={on} onCheckedChange={setOn} label="Enable notifications" />
+      <Switch checked={false} onCheckedChange={() => {}} label="Off" />
+      <Switch checked disabled onCheckedChange={() => {}} label="Disabled" />
+    </div>
+  );
+}

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

@@ -0,0 +1,140 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Table, type TableColumn } from "@/components/motion/table";
+import { cn } from "@/lib/utils";
+
+type Person = {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: "active" | "invited" | "suspended";
+  mrr: number;
+};
+
+const FIRST = [
+  "Ava",
+  "Leo",
+  "Mia",
+  "Kai",
+  "Zoe",
+  "Eli",
+  "Noa",
+  "Ren",
+  "Ivy",
+  "Jude",
+];
+const LAST = [
+  "Cole",
+  "Frost",
+  "Vale",
+  "Reyes",
+  "Okafor",
+  "Sato",
+  "Lund",
+  "Marsh",
+  "Bose",
+  "Quinn",
+];
+const ROLES = ["Owner", "Admin", "Member", "Viewer"];
+const STATUSES: Person["status"][] = ["active", "invited", "suspended"];
+
+// Deterministic so SSR and client render the same rows (no hydration drift).
+function buildPeople(count: number): Person[] {
+  const out: Person[] = [];
+  for (let i = 0; i < count; i++) {
+    const first = FIRST[i % FIRST.length];
+    const last = LAST[(i * 7) % LAST.length];
+    out.push({
+      id: String(i),
+      name: `${first} ${last}`,
+      email: `${first.toLowerCase()}.${last.toLowerCase()}${i}@example.com`,
+      role: ROLES[(i * 3) % ROLES.length],
+      status: STATUSES[(i * 5) % STATUSES.length],
+      mrr: 12 + ((i * 37) % 488),
+    });
+  }
+  return out;
+}
+
+const STATUS_STYLES: Record<Person["status"], string> = {
+  active: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  invited: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  suspended: "bg-rose-500/10 text-rose-600 dark:text-rose-400",
+};
+
+function StatusBadge({ status }: { status: Person["status"] }) {
+  return (
+    <span
+      className={cn(
+        "rounded-full px-2 py-0.5 font-medium text-xs capitalize",
+        STATUS_STYLES[status],
+      )}
+    >
+      {status}
+    </span>
+  );
+}
+
+export function TablePreview() {
+  const data = useMemo(() => buildPeople(10_000), []);
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const columns = useMemo<TableColumn<Person>[]>(
+    () => [
+      {
+        key: "name",
+        header: "Name",
+        sortable: true,
+        width: "1.4fr",
+        cell: (row) => <span className="font-medium">{row.name}</span>,
+      },
+      { key: "email", header: "Email", width: "1.8fr" },
+      { key: "role", header: "Role", sortable: true, width: "120px" },
+      {
+        key: "status",
+        header: "Status",
+        width: "130px",
+        cell: (row) => <StatusBadge status={row.status} />,
+      },
+      {
+        key: "mrr",
+        header: "MRR",
+        sortable: true,
+        align: "right",
+        width: "110px",
+        cell: (row) => (
+          <span className="tabular-nums">${row.mrr.toLocaleString()}</span>
+        ),
+      },
+    ],
+    [],
+  );
+
+  return (
+    <div className="flex w-full justify-center p-4">
+      <div className="flex w-full flex-col gap-2">
+        <div className="flex items-center justify-between px-1 text-muted-foreground text-xs">
+          <span>{data.length.toLocaleString()} rows</span>
+          {selected.length > 0 ? (
+            <span>{selected.length.toLocaleString()} selected</span>
+          ) : null}
+        </div>
+        <Table
+          data={data}
+          columns={columns}
+          selectable
+          resizable
+          reorderable
+          selectedRowIds={selected}
+          onSelectionChange={setSelected}
+          defaultSort={{ key: "mrr", direction: "desc" }}
+          height={420}
+          rowHeight={52}
+          className="rounded-2xl"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/motion/tabs";
+
+export function TabsPreview() {
+  return (
+    <div className="flex w-full max-w-md flex-col gap-8">
+      <Section title="Pill">
+        <Tabs defaultValue="overview" variant="pill">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="activity">Activity</TabsTrigger>
+            <TabsTrigger value="settings">Settings</TabsTrigger>
+          </TabsList>
+          <TabsContent value="overview" className="text-sm text-muted-foreground">High-level summary.</TabsContent>
+          <TabsContent value="activity" className="text-sm text-muted-foreground">Recent events.</TabsContent>
+          <TabsContent value="settings" className="text-sm text-muted-foreground">Preferences.</TabsContent>
+        </Tabs>
+      </Section>
+      <Section title="Segment">
+        <Tabs defaultValue="day" variant="segment">
+          <TabsList>
+            <TabsTrigger value="day">Day</TabsTrigger>
+            <TabsTrigger value="week">Week</TabsTrigger>
+            <TabsTrigger value="month">Month</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </Section>
+      <Section title="Underline">
+        <Tabs defaultValue="all" variant="underline">
+          <TabsList>
+            <TabsTrigger value="all">All</TabsTrigger>
+            <TabsTrigger value="open">Open</TabsTrigger>
+            <TabsTrigger value="closed">Closed</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </Section>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</span>
+      {children}
+    </div>
+  );
+}

package/components/previews/motion/text-animation.preview.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from "react";
+import { ChromaticTextReveal } from "@/components/motion/chromatic-text-reveal";
+import { TextReveal } from "@/components/motion/text-reveal";
+import { TextShimmer } from "@/components/motion/text-shimmer";
+import { EASE_OUT } from "@/lib/ease";
+
+const variants = ["chromatic", "reveal", "shimmer"] as const;
+
+export function TextAnimationPreview() {
+  const [variant, setVariant] =
+    useState<(typeof variants)[number]>("chromatic");
+
+  useEffect(() => {
+    const id = window.setInterval(() => {
+      setVariant((currentVariant) => {
+        const index = variants.indexOf(currentVariant);
+        return variants[(index + 1) % variants.length];
+      });
+    }, 3200);
+    return () => window.clearInterval(id);
+  }, []);
+
+  return (
+    <div className="@container relative flex min-h-20 w-full items-center justify-center text-center">
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={variant}
+          initial={{ opacity: 0, filter: "blur(6px)", transform: "translateY(4px)" }}
+          animate={{ opacity: 1, filter: "blur(0px)", transform: "translateY(0px)" }}
+          exit={{ opacity: 0, filter: "blur(6px)", transform: "translateY(-4px)" }}
+          transition={{ duration: 0.22, ease: EASE_OUT }}
+        >
+          {variant === "reveal" ? (
+            <TextReveal
+              as="h2"
+              text="Motion in words."
+              stagger={0.045}
+              blur={6}
+              yOffset="18%"
+              className="text-balance text-3xl font-semibold tracking-tight text-foreground"
+            />
+          ) : variant === "chromatic" ? (
+            // This sentence never wraps, so it scales with the column it sits
+            // in rather than overflowing it at narrow widths.
+            <ChromaticTextReveal
+              prefix="Motion that feels"
+              words={["natural.", "intentional.", "alive."]}
+              startOnView={false}
+              className="font-semibold tracking-tight [font-size:clamp(1.125rem,7.8cqw,1.875rem)]"
+            />
+          ) : (
+            <TextShimmer duration={1.8} className="text-xl font-semibold">
+              Loading with shimmer
+            </TextShimmer>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

package/components/previews/motion/theme-toggle.preview.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ThemeToggle, type ThemeVariant } from "@/components/motion/theme-toggle";
+
+const VARIANTS: { variant: ThemeVariant; label: string }[] = [
+  { variant: "rectangle", label: "Rectangle" },
+  { variant: "circle", label: "Circle" },
+  { variant: "circle-blur", label: "Circle blur" },
+  { variant: "blinds", label: "Blinds" },
+];
+
+export function ThemeTogglePreview() {
+  return (
+    <div className="flex h-full w-full items-center justify-center gap-5">
+      {VARIANTS.map(({ variant, label }) => (
+        <div key={variant} className="flex flex-col items-center gap-2">
+          <ThemeToggle
+            variant={variant}
+            start="bottom-up"
+            className="rounded-xl border border-border bg-background p-2.5"
+            iconClassName="h-5 w-5"
+          />
+          <span className="text-[11px] text-muted-foreground">{label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/previews/motion/tilt-card.preview.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { TiltCard } from "@/components/motion/tilt-card";
+
+export function TiltCardPreview() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <TiltCard className="w-[280px] border border-border bg-card p-8">
+        <div className="text-xs uppercase tracking-wider text-muted-foreground">Premium</div>
+        <h3 className="mt-2 text-2xl font-semibold text-foreground">Tilt me</h3>
+        <p className="mt-3 text-sm text-muted-foreground">Move your cursor across the card to see 3D tilt + glare.</p>
+      </TiltCard>
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { Heart, Settings, Share, Trash2 } from "lucide-react";
+import { Tooltip } from "@/components/motion/tooltip";
+
+export function TooltipPreview() {
+  return (
+    <div className="flex flex-col items-center gap-12">
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        <Tooltip content="Like this post" side="top">
+          <button type="button" aria-label="Like this post" className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-foreground press">
+            <Heart className="h-4 w-4" />
+          </button>
+        </Tooltip>
+        <Tooltip content="Share" side="bottom">
+          <button type="button" aria-label="Share" className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-foreground press">
+            <Share className="h-4 w-4" />
+          </button>
+        </Tooltip>
+        <Tooltip content="Open settings" side="left">
+          <button type="button" aria-label="Open settings" className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-foreground press">
+            <Settings className="h-4 w-4" />
+          </button>
+        </Tooltip>
+        <Tooltip content="Move to trash" side="right">
+          <button type="button" aria-label="Move to trash" className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-foreground press">
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </Tooltip>
+      </div>
+      <p className="text-xs text-muted-foreground">Hover or focus each button. Content fades and un-blurs in.</p>
+    </div>
+  );
+}