{
  "name": "RotatingGradientBackground",
  "description": "Two rotating circular gradients with optional sparkle ring effect creating a dynamic, animated background.",
  "details": "Use for modern, dynamic backgrounds with smooth rotating gradient animations. Features two circular gradients: a larger circle (default 28vw) rotating clockwise over 20s at 75% opacity, and a smaller circle (default 21vw) rotating counter-clockwise over 15s at 75% opacity. Both circles use linear gradients with configurable start and end colors, with transparent regions created using color-mix at 0% opacity. The entire composition is centered, blurred (default 10px), and has adjustable overall opacity (default 0.6). Optional sparkles create a ring/donut effect around the circles - visible in middle ring area, faded out in the center (where circles are) and at all edges using combined radial and linear gradient masks. All sizing uses viewport units (vw) for responsive scaling. Perfect for hero sections, landing pages, or any area needing mesmerizing gradient motion with optional magical sparkle accents.",
  "constraints": {},
  "propsSchema": {
    "className?": "string",
    "gradientColorStart?": "string - Gradient start color. Default: 'var(--color-background-accent)'",
    "gradientColorEnd?": "string - Gradient end color. Default: 'var(--color-background-accent)'",
    "bigCircleSize?": "string - Size of the larger circle. Default: '28vw'",
    "smallCircleSize?": "string - Size of the smaller circle. Default: '21vw'",
    "blurAmount?": "string - Blur amount for gradient circles. Default: '10px'",
    "opacity?": "number - Overall opacity of gradient effect. Default: 0.6",
    "showSparkles?": "boolean - Show sparkle ring effect. Default: true"
  },
  "usageExample": "<RotatingGradientBackground />",
  "do": [
    "Use for general use"
  ],
  "dont": [],
  "editRules": {
    "textOnly": true,
    "layoutLocked": true,
    "styleLocked": true
  }
}