motion-ui-skill 2.0.0

package/components/frames/transform-plus-frame.tsx

@@ -0,0 +1,308 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+const DEFAULT_LINE_COLOR = "#171717";
+const DEFAULT_HANDLE_COLOR = "#171717";
+const PLUS_STROKE = 2;
+
+function resolveFrameColors({
+  color,
+  lineColor,
+  handleColor,
+}: Readonly<{
+  color?: string;
+  lineColor?: string;
+  handleColor?: string;
+}>) {
+  const shared = color ?? DEFAULT_LINE_COLOR;
+
+  return {
+    line: lineColor ?? shared,
+    handle: handleColor ?? color ?? DEFAULT_HANDLE_COLOR,
+  };
+}
+
+const MEDIA_SLOT =
+  "[&_img]:block [&_img]:size-full [&_img]:object-cover [&_video]:block [&_video]:size-full [&_video]:object-cover [&_iframe]:block [&_iframe]:size-full [&_iframe]:border-0";
+
+const FRAME_INSET = "top-2 right-2 bottom-2 left-2";
+const FRAME_EDGE_X = "inset-x-0";
+const FRAME_EDGE_Y = "inset-y-0";
+
+function toCssSize(value: string | number) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+function MediaSkeleton() {
+  return (
+    <div className="absolute inset-0 overflow-hidden bg-neutral-100">
+      <div className="absolute inset-0 bg-neutral-200/45 motion-safe:animate-pulse" />
+
+      <div className="absolute inset-0 flex items-center justify-center">
+        <svg
+          viewBox="0 0 48 48"
+          aria-hidden
+          className="size-14 text-neutral-300"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <rect x="4" y="8" width="40" height="32" rx="2" />
+          <circle cx="16" cy="18" r="3" fill="currentColor" stroke="none" />
+          <path
+            d="M8 34l10-9 7 6 6-5 9 8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function MediaIcon({
+  children,
+  label,
+}: Readonly<{ children: ReactNode; label: string }>) {
+  return (
+    <div className="flex flex-col items-center gap-1.5">
+      <div className="flex size-9 items-center justify-center rounded-md border border-neutral-200 bg-white text-neutral-500">
+        {children}
+      </div>
+      <span className="font-mono text-[9px] text-neutral-400">{label}</span>
+    </div>
+  );
+}
+
+function MediaPlaceholder() {
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-3 bg-neutral-50 p-4">
+      <div className="flex items-center gap-4">
+        <MediaIcon label="image">
+          <svg
+            viewBox="0 0 20 20"
+            aria-hidden
+            className="size-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <rect x="2.5" y="4" width="15" height="12" rx="1.5" />
+            <circle
+              cx="7"
+              cy="8.5"
+              r="1.25"
+              fill="currentColor"
+              stroke="none"
+            />
+            <path
+              d="M5.5 14l3.5-3 2.5 2 2-1.5 3 2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </MediaIcon>
+
+        <MediaIcon label="video">
+          <svg
+            viewBox="0 0 20 20"
+            aria-hidden
+            className="size-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <rect x="2.5" y="5" width="10" height="10" rx="1.5" />
+            <path d="M12.5 8.5l4.5-2.5v8l-4.5-2.5z" strokeLinejoin="round" />
+          </svg>
+        </MediaIcon>
+
+        <MediaIcon label="media">
+          <svg
+            viewBox="0 0 20 20"
+            aria-hidden
+            className="size-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <rect x="3" y="3" width="14" height="14" rx="2" />
+            <path d="M7 10h6M10 7v6" strokeLinecap="round" />
+          </svg>
+        </MediaIcon>
+      </div>
+
+      <p className="font-sans text-[11px] text-neutral-500">
+        Pass image, video, or media as children
+      </p>
+    </div>
+  );
+}
+
+type CornerPlusProps = Readonly<{
+  handleColor: string;
+  className?: string;
+}>;
+
+function CornerPlus({ className, handleColor }: CornerPlusProps) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute z-20 size-4 -translate-x-1/2 -translate-y-1/2",
+        className,
+      )}
+    >
+      <svg
+        viewBox="0 0 16 16"
+        className="size-full overflow-visible"
+        fill="none"
+        shapeRendering="crispEdges"
+      >
+        <path
+          d="M8 0v16M0 8h16"
+          stroke={handleColor}
+          strokeLinecap="butt"
+          strokeWidth={PLUS_STROKE}
+        />
+      </svg>
+    </span>
+  );
+}
+
+type FrameEdgeProps = Readonly<{
+  lineColor: string;
+  className?: string;
+}>;
+
+function FrameEdge({ className, lineColor }: FrameEdgeProps) {
+  return (
+    <span
+      aria-hidden
+      style={{ borderColor: lineColor }}
+      className={cn("pointer-events-none absolute z-10", className)}
+    />
+  );
+}
+
+export type TransformPlusFrameProps = Readonly<
+  {
+    children?: ReactNode;
+    width?: string | number;
+    height?: string | number;
+    color?: string;
+    lineColor?: string;
+    handleColor?: string;
+    mediaClassName?: string;
+    label?: string;
+    skeleton?: boolean;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const TransformPlusFrame = forwardRef<
+  HTMLDivElement,
+  TransformPlusFrameProps
+>(
+  (
+    {
+      className,
+      children,
+      width,
+      height,
+      color,
+      lineColor,
+      handleColor,
+      mediaClassName,
+      label,
+      skeleton = false,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const hasFixedHeight = height !== undefined;
+    const colors = resolveFrameColors({ color, lineColor, handleColor });
+
+    const frameStyle: CSSProperties = {
+      ...(width !== undefined ? { width: toCssSize(width) } : undefined),
+      ...(height !== undefined ? { height: toCssSize(height) } : undefined),
+      ...style,
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-slot="transform-plus-frame"
+        className={cn(
+          "font-sans",
+          width === undefined && "w-full max-w-xl",
+          className,
+        )}
+        style={frameStyle}
+        {...props}
+      >
+        <div className={cn("relative p-2", hasFixedHeight && "h-full")}>
+          <div
+            className={cn(
+              "relative z-0 min-h-0 overflow-hidden bg-neutral-50",
+              hasFixedHeight ? "h-full" : (mediaClassName ?? "aspect-video"),
+            )}
+          >
+            <div className={cn("absolute inset-0", MEDIA_SLOT)}>
+              {skeleton ? (
+                <MediaSkeleton />
+              ) : (
+                (children ?? <MediaPlaceholder />)
+              )}
+            </div>
+          </div>
+
+          <FrameEdge
+            lineColor={colors.line}
+            className={cn(FRAME_INSET, FRAME_EDGE_X, "border-t")}
+          />
+          <FrameEdge
+            lineColor={colors.line}
+            className={cn(FRAME_INSET, FRAME_EDGE_Y, "border-r")}
+          />
+          <FrameEdge
+            lineColor={colors.line}
+            className={cn(FRAME_INSET, FRAME_EDGE_X, "border-b")}
+          />
+          <FrameEdge
+            lineColor={colors.line}
+            className={cn(FRAME_INSET, FRAME_EDGE_Y, "border-l")}
+          />
+
+          <CornerPlus handleColor={colors.handle} className="top-2 left-2" />
+          <CornerPlus
+            handleColor={colors.handle}
+            className="top-2 right-2 translate-x-1/2"
+          />
+          <CornerPlus
+            handleColor={colors.handle}
+            className="bottom-2 left-2 translate-y-1/2"
+          />
+          <CornerPlus
+            handleColor={colors.handle}
+            className="right-2 bottom-2 translate-x-1/2 translate-y-1/2"
+          />
+        </div>
+
+        {label ? (
+          <p className="mt-2 text-center font-mono text-[10px] tracking-[0.16em] text-neutral-400 uppercase">
+            {label}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+TransformPlusFrame.displayName = "TransformPlusFrame";

package/components/gallery/film-strip-card.tsx

@@ -0,0 +1,103 @@
+import Image from "next/image";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type FilmStripCardProps = Readonly<
+  {
+    frames?: string[];
+    label?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const defaultFrames = [
+  "/wallpaper-2.png",
+  "/background1.webp",
+  "/wallpaper-11.png",
+  "/background5.webp",
+];
+
+const LEFT_SPROCKET_HOLES = [
+  "left-sprocket-1",
+  "left-sprocket-2",
+  "left-sprocket-3",
+  "left-sprocket-4",
+  "left-sprocket-5",
+  "left-sprocket-6",
+  "left-sprocket-7",
+  "left-sprocket-8",
+] as const;
+
+const RIGHT_SPROCKET_HOLES = [
+  "right-sprocket-1",
+  "right-sprocket-2",
+  "right-sprocket-3",
+  "right-sprocket-4",
+  "right-sprocket-5",
+  "right-sprocket-6",
+  "right-sprocket-7",
+  "right-sprocket-8",
+] as const;
+
+// Production-ready Film Strip component — styled with Tailwind CSS.
+export const FilmStripCard = forwardRef<HTMLDivElement, FilmStripCardProps>(
+  (
+    {
+      className,
+      frames = defaultFrames,
+      label = "Roll 24 · Kodak Portra",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="film-strip-card"
+      className={cn("w-sm font-mono", className)}
+      {...props}
+    >
+      <p className="mb-2 text-center text-[9px] tracking-widest text-neutral-400 uppercase">
+        {label}
+      </p>
+      <div className="relative rounded-sm bg-neutral-900 px-2 py-3 shadow-lg">
+        <div className="absolute top-0 bottom-0 left-0 flex w-3 flex-col justify-evenly">
+          {LEFT_SPROCKET_HOLES.map((holeId) => (
+            <div
+              key={holeId}
+              className="mx-auto h-2 w-1.5 rounded-sm bg-neutral-700"
+            />
+          ))}
+        </div>
+        <div className="absolute top-0 right-0 bottom-0 flex w-3 flex-col justify-evenly">
+          {RIGHT_SPROCKET_HOLES.map((holeId) => (
+            <div
+              key={holeId}
+              className="mx-auto h-2 w-1.5 rounded-sm bg-neutral-700"
+            />
+          ))}
+        </div>
+        <div className="mx-4 flex gap-1 overflow-hidden">
+          {frames.map((src, frameNumber) => (
+            <div
+              key={src}
+              className="relative h-20 w-16 shrink-0 overflow-hidden border-2 border-neutral-800 md:h-24 md:w-20"
+            >
+              <Image
+                src={src}
+                alt={`Frame ${frameNumber + 1}`}
+                fill
+                sizes="80px"
+                className="object-cover"
+              />
+              <span className="absolute bottom-0.5 left-0.5 bg-black/60 px-1 text-[7px] text-white">
+                {String(frameNumber + 1).padStart(2, "0")}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+FilmStripCard.displayName = "FilmStripCard";

package/components/gallery/gallery-grid-card.tsx

@@ -0,0 +1,106 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { Sun } from "lucide-react";
+
+export type GalleryGridCardProps = Readonly<
+  {
+    title?: string;
+    subtitle?: string;
+    count?: string | number;
+    images?: string[];
+    overlayText?: string;
+    icon?: ReactNode;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Gallery Grid component — styled with Tailwind CSS.
+export const GalleryGridCard = forwardRef<HTMLDivElement, GalleryGridCardProps>(
+  (
+    {
+      className,
+      title = "Summer Collection",
+      subtitle = "Jun 2026",
+      count = "24 photos",
+      images = ["/background5.webp", "/background1.webp", "/wallpaper-11.png"],
+      overlayText = "+21",
+      icon,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="gallery-grid-card"
+        className={cn(
+          "w-72 overflow-hidden rounded-2xl border border-neutral-100 bg-white font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-between p-3 pb-2">
+          <div>
+            <h3 className="text-sm font-semibold text-neutral-900">{title}</h3>
+
+            <p className="text-[10px] text-neutral-400">
+              {count} · {subtitle}
+            </p>
+          </div>
+
+          {icon ?? <Sun className="text-neutral-500" size={16} />}
+        </div>
+
+        {/* Grid */}
+        <div className="grid grid-cols-3 gap-1 px-3 pb-3">
+          {/* Main large image */}
+          <div className="relative col-span-2 row-span-2 aspect-square overflow-hidden rounded-xl">
+            <Image
+              src={images[0]}
+              alt={title}
+              fill
+              sizes="288px"
+              className="object-cover transition-transform duration-500 hover:scale-105"
+            />
+          </div>
+
+          {/* Small image 1 */}
+          <div className="relative aspect-square overflow-hidden rounded-xl">
+            <Image
+              src={images[1]}
+              alt={title}
+              fill
+              sizes="96px"
+              className="object-cover"
+            />
+          </div>
+
+          {/* Small image 2 with overlay */}
+          <div className="relative aspect-square overflow-hidden rounded-xl">
+            <Image
+              src={images[2]}
+              alt={title}
+              fill
+              sizes="96px"
+              className="object-cover"
+            />
+
+            <div className="absolute inset-0 flex items-center justify-center bg-black/50">
+              <span className="text-xs font-semibold text-white">
+                {overlayText}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+GalleryGridCard.displayName = "GalleryGridCard";

package/components/gallery/gallery-wall-card.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+export type GalleryWallCardProps = Readonly<
+  {
+    imageSrc?: string;
+    imageAlt?: string;
+    artist?: string;
+    title?: string;
+    year?: string;
+    gallery?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+export const GalleryWallCard = forwardRef<HTMLDivElement, GalleryWallCardProps>(
+  (
+    {
+      className,
+      imageSrc = "/background5.webp",
+      imageAlt = "Artwork preview",
+      artist = "Elena Marchetti",
+      title = "Winter Light Study",
+      year = "2019",
+      gallery = "Studio 14 Gallery",
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="gallery-wall-card"
+        className={cn("w-72 font-sans", className)}
+        {...props}
+      >
+        <div className="rounded-sm border border-neutral-200 bg-white p-3 shadow-[0_16px_34px_rgba(15,23,42,0.12)]">
+          <div className="border border-neutral-100 bg-[#f7f4ef] p-3">
+            <div className="relative aspect-4/5 overflow-hidden bg-neutral-200">
+              <Image
+                src={imageSrc}
+                alt={imageAlt}
+                fill
+                sizes="288px"
+                className="object-cover"
+              />
+            </div>
+          </div>
+
+          <div className="mt-4 px-1">
+            <p className="text-[10px] tracking-[0.2em] text-neutral-400 uppercase">
+              {gallery}
+            </p>
+            <p className="mt-1 font-serif text-sm text-neutral-800 italic">
+              {title}
+            </p>
+            <div className="mt-2 flex items-center justify-between gap-2 text-xs text-neutral-500">
+              <span>{artist}</span>
+              <span>{year}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+GalleryWallCard.displayName = "GalleryWallCard";