motion-ui-skill 2.0.0

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

@@ -0,0 +1,52 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface DarkAuroraBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const DarkAuroraBackground = forwardRef<
+  HTMLDivElement,
+  DarkAuroraBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="dark-aurora-background"
+      className={cn("relative isolate overflow-hidden bg-[#0A0C0F]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(180deg,#12151A_0%,#0A0C0F_55%,#06080A_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-6 -z-10 blur-xl"
+      >
+        <div className="absolute inset-0 bg-[#0A0C0F]" />
+
+        <div className="absolute -top-[18%] -left-[12%] h-[68%] w-[68%] rounded-full bg-[#2DD4BF] opacity-22 blur-3xl" />
+
+        <div className="absolute top-[8%] -right-[10%] h-[62%] w-[62%] rounded-full bg-[#22D3EE] opacity-18 blur-3xl" />
+
+        <div className="absolute bottom-[-28%] left-[18%] h-[70%] w-[70%] rounded-full bg-[#34D399] opacity-16 blur-3xl" />
+
+        <div className="absolute right-[8%] bottom-[-16%] h-[56%] w-[56%] rounded-full bg-[#38BDF8] opacity-14 blur-3xl" />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#FFFFFF_1px,transparent_1px)] [background-size:4px_4px] opacity-[0.04]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+DarkAuroraBackground.displayName = "DarkAuroraBackground";
+
+export { DarkAuroraBackground };

package/components/background-gradient/dark-carbon-spotlight-background.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface DarkCarbonSpotlightBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const DarkCarbonSpotlightBackground = forwardRef<
+  HTMLDivElement,
+  DarkCarbonSpotlightBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="dark-carbon-spotlight-background"
+      className={cn("relative isolate overflow-hidden bg-[#0C0C0C]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_12%,#1C1C1C_0%,#121212_36%,#0C0C0C_68%,#050505_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.14)_0%,transparent_46%)] opacity-50"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,transparent_42%,rgba(0,0,0,0.55)_100%)]"
+      />
+
+      <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.03]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+DarkCarbonSpotlightBackground.displayName = "DarkCarbonSpotlightBackground";
+
+export { DarkCarbonSpotlightBackground };

package/components/background-gradient/dark-ember-background.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface DarkEmberBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const DarkEmberBackground = forwardRef<
+  HTMLDivElement,
+  DarkEmberBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="dark-ember-background"
+      className={cn("relative isolate overflow-hidden bg-[#100C0A]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_120%,#1A1210_0%,#100C0A_48%,#080605_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-8 -z-10 blur-2xl"
+      >
+        <div className="absolute bottom-[6%] -left-[8%] h-[64%] w-[64%] rounded-full bg-[#F59E0B] opacity-20 blur-3xl" />
+        <div className="absolute bottom-[12%] left-[32%] h-[52%] w-[52%] rounded-full bg-[#FB923C] opacity-16 blur-3xl" />
+        <div className="absolute top-[18%] -right-[6%] h-[58%] w-[58%] rounded-full bg-[#F43F5E] opacity-14 blur-3xl" />
+        <div className="absolute top-[4%] left-[14%] h-[44%] w-[44%] rounded-full bg-[#FBBF24] opacity-12 blur-3xl" />
+      </div>
+
+      <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.8)_1px,transparent_1px)] [background-size:5px_5px] opacity-[0.035]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+DarkEmberBackground.displayName = "DarkEmberBackground";
+
+export { DarkEmberBackground };

package/components/background-gradient/dark-ink-field-background.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface DarkInkFieldBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const DarkInkFieldBackground = forwardRef<
+  HTMLDivElement,
+  DarkInkFieldBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="dark-ink-field-background"
+      className={cn("relative isolate overflow-hidden bg-[#0B0B0B]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_0%,#141414_0%,#0B0B0B_52%,#050505_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-4 -z-10 blur-2xl"
+      >
+        <div className="absolute top-[10%] left-[10%] h-[46%] w-[52%] rounded-[42%_58%_64%_36%] bg-[#525252] opacity-16" />
+        <div className="absolute top-[30%] right-[8%] h-[40%] w-[48%] rounded-[58%_42%_38%_62%] bg-[#404040] opacity-12" />
+        <div className="absolute bottom-[6%] left-[28%] h-[44%] w-[50%] rounded-[36%_64%_58%_42%] bg-[#737373] opacity-10" />
+      </div>
+
+      <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.6)_1px,transparent_1px)] [background-size:5px_5px] opacity-[0.03]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+DarkInkFieldBackground.displayName = "DarkInkFieldBackground";
+
+export { DarkInkFieldBackground };

package/components/background-gradient/dark-midnight-mesh-background.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface DarkMidnightMeshBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const DarkMidnightMeshBackground = forwardRef<
+  HTMLDivElement,
+  DarkMidnightMeshBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="dark-midnight-mesh-background"
+      className={cn("relative isolate overflow-hidden bg-[#0A0D10]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(145deg,#101418_0%,#0A0D10_52%,#06080A_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:linear-gradient(to_right,rgba(148,163,184,0.10)_1px,transparent_1px),linear-gradient(to_bottom,rgba(148,163,184,0.10)_1px,transparent_1px)] [background-size:28px_28px] opacity-[0.14]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:linear-gradient(to_right,rgba(148,163,184,0.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(148,163,184,0.08)_1px,transparent_1px)] [background-size:7px_7px] opacity-[0.06]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-8 -z-10 blur-3xl"
+      >
+        <div className="absolute -top-[16%] -left-[10%] h-[54%] w-[54%] rounded-full bg-[#2DD4BF] opacity-16" />
+        <div className="absolute top-[8%] -right-[12%] h-[48%] w-[48%] rounded-full bg-[#38BDF8] opacity-14" />
+        <div className="absolute -bottom-[18%] left-[20%] h-[50%] w-[50%] rounded-full bg-[#34D399] opacity-12" />
+      </div>
+
+      <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.75)_1px,transparent_1px)] [background-size:6px_6px] opacity-[0.04]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,transparent_54%,rgba(0,0,0,0.42)_100%)]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+DarkMidnightMeshBackground.displayName = "DarkMidnightMeshBackground";
+
+export { DarkMidnightMeshBackground };

package/components/background-gradient/dark-rose-noir-background.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface DarkRoseNoirBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const DarkRoseNoirBackground = forwardRef<
+  HTMLDivElement,
+  DarkRoseNoirBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="dark-rose-noir-background"
+      className={cn("relative isolate overflow-hidden bg-[#0E0A0B]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_30%_20%,#181014_0%,#0E0A0B_50%,#080608_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-6 -z-10 blur-3xl"
+      >
+        <div className="absolute top-[12%] -left-[6%] h-[58%] w-[58%] rounded-full bg-[#FB7185] opacity-14" />
+        <div className="absolute top-[-8%] right-[10%] h-[52%] w-[52%] rounded-full bg-[#F43F5E] opacity-12" />
+        <div className="absolute bottom-[-14%] left-[36%] h-[54%] w-[54%] rounded-full bg-[#FDA4AF] opacity-10" />
+        <div className="absolute right-[14%] bottom-[10%] h-[40%] w-[40%] rounded-full bg-[#BE123C] opacity-12" />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,transparent_58%,rgba(0,0,0,0.4)_100%)]"
+      />
+
+      <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.65)_1px,transparent_1px)] [background-size:4px_4px] opacity-[0.03]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+DarkRoseNoirBackground.displayName = "DarkRoseNoirBackground";
+
+export { DarkRoseNoirBackground };

package/components/background-gradient/dark-teal-depth-background.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface DarkTealDepthBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const DarkTealDepthBackground = forwardRef<
+  HTMLDivElement,
+  DarkTealDepthBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="dark-teal-depth-background"
+      className={cn("relative isolate overflow-hidden bg-[#061014]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(160deg,#0A1820_0%,#061014_45%,#030A0D_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-8 -z-10 blur-3xl"
+      >
+        <div className="absolute top-[4%] -left-[10%] h-[66%] w-[66%] rounded-full bg-[#0D9488] opacity-22" />
+        <div className="absolute top-[20%] -right-[12%] h-[58%] w-[58%] rounded-full bg-[#0891B2] opacity-18" />
+        <div className="absolute bottom-[-20%] left-[20%] h-[62%] w-[62%] rounded-full bg-[#14B8A6] opacity-14" />
+        <div className="absolute right-[6%] bottom-[2%] h-[48%] w-[48%] rounded-full bg-[#22D3EE] opacity-12" />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_80%_20%,rgba(45,212,191,0.08)_0%,transparent_42%)]"
+      />
+
+      <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.035]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+DarkTealDepthBackground.displayName = "DarkTealDepthBackground";
+
+export { DarkTealDepthBackground };

package/components/background-gradient/frost-mesh-background.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface FrostMeshBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const FrostMeshBackground = forwardRef<
+  HTMLDivElement,
+  FrostMeshBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="frost-mesh-background"
+      className={cn("relative isolate overflow-hidden bg-[#FAFCFD]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(135deg,#FAFCFD_0%,#F2F8FA_50%,#EAF4F6_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:linear-gradient(to_right,rgba(148,163,184,0.22)_1px,transparent_1px),linear-gradient(to_bottom,rgba(148,163,184,0.22)_1px,transparent_1px)] [background-size:20px_20px] opacity-50"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:linear-gradient(to_right,rgba(148,163,184,0.16)_1px,transparent_1px),linear-gradient(to_bottom,rgba(148,163,184,0.16)_1px,transparent_1px)] [background-size:4px_4px] opacity-30"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-8 -z-10 blur-2xl"
+      >
+        <div className="absolute -top-[18%] -left-[12%] h-[52%] w-[52%] rounded-full bg-[#A5F3FC] opacity-35" />
+        <div className="absolute top-[10%] -right-[14%] h-[48%] w-[48%] rounded-full bg-[#6EE7B7] opacity-28" />
+        <div className="absolute -bottom-[20%] left-[24%] h-[46%] w-[46%] rounded-full bg-[#99F6E4] opacity-22" />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#0F172A_1px,transparent_1px)] [background-size:6px_6px] opacity-[0.03]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+FrostMeshBackground.displayName = "FrostMeshBackground";
+
+export { FrostMeshBackground };

package/components/background-gradient/halftone-pop-background.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface HalftonePopBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const HalftonePopBackground = forwardRef<
+  HTMLDivElement,
+  HalftonePopBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="halftone-pop-background"
+      className={cn("relative isolate overflow-hidden bg-[#FFF9F2]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(135deg,#FFF9F2_0%,#FFF4E8_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -top-[12%] -right-[10%] -z-10 h-[72%] w-[72%] [background-image:radial-gradient(circle,#FB7185_1.2px,transparent_1.2px)] [background-size:7px_7px] opacity-35"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -bottom-[14%] -left-[8%] -z-10 h-[68%] w-[68%] [background-image:radial-gradient(circle,#2DD4BF_1.2px,transparent_1.2px)] [background-size:9px_9px] opacity-30"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute top-[32%] left-[38%] -z-10 h-[48%] w-[48%] [background-image:radial-gradient(circle,#F59E0B_1px,transparent_1px)] [background-size:5px_5px] opacity-22"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,transparent_62%,rgba(255,249,242,0.85)_100%)]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+HalftonePopBackground.displayName = "HalftonePopBackground";
+
+export { HalftonePopBackground };

package/components/background-gradient/honey-ember-background.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface HoneyEmberBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const HoneyEmberBackground = forwardRef<
+  HTMLDivElement,
+  HoneyEmberBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="honey-ember-background"
+      className={cn("relative isolate overflow-hidden bg-[#FFFDF7]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-6 -z-10 blur-xl"
+      >
+        <div className="absolute inset-0 bg-[#FFFDF7]" />
+
+        <div className="absolute -top-[14%] -left-[6%] h-[70%] w-[70%] rounded-full bg-[#FBBF24] opacity-78 blur-3xl" />
+
+        <div className="absolute top-[8%] right-[-8%] h-[62%] w-[62%] rounded-full bg-[#F59E0B] opacity-70 blur-3xl" />
+
+        <div className="absolute bottom-[-22%] left-[12%] h-[66%] w-[66%] rounded-full bg-[#FB923C] opacity-58 blur-3xl" />
+
+        <div className="absolute right-[20%] bottom-[-10%] h-[56%] w-[56%] rounded-full bg-[#FECACA] opacity-68 blur-3xl" />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#78350F_1px,transparent_1px)] [background-size:4px_4px] opacity-[0.034]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+HoneyEmberBackground.displayName = "HoneyEmberBackground";
+
+export { HoneyEmberBackground };

package/components/background-gradient/ink-wash-background.tsx

@@ -0,0 +1,49 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface InkWashBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const InkWashBackground = forwardRef<HTMLDivElement, InkWashBackgroundProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="ink-wash-background"
+        className={cn(
+          "relative isolate overflow-hidden bg-[#FAFAF8]",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_0%,#FFFFFF_0%,#FAFAF8_55%,#F5F5F2_100%)]"
+        />
+
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute -inset-4 -z-10 blur-2xl"
+        >
+          <div className="absolute top-[6%] left-[8%] h-[48%] w-[56%] rounded-[42%_58%_64%_36%] bg-[#A8A29E] opacity-18" />
+          <div className="absolute top-[28%] right-[6%] h-[42%] w-[50%] rounded-[58%_42%_38%_62%] bg-[#78716C] opacity-14" />
+          <div className="absolute bottom-[4%] left-[24%] h-[46%] w-[54%] rounded-[36%_64%_58%_42%] bg-[#57534E] opacity-12" />
+          <div className="absolute right-[22%] bottom-[18%] h-[32%] w-[38%] rounded-[64%_36%_42%_58%] bg-[#A8A29E] opacity-16" />
+        </div>
+
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#292524_1px,transparent_1px)] [background-size:5px_5px] opacity-[0.025]"
+        />
+
+        {children}
+      </div>
+    );
+  },
+);
+
+InkWashBackground.displayName = "InkWashBackground";
+
+export { InkWashBackground };

package/components/background-gradient/linen-weave-background.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface LinenWeaveBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const LinenWeaveBackground = forwardRef<
+  HTMLDivElement,
+  LinenWeaveBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="linen-weave-background"
+      className={cn("relative isolate overflow-hidden bg-[#F7F3ED]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(180deg,#FAF6F0_0%,#F3EDE4_48%,#EFE8DE_100%)]"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:repeating-linear-gradient(45deg,rgba(120,98,72,0.08)_0px,rgba(120,98,72,0.08)_1px,transparent_1px,transparent_6px),repeating-linear-gradient(-45deg,rgba(120,98,72,0.06)_0px,rgba(120,98,72,0.06)_1px,transparent_1px,transparent_6px)] opacity-60"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:linear-gradient(to_right,rgba(255,255,255,0.45)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.35)_1px,transparent_1px)] [background-size:24px_24px] opacity-40"
+      />
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,transparent_58%,rgba(120,98,72,0.08)_100%)]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+LinenWeaveBackground.displayName = "LinenWeaveBackground";
+
+export { LinenWeaveBackground };

package/components/background-gradient/mint-lagoon-background.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface MintLagoonBackgroundProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+const MintLagoonBackground = forwardRef<
+  HTMLDivElement,
+  MintLagoonBackgroundProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-slot="mint-lagoon-background"
+      className={cn("relative isolate overflow-hidden bg-[#F8FFFE]", className)}
+      {...props}
+    >
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -inset-6 -z-10 blur-xl"
+      >
+        <div className="absolute inset-0 bg-[#F8FFFE]" />
+
+        <div className="absolute top-[-18%] left-[22%] h-[72%] w-[72%] rounded-full bg-[#6EE7B7] opacity-75 blur-3xl" />
+
+        <div className="absolute top-[12%] -right-[12%] h-[60%] w-[60%] rounded-full bg-[#2DD4BF] opacity-68 blur-3xl" />
+
+        <div className="absolute bottom-[-28%] left-[-8%] h-[68%] w-[68%] rounded-full bg-[#22D3EE] opacity-62 blur-3xl" />
+
+        <div className="absolute right-[18%] bottom-[4%] h-[54%] w-[54%] rounded-full bg-[#A7F3D0] opacity-72 blur-3xl" />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(circle_at_center,#0F766E_1px,transparent_1px)] [background-size:5px_5px] opacity-[0.028]"
+      />
+
+      {children}
+    </div>
+  );
+});
+
+MintLagoonBackground.displayName = "MintLagoonBackground";
+
+export { MintLagoonBackground };