motion-ui-skill 2.0.0

package/components/audio/music-player-card.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { Play, Pause, SkipForward, SkipBack } from "lucide-react";
+
+export type MusicPlayerCardProps = Readonly<
+  {
+    coverImage?: string;
+    title?: string;
+    artist?: string;
+    album?: string;
+    currentTime?: string;
+    duration?: string;
+    progress?: number;
+    defaultPlaying?: boolean;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Music Player component — styled with Tailwind CSS.
+export const MusicPlayerCard = forwardRef<HTMLDivElement, MusicPlayerCardProps>(
+  (
+    {
+      className,
+      coverImage = "/background5.webp",
+      title = "Midnight Dreams",
+      artist = "The Weekend",
+      album = "After Hours",
+      currentTime = "1:24",
+      duration = "3:42",
+      progress = 42,
+      defaultPlaying = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const [playing, setPlaying] = useState(defaultPlaying);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="music-player-card"
+        className={cn(
+          "w-72 overflow-hidden rounded-2xl bg-neutral-950 font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        {/* Cover */}
+        <div data-slot="music-player-card-cover" className="relative h-36">
+          <Image
+            src={coverImage}
+            alt={title}
+            fill
+            sizes="288px"
+            className="object-cover opacity-80"
+          />
+
+          <div
+            data-slot="music-player-card-overlay"
+            className="absolute inset-0 bg-linear-to-t from-neutral-950 via-neutral-950/40 to-transparent"
+          />
+        </div>
+
+        <div
+          data-slot="music-player-card-content"
+          className="relative -mt-6 p-4"
+        >
+          {/* Track Info */}
+          <div data-slot="music-player-card-info">
+            <h3 className="text-sm font-semibold text-white">{title}</h3>
+
+            <p className="text-[11px] text-neutral-500">
+              {artist} · {album}
+            </p>
+          </div>
+
+          {/* Progress */}
+          <div data-slot="music-player-card-progress" className="mt-4">
+            <div className="h-1 overflow-hidden rounded-full bg-neutral-800">
+              <div
+                className="relative h-full rounded-full bg-emerald-500"
+                style={{
+                  width: `${Math.min(Math.max(progress, 0), 100)}%`,
+                }}
+              >
+                <div className="absolute top-1/2 right-0 h-2.5 w-2.5 -translate-y-1/2 rounded-full bg-white shadow" />
+              </div>
+            </div>
+
+            <div className="mt-1 flex justify-between">
+              <span className="font-mono text-[9px] text-neutral-600">
+                {currentTime}
+              </span>
+
+              <span className="font-mono text-[9px] text-neutral-600">
+                {duration}
+              </span>
+            </div>
+          </div>
+
+          {/* Controls */}
+          <div
+            data-slot="music-player-card-controls"
+            className="mt-3 flex items-center justify-center gap-5"
+          >
+            <button
+              type="button"
+              aria-label="Previous track"
+              className="cursor-pointer text-lg text-neutral-500 transition-colors hover:text-white"
+            >
+              <SkipBack size={14} />
+            </button>
+
+            <button
+              type="button"
+              aria-label={playing ? "Pause" : "Play"}
+              onClick={() => setPlaying((prev) => !prev)}
+              className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-white transition-transform hover:scale-105"
+            >
+              {playing ? (
+                <Pause size={14} fill="black" />
+              ) : (
+                <Play size={14} fill="black" />
+              )}
+            </button>
+
+            <button
+              type="button"
+              aria-label="Next track"
+              className="cursor-pointer text-lg text-neutral-500 transition-colors hover:text-white"
+            >
+              <SkipForward size={14} />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+MusicPlayerCard.displayName = "MusicPlayerCard";

package/components/audio/music-playlist-card.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { Pause, Play } from "lucide-react";
+
+export type PlaylistTrack = {
+  title: string;
+  artist: string;
+  duration: string;
+};
+
+export type MusicPlaylistCardProps = Readonly<
+  {
+    coverImage?: string;
+    playlistType?: string;
+    title?: string;
+    songCount?: string;
+    totalDuration?: string;
+    tracks?: PlaylistTrack[];
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Music Playlist component — styled with Tailwind CSS.
+export const MusicPlaylistCard = forwardRef<
+  HTMLDivElement,
+  MusicPlaylistCardProps
+>(
+  (
+    {
+      className,
+      coverImage = "/background1.webp",
+      playlistType = "Playlist",
+      title = "Chill Vibes",
+      songCount = "24 songs",
+      totalDuration = "1h 32m",
+      tracks = [
+        {
+          title: "Blinding Lights",
+          artist: "The Weekend",
+          duration: "3:20",
+        },
+        {
+          title: "Save Your Tears",
+          artist: "The Weekend",
+          duration: "3:35",
+        },
+        {
+          title: "Starboy",
+          artist: "The Weekend",
+          duration: "3:50",
+        },
+      ],
+      ...props
+    },
+    ref,
+  ) => {
+    const [playingIndex, setPlayingIndex] = useState<number | null>(null);
+
+    const toggleTrack = (index: number) => {
+      setPlayingIndex((prev) => (prev === index ? null : index));
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-slot="music-playlist-card"
+        className={cn(
+          "w-72 overflow-hidden rounded-2xl border border-neutral-100 bg-white font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div data-slot="music-playlist-card-header" className="flex gap-3 p-4">
+          <div
+            data-slot="music-playlist-card-cover"
+            className="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl shadow-sm"
+          >
+            <Image
+              src={coverImage}
+              alt={title}
+              fill
+              sizes="64px"
+              className="object-cover"
+            />
+          </div>
+
+          <div data-slot="music-playlist-card-info">
+            <p className="font-mono text-[10px] tracking-wider text-neutral-400 uppercase">
+              {playlistType}
+            </p>
+
+            <h3 className="mt-0.5 text-sm font-semibold text-neutral-900">
+              {title}
+            </h3>
+
+            <p className="mt-0.5 text-[11px] text-neutral-500">
+              {songCount} · {totalDuration}
+            </p>
+          </div>
+        </div>
+
+        <div
+          data-slot="music-playlist-card-tracks"
+          className="divide-y divide-neutral-50"
+        >
+          {tracks.map((track, index) => {
+            const isPlaying = playingIndex === index;
+
+            return (
+              <button
+                key={`${track.title}-${track.artist}`}
+                type="button"
+                onClick={() => toggleTrack(index)}
+                data-slot="music-playlist-card-track"
+                className={cn(
+                  "group flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-neutral-50",
+                  isPlaying && "bg-emerald-50/80",
+                )}
+              >
+                <span
+                  className={cn(
+                    "w-4 font-mono text-[10px] text-neutral-400",
+                    isPlaying ? "hidden" : "group-hover:hidden",
+                  )}
+                >
+                  {index + 1}
+                </span>
+
+                <span
+                  className={cn(
+                    "w-4 text-[10px] text-emerald-600",
+                    isPlaying ? "block" : "hidden group-hover:block",
+                  )}
+                >
+                  {isPlaying ? (
+                    <Pause size={12} fill="green" />
+                  ) : (
+                    <Play size={12} fill="green" />
+                  )}
+                </span>
+
+                <div className="min-w-0 flex-1">
+                  <p
+                    className={cn(
+                      "truncate text-xs font-medium",
+                      isPlaying ? "text-emerald-700" : "text-neutral-800",
+                    )}
+                  >
+                    {track.title}
+                  </p>
+
+                  <p className="text-[10px] text-neutral-400">{track.artist}</p>
+                </div>
+
+                <span className="font-mono text-[10px] text-neutral-400">
+                  {track.duration}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+
+MusicPlaylistCard.displayName = "MusicPlaylistCard";

package/components/audio/now-playing-bar.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef, useState } from "react";
+
+import Image from "next/image";
+
+import { cn } from "@/lib/cn";
+
+import { Play, Pause, SkipForward, SkipBack } from "lucide-react";
+
+export type NowPlayingBarProps = Readonly<
+  {
+    title?: string;
+    artist?: string;
+    progress?: number;
+    artwork?: string;
+    defaultPlaying?: boolean;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Now Playing component — styled with Tailwind CSS.
+export const NowPlayingBar = forwardRef<HTMLDivElement, NowPlayingBarProps>(
+  (
+    {
+      className,
+      title = "Midnight Dreams",
+      artist = "The Weekend",
+      progress = 60,
+      artwork = "/background1.webp",
+      defaultPlaying = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const [playing, setPlaying] = useState(defaultPlaying);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="now-playing-bar"
+        className={cn(
+          "flex w-80 items-center gap-3 rounded-2xl border border-neutral-800 bg-neutral-950 px-3 py-3 font-sans shadow-lg",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-slot="now-playing-bar-artwork"
+          className="relative h-10 w-10 shrink-0 overflow-hidden rounded-lg"
+        >
+          <Image
+            src={artwork}
+            alt={title}
+            fill
+            sizes="40px"
+            className="object-cover"
+          />
+        </div>
+
+        <div data-slot="now-playing-bar-info" className="min-w-0 flex-1">
+          <p className="truncate text-xs font-medium text-white">{title}</p>
+
+          <p className="truncate text-[10px] text-neutral-500">{artist}</p>
+        </div>
+
+        <div
+          data-slot="now-playing-bar-controls"
+          className="flex items-center gap-2"
+        >
+          <button
+            type="button"
+            aria-label="Previous track"
+            className="cursor-pointer text-sm text-neutral-500 transition-colors hover:text-white"
+          >
+            <SkipBack size={14} />
+          </button>
+
+          <button
+            type="button"
+            aria-label={playing ? "Pause" : "Play"}
+            onClick={() => setPlaying(!playing)}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-white text-xs text-neutral-900 transition-transform hover:scale-105"
+          >
+            {playing ? (
+              <Pause size={14} fill="black" />
+            ) : (
+              <Play size={14} fill="black" />
+            )}
+          </button>
+
+          <button
+            type="button"
+            aria-label="Next track"
+            className="cursor-pointer text-sm text-neutral-500 transition-colors hover:text-white"
+          >
+            <SkipForward size={14} />
+          </button>
+        </div>
+
+        <div
+          data-slot="now-playing-bar-progress"
+          className="hidden h-1 w-16 overflow-hidden rounded-full bg-neutral-800 md:block"
+        >
+          <div
+            className="h-full rounded-full bg-emerald-500"
+            style={{
+              width: `${Math.min(Math.max(progress, 0), 100)}%`,
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+NowPlayingBar.displayName = "NowPlayingBar";

package/components/background-gradient/arc-bands-background.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface ArcBandsBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const ArcBandsBackground = forwardRef<HTMLDivElement, ArcBandsBackgroundProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="arc-bands-background"
+        className={cn(
+          "relative isolate overflow-hidden bg-[#FFFCF7]",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(180deg,#FFFCF7_0%,#FFF8F0_100%)]"
+        />
+
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute -bottom-[28%] left-1/2 -z-10 h-[92%] w-[150%] -translate-x-1/2 rounded-[100%] [background:radial-gradient(ellipse_120%_88%_at_50%_100%,rgba(56,189,248,0.52)_0%,rgba(45,212,191,0.44)_18%,rgba(245,158,11,0.38)_40%,rgba(244,63,94,0.30)_62%,rgba(255,252,247,0)_82%)]"
+        />
+
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute -bottom-[22%] left-1/2 -z-10 h-[78%] w-[128%] -translate-x-1/2 rounded-[100%] blur-2xl [background:radial-gradient(ellipse_110%_80%_at_50%_100%,rgba(56,189,248,0.28)_0%,rgba(45,212,191,0.24)_22%,rgba(251,191,36,0.20)_46%,rgba(251,113,133,0.16)_68%,transparent_86%)]"
+        />
+
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute -bottom-[18%] left-1/2 -z-10 h-[64%] w-[108%] -translate-x-1/2 rounded-[100%] blur-3xl [background:radial-gradient(ellipse_100%_72%_at_50%_100%,rgba(255,255,255,0.55)_0%,rgba(255,252,247,0.18)_38%,transparent_72%)]"
+        />
+
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#000_1px,transparent_1px)] [background-size:4px_4px] opacity-[0.03]"
+        />
+
+        {children}
+      </div>
+    );
+  },
+);
+
+ArcBandsBackground.displayName = "ArcBandsBackground";
+
+export { ArcBandsBackground };

package/components/background-gradient/aurora-background.tsx

@@ -0,0 +1,49 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface AuroraBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const AuroraBackground = forwardRef<HTMLDivElement, AuroraBackgroundProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="aurora-background"
+        className={cn(
+          "relative isolate overflow-hidden bg-[#FFFEFB]",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute -inset-6 -z-10 blur-xl"
+        >
+          <div className="absolute inset-0 bg-[#FFFEFB]" />
+
+          <div className="absolute -top-[20%] -left-[10%] h-[70%] w-[70%] rounded-full bg-[#E9FF95] opacity-80 blur-3xl" />
+
+          <div className="absolute top-[10%] -right-[10%] h-[65%] w-[65%] rounded-full bg-[#59E39C] opacity-70 blur-3xl" />
+
+          <div className="absolute bottom-[-30%] left-[20%] h-[70%] w-[70%] rounded-full bg-[#1EC9D8] opacity-65 blur-3xl" />
+
+          <div className="absolute right-[10%] bottom-[-20%] h-[60%] w-[60%] rounded-full bg-[#2874F0] opacity-55 blur-3xl" />
+        </div>
+
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#000_1px,transparent_1px)] [background-size:4px_4px] opacity-[0.035]"
+        />
+
+        {children}
+      </div>
+    );
+  },
+);
+
+AuroraBackground.displayName = "AuroraBackground";
+
+export { AuroraBackground };

package/components/background-gradient/cherry-petal-background.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface CherryPetalBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const CherryPetalBackground = forwardRef<
+  HTMLDivElement,
+  CherryPetalBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="cherry-petal-background"
+      className={cn("relative isolate overflow-hidden bg-[#FFF7F8]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_0%,#FFE8EC_0%,#FFF7F8_48%,#FFF1F3_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10"
+      >
+        <div className="absolute top-[8%] left-[10%] h-10 w-14 rotate-[-24deg] rounded-[100%_100%_20%_100%] bg-[#FDA4AF] opacity-55 blur-[0.5px]" />
+        <div className="absolute top-[16%] right-[14%] h-8 w-11 rotate-[18deg] rounded-[100%_100%_20%_100%] bg-[#FB7185] opacity-45 blur-[0.5px]" />
+        <div className="absolute top-[34%] left-[28%] h-9 w-12 rotate-[32deg] rounded-[100%_100%_20%_100%] bg-[#FECDD3] opacity-60 blur-[0.5px]" />
+        <div className="absolute top-[28%] right-[30%] h-7 w-10 rotate-[-12deg] rounded-[100%_100%_20%_100%] bg-[#F43F5E] opacity-30 blur-[0.5px]" />
+        <div className="absolute bottom-[30%] left-[16%] h-8 w-11 rotate-[8deg] rounded-[100%_100%_20%_100%] bg-[#FDA4AF] opacity-40 blur-[0.5px]" />
+        <div className="absolute right-[10%] bottom-[22%] h-10 w-14 rotate-[-30deg] rounded-[100%_100%_20%_100%] bg-[#FB7185] opacity-50 blur-[0.5px]" />
+        <div className="absolute bottom-[12%] left-[48%] h-7 w-9 rotate-[22deg] rounded-[100%_100%_20%_100%] bg-[#FECDD3] opacity-55 blur-[0.5px]" />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#9F1239_1px,transparent_1px)] [background-size:6px_6px] opacity-[0.03]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+CherryPetalBackground.displayName = "CherryPetalBackground";
+
+export { CherryPetalBackground };

package/components/background-gradient/coral-glow-background.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface CoralGlowBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const CoralGlowBackground = forwardRef<
+  HTMLDivElement,
+  CoralGlowBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="coral-glow-background"
+      className={cn("relative isolate overflow-hidden bg-[#FFFBF9]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-6 -z-10 blur-xl"
+      >
+        <div className="absolute inset-0 bg-[#FFFBF9]" />
+
+        <div className="absolute top-[6%] -left-[8%] h-[68%] w-[62%] rounded-full bg-[#FDA4AF] opacity-75 blur-3xl" />
+
+        <div className="absolute top-[18%] right-[-6%] h-[58%] w-[58%] rounded-full bg-[#FDBA74] opacity-70 blur-3xl" />
+
+        <div className="absolute bottom-[-24%] left-[30%] h-[64%] w-[64%] rounded-full bg-[#FB7185] opacity-60 blur-3xl" />
+
+        <div className="absolute right-[14%] bottom-[8%] h-[52%] w-[52%] rounded-full bg-[#FDE68A] opacity-65 blur-3xl" />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#000_1px,transparent_1px)] [background-size:4px_4px] opacity-[0.03]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+CoralGlowBackground.displayName = "CoralGlowBackground";
+
+export { CoralGlowBackground };

package/components/background-gradient/dark-arc-bands-background.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface DarkArcBandsBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const DarkArcBandsBackground = forwardRef<
+  HTMLDivElement,
+  DarkArcBandsBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="dark-arc-bands-background"
+      className={cn("relative isolate overflow-hidden bg-[#0A0B0E]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(180deg,#101218_0%,#0A0B0E_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -bottom-[28%] left-1/2 -z-10 h-[92%] w-[150%] -translate-x-1/2 rounded-[100%] [background:radial-gradient(ellipse_120%_88%_at_50%_100%,rgba(56,189,248,0.34)_0%,rgba(45,212,191,0.28)_18%,rgba(245,158,11,0.22)_40%,rgba(244,63,94,0.18)_62%,rgba(10,11,14,0)_82%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -bottom-[22%] left-1/2 -z-10 h-[78%] w-[128%] -translate-x-1/2 rounded-[100%] blur-2xl [background:radial-gradient(ellipse_110%_80%_at_50%_100%,rgba(56,189,248,0.18)_0%,rgba(45,212,191,0.15)_22%,rgba(251,191,36,0.12)_46%,rgba(251,113,133,0.10)_68%,transparent_86%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -bottom-[18%] left-1/2 -z-10 h-[58%] w-[104%] -translate-x-1/2 rounded-[100%] blur-3xl [background:radial-gradient(ellipse_100%_70%_at_50%_100%,rgba(255,255,255,0.08)_0%,transparent_68%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,rgba(255,255,255,0.7)_1px,transparent_1px)] [background-size:4px_4px] opacity-[0.04]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+DarkArcBandsBackground.displayName = "DarkArcBandsBackground";
+
+export { DarkArcBandsBackground };