motion-ui-skill 2.0.0

package/components/mockups/apple-watch-mockup-card.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import React from "react";
+
+export type AppleWatchFrameVariant =
+  "black" | "silver" | "titanium" | "starlight" | "blue" | "gold" | "rose";
+
+interface AppleWatchMockupCardProps {
+  variant?: AppleWatchFrameVariant;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const VARIANTS: Record<
+  AppleWatchFrameVariant,
+  {
+    metal: string;
+    strap: string;
+  }
+> = {
+  black: {
+    metal:
+      "linear-gradient(135deg, #050505 0%, #383838 16%, #111 38%, #4a4a4a 58%, #090909 82%, #303030 100%)",
+    strap:
+      "linear-gradient(180deg, #111 0%, #333 30%, #191919 58%, #080808 100%)",
+  },
+
+  silver: {
+    metal:
+      "linear-gradient(135deg, #727272 0%, #f5f5f5 15%, #a9a9a9 34%, #fafafa 51%, #888 72%, #ededed 87%, #777 100%)",
+    strap:
+      "linear-gradient(180deg, #bdbdbd 0%, #eeeeee 27%, #d2d2d2 55%, #f1f1f1 76%, #adadad 100%)",
+  },
+
+  titanium: {
+    metal:
+      "linear-gradient(135deg, #484744 0%, #aaa7a1 16%, #706e69 34%, #c1bdb6 51%, #625f5b 73%, #9a9690 88%, #41403d 100%)",
+    strap:
+      "linear-gradient(180deg, #686661 0%, #aaa7a1 28%, #7c7974 55%, #aaa69f 78%, #5c5955 100%)",
+  },
+
+  starlight: {
+    metal:
+      "linear-gradient(135deg, #9b9287 0%, #f0e9de 16%, #c9c0b4 34%, #f5eee3 51%, #b5aca0 72%, #e5ddd2 88%, #948b80 100%)",
+    strap:
+      "linear-gradient(180deg, #b8afa4 0%, #f0e8dd 27%, #d4cabe 55%, #f2eadf 76%, #aaa096 100%)",
+  },
+
+  blue: {
+    metal:
+      "linear-gradient(135deg, #273e50 0%, #7b96aa 16%, #4e6c81 34%, #91aaba 51%, #3f5d72 72%, #718da1 88%, #253b4d 100%)",
+    strap:
+      "linear-gradient(180deg, #4d697d 0%, #829cad 27%, #607d91 55%, #87a0b1 76%, #3e596b 100%)",
+  },
+
+  gold: {
+    metal:
+      "linear-gradient(135deg, #967b4c 0%, #ead39a 16%, #c2a665 34%, #f1d99d 51%, #aa8b50 72%, #dfc486 88%, #8b7246 100%)",
+    strap:
+      "linear-gradient(180deg, #b39a62 0%, #ecd69d 27%, #ceb573 55%, #edd89f 76%, #a38852 100%)",
+  },
+
+  rose: {
+    metal:
+      "linear-gradient(135deg, #986f7a 0%, #e8c0c9 16%, #c598a3 34%, #efcbd2 51%, #ad7d88 72%, #dfb0bb 88%, #8d6570 100%)",
+    strap:
+      "linear-gradient(180deg, #b58490 0%, #e6bdc6 27%, #c99ba6 55%, #ebc4cc 76%, #a0737e 100%)",
+  },
+};
+
+export function AppleWatchMockupCard({
+  variant = "silver",
+  children,
+  className = "",
+}: AppleWatchMockupCardProps) {
+  const colors = VARIANTS[variant];
+
+  return (
+    <div className={`relative aspect-486/729 w-75 shrink-0 ${className}`}>
+      <svg
+        viewBox="0 0 486 729"
+        className="pointer-events-none absolute inset-0 z-0 mt-2 h-full w-full"
+        preserveAspectRatio="none"
+      >
+        <defs>
+          <clipPath id="top-strap-clip">
+            <path
+              d="
+                M 142 21
+                C 137 27, 140 49, 136 72
+                C 131 108, 114 135, 93 150
+                C 83 157, 78 167, 78 180
+                L 408 180
+                C 408 167, 403 157, 393 150
+                C 372 135, 355 108, 350 72
+                C 346 49, 349 27, 344 21
+                C 321 17, 165 17, 142 21
+                Z
+              "
+            />
+          </clipPath>
+
+          <linearGradient id="watch-top-highlight" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="rgba(255,255,255,0)" />
+            <stop offset="35%" stopColor="rgba(255,255,255,.45)" />
+            <stop offset="65%" stopColor="rgba(255,255,255,.2)" />
+            <stop offset="100%" stopColor="rgba(255,255,255,0)" />
+          </linearGradient>
+        </defs>
+
+        <g clipPath="url(#top-strap-clip)">
+          <foreignObject x="0" y="0" width="486" height="729">
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+                background: colors.strap,
+              }}
+            />
+          </foreignObject>
+        </g>
+
+        <path
+          d="
+            M 142 21
+            C 137 27, 140 49, 136 72
+            C 131 108, 114 135, 93 150
+            C 83 157, 78 167, 78 180
+            L 408 180
+            C 408 167, 403 157, 393 150
+            C 372 135, 355 108, 350 72
+            C 346 49, 349 27, 344 21
+            C 321 17, 165 17, 142 21
+            Z
+          "
+          fill="url(#watch-top-highlight)"
+          opacity=".45"
+        />
+      </svg>
+
+      {/* BOTTOM STRAP */}
+      <svg
+        viewBox="0 0 486 729"
+        className="pointer-events-none absolute inset-0 z-0 h-full w-full pb-1"
+        preserveAspectRatio="none"
+      >
+        <defs>
+          <clipPath id="bottom-strap-clip">
+            <path
+              d="
+                M 78 549
+                C 78 562, 83 572, 93 579
+                C 114 594, 131 621, 136 657
+                C 140 680, 137 702, 142 708
+                C 165 713, 321 713, 344 708
+                C 349 702, 346 680, 350 657
+                C 355 621, 372 594, 393 579
+                C 403 572, 408 562, 408 549
+                Z
+              "
+            />
+          </clipPath>
+
+          <linearGradient
+            id="watch-bottom-highlight"
+            x1="0"
+            y1="0"
+            x2="1"
+            y2="0"
+          >
+            <stop offset="0%" stopColor="rgba(255,255,255,0)" />
+            <stop offset="35%" stopColor="rgba(255,255,255,.45)" />
+            <stop offset="65%" stopColor="rgba(255,255,255,.2)" />
+            <stop offset="100%" stopColor="rgba(255,255,255,0)" />
+          </linearGradient>
+        </defs>
+
+        <g clipPath="url(#bottom-strap-clip)">
+          <foreignObject x="0" y="0" width="486" height="729">
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+                background: colors.strap,
+              }}
+            />
+          </foreignObject>
+        </g>
+
+        <path
+          d="
+            M 78 549
+            C 78 562, 83 572, 93 579
+            C 114 594, 131 621, 136 657
+            C 140 680, 137 702, 142 708
+            C 165 713, 321 713, 344 708
+            C 349 702, 346 680, 350 657
+            C 355 621, 372 594, 393 579
+            C 403 572, 408 562, 408 549
+            Z
+          "
+          fill="url(#watch-bottom-highlight)"
+          opacity=".4"
+        />
+      </svg>
+      <div
+        className="absolute top-[33.3%] right-[9%] z-2 h-[11%] w-[3.2%] overflow-hidden rounded-r-[40%]"
+        style={{
+          background: colors.metal,
+          boxShadow:
+            "inset 1px 0 rgba(255,255,255,.65), 1px 1px 2px rgba(0,0,0,.18)",
+        }}
+      >
+        <div
+          className="absolute inset-y-[7%] left-[25%] w-[30%] opacity-70"
+          style={{
+            background:
+              "repeating-linear-gradient(to bottom,#777 0 1px,#ededed 1px 2px)",
+          }}
+        />
+      </div>
+      <div
+        className="absolute top-[20.5%] left-[11.7%] z-3 h-[59.9%] w-[76.6%] rounded-[20.5%] p-[2.8%]"
+        style={{
+          background: colors.metal,
+          boxShadow: `
+            inset 0 1px 2px rgba(255,255,255,.7),
+            inset 0 -2px 3px rgba(0,0,0,.3),
+            0 2px 5px rgba(0,0,0,.16)
+          `,
+        }}
+      >
+        <div
+          className="pointer-events-none absolute inset-0 rounded-[20.5%]"
+          style={{
+            background:
+              "linear-gradient(120deg,rgba(255,255,255,.42),transparent 24%,transparent 70%,rgba(255,255,255,.18))",
+          }}
+        />
+        <div
+          className="relative h-full w-full rounded-[18%] p-[2.8%]"
+          style={{
+            background:
+              "linear-gradient(145deg,#555 0%,#080808 8%,#000 30%,#020202 70%,#333 94%,#080808 100%)",
+            boxShadow:
+              "inset 0 2px 3px rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.9)",
+          }}
+        >
+          <div
+            className="relative h-full w-full overflow-hidden rounded-[15.5%]"
+            style={{
+              background:
+                "linear-gradient(145deg,#161616,#000 35%,#000 70%,#171717)",
+              boxShadow:
+                "inset 0 1px 2px rgba(255,255,255,.08), inset 0 -1px 2px rgba(255,255,255,.04)",
+            }}
+          >
+            {/* ACTUAL DISPLAY */}
+            <div className="absolute inset-[1.8%] overflow-hidden rounded-[14%] bg-black">
+              <div className="h-full w-full overflow-hidden rounded-[14%]">
+                {children}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="pointer-events-none absolute top-[23.4%] left-[17%] z-5 h-[54.5%] w-[66%] rounded-[17%] opacity-[0.045]"
+        style={{
+          background:
+            "linear-gradient(125deg,rgba(255,255,255,.95),transparent 30%)",
+        }}
+      />
+    </div>
+  );
+}
+
+export default AppleWatchMockupCard;

package/components/mockups/browser-mockup-card.tsx

@@ -0,0 +1,109 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+const browserThemes = {
+  light: {
+    shell: "border-neutral-200",
+    chrome: "border-neutral-200 bg-neutral-50",
+    urlBar: "bg-white",
+    urlText: "text-neutral-400",
+    content: "bg-white",
+  },
+  dark: {
+    shell: "border-neutral-700",
+    chrome: "border-neutral-700 bg-neutral-800",
+    urlBar: "bg-neutral-900",
+    urlText: "text-neutral-500",
+    content: "bg-neutral-950",
+  },
+  transparent: {
+    shell: "border-neutral-300/50",
+    chrome: "border-neutral-300/50 bg-white/40 backdrop-blur-sm",
+    urlBar: "bg-white/20",
+    urlText: "text-neutral-800",
+    content: "bg-transparent",
+  },
+} as const;
+
+type BrowserTheme = keyof typeof browserThemes;
+
+type BrowserMockupCardProps = Readonly<
+  ComponentPropsWithoutRef<"div"> & {
+    theme?: BrowserTheme;
+    url?: string;
+    children?: ReactNode;
+  }
+>;
+
+export const BrowserMockupCard = forwardRef<
+  HTMLDivElement,
+  BrowserMockupCardProps
+>(
+  (
+    {
+      className,
+      children,
+      theme = "light",
+      url = "https://example.com",
+      ...props
+    },
+    ref,
+  ) => {
+    const styles = browserThemes[theme];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="browser-mockup-card"
+        data-theme={theme}
+        className={cn(
+          "w-full max-w-full min-w-0 overflow-hidden rounded-xl border font-sans select-none",
+          styles.shell,
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            "flex items-center gap-2 rounded-t-[calc(0.75rem-1px)] border-b px-3 py-1.5",
+            styles.chrome,
+          )}
+        >
+          <div className="flex gap-1.5">
+            <div className="h-2 w-2 rounded-full bg-red-400" />
+            <div className="h-2 w-2 rounded-full bg-amber-400" />
+            <div className="h-2 w-2 rounded-full bg-emerald-400" />
+          </div>
+          <div
+            className={cn(
+              "flex h-5 flex-1 items-center rounded-md px-2",
+              styles.urlBar,
+            )}
+          >
+            <span
+              className={cn("truncate font-mono text-[7px]", styles.urlText)}
+            >
+              {url}
+            </span>
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            "relative h-96 w-full overflow-hidden rounded-b-[calc(0.75rem-1px)]",
+            styles.content,
+          )}
+        >
+          <div className="relative size-full">{children}</div>
+        </div>
+      </div>
+    );
+  },
+);
+
+BrowserMockupCard.displayName = "BrowserMockupCard";

package/components/mockups/laptop-mockup-card.tsx

@@ -0,0 +1,118 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+const laptopFrameVariants = {
+  gray: {
+    border: "border-neutral-300",
+    base: "bg-linear-to-b from-neutral-300 to-neutral-400",
+    notch: "bg-neutral-500",
+  },
+  titanium: {
+    border: "border-[#7a7671]",
+    base: "bg-linear-to-b from-[#8a8580] to-[#6a6560]",
+    notch: "bg-[#5c5854]",
+  },
+  white: {
+    border: "border-neutral-200",
+    base: "bg-linear-to-b from-neutral-100 to-neutral-300",
+    notch: "bg-neutral-400",
+  },
+  purple: {
+    border: "border-[#5a515f]",
+    base: "bg-linear-to-b from-[#5a515f] to-[#403948]",
+    notch: "bg-[#332d3a]",
+  },
+  orange: {
+    border: "border-[#c97f52]",
+    base: "bg-linear-to-b from-[#dc9268] to-[#c26f45]",
+    notch: "bg-[#a85e39]",
+  },
+  cherry: {
+    border: "border-[#c48a98]",
+    base: "bg-linear-to-b from-[#daa8b5] to-[#c48a98]",
+    notch: "bg-[#b57987]",
+  },
+  midnight: {
+    border: "border-[#26262c]",
+    base: "bg-linear-to-b from-[#34343c] to-[#1c1c22]",
+    notch: "bg-[#131318]",
+  },
+  starlight: {
+    border: "border-[#d8cdb8]",
+    base: "bg-linear-to-b from-[#f0e6d4] to-[#dcd0b8]",
+    notch: "bg-[#c9bc9e]",
+  },
+  skyBlue: {
+    border: "border-[#a9c4d8]",
+    base: "bg-linear-to-b from-[#c3dbe8] to-[#9fc0d4]",
+    notch: "bg-[#87abc2]",
+  },
+  gold: {
+    border: "border-[#c9a13b]",
+    base: "bg-linear-to-b from-[#e8c563] to-[#d4a93f]",
+    notch: "bg-[#b8902e]",
+  },
+} as const;
+
+export type LaptopFrameVariant = keyof typeof laptopFrameVariants;
+
+type LaptopMockupCardProps = Readonly<
+  ComponentPropsWithoutRef<"div"> & {
+    variant?: LaptopFrameVariant;
+    children?: ReactNode;
+  }
+>;
+
+export const LaptopMockupCard = forwardRef<
+  HTMLDivElement,
+  LaptopMockupCardProps
+>(({ className, children, variant = "gray", ...props }, ref) => {
+  const frame = laptopFrameVariants[variant];
+
+  return (
+    <div
+      ref={ref}
+      data-slot="laptop-mockup-card"
+      data-variant={variant}
+      className={cn("flex flex-col items-center font-sans", className)}
+      {...props}
+    >
+      <div
+        className={cn(
+          "w-70 overflow-hidden rounded-t-xl border-2 border-b-0 shadow-xl md:w-[384px]",
+          frame.border,
+        )}
+      >
+        <div className="bg-neutral-800 p-1.5 pb-0">
+          <div className="relative h-46 overflow-hidden rounded-t-sm bg-neutral-900 md:h-63">
+            <div className="relative size-full overflow-hidden rounded-t-sm">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        className={cn(
+          "relative h-2.5 w-78.75 rounded-b-xl md:h-3 md:w-108",
+          frame.base,
+        )}
+      >
+        <div
+          className={cn(
+            "absolute top-0 left-1/2 h-1 w-14 -translate-x-1/2 rounded-b-md md:w-16",
+            frame.notch,
+          )}
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+  );
+});
+
+LaptopMockupCard.displayName = "LaptopMockupCard";

package/components/mockups/phone-mockup-card.tsx

@@ -0,0 +1,210 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+const phoneFrameVariants = {
+  purple: {
+    frame: "bg-[#4a4254]",
+    button: "bg-[#423d4d]",
+  },
+  orange: {
+    frame: "bg-[#d4845a]",
+    button: "bg-[#cc7a50]",
+  },
+  white: {
+    frame: "bg-[#e4e4e8]",
+    button: "bg-[#d8d8de]",
+  },
+  titanium: {
+    frame: "bg-[#9a9590]",
+    button: "bg-[#8f8a85]",
+  },
+  cherry: {
+    frame: "bg-[#d49aa8]",
+    button: "bg-[#ca90a0]",
+  },
+} as const;
+
+type PhoneFrameVariant = keyof typeof phoneFrameVariants;
+
+const PHONE_ASPECT = 70.6 / 146.6;
+
+type PhoneMockupCardProps = Readonly<
+  ComponentPropsWithoutRef<"div"> & {
+    variant?: PhoneFrameVariant;
+    // Fraction of the frame height to show (0–1). Default 1 = full phone. Crops from the top.
+    visibleRatio?: number;
+    // Show or hide the Dynamic Island and camera dot.
+    showDynamicIsland?: boolean;
+  }
+>;
+
+const buttonClass = (color: string) =>
+  cn("absolute w-[2px] rounded-l-sm", color);
+
+function PhoneSideButtons({
+  frame,
+}: Readonly<{
+  frame: (typeof phoneFrameVariants)[PhoneFrameVariant];
+}>) {
+  return (
+    <>
+      {/* Mute switch */}
+      <div
+        className={cn(
+          buttonClass(frame.button),
+          "top-[15.5%] -left-[2px] h-[3.2%]",
+        )}
+        aria-hidden="true"
+      />
+      {/* Volume up */}
+      <div
+        className={cn(
+          buttonClass(frame.button),
+          "top-[21%] -left-[2px] h-[7.2%]",
+        )}
+        aria-hidden="true"
+      />
+      {/* Volume down */}
+      <div
+        className={cn(
+          buttonClass(frame.button),
+          "top-[30.5%] -left-[2px] h-[7.2%]",
+        )}
+        aria-hidden="true"
+      />
+      {/* Power button */}
+      <div
+        className={cn(
+          buttonClass(frame.button),
+          "top-[23%] -right-[2px] h-[11.5%] rounded-l-none rounded-r-sm",
+        )}
+        aria-hidden="true"
+      />
+    </>
+  );
+}
+
+function PhoneScreen({
+  children,
+  showDynamicIsland,
+}: Readonly<{
+  children: ReactNode;
+  showDynamicIsland: boolean;
+}>) {
+  return (
+    <div className="relative h-full w-full overflow-hidden rounded-[2.5rem] bg-black">
+      {/* Screen — thin ~4px bezel on all sides */}
+      <div className="absolute inset-[3.5px] overflow-hidden rounded-[2.3rem] bg-white">
+        <div className="relative h-full w-full">{children}</div>
+
+        {showDynamicIsland ? (
+          <div
+            className="absolute top-[9px] left-1/2 z-20 h-[20px] w-[66px] -translate-x-1/2 rounded-full bg-black"
+            aria-hidden="true"
+          >
+            <div
+              className="absolute top-1/2 right-[5px] block h-[8px] w-[8px] shrink-0 -translate-y-1/2 rounded-full bg-[#6a90c8]/20"
+              aria-hidden="true"
+            />
+          </div>
+        ) : null}
+
+        {/* Home indicator */}
+        <div
+          className="absolute bottom-[5.5px] left-1/2 z-20 h-[3px] w-[32%] -translate-x-1/2 rounded-full bg-black/20"
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+  );
+}
+
+// iPhone proportions: 70.6 x 146.6 mm — thin uniform bezels
+export const PhoneMockupCard = forwardRef<HTMLDivElement, PhoneMockupCardProps>(
+  (
+    {
+      className,
+      children,
+      variant = "purple",
+      visibleRatio = 1,
+      showDynamicIsland = true,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const frame = phoneFrameVariants[variant];
+    const ratio = Math.min(1, Math.max(0, visibleRatio));
+    const isCropped = ratio < 1;
+
+    const phoneFrameClassName = cn(
+      "relative w-[256px] rounded-[2.6rem] p-[2px]",
+      frame.frame,
+    );
+
+    const fullPhoneFrameClassName = cn(
+      phoneFrameClassName,
+      "aspect-[70.6/146.6]",
+    );
+
+    if (!isCropped) {
+      return (
+        <div
+          ref={ref}
+          data-slot="phone-mockup-card"
+          data-variant={variant}
+          className={cn(fullPhoneFrameClassName, className)}
+          style={style}
+          {...props}
+        >
+          <PhoneSideButtons frame={frame} />
+          <PhoneScreen showDynamicIsland={showDynamicIsland}>
+            {children}
+          </PhoneScreen>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        data-slot="phone-mockup-card"
+        data-variant={variant}
+        data-visible-ratio={ratio}
+        className={cn("relative w-[260px] overflow-hidden", className)}
+        style={{
+          aspectRatio: PHONE_ASPECT / ratio,
+          ...style,
+        }}
+        {...props}
+      >
+        {/* Frame + screen — clipped from top */}
+        <div className="absolute inset-0 right-[2px] left-[2px] overflow-hidden">
+          <div
+            className={cn(phoneFrameClassName, "w-full shrink-0")}
+            style={{ height: `${100 / ratio}%` }}
+          >
+            <PhoneScreen showDynamicIsland={showDynamicIsland}>
+              {children}
+            </PhoneScreen>
+          </div>
+        </div>
+
+        {/* Side buttons — outside clip layer, full phone height */}
+        <div
+          className="pointer-events-none absolute top-0 left-[2px] z-10 w-[256px] shrink-0"
+          style={{ height: `${100 / ratio}%` }}
+        >
+          <PhoneSideButtons frame={frame} />
+        </div>
+      </div>
+    );
+  },
+);
+
+PhoneMockupCard.displayName = "PhoneMockupCard";