{
  "name": "aurora-backdrop",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "aurora-backdrop.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, keyframes, themeVars as theme, tokens } from \"@yugnex/core\";\r\n\r\nconst driftA = keyframes({\r\n  \"0%\": { transform: \"translate(-10%, -10%) scale(1)\" },\r\n  \"50%\": { transform: \"translate(10%, 5%) scale(1.15)\" },\r\n  \"100%\": { transform: \"translate(-10%, -10%) scale(1)\" },\r\n});\r\n\r\nconst driftB = keyframes({\r\n  \"0%\": { transform: \"translate(5%, 10%) scale(1)\" },\r\n  \"50%\": { transform: \"translate(-15%, -5%) scale(0.9)\" },\r\n  \"100%\": { transform: \"translate(5%, 10%) scale(1)\" },\r\n});\r\n\r\nconst driftC = keyframes({\r\n  \"0%\": { transform: \"translate(0%, 0%) scale(1)\" },\r\n  \"50%\": { transform: \"translate(8%, -12%) scale(1.1)\" },\r\n  \"100%\": { transform: \"translate(0%, 0%) scale(1)\" },\r\n});\r\n\r\nconst containerClass = css({\r\n  position: \"absolute\",\r\n  inset: 0,\r\n  overflow: \"hidden\",\r\n  pointerEvents: \"none\",\r\n  zIndex: 0,\r\n  maskImage: \"linear-gradient(to bottom, black, transparent)\",\r\n  WebkitMaskImage: \"linear-gradient(to bottom, black, transparent)\",\r\n});\r\n\r\nconst blobBaseClass = css({\r\n  position: \"absolute\",\r\n  borderRadius: \"9999px\",\r\n  filter: \"blur(80px)\",\r\n  opacity: 0.3,\r\n  willChange: \"transform\",\r\n  '[data-theme=\"dark\"] &': {\r\n    opacity: 0.5,\r\n  },\r\n});\r\n\r\nconst blobAClass = css({\r\n  top: \"-12%\",\r\n  left: \"2%\",\r\n  width: \"36rem\",\r\n  height: \"36rem\",\r\n  background: theme.color.primary,\r\n  animation: `${driftA} 22s ease-in-out infinite`,\r\n});\r\n\r\nconst blobBClass = css({\r\n  top: \"6%\",\r\n  right: \"-4%\",\r\n  width: \"30rem\",\r\n  height: \"30rem\",\r\n  background: tokens.colorPrimitives.warning[300],\r\n  animation: `${driftB} 26s ease-in-out infinite`,\r\n});\r\n\r\nconst blobCClass = css({\r\n  bottom: \"-18%\",\r\n  left: \"28%\",\r\n  width: \"32rem\",\r\n  height: \"32rem\",\r\n  background: tokens.colorPrimitives.success[300],\r\n  animation: `${driftC} 30s ease-in-out infinite`,\r\n});\r\n\r\nexport interface AuroraBackdropProps {\r\n  className?: string;\r\n}\r\n\r\n/** Slow-drifting gradient-mesh blobs meant to sit behind hero-style content (parent needs `position: relative`). */\r\nexport function AuroraBackdrop({ className }: AuroraBackdropProps) {\r\n  return (\r\n    <div className={className ? `${containerClass} ${className}` : containerClass} aria-hidden=\"true\">\r\n      <div className={`${blobBaseClass} ${blobAClass}`} />\r\n      <div className={`${blobBaseClass} ${blobBClass}`} />\r\n      <div className={`${blobBaseClass} ${blobCClass}`} />\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}