{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morphing-shape-background",
  "type": "registry:block",
  "title": "Morphing Shape Background",
  "description": "Vivid blobs drift and melt behind your content. The kind of hero background that stops the scroll.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/morphing-shape-background.tsx",
      "type": "registry:component",
      "target": "@components/wensity/morphing-shape-background.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MorphingShapeBlob {\n  /** Tailwind/CSS color or gradient string for `background`. */\n  color: string;\n  /** 0..1 — relative size vs the container's smallest side. */\n  size?: number;\n  /** Initial top/left as % of the container. */\n  top?: number;\n  left?: number;\n  /** Blur radius in px. */\n  blur?: number;\n  /** Opacity 0..1. */\n  opacity?: number;\n  /** Seconds for one morph + rotate cycle. */\n  duration?: number;\n  /** Start delay in seconds (negative = pre-rolled). */\n  delay?: number;\n  /** Rotation direction. */\n  reverse?: boolean;\n}\n\nexport interface MorphingShapeBackgroundProps {\n  blobs?: MorphingShapeBlob[];\n  /** Add the inline grain overlay on top (kills color banding). */\n  grain?: boolean;\n  /** Optional foreground content rendered above the blobs + grain. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n// Premium aurora palette: brand chili anchored at one corner, with\n// cool/warm complementary tones for visual interest. Copies the Linear\n// \"subtle multi-hue\" aurora feeling rather than a monochrome red wash.\nconst DEFAULT_BLOBS: MorphingShapeBlob[] = [\n  {\n    color: \"linear-gradient(135deg, #cd1c18 0%, #ff8a73 100%)\",\n    size: 0.85,\n    top: 10,\n    left: 8,\n    blur: 80,\n    opacity: 0.45,\n    duration: 28,\n  },\n  {\n    // Deep sky — calm, cool counterweight to the brand chili.\n    color: \"linear-gradient(135deg, #0c4a6e 0%, #0ea5e9 100%)\",\n    size: 0.7,\n    top: 35,\n    left: 55,\n    blur: 90,\n    opacity: 0.42,\n    duration: 36,\n    reverse: true,\n    delay: -8,\n  },\n  {\n    // Warm amber — keeps the warm/cool tension premium products use.\n    color: \"linear-gradient(135deg, #f59e0b 0%, #fde68a 100%)\",\n    size: 0.55,\n    top: 60,\n    left: 20,\n    blur: 70,\n    opacity: 0.32,\n    duration: 32,\n    delay: -14,\n  },\n  {\n    // Emerald — prevents the composition from leaning red+orange-only.\n    color: \"linear-gradient(135deg, #10b981 0%, #34d399 100%)\",\n    size: 0.45,\n    top: 5,\n    left: 65,\n    blur: 60,\n    opacity: 0.38,\n    duration: 24,\n    reverse: true,\n    delay: -4,\n  },\n];\n\nconst GRAIN_DATA_URL =\n  \"url(\\\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\\\")\";\n\n/**\n * MorphingShapeBackground\n *\n * Slow, lava-lamp blobs built with CSS `border-radius` + `transform: rotate`\n * keyframes. No SVG path morphing → 120fps trivially. A grain overlay sits\n * above the blobs to kill color banding and add a tactile matte texture.\n *\n * GPU contract: animates only `transform` (rotate) + `border-radius`. Border\n * radius is not GPU-composited but it's almost free at this scale because\n * the blob is just a div with a single solid background.\n */\nexport function MorphingShapeBackground({\n  blobs = DEFAULT_BLOBS,\n  grain = true,\n  children,\n  className,\n}: MorphingShapeBackgroundProps) {\n  return (\n    <div\n      className={cn(\n        \"relative isolate w-full overflow-hidden\",\n        className\n      )}\n    >\n      {/* Blob layer */}\n      <div className=\"absolute inset-0 -z-10\">\n        {blobs.map((b, i) => (\n          <Blob key={i} index={i} blob={b} />\n        ))}\n      </div>\n\n      {/* Grain — eliminates banding, adds matte-glass feel */}\n      {grain && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 opacity-[0.07] mix-blend-overlay\"\n          style={{ backgroundImage: GRAIN_DATA_URL }}\n        />\n      )}\n\n      {/* Foreground */}\n      {children && <div className=\"relative z-10\">{children}</div>}\n    </div>\n  );\n}\n\nfunction Blob({ index, blob }: { index: number; blob: MorphingShapeBlob }) {\n  const size = blob.size ?? 0.7;\n  const top = blob.top ?? 20;\n  const left = blob.left ?? 20;\n  const duration = blob.duration ?? 30;\n  const delay = blob.delay ?? 0;\n  const opacity = blob.opacity ?? 0.5;\n  const blur = blob.blur ?? 80;\n  const reverse = !!blob.reverse;\n\n  // Each blob gets its own keyframe pair (radius morph + rotation) so they\n  // never sync up. Names are unique per index.\n  const morphName = `wensity-morph-${index}`;\n  const rotName = `wensity-morph-rot-${reverse ? \"ccw\" : \"cw\"}`;\n\n  return (\n    <>\n      <style>{`\n        @keyframes ${morphName} {\n          0%   { border-radius: 42% 58% 70% 30% / 38% 52% 48% 62%; }\n          25%  { border-radius: 58% 42% 36% 64% / 62% 30% 70% 38%; }\n          50%  { border-radius: 32% 68% 56% 44% / 50% 64% 36% 50%; }\n          75%  { border-radius: 64% 36% 50% 50% / 44% 56% 44% 56%; }\n          100% { border-radius: 42% 58% 70% 30% / 38% 52% 48% 62%; }\n        }\n      `}</style>\n      <div\n        aria-hidden\n        className=\"absolute motion-reduce:![animation:none]\"\n        style={{\n          top: `${top}%`,\n          left: `${left}%`,\n          width: `${size * 80}%`,\n          aspectRatio: \"1 / 1\",\n          background: blob.color,\n          opacity,\n          filter: `blur(${blur}px)`,\n          willChange: \"transform, border-radius\",\n          animation: `${morphName} ${duration}s ease-in-out ${delay}s infinite, ${rotName} ${\n            duration * 1.5\n          }s linear ${delay}s infinite`,\n          transformOrigin: \"50% 50%\",\n        }}\n      />\n    </>\n  );\n}\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/morphing-shape-background.tsx. For Pro components and updates, use pnpm dlx wensity@latest add morphing-shape-background.",
  "categories": [
    "Cinematic Interactions",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "morphing-shape-background",
      "access": "free",
      "category": "Cinematic Interactions",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/components/morphing-shape-background",
      "shadcnUrl": "https://ui.wensity.com/r/morphing-shape-background",
      "cliInstall": "pnpm dlx wensity@latest add morphing-shape-background"
    }
  }
}