{
  "name": "SparklesGradientBackground",
  "description": "Combined gradient background with sparkle particles, featuring two layered circular gradients and interactive particle effects.",
  "details": "Use for premium, magical hero backgrounds combining smooth gradients with sparkle effects. Features two gradient layers: outer radial gradient (65vw × 88vh) with color-mix opacity gradients (100% → 25% → 20%), and inner elliptical accent layer (33vw × 53vh) at 50% opacity using color-mix. Gradients are blurred (default 6vw) and positioned from top with -59vh offset. Includes integrated Sparkles component for interactive particle effects. Entire composition is masked with radial gradient ellipse from top center (100% × 100% at 50% 0%) fading from opaque to transparent (0% → 70%). All sizing uses viewport units (vw/vh) for responsive scaling. Perfect for hero sections, landing pages, or premium feature highlights needing both gradient depth and magical sparkle effects.",
  "constraints": {},
  "propsSchema": {
    "className?": "string",
    "gradientColor?": "string - Main gradient color. Default: 'var(--color-background-accent)'",
    "accentColor?": "string - Inner accent gradient color. Default: 'var(--color-background-accent)'",
    "blurAmount?": "string - Blur amount for gradients. Default: '6vw'"
  },
  "usageExample": "<SparklesGradientBackground />",
  "do": [
    "Use for general use"
  ],
  "dont": [],
  "editRules": {
    "textOnly": true,
    "layoutLocked": true,
    "styleLocked": true
  }
}