23 lines
1.5 KiB
JSON
23 lines
1.5 KiB
JSON
{
|
||
"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
|
||
}
|
||
}
|